Enhance: Admin settings page responsive (#2475)

* [add] [design] hamburger menu

* chore : dokan settings with MobileSettingsList drawer

* update: search box design

* fix: duplicate media query

* update: admin notice responsive css

* update: notice overflow scroll to auto

* update: enable menubar from tab version

* update: css of menu toggle & align icon

* update: z-index & menu btn design

* update: bg color of notice & captcha v3

* update: admin notice z-index

* update: z-index based on mobile menu open

assets/src/less/admin.less

@@ -157,7 +157,7 @@
                     cursor: context-menu;
                     top: 80px;
                     right: -10px;
-                    z-index: 1;
+                    z-index: 99999;
                     background-color: #fff;
                     padding: 20px;
                     border-radius: 3px;

assets/src/less/global-admin.less

@@ -255,12 +255,23 @@
 
     @media only screen and (max-width: 375px) {
         .dokan-admin-notices {
+            .notice-content{
+                flex-direction: column;
+                align-items: start !important;
+                gap: 1rem;
+            }
             .dokan-notice-slides {
                 min-height: 245px;
 
                 .dokan-admin-notice {
+                    align-items: start;
+                    padding: 10px 20px;
                     .dokan-message {
-                        margin: 0 0 0 23px;
+                        div{
+                            max-height: 50px;
+                            overflow: auto;
+                        }
+                        margin: 0;
                     }
                 }
             }
@@ -276,21 +287,33 @@
 
     @media screen and (min-width: 376px) and (max-width: 576px) {
         .dokan-admin-notices {
+
+            .notice-content{
+                flex-direction: column;
+                align-items: start !important;
+                gap: 1rem;
+                height: 195px;
+            }
             .dokan-notice-slides {
                 min-height: 195px;
 
                 .dokan-admin-notice {
+                    align-items: start;
+                    padding: 10px  20px;
                     .dokan-message {
-                        margin: 0 0 0 23px;
+                        div{
+                            max-height: 50px;
+                            overflow: scroll;
+                        }
+                        margin: 0;
                     }
                 }
             }
 
             .slide-notice {
-                bottom: 0;
-                right: 10px;
+                right: 3rem;
                 padding: 3px 8px;
-                top: unset;
+                top: 2rem;
             }
         }
     }

includes/Admin/Settings.php

@@ -835,7 +835,7 @@ public function get_settings_fields() {
                     'type'                 => 'social',
                     'desc'                 => sprintf(
                     /* translators: 1) Opening anchor tag, 2) Closing anchor tag, 3) Opening anchor tag, 4) Closing anchor tag */
-                        __( '%1$sreCAPTCHA%2$s credentials required to enable invisible captcha for contact forms. %3$sGet Help%4$s', 'dokan-lite' ),
+                        __( '%1$sreCAPTCHA_v3%2$s credentials required to enable invisible captcha for contact forms. %3$sGet Help%4$s', 'dokan-lite' ),
                         '<a href="https://developers.google.com/recaptcha/docs/v3" target="_blank" rel="noopener noreferrer">',
                         '</a>',
                         '<a href="https://wedevs.com/docs/dokan/settings/dokan-recaptacha-v3-integration" target="_blank" rel="noopener noreferrer">',

src/admin/components/AdminNotice.vue

@@ -13,10 +13,12 @@
                                 <h3 v-if="notice.title">{{ notice.title }}</h3>
                                 <div v-if="notice.description" v-html="notice.description"></div>
                                 <template v-if="notice.actions && notice.actions.length">
+                                    <div>
                                     <template v-for="action in notice.actions">
                                         <a v-if="action.action" class="dokan-btn" :class="[`dokan-btn-${action.type}`, action.class]" :target="action.target ? action.target : '_self'" :href="action.action">{{ action.text }}</a>
                                         <button :disabled="loading" v-else class="dokan-btn btn-dokan" :class="[`dokan-btn-${action.type}`, action.class]" @click="handleAction(action, index)">{{ loading || task_completed ? button_text : action.text }}</button>
                                     </template>
+                                    </div>
                                 </template>
                             </div>
 

src/admin/components/Settings/MobileSettingsList.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <div
+            v-if="isOpen"
+            class="fixed inset-0 bg-black bg-opacity-50 z-[999999]"
+            @click="$emit('close')"
+        ></div>
+
+        <!-- Drawer -->
+        <div
+            :class="[
+                'fixed top-0 left-0 h-full w-[85%] max-w-[320px] bg-white z-[1000000] transform transition-transform duration-300 ease-in-out',
+                isOpen ? 'translate-x-0' : '-translate-x-full'
+            ]"
+        >
+            <!-- Drawer Header -->
+            <div class="flex items-center justify-between px-4 md:pt-4 pt-8 border-b mt-8 mb-4">
+                <h2 class="text-lg font-bold m-0 p-0">{{ __('Settings Menu', 'dokan-lite') }}</h2>
+                <button
+                    class="bg-none border-0 p-1"
+                    @click="$emit('close')"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Settings List -->
+            <div class="overflow-y-auto h-full pb-4 box-border">
+                <template v-for="section in sections">
+                    <div
+                        :key="section.id"
+                        :class="[
+                            'flex items-center px-4 py-2 cursor-pointer border-b border-gray-100',
+                            { 'bg-blue-50 border-l-4 border-l-blue-500': currentTab === section.id }
+                        ]"
+                        @click="handleTabChange(section)"
+                    >
+                        <img
+                            :src="section.icon_url"
+                            :alt="section.settings_title"
+                            class="w-5 h-5 mr-3"
+                        />
+                        <div class="flex-1">
+                            <h3 class="text-sm font-semibold">{{ section.title }}</h3>
+                            <p class="text-xs text-gray-600">{{ section.description }}</p>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'MobileSettingsDrawer',
+
+    props: {
+        isOpen: {
+            type: Boolean,
+            required: true
+        },
+        sections: {
+            type: Array,
+            required: true
+        },
+        currentTab: {
+            type: String,
+            required: true
+        }
+    },
+
+    methods: {
+        handleTabChange(section) {
+            this.$emit('change-tab', section);
+            this.$emit('close');
+        }
+    },
+}
+</script>

src/admin/components/SettingsBanner.vue

@@ -35,13 +35,12 @@ export default {
         background: #fff;
         display: flex;
         align-items: flex-start;
-
+        flex-wrap: wrap;
         a {
             box-shadow: none;
             background: #FF5722;
             color: #fff;
             border-color: #FF5722;
-
             &:hover {
                 background: lighten(#FF5722, 5%);
             }

src/admin/pages/ChangeLog.vue

@@ -321,7 +321,7 @@ ul {
         }
 
         .dokan-notice {
-            background: rgba(223, 0, 0, 0.05);
+            background: rgba(239, 234, 255, 1);
             margin: -15px -20px 0;
             padding: 15px 15px 0;
         }