From 3c8744dc75678136ff2e02aa5382ccf27db6979a Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Thu, 17 Oct 2024 23:26:25 +0200
Subject: [PATCH] Reworked layout for keybindings, hide minimap on smaller
 screens

---
 src/components/gui/Keybindings.vue | 82 ++++++++++++++++--------------
 src/components/gui/Minimap.vue     |  2 +-
 2 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/src/components/gui/Keybindings.vue b/src/components/gui/Keybindings.vue
index 8c42ca5..ddbb4bc 100644
--- a/src/components/gui/Keybindings.vue
+++ b/src/components/gui/Keybindings.vue
@@ -1,43 +1,47 @@
 <template>
-    <div class="absolute left-[300px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[346px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[392px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[438px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[484px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[530px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[576px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
-    </div>
-    <div class="absolute left-[622px] top-4">
-        <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
-        <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
-        <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
+    <div class="absolute top-4 left-[300px] w-[422px]">
+        <div class="flex gap-2.5">
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F1</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
+            </div>
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F2</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
+            </div>
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F3</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
+            </div>
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F4</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
+            </div>
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F5</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
+            </div>
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F6</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
+            </div>
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F7</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
+            </div>
+            <div class="relative">
+                <button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
+                <span class="z-10 text-pixel absolute top-1 left-2">F8</span>
+                <div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
+            </div>
+        </div>
     </div>
 </template>
 
diff --git a/src/components/gui/Minimap.vue b/src/components/gui/Minimap.vue
index 045c446..7ee902c 100644
--- a/src/components/gui/Minimap.vue
+++ b/src/components/gui/Minimap.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="absolute top-4 right-4">
+    <div class="absolute top-4 right-4 hidden lg:block">
         <div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
             <div class="w-40 h-40 rounded-full shadow-inner"></div>
         </div>