fix: 02 responsive tool bar

This commit is contained in:
puriphatt 2024-07-16 02:52:53 +00:00
parent 2997c7ff59
commit 7a6e0742d3

View file

@ -718,9 +718,8 @@ watch(inputSearch, async () => await fetchUserList());
for="input-search" for="input-search"
outlined outlined
dense dense
style="width: 250px"
:label="$t('search')" :label="$t('search')"
class="q-mr-md" class="q-mr-md col-12 col-md-3"
:bg-color="$q.dark.isActive ? 'dark' : 'white'" :bg-color="$q.dark.isActive ? 'dark' : 'white'"
v-model="inputSearch" v-model="inputSearch"
debounce="200" debounce="200"
@ -730,14 +729,17 @@ watch(inputSearch, async () => await fetchUserList());
</template> </template>
</q-input> </q-input>
<div class="row"> <div
class="row col-12 col-md-4"
:class="{ 'q-pt-xs': $q.screen.lt.md }"
>
<q-select <q-select
v-model="statusFilter" v-model="statusFilter"
outlined outlined
dense dense
option-value="value" option-value="value"
option-label="label" option-label="label"
class="q-pr-md" class="col"
map-options map-options
emit-value emit-value
:options="[ :options="[
@ -751,6 +753,7 @@ watch(inputSearch, async () => await fetchUserList());
v-if="!modeView" v-if="!modeView"
id="select-field" id="select-field"
for="select-field" for="select-field"
class="col q-mx-sm"
:options=" :options="
fieldSelectedOption.map((v) => ({ fieldSelectedOption.map((v) => ({
...v, ...v,
@ -772,7 +775,7 @@ watch(inputSearch, async () => await fetchUserList());
id="btn-mode" id="btn-mode"
v-model="modeView" v-model="modeView"
dense dense
class="no-shadow bordered rounded surface-1 q-ml-md" class="no-shadow bordered rounded surface-1"
:toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'" :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
size="xs" size="xs"
:options="[ :options="[