From 433b60dadde7389c7c7edbadac7dd37c53cadd4b Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sat, 3 Aug 2024 23:34:31 +0200
Subject: [PATCH] Responsiveness inventory

WIP
---
 .../utilities/inventory/Inventory.vue         | 250 ++++++++++--------
 tailwind.config.js                            |   3 +
 2 files changed, 136 insertions(+), 117 deletions(-)

diff --git a/src/components/utilities/inventory/Inventory.vue b/src/components/utilities/inventory/Inventory.vue
index 4c799b3..36be267 100644
--- a/src/components/utilities/inventory/Inventory.vue
+++ b/src/components/utilities/inventory/Inventory.vue
@@ -1,136 +1,152 @@
 <template>
     <div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60">
-        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[900px] w-[55%] h-4/5 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
-            <div class="mr-0.5 absolute right-full top-1/2 -translate-y-1/2 w-[35%] h-4/5 bg-gray-300/80 border-solid border-2 border-r-0 border-cyan-200 rounded-l-lg backdrop-blur-sm shadow-lg">
-                <div class="h-full flex flex-col justify-center items-center">
-                    <h3 class="mt-4">Ethereal</h3>
-                    <img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
-                    <span class="block mb-4">Level 69</span>
+        <div class="flex flex-col gap-8 m-10 h-[calc(100%_-_5rem)]">
+            <div class="flex gap-8 items-stretch justify-center grow max-h-[650px]">
+                <div class="w-[30%] max-w-[350px] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg backdrop-blur-sm shadow-lg">
+                    <div class="h-full flex flex-col justify-center items-center">
+                        <h3 class="mt-4">Ethereal</h3>
+                        <img class="h-96 my-6 mx-auto" src="/assets/placeholders/inventory_player.png" />
+                        <span class="block mb-4">Level 69</span>
+                    </div>
                 </div>
-            </div>
-            <div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
-                <h3 class="m-0 font-medium shrink-0">Inventory</h3>
-                <div class="flex gap-2.5">
-                    <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
-                        <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
-                    </button>
-                </div>
-            </div>
-            <div class="grow flex flex-col">
-                <div class="w-full h-3/5 relative flex justify-between">
-                    <div class="grid grid-rows-5 grid-cols-4 gap-4 m-5">
-                        <!-- Helmet -->
-                        <div class="col-start-2 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
-                        </div>
-
-                        <!-- Head charm -->
-                        <div class="col-start-3 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
-                        </div>
-
-                        <!-- Bracers -->
-                        <div class="row-span-2 row-start-2 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-full h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
-                        </div>
-
-                        <!-- Chestplate -->
-                        <div class="col-span-2 col-start-2 row-span-2 row-start-2 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20"/>
-                        </div>
-
-                        <!-- Primary Weapon -->
-                        <div class="col-start-4 row-span-2 row-start-2 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-full h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
-                        </div>
-
-                        <!-- Legs -->
-                        <div class="col-start-2 row-span-2 row-start-4 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-full h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
-                        </div>
-
-                        <!-- Belt/pouch -->
-                        <div class="col-start-3 row-start-4 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
-                        </div>
-
-                        <!-- Boots -->
-                        <div class="col-start-3 row-start-5 bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-full self-stretch justify-self-stretch relative hover:bg-gray-200">
-                            <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                <div class="max-w-[875px] w-[65%] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg z-50 flex flex-col backdrop-blur-sm shadow-lg">
+                    <div class="p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
+                        <h3 class="m-0 font-medium shrink-0">Inventory</h3>
+                        <div class="flex gap-2.5">
+                            <button class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+                                <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
+                            </button>
                         </div>
                     </div>
