Skip to content

Commit 8e3b23a

Browse files
osmansufyosmansufy
authored
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
1 parent 13e32f6 commit 8e3b23a

File tree

8 files changed

+339
-110
lines changed

8 files changed

+339
-110
lines changed

‎assets/src/less/admin.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@
157157
cursor: context-menu;
158158
top: 80px;
159159
right: -10px;
160-
z-index: 1;
160+
z-index: 99999;
161161
background-color: #fff;
162162
padding: 20px;
163163
border-radius: 3px;

‎assets/src/less/global-admin.less

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -255,12 +255,23 @@
255255

256256
@media only screen and (max-width: 375px) {
257257
.dokan-admin-notices {
258+
.notice-content{
259+
flex-direction: column;
260+
align-items: start !important;
261+
gap: 1rem;
262+
}
258263
.dokan-notice-slides {
259264
min-height: 245px;
260265

261266
.dokan-admin-notice {
267+
align-items: start;
268+
padding: 10px 20px;
262269
.dokan-message {
263-
margin: 0 0 0 23px;
270+
div{
271+
max-height: 50px;
272+
overflow: auto;
273+
}
274+
margin: 0;
264275
}
265276
}
266277
}
@@ -276,21 +287,33 @@
276287

277288
@media screen and (min-width: 376px) and (max-width: 576px) {
278289
.dokan-admin-notices {
290+
291+
.notice-content{
292+
flex-direction: column;
293+
align-items: start !important;
294+
gap: 1rem;
295+
height: 195px;
296+
}
279297
.dokan-notice-slides {
280298
min-height: 195px;
281299

282300
.dokan-admin-notice {
301+
align-items: start;
302+
padding: 10px 20px;
283303
.dokan-message {
284-
margin: 0 0 0 23px;
304+
div{
305+
max-height: 50px;
306+
overflow: scroll;
307+
}
308+
margin: 0;
285309
}
286310
}
287311
}
288312

289313
.slide-notice {
290-
bottom: 0;
291-
right: 10px;
314+
right: 3rem;
292315
padding: 3px 8px;
293-
top: unset;
316+
top: 2rem;
294317
}
295318
}
296319
}

‎includes/Admin/Settings.php

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

‎src/admin/components/AdminNotice.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
<h3 v-if="notice.title">{{ notice.title }}</h3>
1414
<div v-if="notice.description" v-html="notice.description"></div>
1515
<template v-if="notice.actions && notice.actions.length">
16+
<div>
1617
<template v-for="action in notice.actions">
1718
<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>
1819
<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>
1920
</template>
21+
</div>
2022
</template>
2123
</div>
2224

‎src/admin/components/Settings/MobileSettingsList.vue

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div>
3+
<div
4+
v-if="isOpen"
5+
class="fixed inset-0 bg-black bg-opacity-50 z-[999999]"
6+
@click="$emit('close')"
7+
></div>
8+
9+
<!-- Drawer -->
10+
<div
11+
:class="[
12+
'fixed top-0 left-0 h-full w-[85%] max-w-[320px] bg-white z-[1000000] transform transition-transform duration-300 ease-in-out',
13+
isOpen ? 'translate-x-0' : '-translate-x-full'
14+
]"
15+
>
16+
<!-- Drawer Header -->
17+
<div class="flex items-center justify-between px-4 md:pt-4 pt-8 border-b mt-8 mb-4">
18+
<h2 class="text-lg font-bold m-0 p-0">{{ __('Settings Menu', 'dokan-lite') }}</h2>
19+
<button
20+
class="bg-none border-0 p-1"
21+
@click="$emit('close')"
22+
>
23+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
24+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
25+
</svg>
26+
</button>
27+
</div>
28+
29+
<!-- Settings List -->
30+
<div class="overflow-y-auto h-full pb-4 box-border">
31+
<template v-for="section in sections">
32+
<div
33+
:key="section.id"
34+
:class="[
35+
'flex items-center px-4 py-2 cursor-pointer border-b border-gray-100',
36+
{ 'bg-blue-50 border-l-4 border-l-blue-500': currentTab === section.id }
37+
]"
38+
@click="handleTabChange(section)"
39+
>
40+
<img
41+
:src="section.icon_url"
42+
:alt="section.settings_title"
43+
class="w-5 h-5 mr-3"
44+
/>
45+
<div class="flex-1">
46+
<h3 class="text-sm font-semibold">{{ section.title }}</h3>
47+
<p class="text-xs text-gray-600">{{ section.description }}</p>
48+
</div>
49+
</div>
50+
</template>
51+
</div>
52+
</div>
53+
</div>
54+
</template>
55+
56+
<script>
57+
58+
export default {
59+
name: 'MobileSettingsDrawer',
60+
61+
props: {
62+
isOpen: {
63+
type: Boolean,
64+
required: true
65+
},
66+
sections: {
67+
type: Array,
68+
required: true
69+
},
70+
currentTab: {
71+
type: String,
72+
required: true
73+
}
74+
},
75+
76+
methods: {
77+
handleTabChange(section) {
78+
this.$emit('change-tab', section);
79+
this.$emit('close');
80+
}
81+
},
82+
}
83+
</script>

‎src/admin/components/SettingsBanner.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,12 @@ export default {
3535
background: #fff;
3636
display: flex;
3737
align-items: flex-start;
38-
38+
flex-wrap: wrap;
3939
a {
4040
box-shadow: none;
4141
background: #FF5722;
4242
color: #fff;
4343
border-color: #FF5722;
44-
4544
&:hover {
4645
background: lighten(#FF5722, 5%);
4746
}

‎src/admin/pages/ChangeLog.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ ul {
321321
}
322322
323323
.dokan-notice {
324-
background: rgba(223, 0, 0, 0.05);
324+
background: rgba(239, 234, 255, 1);
325325
margin: -15px -20px 0;
326326
padding: 15px 15px 0;
327327
}

0 commit comments

Comments
 (0)