mobile navigation refactoring

2026-05-05 05:35:58 +00:00 · 2022-01-22 14:27:21 +01:00
parent a7fd410a68
commit 1f48abae0f
6 changed files with 65 additions and 89 deletions
@@ -10,11 +10,11 @@
    "/chunks/admin~chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunk~31d2e0e5.js": "/chunks/admin~chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunk~31d2e0e5.js?id=45350439fb9bcb879f5b",
    "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js": "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js?id=0ae7b3d840e0e20fe358",
    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=34845d890e9e65d2adc0",
-    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=5c5bc6be2a45f4144bd4",
-    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
-    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=354c892546e5c369a749",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=697cc34ea19d8447a9fe",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=3d3f164e568760d8a9cf",
+    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=e95c77b157ce6cfe4bb9",
    "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=d0f80fceb2f27a39b283",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=23ad9dd1fabccdd4c44b",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=845ba11d36e357420492",
    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=e40dcf843c95a51cd397",
    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=1d5319a48a28f62bb131",
    "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~dd421a96.js": "/chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunks/payments/billings~c~dd421a96.js?id=91eea8e08d675f1a84d2",
@@ -634,5 +634,44 @@
    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b33fe0b858a3cf9fb73d.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b33fe0b858a3cf9fb73d.hot-update.js",
    "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.9d5bbb19756862ec9257.hot-update.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.9d5bbb19756862ec9257.hot-update.js",
    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.e8bb1fe1d46b00ef0a1a.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.e8bb1fe1d46b00ef0a1a.hot-update.js",
