From 8caf2a2291e79823e916caf49f6b333d09a7acb6 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sat, 18 Nov 2023 00:27:12 +0800
Subject: [PATCH] pref: search mobile adjust

---
 src/components/search/KUNGalgameSearchBox.vue | 18 +++++++++++++-----
 src/components/search/SearchBox.vue           |  2 +-
 src/components/search/SearchHistory.vue       |  9 ++++++---
 src/components/top-bar/KUNGalgameTopBar.vue   | 11 +++++++++--
 4 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/components/search/KUNGalgameSearchBox.vue b/src/components/search/KUNGalgameSearchBox.vue
index 8220feca..b54d5b51 100644
--- a/src/components/search/KUNGalgameSearchBox.vue
+++ b/src/components/search/KUNGalgameSearchBox.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { onBeforeUnmount, ref, watch } from 'vue'
 import SearchBox from './SearchBox.vue'
 import SearchHistory from './SearchHistory.vue'
 import SearchResult from './SearchResult.vue'
@@ -42,15 +42,11 @@ watch(
 
 const scrollHandler = async () => {
   if (isScrollAtBottom() && search.value.isLoading && search.value.keywords) {
-    console.log(12222)
-
     search.value.page++
 
     const lazyLoadTopics = await searchTopics()
 
     if (!lazyLoadTopics.length) {
-      console.log(1)
-
       search.value.isLoading = false
     }
 
@@ -141,4 +137,16 @@ onBeforeUnmount(() => {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
+
+@media (max-width: 1000px) {
+  .container {
+    width: 60vw;
+  }
+}
+
+@media (max-width: 700px) {
+  .container {
+    width: 90vw;
+  }
+}
 </style>
diff --git a/src/components/search/SearchBox.vue b/src/components/search/SearchBox.vue
index 9d69949b..c1a33f88 100644
--- a/src/components/search/SearchBox.vue
+++ b/src/components/search/SearchBox.vue
@@ -61,7 +61,7 @@ onMounted(() => {
 .search-form {
   position: sticky;
   top: 0;
-  width: calc(40vw - 20px);
+  width: 100%;
   max-width: 777px;
   display: flex;
   justify-content: center;
diff --git a/src/components/search/SearchHistory.vue b/src/components/search/SearchHistory.vue
index cda1cca7..f793f9d1 100644
--- a/src/components/search/SearchHistory.vue
+++ b/src/components/search/SearchHistory.vue
@@ -38,8 +38,12 @@ const handleDeleteHistory = (historyIndex: number) => {
         @click="handleClickHistory(index)"
       >
         <span>{{ history }} </span>
-        <span @click="handleDeleteHistory(index)">
-          <Icon class="delete" icon="line-md:close-circle" />
+        <span>
+          <Icon
+            @click="handleDeleteHistory(index)"
+            class="delete"
+            icon="line-md:close-circle"
+          />
         </span>
       </div>
     </div>
@@ -107,7 +111,6 @@ const handleDeleteHistory = (historyIndex: number) => {
   }
 }
 
-/* Delete button */
 .delete {
   width: 30px;
   right: 5px;
diff --git a/src/components/top-bar/KUNGalgameTopBar.vue b/src/components/top-bar/KUNGalgameTopBar.vue
index 9e296fe7..69299488 100644
--- a/src/components/top-bar/KUNGalgameTopBar.vue
+++ b/src/components/top-bar/KUNGalgameTopBar.vue
@@ -311,12 +311,13 @@ $navNumber: v-bind(navItemNum);
       margin-right: 0 !important;
     }
   }
-}
 
-@media (max-width: 700px) {
   .settings {
     display: none !important;
   }
+}
+
+@media (max-width: 700px) {
   .top-bar {
     display: none;
   }
@@ -331,5 +332,11 @@ $navNumber: v-bind(navItemNum);
   .kungalgamer-info {
     margin-right: 30px;
   }
+
+  .avatar {
+    img {
+      margin-left: 0;
+    }
+  }
 }
 </style>