fix: adjust card & avatar & modrinth ui

Voxelum · Mar 25, 2022 · 5db8d64 · 5db8d64
1 parent 9b492a8
commit 5db8d64
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 8 deletions.
diff --git a/xmcl-keystone-ui/src/windows/main/components/SideBar.vue b/xmcl-keystone-ui/src/windows/main/components/SideBar.vue
@@ -4,7 +4,7 @@
     permanent
     width="200"
     :mini-variant="true"
-    class="moveable sidebar z-10 rounded-r"
+    class="moveable sidebar z-10"
   >
     <v-list
       nav
@@ -17,7 +17,10 @@
         push
         to="/user"
       >
-        <v-list-item-avatar>
+        <v-list-item-avatar
+          size="48"
+          large
+        >
           <ImageShowTextureHead
             :src="gameProfile.textures.SKIN.url"
             :dimension="48"

diff --git a/xmcl-keystone-ui/src/windows/main/pages/mod-setting/ModCard.vue b/xmcl-keystone-ui/src/windows/main/pages/mod-setting/ModCard.vue
@@ -59,7 +59,7 @@
             >
               {{ source.name }}
             </h3>
-            <div class="flex gap-1">
+            <div class="flex gap-1 flex-wrap">
               <v-chip
                 small
                 outlined

diff --git a/xmcl-keystone-ui/src/windows/main/pages/modrinth/[id]/components/Versions.vue b/xmcl-keystone-ui/src/windows/main/pages/modrinth/[id]/components/Versions.vue
@@ -64,7 +64,7 @@
           </v-chip>
         </td>
         <td class="">
-          <div class="flex gap-1 items-center">
+          <div class="flex gap-1 items-center overflow-auto flex-wrap max-w-50 py-2">
             <v-chip
               v-for="l of props.item.game_versions"
               :key="l"

diff --git a/xmcl-keystone-ui/src/windows/main/pages/modrinth/[id]/index.vue b/xmcl-keystone-ui/src/windows/main/pages/modrinth/[id]/index.vue
@@ -20,7 +20,7 @@
       height="3"
       :indeterminate="true"
     />
-    <div class="flex flex-col gap-4 flex-grow">
+    <div class="flex flex-col gap-4 flex-grow xl:max-w-110vh max-w-full">
       <Header
         class="flex-grow-0"
         :title="project.title"
@@ -56,6 +56,7 @@
           </v-tab-item>
         </v-tabs-items>
       </v-card>
+      <div class="min-h-[10px]" />
     </div>
     <div class="flex flex-col gap-4 flex-grow">
       <Tags

diff --git a/xmcl-keystone-ui/src/windows/main/pages/resource-pack-setting/ResourcePackCard.vue b/xmcl-keystone-ui/src/windows/main/pages/resource-pack-setting/ResourcePackCard.vue
@@ -58,7 +58,7 @@
             class="mt-1"
           />
           <v-card-actions v-show="pack.tags.length > 0">
-            <div>
+            <div class="flex gap-2 flex-wrap">
               <v-chip
                 v-for="(tag, index) in pack.tags"
                 :key="`${tag}-${index}`"

diff --git a/xmcl-keystone-ui/src/windows/main/pages/shader-pack-setting/ShaderPackCard.vue b/xmcl-keystone-ui/src/windows/main/pages/shader-pack-setting/ShaderPackCard.vue
@@ -38,7 +38,7 @@
       </v-card-text>
       <v-card-text
         v-if="pack.tags.length > 0"
-        class="pt-0"
+        class="pt-0 flex gap-2 flex-wrap"
       >
         <v-chip
           v-for="(tag, index) in pack.tags"
@@ -48,11 +48,12 @@
           small
           close
           outlined
+          @mousedown.stop
           @click:close="onRemoveTag(tag)"
         >
           <div
             contenteditable
-            @input.stop="onEditTag($event, index)"
+            @input.stop.capture="onEditTag($event, index)"
             @blur="onEditTagEnd(pack)"
           >
             {{ tag }}