-    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.68592f6b2dfabdf43ec0.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.68592f6b2dfabdf43ec0.hot-update.js"
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.68592f6b2dfabdf43ec0.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.68592f6b2dfabdf43ec0.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.1cf5a8a7b101bba75127.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.1cf5a8a7b101bba75127.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.128da17259b88f345924.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.128da17259b88f345924.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.72840be3a8501c80b7f4.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.72840be3a8501c80b7f4.hot-update.js",
+    "/chunks/admin~chunks/platform.ae78e28fa50be6b81c62.hot-update.js": "/chunks/admin~chunks/platform.ae78e28fa50be6b81c62.hot-update.js",
+    "/chunks/admin~chunks/platform.e2a1041bc847f5465c0e.hot-update.js": "/chunks/admin~chunks/platform.e2a1041bc847f5465c0e.hot-update.js",
+    "/chunks/admin~chunks/platform.9d03cdf98384e5b8d9da.hot-update.js": "/chunks/admin~chunks/platform.9d03cdf98384e5b8d9da.hot-update.js",
+    "/chunks/admin~chunks/platform.a5fbd230284b67582018.hot-update.js": "/chunks/admin~chunks/platform.a5fbd230284b67582018.hot-update.js",
+    "/chunks/admin~chunks/platform.1181b5912347ed83275d.hot-update.js": "/chunks/admin~chunks/platform.1181b5912347ed83275d.hot-update.js",
+    "/chunks/admin~chunks/platform.91a916d0b32d98eee0d2.hot-update.js": "/chunks/admin~chunks/platform.91a916d0b32d98eee0d2.hot-update.js",
+    "/chunks/admin~chunks/platform.2db688187490435ce5d8.hot-update.js": "/chunks/admin~chunks/platform.2db688187490435ce5d8.hot-update.js",
+    "/chunks/admin~chunks/platform.76a351135a47c8ea0a2b.hot-update.js": "/chunks/admin~chunks/platform.76a351135a47c8ea0a2b.hot-update.js",
+    "/chunks/admin~chunks/platform.ed2a26be419614021569.hot-update.js": "/chunks/admin~chunks/platform.ed2a26be419614021569.hot-update.js",
+    "/chunks/admin~chunks/platform.0b0037b6b48970bb740c.hot-update.js": "/chunks/admin~chunks/platform.0b0037b6b48970bb740c.hot-update.js",
+    "/chunks/admin~chunks/platform.73e16a4a75355b8b664e.hot-update.js": "/chunks/admin~chunks/platform.73e16a4a75355b8b664e.hot-update.js",
+    "/chunks/admin~chunks/platform.79918aa423c823e5aebb.hot-update.js": "/chunks/admin~chunks/platform.79918aa423c823e5aebb.hot-update.js",
+    "/chunks/admin~chunks/platform.91ded96ac6fe4969db56.hot-update.js": "/chunks/admin~chunks/platform.91ded96ac6fe4969db56.hot-update.js",
+    "/chunks/admin~chunks/platform.796517dc0c01a071e78f.hot-update.js": "/chunks/admin~chunks/platform.796517dc0c01a071e78f.hot-update.js",
+    "/chunks/admin~chunks/platform.1a1bb25c41b18cd9cc9c.hot-update.js": "/chunks/admin~chunks/platform.1a1bb25c41b18cd9cc9c.hot-update.js",
+    "/chunks/admin~chunks/platform.58ac70b5533f5c38dd52.hot-update.js": "/chunks/admin~chunks/platform.58ac70b5533f5c38dd52.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.1f9b17b570ca683caa78.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.1f9b17b570ca683caa78.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.d2ada1779c2ebb271922.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.d2ada1779c2ebb271922.hot-update.js",
+    "/chunks/admin~chunks/platform.a3e8dde5b33866136554.hot-update.js": "/chunks/admin~chunks/platform.a3e8dde5b33866136554.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.7062a5cc36ffc1125f6c.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.7062a5cc36ffc1125f6c.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.96db63097e6b473f431d.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.96db63097e6b473f431d.hot-update.js",
+    "/chunks/admin~chunks/platform.5f08b63fce5c96b4732d.hot-update.js": "/chunks/admin~chunks/platform.5f08b63fce5c96b4732d.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.c7c87301d38810e5b918.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.c7c87301d38810e5b918.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.67654436e34fbbf76a79.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.67654436e34fbbf76a79.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.d61e2833fb30cdeda7dd.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.d61e2833fb30cdeda7dd.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.7826f61e6c47570a1142.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.7826f61e6c47570a1142.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.5c22ed755371b0026ab3.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.5c22ed755371b0026ab3.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.04bafe006cb54880eb4d.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.04bafe006cb54880eb4d.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.6e5461e033a8e37ed031.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.6e5461e033a8e37ed031.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.2890b53964412ef5efaa.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.2890b53964412ef5efaa.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.31496d6134f1815dc455.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.31496d6134f1815dc455.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.909c0f73befbab8dbda5.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.909c0f73befbab8dbda5.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.102cc3c52e1f8c399be0.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.102cc3c52e1f8c399be0.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.8e4780369e7b0fce200e.hot-update.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.8e4780369e7b0fce200e.hot-update.js",
+    "/chunks/admin~chunks/platform.f501a36a94529860cd05.hot-update.js": "/chunks/admin~chunks/platform.f501a36a94529860cd05.hot-update.js",
+    "/chunks/admin~chunks/platform.ddc4b16a4eec12a4400f.hot-update.js": "/chunks/admin~chunks/platform.ddc4b16a4eec12a4400f.hot-update.js"
 }
@@ -40,10 +40,10 @@
        <b class="font-bold text-sm group-hover-text-theme" :class="{'text-theme': isActive}">
            {{ title }}
        </b>
-        <div v-if="arrow" class="ml-3.5">
-            <chevron-right-icon v-if="arrow === 'right'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
-            <arrow-up-icon v-if="arrow === 'up'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
-            <arrow-down-icon v-if="arrow === 'down'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
+        <div v-if="arrow" class="ml-2">
+            <chevron-right-icon v-if="arrow === 'right'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <arrow-up-icon v-if="arrow === 'up'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
+            <arrow-down-icon v-if="arrow === 'down'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
        </div>
    </li>
 </template>
@@ -1,7 +1,11 @@
 <template>
    <transition name="context-menu">