-                    <div class="grid grid-rows-5 grid-cols-5 gap-4 m-5">
-                        <div v-for="n in 25" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-full self-stretch justify-self-stretch hover:bg-gray-200"></div>
-                    </div>
-                    <div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
-                </div>
-                <div class="w-full h-[40%] flex relative">
-                    <div class="w-1/2 h-full">
-                        <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-8 mr-8">
-                            <div class="flex gap-2">
-                                <h3>Armor piece name</h3>
-                                <span class="rounded-sm px-2.5 content-center bg-purple text-white text-xsm">RARE</span>
+                    <div class="grow flex flex-col">
+                        <div class="w-full h-[70%] max-h-[375px] relative flex flex-col md:flex-row justify-between overflow-auto">
+                            <div class="flex flex-col gap-3 m-5">
+                                <div class="flex gap-3 justify-center">
+                                    <!-- Helmet -->
+                                    <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+                                        <img src="/assets/icons/inventory/helmet.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                                    </div>
+
+                                    <!-- Head charm -->
+                                    <div class=" bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
+                                        <img src="/assets/icons/inventory/head_charm.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                                    </div>
+                                </div>
+                                
+                                <div class="flex gap-3 justify-center">
+                                    <!-- Bracers -->
+                                    <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
+                                        <img src="/assets/icons/inventory/bracers.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                                    </div>
+
+                                    <!-- Chestplate -->
+                                    <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
+                                        <img src="/assets/icons/inventory/chestplate.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20"/>
+                                    </div>
+
+                                    <!-- Primary Weapon -->
+                                    <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+                                        <img src="/assets/icons/inventory/primary_weapon.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                                    </div>
+                                </div>
+
+                                <div class="flex gap-3 justify-center">
+                                    <!-- Legs -->
+                                    <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
+                                        <img src="/assets/icons/inventory/legs.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                                    </div>
+
+                                    <div class="flex flex-col gap-3">
+                                        <!-- Belt/pouch -->
+                                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+                                            <img src="/assets/icons/inventory/pouch.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                                        </div>
+
+                                        <!-- Boots -->
+                                        <div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
+                                            <img src="/assets/icons/inventory/boots.svg" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20"/>
+                                        </div>
+                                    </div>
+                                    
+                                </div>
                             </div>
-                            <div class="flex justify-between items-center grow">
-                                <img src="/assets/placeholders/chestplate.png" class="max-w-40"/>
-                                <ul class="p-0 m-0 list-none">
-                                    <li class="flex gap-8 justify-between">
-                                        <span>Health:</span>
-                                        <span>+15</span>
-                                    </li>
-                                    <li class="flex gap-8 justify-between">
-                                        <span>Defense:</span>
-                                        <span>500</span>
-                                    </li>
-                                    <li class="flex gap-8 justify-between">
-                                        <span>Stats:</span>
-                                        <span></span>
-                                    </li>
-                                    <li class="flex gap-8 justify-between">
-                                        <span>More stats:</span>
-                                        <span></span>
-                                    </li>
-                                </ul>
+                            <div class="flex gap-3 m-5 flex-wrap justify-end max-lg:justify-center lg:max-w-[50%]">
+                                <div v-for="n in 25" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
                             </div>
                         </div>
