Skip to content

Commit

Permalink
update: search box design
Browse files Browse the repository at this point in the history
  • Loading branch information
@osmansufy
osmansufy committed Dec 12, 2024
1 parent 5319a8b commit 85187e0
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 71 deletions.
9 changes: 5 additions & 4 deletions src/admin/components/Settings/MobileSettingsList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
]"
>
<!-- Drawer Header -->
<div class="flex items-center justify-between p-4 border-b">
<div class="flex items-center justify-between p-4 border-b mt-4">
<h2 class="text-lg font-bold">{{ __('Settings Menu', 'dokan-lite') }}</h2>
<button
class="p-2 hover:bg-gray-100 rounded-full"
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">
Expand All @@ -32,7 +32,7 @@
<div
:key="section.id"
:class="[
'flex items-center p-4 cursor-pointer border-b border-gray-100',
'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)"
Expand All @@ -54,6 +54,7 @@
</template>

<script>
export default {
name: 'MobileSettingsDrawer',
Expand All @@ -77,6 +78,6 @@ export default {
this.$emit('change-tab', section);
this.$emit('close');
}
}
},
}
</script>
74 changes: 7 additions & 67 deletions src/admin/pages/Settings.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,13 @@
<div class="relative flex-1">
<!-- Search Box -->
<div class="search-section relative w-full mb-4">
<div class="search-box w-full bg-white rounded-md border border-gray-200 shadow-sm flex items-center">
<label for="dokan-admin-search" class="dashicons dashicons-search ml-3 text-gray-400"></label>
<div class="search-box w-full bg-white rounded-md border border-gray-200 flex items-center">
<label for="dokan-admin-search" class="dashicons dashicons-search "></label>
<input
type="text"
autocomplete="off"
id="dokan-admin-search"
class="w-full px-3 py-2 border-none focus:outline-none focus:ring-0 bg-transparent"
class="w-full px-3 py-2 border-none focus:outline-none focus:ring-0 bg-transparent "
:placeholder="__('Search e.g. vendor', 'dokan-lite')"
v-model="searchText"
@input="searchInSettings"
Expand Down Expand Up @@ -108,9 +109,6 @@
</div>
</template>
</div>



<!-- Mobile Settings List -->
<transition name="slide">
<MobileSettingsDrawer
Expand All @@ -137,6 +135,7 @@
</div>
</div>


<div class="metabox-holder">
<fieldset class="settings-header" v-for="section in settingSections" v-if="currentTab === section.id">
<div class="settings-content">
Expand Down Expand Up @@ -1126,8 +1125,7 @@
.dashicons {
&.dashicons-search {
font-size: 20px;
margin-right: 8px;
font-size: 1.5rem;
}
&.dashicons-no-alt {
Expand Down Expand Up @@ -1239,65 +1237,7 @@
}
}
//@media only screen and (max-width: 430px) {
// .dokan-settings-wrap {
// .nav-tab-wrapper {
//
// .nav-tab {
// padding-left: 10px !important;
//
// img {
// margin: 3px 8px 0px 4px;
// }
//
// .nav-content {
// .nav-title {
// font-size: 7px;
// }
//
// .nav-description {
// font-size: 5px !important;
// }
// }
// }
//
// .nav-tab-active {
// &:before {
// width: 2px !important;
// }
// }
// }
//
// .metabox-holder {
// width: 100%;
//
// .settings-header {
// display: block;
//
// .settings-content {
// .settings-title,
// .settings-description {
// padding-left: 0;
// }
// }
//
// .settings-document-button {
// text-align: left;
// }
// }
// }
//
// .search-box {
// .dashicons.dashicons-search {
// margin-left: 10px;
// }
//
// .dokan-admin-search-settings {
// font-size: 10px;
// }
// }
// }
//}
@media only screen and (max-width: 768px) {
.dokan-settings-wrap {
Expand Down

0 comments on commit 85187e0

Please sign in to comment.