-        <div v-if="isVisible" @click="closeMenu" class="options">
-            <slot></slot>
+        <div
+			v-if="isVisible"
+			@click="closeMenu"
+			class="fixed pb-4 bottom-0 left-0 right-0 z-50 overflow-hidden dark:bg-2x-dark-foreground bg-white rounded-tl-xl rounded-tr-xl"
+		>
+            <slot />
        </div>
    </transition>
 </template>
@@ -38,25 +42,6 @@
 </script>

 <style scoped lang="scss">
-    @import "resources/sass/vuefilemanager/_variables";
-    @import "resources/sass/vuefilemanager/_mixins";
-
-    .options {
-        position: fixed;
-        padding-bottom: 25px;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 99;
-        overflow: hidden;
-        background: white;
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
-
-        &.showed {
-            display: block;
-        }
-    }

    // Transition
    .context-menu-enter-active,
@@ -83,11 +68,4 @@
    .context-menu-leave-active {
        position: fixed;
    }
-
-    .dark {
-
-        .options {
-            background: $dark_mode_foreground;
-        }
-    }
 </style>
@@ -2,10 +2,11 @@
    <MenuMobile name="user-navigation">

        <!--User avatar-->
-        <UserHeadline v-if="!clickedSubmenu" class="user-info" />
+        <UserHeadline v-if="!clickedSubmenu" class="p-5 pb-3" />

+        <!--User estimate-->
 		<div v-if="config.subscriptionType === 'metered' && user && !clickedSubmenu" class="block px-5 pt-2">
-			<div class="bg-light-background px-3 py-1.5 rounded-lg">
+			<div class="dark:bg-4x-dark-foreground bg-light-background px-3 py-1.5 rounded-lg">
 				<span class="text-sm font-semibold">
 					{{ $t('Your current estimated usage:') }}
 				</span>
@@ -16,9 +17,11 @@
 		</div>

        <!--Go back button-->
-        <div v-if="clickedSubmenu" @click.stop="showSubmenu(undefined)" class="go-back">
-            <chevron-left-icon size="19" class="text-theme" />
-            <span class="title text-theme">{{ backTitle }}</span>
+        <div v-if="clickedSubmenu" @click.stop="showSubmenu(undefined)" class="flex items-center p-5 pb-4">
+            <chevron-left-icon size="19" class="vue-feather text-theme mr-2 -ml-1" />
+            <span class="text-theme font-bold text-sm">
+				{{ backTitle }}
+			</span>
        </div>

        <!--Menu links-->
@@ -127,29 +130,3 @@
        }
    }
 </script>
-
-<style scoped lang="scss">
-    @import "resources/sass/vuefilemanager/_variables";
-    @import "resources/sass/vuefilemanager/_mixins";
-
-    .user-info {
-        padding: 20px 20px 10px;
-    }
-
-    .go-back {
-        display: flex;
-        align-items: center;
-        padding: 30px 20px 10px;
-        cursor: pointer;
-
-        .title {
-            @include font-size(14);
-            font-weight: 700;
-            margin-left: 10px;
-        }
-
-        polyline {
-            color: inherit;
-        }
-    }
-</style>
@@ -1,6 +1,6 @@
 <template>
-    <div class="actions flex items-center space-x-4 px-6 py-4 pb-6">
-        <slot></slot>
+    <div class="md:relative absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6">
+        <slot />
    </div>
 </template>

@@ -9,21 +9,3 @@
        name: 'PopupActions',
    }
 </script>
-
-<style lang="scss" scoped>
-
-    @media only screen and (max-width: 690px) {
-        .actions {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-        }
-    }
-
-    @media only screen and (max-width: 320px) {
-        .actions {
-            position: unset;
-        }
-    }
-</style>
@@ -1,7 +1,7 @@
 <template>
    <div
 		:class="type"
-		class="md:relative md:top-0 md:bottom-0 absolute top-14 bottom-24 left-0 right-0 h-auto overflow-y-auto overflow-x-auto px-6"
+		class="md:relative md:top-0 md:bottom-0 absolute top-16 bottom-24 left-0 right-0 h-auto overflow-y-auto overflow-x-auto px-6"
 	>
        <slot />
    </div>