-                    </div>
-                    <div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200"></div>
-                    <div class="w-1/2 h-full">
-                        <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-8 ml-8">
-                            <h3>Character stats</h3>
-                            <div class="flex justify-between items-center grow">
-                                <ul class="p-0 m-0 list-none">
-                                    <li class="flex gap-8 justify-between">
-                                        <span>Health:</span>
-                                        <p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
-                                    </li>
-                                    <li class="flex gap-8 justify-between">
-                                        <span>Defense:</span>
-                                        <p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
-                                    </li>
-                                    <li class="flex gap-8 justify-between">
-                                        <span>Stats:</span>
-                                        <p class="m-0 relative"></p>
-                                    </li>
-                                    <li class="flex gap-8 justify-between">
-                                        <span>More stats:</span>
-                                        <p class="m-0 relative"></p>
-                                    </li>
-                                </ul>
+                        <div class="w-full h-[30%] flex flex-wrap relative overflow-auto xl:grow">
+                            <div class="absolute left-0 top-0 w-full h-px bg-cyan-200"></div>
+                            <div class="w-full xl:w-1/2 h-full">
+                                <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 mr-8">
+                                    <div class="flex gap-2">
+                                        <h4>Armor piece name</h4>
+                                        <span class="rounded-sm px-2.5 content-center bg-purple text-white text-xs">RARE</span>
+                                    </div>
+                                    <div class="flex gap-8 xl:justify-between items-center grow">
+                                        <img src="/assets/placeholders/chestplate.png" class="max-w-36"/>
+                                        <ul class="p-0 m-0 list-none">
+                                            <li class="flex gap-8 justify-between">
+                                                <span>Health:</span>
+                                                <span>+15</span>
+                                            </li>
+                                            <li class="flex gap-8 justify-between">
+                                                <span>Defense:</span>
+                                                <span>500</span>
+                                            </li>
+                                            <li class="flex gap-8 justify-between">
+                                                <span>Stats:</span>
+                                                <span></span>
+                                            </li>
+                                            <li class="flex gap-8 justify-between">
+                                                <span>More stats:</span>
+                                                <span></span>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="absolute left-1/2 -translate-x-1/2 bottom-0 w-px h-full bg-cyan-200 xl:block hidden"></div>
+                            <div class="w-full xl:w-1/2 h-full">
+                                <div class="m-4 h-[calc(100%_-_32px)] flex flex-col gap-4 ml-8">
+                                    <h4>Character stats</h4>
+                                    <div class="flex justify-between items-center grow">
+                                        <ul class="p-0 m-0 list-none">
+                                            <li class="flex gap-8 justify-between">
+                                                <span>Health:</span>
+                                                <p class="m-0 relative">100 <span class="text-green absolute left-full ml-2">+15</span></p>
+                                            </li>
+                                            <li class="flex gap-8 justify-between">
+                                                <span>Defense:</span>
+                                                <p class="m-0 relative">1000 <span class="text-green absolute left-full ml-2">+500</span></p>
+                                            </li>
+                                            <li class="flex gap-8 justify-between">
+                                                <span>Stats:</span>
+                                                <p class="m-0 relative"></p>
+                                            </li>
+                                            <li class="flex gap-8 justify-between">
+                                                <span>More stats:</span>
+                                                <p class="m-0 relative"></p>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="ml-0.5 absolute left-full top-1/2 -translate-y-1/2 w-[35%] h-4/5 bg-gray-300/80 border-solid border-2 border-l-0 border-cyan-200 rounded-r-lg flex flex-col backdrop-blur-sm shadow-lg">
-                <div class="h-full flex flex-col items-center">
-                    <h3 class="my-4">Chest</h3>
-                    <div class="grid grid-cols-3 grid-rows-5 gap-4">
-                        <div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-14 h-14 self-stretch justify-self-stretch hover:bg-gray-200"></div>
+            
+            <div class="flex justify-center">
+                <div class="overflow-auto w-[calc(90%_+_32px)] bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-lg flex flex-col backdrop-blur-sm shadow-lg">
+                    <div class="h-full flex flex-col items-center">
+                        <h3 class="mt-4">Chest</h3>
+                        <div class="flex flex-wrap gap-4 m-4 justify-center max-w-[500px] overflow-auto">
+                            <div v-for="n in 15" class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-11 hover:bg-gray-200"></div>
+                        </div>
                     </div>
                 </div>
             </div>
+            
         </div>
-        <div></div>
     </div>
 </template>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index e4676ff..e28975e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,9 @@ export default {
     backgroundSize: {
       '30px': '30px'
     },
+    screens: {
+      'xl': '1200px',
+    },
     extend: {
       inset: {
         '1/6': 'calc(100% / 6)',