From cd942103908468c41e4b667bbb4661840e56693f Mon Sep 17 00:00:00 2001
From: Xiaodai Dai <diauweb@live.com>
Date: Thu, 5 Oct 2023 23:19:32 +0800
Subject: [PATCH] optimize css on mobile phones

---
 README.md                            |  3 +--
 src/lib/components/Dialogs.svelte    |  7 ++++++-
 src/lib/components/SearchBar.svelte  | 30 ++++++++++++++++++++--------
 src/routes/(app)/+page.server.ts     |  2 +-
 src/routes/(app)/search/+page.svelte | 10 ++++++----
 5 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index ce5de32..a4960c8 100644
--- a/README.md
+++ b/README.md
@@ -10,13 +10,12 @@ Thanks for Dimbreath's [Genshin Data](https://github.com/Dimbreath/GenshinData)
 
 ## Features
 - Search any text occurrance in game.
-- Show text changes among versions.
 - Show related dialogs, talks, and quests.
 
 ## Run Weaselthief
 - Install Node.JS 16+ and MongoDB
 - Download [latest build](https://github.com/diauweb/Genshin-WeaselThief/releases/latest) from Release page.
-- Place your GenshinData git repository into the project folder.
+- Place your GenshinData files into the project folder.
 - Run `index.js` to build data & run
 
 ## Develop Weaselthief
diff --git a/src/lib/components/Dialogs.svelte b/src/lib/components/Dialogs.svelte
index 55bcf17..248fcf7 100644
--- a/src/lib/components/Dialogs.svelte
+++ b/src/lib/components/Dialogs.svelte
@@ -20,7 +20,7 @@
 				<Translated id={d.TalkContentTextMapHash} />
 			</a>
 			<div class="uk-accordion-content">
-                <table class="uk-table uk-table-small">
+                <table class="uk-table uk-table-small sm-break-table">
 					<tr>
 						<th>Id</th>
 						<td>{d.Id}</td>
@@ -81,4 +81,9 @@
 		font-family: monospace;
 	}
 
+	@media(max-width: 640px) {
+        .sm-break-table th,td {
+            display: table-row;
+        }
+    }
 </style>
diff --git a/src/lib/components/SearchBar.svelte b/src/lib/components/SearchBar.svelte
index 50cd335..72d9878 100644
--- a/src/lib/components/SearchBar.svelte
+++ b/src/lib/components/SearchBar.svelte
@@ -13,16 +13,30 @@
 
 <form method="POST" action="/">
     <input type="search" name="kw" class="uk-input" value={value} placeholder="Search through game texts..."/>
-    <select class="uk-select option-inline uk-margin-top uk-margin-right" name="lang" value={lang}>
-        <option value="cn">CHS</option>
-        <option value="en">EN</option>
-        <option value="jp">JP</option>
-    </select>
-    <button type="submit" class="uk-button uk-button-primary uk-margin-top">Search</button>
+
+    <div class="uk-flex buttons-column-small">
+        <select class="uk-select uk-margin-top uk-margin-right option-inline" name="lang" value={lang}>
+            <option value="cn">CHS</option>
+            <option value="en">EN</option>
+            <option value="jp">JP</option>
+        </select>
+        <button type="submit" class="uk-button uk-button-primary uk-margin-top">Search</button>
+    </div>
 </form>
 
-<style>
+<style class="postcss">
     .option-inline {
-        width: 10% !important;
+        width: 20% !important;
     }
+
+    @media(max-width: 640px) {
+        .buttons-column-small {
+            flex-direction: column;
+        }
+
+        .option-inline {
+            width: auto !important;
+        }
+    }
+
 </style>
\ No newline at end of file
diff --git a/src/routes/(app)/+page.server.ts b/src/routes/(app)/+page.server.ts
index 437112d..ec87185 100644
--- a/src/routes/(app)/+page.server.ts
+++ b/src/routes/(app)/+page.server.ts
@@ -1,4 +1,4 @@
-import type { Actions, PageServerLoad } from './$types';
+import type { Actions } from './$types';
 import { redirect } from "@sveltejs/kit";
 
 export const actions: Actions = {
diff --git a/src/routes/(app)/search/+page.svelte b/src/routes/(app)/search/+page.svelte
index 5db9fac..9999d05 100644
--- a/src/routes/(app)/search/+page.svelte
+++ b/src/routes/(app)/search/+page.svelte
@@ -10,11 +10,11 @@
 
 <SearchBar lang={data.lang} value={value}/>
 
-<table class="uk-table uk-table-divider uk-table-small uk-table-striped">
+<table class="uk-table uk-table-divider uk-table-small uk-table-striped sm-break-table">
     <tbody>
         {#each data.result as e}
 		<tr>
-            <td>
+            <td class="td-hash">
                 <b><a href={`/text/${e.hash}`}>{e.hash}</a></b>
             </td>
             <!-- <td>
@@ -41,7 +41,9 @@
 </table>
 
 <style>
-    .weak {
-        color: gray;
+    @media(max-width: 640px) {
+        .sm-break-table td {
+            display: table-row;
+        }
     }
 </style>