aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/card_thumb.svelte3
-rw-r--r--src/components/left_panel.svelte161
-rw-r--r--src/components/main_panel.svelte113
-rw-r--r--src/components/right_panel.svelte20
4 files changed, 193 insertions, 104 deletions
diff --git a/src/components/card_thumb.svelte b/src/components/card_thumb.svelte
index e68a37e..8a4f458 100644
--- a/src/components/card_thumb.svelte
+++ b/src/components/card_thumb.svelte
@@ -1,5 +1,5 @@
<script lang="js">
- import { setLeftPanelCard } from '../left_panel';
+ import { setLeftPanelCard, showMobileInfo } from '../left_panel';
import { cardImageUrl } from '../utils';
let {id, area, idx, limitNum} = $props();
@@ -20,6 +20,7 @@
onmouseover={onhover}
onfocus={onhover}
ondragstart={onDragStart}
+ onclick={()=>{onhover();showMobileInfo();}}
height="100%"
src={cardImageUrl(id)}
alt="yugioh card {id}"
diff --git a/src/components/left_panel.svelte b/src/components/left_panel.svelte
index d69199e..b17f85c 100644
--- a/src/components/left_panel.svelte
+++ b/src/components/left_panel.svelte
@@ -3,6 +3,8 @@
import {
leftPanelCardId,
leftPanelCardDesc,
+ isMobileInfoVisible,
+ closeMobileInfo,
} from '../left_panel';
import { cardImageUrl } from '../utils';
@@ -29,52 +31,127 @@
</div>
</div>
-<style>
-
-.left-panel {
- width: 25%;
- padding: 2vh 20px;
- background-color: #f5f5f5;
-}
-
-.card-image-large {
- height: 40vh;
- text-align: center;
- background-color: #ddd;
- margin-bottom: 20px;
- border-radius: 8px;
-}
-
-.card-description {
- line-height: 1.4;
- font-size: 14px;
- height: 50vh;
-}
+{#if $isMobileInfoVisible}
+<div class="overlay">
+ <div class="mobile-info">
+ <button class="close-btn" onclick={closeMobileInfo}>×</button>
+ <div class="content">
+ <div class="card-image-large">
+ {#if $leftPanelCardId}
+ <img height="100%" src={cardImageUrl($leftPanelCardId)} alt="card img">
+ {/if}
+ </div>
+ <div class="card-description">
+ <pre class="card-desc-text">{$leftPanelCardDesc}</pre>
+ </div>
+ </div>
+ </div>
+</div>
+{/if}
-.card-desc-text {
- height: calc(50vh - 3em);
- white-space: pre-wrap;
- word-wrap: break-word;
- overflow: auto;
-}
+<style>
-a.link {
- color: #000000; /* 文本颜色设置为黑色 */
- text-decoration: underline; /* 添加下划线 */
- cursor: pointer; /* 鼠标悬停时显示手形指针 */
-}
+ .left-panel {
+ width: 25%;
+ padding: 2vh 20px;
+ background-color: #f5f5f5;
+ }
-a.link:visited {
- color: #000000; /* 已访问链接颜色保持黑色 */
-}
+ .overlay{
+ display: none;
+ }
+
+ .card-image-large {
+ height: 40vh;
+ text-align: center;
+ background-color: #ddd;
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+
+ .card-description {
+ line-height: 1.4;
+ font-size: 14px;
+ height: 50vh;
+ }
+
+ .card-desc-text {
+ height: calc(50vh - 3em);
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ overflow: auto;
+ }
+
+ a.link {
+ color: #000000; /* 文本颜色设置为黑色 */
+ text-decoration: underline; /* 添加下划线 */
+ cursor: pointer; /* 鼠标悬停时显示手形指针 */
+ }
+
+ a.link:visited {
+ color: #000000; /* 已访问链接颜色保持黑色 */
+ }
+
+ a.link:hover {
+ color: #000000; /* 悬停时颜色不变 */
+ text-decoration: underline; /* 悬停时保持下划线 */
+ }
+
+ a.link:active {
+ color: #000000; /* 点击时颜色不变 */
+ }
-a.link:hover {
- color: #000000; /* 悬停时颜色不变 */
- text-decoration: underline; /* 悬停时保持下划线 */
-}
+ @media screen and (max-width: 768px) {
+ .left-panel {
+ display: none;
+ }
+ .overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0);
+ display: block;
+ z-index: 1000;
+ }
+ .mobile-info {
+ background-color: rgba(0, 0, 0, 0);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1001;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .close-btn {
+ position: absolute;
+ right: 30px;
+ top: 30px;
+ width: 40px;
+ height: 40px;
+ border: none;
+ border-radius: 50%;
+ background-color: #444;
+ color: white;
+ cursor: pointer;
+ font-size: 24px;
+ }
-a.link:active {
- color: #000000; /* 点击时颜色不变 */
-}
+ .close-btn:hover {
+ background-color: #666;
+ transform: scale(1.1);
+ }
+ .content {
+ width: 100%;
+ padding: 20px;
+ background-color: white;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+ }
+ }
</style>
diff --git a/src/components/main_panel.svelte b/src/components/main_panel.svelte
index 5127e31..f295ef0 100644
--- a/src/components/main_panel.svelte
+++ b/src/components/main_panel.svelte
@@ -131,60 +131,65 @@
<style>
-.middle-panel {
- width: 55%;
- padding: 20px;
- background-color: #fff;
- overflow-y: auto;
-}
-
-.control-bar {
- margin-bottom: 20px;
-}
-
-.btn {
- padding: 8px 20px;
- margin-right: 10px;
- background-color: #4CAF50;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-
-
-.select-format {
- padding: 8px 8px;
- margin-right: 10px;
- cursor: pointer;
- font-size: 1.1em;
-}
-
-.deck-group {
- margin-bottom: 30px;
-}
-
-.deck-group h3 {
- margin-bottom: 10px;
- color: #333;
-}
-
-.card-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
- grid-auto-flow: dense;
- overflow-y: auto;
- padding: 10px;
- border: 1px solid #ddd;
- border-radius: 4px;
- min-height: 80px;
-}
-
-.card-grid-thumb {
- position: relative;
- aspect-ratio: 1/1.4;
- border-radius: 5px;
-}
+ .middle-panel {
+ width: 55%;
+ padding: 20px;
+ background-color: #fff;
+ overflow-y: auto;
+ }
+ @media screen and (max-width: 768px) {
+ .middle-panel {
+ width: 100%;
+ }
+ }
+
+ .control-bar {
+ margin-bottom: 20px;
+ }
+
+ .btn {
+ padding: 8px 20px;
+ margin-right: 10px;
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+
+ .select-format {
+ padding: 8px 8px;
+ margin-right: 10px;
+ cursor: pointer;
+ font-size: 1.1em;
+ }
+
+ .deck-group {
+ margin-bottom: 30px;
+ }
+
+ .deck-group h3 {
+ margin-bottom: 10px;
+ color: #333;
+ }
+
+ .card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
+ grid-auto-flow: dense;
+ overflow-y: auto;
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ min-height: 80px;
+ }
+
+ .card-grid-thumb {
+ position: relative;
+ aspect-ratio: 1/1.4;
+ border-radius: 5px;
+ }
</style>
diff --git a/src/components/right_panel.svelte b/src/components/right_panel.svelte
index 9863d97..1aa75c1 100644
--- a/src/components/right_panel.svelte
+++ b/src/components/right_panel.svelte
@@ -40,13 +40,19 @@
<style>
-.right-panel {
- width: 20%;
- padding: 20px;
- background-color: #f8f8f8;
- display: flex;
- flex-direction: column;
-}
+ .right-panel {
+ width: 20%;
+ padding: 20px;
+ background-color: #f8f8f8;
+ display: flex;
+ flex-direction: column;
+ }
+
+ @media screen and (max-width: 768px) {
+ .right-panel {
+ display: none;
+ }
+ }
.search-bar input {
width: 100%;
generated by cgit v1.0 at 2025-12-29 19:35:19 +0000