chore: fix inventory

Mezeman1 · Oct 21, 2024 · 20b0c39 · 20b0c39
1 parent c3604d3
commit 20b0c39
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/src/components/InventoryItem.vue b/src/components/InventoryItem.vue
@@ -1,7 +1,10 @@
 <template>
   <div
-    class="relative flex flex-col items-center justify-center p-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer overflow-hidden aspect-square border-2 border-gray-200"
-    :class="[itemFromRegistry?.image ? 'text-white' : rarityColorClass]"
+    class="relative flex flex-col items-center justify-center p-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer overflow-hidden aspect-square border-2"
+    :class="[
+      itemFromRegistry?.image ? 'text-white' : rarityColorClass,
+      isSelected ? 'ring-2 ring-blue-500 ring-offset-2' : ''
+    ]"
     :style="backgroundStyle"
     @click="$emit('click', item)"
   >
@@ -27,12 +30,12 @@
     />
 
     <!-- Item name -->
-    <div class="text-center text-sm font-medium mb-1 relative z-10 px-1">
+    <div class="text-center text-xs sm:text-sm font-medium mb-1 relative z-10 px-1 line-clamp-2">
       {{ getItemName(item) }}
     </div>
 
     <!-- Item type -->
-    <div class="text-xs opacity-75 relative z-10 bg-black bg-opacity-50 px-2 py-1 rounded-full">
+    <div class="text-2xs sm:text-xs opacity-75 relative z-10 bg-black bg-opacity-50 px-2 py-1 rounded-full truncate max-w-full">
       {{ itemFromRegistry?.type }}
     </div>
   </div>
@@ -50,6 +53,7 @@ const props = defineProps<{
     name: string;
     amount: number;
   };
+  isSelected: boolean;
 }>()
 
 const rarityColorClass = computed(() => {
@@ -81,5 +85,16 @@ defineEmits(['click'])
 </script>
 
 <style scoped>
-/* Add any additional styles here if needed */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+@media (max-width: 640px) {
+  .text-2xs {
+    font-size: 0.625rem;
+  }
+}
 </style>
diff --git a/src/views/InventoryPage.vue b/src/views/InventoryPage.vue
@@ -3,6 +3,7 @@
     <!-- Active Item Display -->
     <div
       v-if="activeItem"
+      ref="activeItemBox"
       class="flex flex-col md:flex-row md:items-center md:justify-between p-4 border border-gray-300 rounded-lg mb-4 bg-white"
     >
       <div>
@@ -43,6 +44,7 @@
         v-for="item in filteredInventory"
         :key="item.id"
         :item="item"
+        :is-selected="activeItem?.id === item.id"
         @click="selectItem(item)"
       />
       <div
@@ -57,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import { useInventoryStore } from '../stores/inventoryStore'
 import { toast } from 'vue3-toastify'
@@ -69,9 +71,15 @@ const { width } = useElementSize(gridContainer)
 const inventoryStore = useInventoryStore()
 
 const activeItem = ref(null)
+const activeItemBox = ref(null)
 
 const selectItem = (item) => {
-  activeItem.value = item
+  activeItem.value = item === activeItem.value ? null : item
+  if (activeItem.value) {
+    nextTick(() => {
+      activeItemBox.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    })
+  }
 }
 
 const gridColumns = computed(() => {
@@ -232,4 +240,10 @@ $columns: 10;
   grid-row: 1 / 1;
   grid-column: 1 / 1;
 }
+
+@media (max-width: 640px) {
+  .grid {
+    gap: 0.5rem;
+  }
+}
 </style>