Optimise for mobile use

linkie · Jun 2, 2022 · 75545eb · 75545eb
1 parent c2d45b4
commit 75545eb
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 20 deletions.
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -6,10 +6,32 @@
 
         <div class="flex-none">
             <ul class="menu menu-horizontal p-0">
-                <li><a href="/dependencies">Dependencies</a></li>
-                <li><a href="/mappings">Mappings</a></li>
+                <li class="block sm:hidden">
+                    <div class="dropdown dropdown-end">
+                        <label tabindex="0">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <line x1="4" y1="6" x2="20" y2="6"></line>
+                                <line x1="4" y1="12" x2="20" y2="12"></line>
+                                <line x1="4" y1="18" x2="20" y2="18"></line>
+                            </svg>
+                        </label>
+                        <ul tabindex="0" class="menu dropdown-content p-2 shadow-2xl bg-base-100 rounded-box whitespace-nowrap mt-4 top-12">
+                            <li><a href="/dependencies">Dependencies</a></li>
+                            <li><a href="/mappings">Mappings</a></li>
+                            <li>
+                                <label class="cursor-pointer">
+                                    Dark Mode
+                                    <input type="checkbox" class="toggle" :checked="darkMode" @click="setDarkMode(($event.target as any)?.checked ?? darkMode)"/>
+                                </label>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="hidden sm:block"><a href="/dependencies">Dependencies</a></li>
+                <li class="hidden sm:block"><a href="/mappings">Mappings</a></li>
 
-                <li>
+                <li class="hidden sm:block">
                     <label class="cursor-pointer">
                         Dark Mode
                         <input type="checkbox" class="toggle" :checked="darkMode" @click="setDarkMode(($event.target as any)?.checked ?? darkMode)"/>

diff --git a/frontend/src/components/dependencies/DependencyFilterBlock.vue b/frontend/src/components/dependencies/DependencyFilterBlock.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="px-5 pt-6">
         <div class="card bg-base-100 shadow-xl rounded-lg overflow-x-auto">
-            <div class="flex">
-                <div class="px-4 whitespace-nowrap">
-                    Loader
+            <div class="flex flex-col md:flex-row">
+                <div class="px-4 whitespace-nowrap h-12">
+                    <span class="align-middle">Loader</span>
                     <select class="select capitalize font-light rounded-none w-52"
                             @change="loader = (($event.target as any)?.value?.toLowerCase() ?? loader)" :value="loader ?? ''">
                         <option disabled selected>Select mod loader</option>
@@ -13,8 +13,8 @@
                     </select>
                 </div>
 
-                <div class="px-4 whitespace-nowrap">
-                    Version
+                <div class="px-4 whitespace-nowrap h-12">
+                    <span class="align-middle">Version</span>
                     <select class="select capitalize font-light rounded-none w-52"
                             @change="version = (($event.target as any)?.value ?? version)" :value="version ?? ''">
                         <option disabled selected>Select version</option>
@@ -24,7 +24,7 @@
                     </select>
                 </div>
 
-                <div class="px-4 grow">
+                <div class="px-4 grow h-12">
                     <div class="flex flex-col flex-nowrap justify-center h-full whitespace-nowrap">
                         <div>
                             <span class="pr-2">Enable snapshots</span>
@@ -74,4 +74,8 @@ export default defineComponent({
 .checkbox {
     vertical-align: -0.1rem;
 }
+
+.select-label {
+    display: flex !important;
+}
 </style>
diff --git a/frontend/src/routes/Dependencies.vue b/frontend/src/routes/Dependencies.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="flex justify-center">
-        <div v-if="Object.keys(searchData.versions).length !== 0" class="max-w-4xl">
+    <div class="max-w-4xl mx-auto">
+        <div v-if="Object.keys(searchData.versions).length !== 0">
             <DependencyFilterBlock :searchData="searchData"/>
 
             <Block>

diff --git a/frontend/src/routes/Mappings.vue b/frontend/src/routes/Mappings.vue
@@ -1,14 +1,16 @@
 <template>
-    <div class="flex justify-center" v-if="mappingsData.namespaces.length !== 0">
-        <div class="pl-5 pt-6 w-72 min-w-[18rem]">
-            <div class="p-5 card bg-base-100 shadow-xl rounded-lg">
-                <MappingsFilterBlock :data="mappingsData"/>
+    <div class="max-w-[calc(56rem+var(--sidebar-width))] mx-auto">
+        <div v-if="mappingsData.namespaces.length !== 0" class="grid-setup">
+            <div class="col-[1] px-5 pt-6 sm:pr-0 sm:w-[var(--sidebar-width)] sm:min-w-[var(--sidebar-width)]">
+                <div class="p-5 card bg-base-100 shadow-xl rounded-lg">
+                    <MappingsFilterBlock :data="mappingsData"/>
+                </div>
+            </div>
+            <div class="col-[2/span_2] min-w-0">
+                <MappingsSearchBlock/>
+                <MappingsEntryBlock v-for="entry in infoData.entries" :namespace="mappingsData.namespaces.find(value => value.id === infoData.namespace)"
+                                    :entry="entry"/>
             </div>
-        </div>
-        <div class="w-[56rem]">
-            <MappingsSearchBlock/>
-            <MappingsEntryBlock v-for="entry in infoData.entries" :namespace="mappingsData.namespaces.find(value => value.id === infoData.namespace)"
-                                :entry="entry"/>
         </div>
     </div>
 </template>
@@ -247,5 +249,14 @@ export default defineComponent({
 </script>
 
 <style scoped>
+div {
+    --sidebar-width: 18rem;
+}
 
+@media (min-width: 640px) {
+    .grid-setup {
+        grid-template-columns: auto 0 minmax(0, calc(100% - var(--sidebar-width)));
+        @apply grid grid-flow-col;
+    }
+}
 </style>