shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive control for search bar

Browse Source
This commit is contained in:
Burak Civan 2022-10-07 10:47:41 +03:00
parent 4fe0051e99
commit c402dfe5e7
2 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/css/app.css vendored
View File

@ -49922,6 +49922,10 @@ body{
right: 6rem; right: 6rem;
} }
.lg\:top-2{
top: 0.5rem;
}
.lg\:col-span-5{ .lg\:col-span-5{
grid-column: span 5 / span 5; grid-column: span 5 / span 5;
} }
@ -49998,6 +50002,14 @@ body{
height: 1rem; height: 1rem;
} }
.lg\:h-12{
height: 3rem;
}
.lg\:h-auto{
height: auto;
}
.lg\:w-1\/2{ .lg\:w-1\/2{
width: 50%; width: 50%;
} }
@ -50086,6 +50098,10 @@ body{
width: 75%; width: 75%;
} }
.lg\:w-auto{
width: auto;
}
.lg\:max-w-7xl{ .lg\:max-w-7xl{
max-width: 80rem; max-width: 80rem;
} }

40
resources/assets/js/components/AkauntingSearch.vue
View File

@ -1,37 +1,39 @@
<template> <template>
<div <div
:id="'search-field-' + _uid" :id="'search-field-' + _uid"
class="h-12 my-5 searh-field flex border-b transition-all js-search" class="lg:h-12 my-5 searh-field flex flex-col lg:flex-row border-b transition-all js-search"
:class="input_focus ? 'border-gray-500' : 'border-gray-300'" :class="input_focus ? 'border-gray-500' : 'border-gray-300'"
> >
<div class="tags-group group items-center" style="display:contents;" v-for="(filter, index) in filtered" :index="index"> <div class="w-full lg:w-auto flex overflow-x-scroll large-overflow-unset" :class="filtered.length ? 'h-12 lg:h-auto' : ''">
<span v-if="filter.option" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-option"> <div class="tags-group group items-center" style="display:contents;" v-for="(filter, index) in filtered" :index="index">
{{ filter.option }} <span v-if="filter.option" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-option">
{{ filter.option }}
<i v-if="!filter.operator && !filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close" style="font-size: 16px;" @click="onFilterDelete(index)"></i> <i v-if="!filter.operator && !filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close" style="font-size: 16px;" @click="onFilterDelete(index)"></i>
</span> </span>
<span v-if="filter.operator" class="flex items-center bg-purple-lighter text-black border-2 border-body border-l border-r border-t-0 border-b-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-operator" style="margin-left:0; margin-right:0;"> <span v-if="filter.operator" class="flex items-center bg-purple-lighter text-black border-2 border-body border-l border-r border-t-0 border-b-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-operator" style="margin-left:0; margin-right:0;">
<span v-if="filter.operator == '='" class="material-icons text-2xl">drag_handle</span> <span v-if="filter.operator == '='" class="material-icons text-2xl">drag_handle</span>
<span v-else-if="filter.operator == '><'" class="material-icons text-2xl transform rotate-90">height</span> <span v-else-if="filter.operator == '><'" class="material-icons text-2xl transform rotate-90">height</span>
<img v-else :src="not_equal_image" class="w-5 h-5 object-cover block" /> <img v-else :src="not_equal_image" class="w-5 h-5 object-cover block" />
<i v-if="!filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i> <i v-if="!filter.value" class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
</span> </span>
<span v-if="filter.value" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-value"> <span v-if="filter.value" class="flex items-center bg-purple-lighter text-black border-0 mt-3 px-3 py-4 text-sm cursor-pointer el-tag el-tag--small el-tag-value">
{{ filter.value }} {{ filter.value }}
<i class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i> <i class="mt-1 ltr:-right-2 rtl:left-0 rtl:right-0 el-tag__close el-icon-close " style="font-size: 16px;" @click="onFilterDelete(index)"></i>
</span> </span>
</div>
</div> </div>
<div class="relative w-full h-full flex"> <div class="relative w-full h-full flex">
<input <input
v-if="!show_date" v-if="!show_date"
type="text" type="text"
class="w-full bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100" class="w-full h-12 lg:h-auto bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100"
:class="!show_icon ? 'px-4' : 'px-10'" :class="!show_icon ? 'px-4' : 'px-10'"
:placeholder="dynamicPlaceholder" :placeholder="dynamicPlaceholder"
:ref="'input-search-field-' + _uid" :ref="'input-search-field-' + _uid"
@ -47,7 +49,7 @@
@on-open="onInputFocus" @on-open="onInputFocus"
@blur="onBlur" @blur="onBlur"
:config="dateConfig" :config="dateConfig"
class="w-full bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100 datepicker" class="w-full h-12 lg:h-auto bg-transparent text-black text-sm border-0 pb-0 focus:outline-none focus:ring-transparent focus:border-purple-100 datepicker"
:class="!show_icon ? 'px-4' : 'px-10'" :class="!show_icon ? 'px-4' : 'px-10'"
:placeholder="dynamicPlaceholder" :placeholder="dynamicPlaceholder"
:ref="'input-search-date-field-' + _uid" :ref="'input-search-date-field-' + _uid"
@ -65,7 +67,7 @@
search search
</span> </span>
<button type="button" class="absolute ltr:right-0 rtl:left-0 top-2 clear" v-if="show_close_icon" @click="onSearchAndFilterClear"> <button type="button" class="absolute ltr:right-0 rtl:left-0 top-4 lg:top-2 clear" v-if="show_close_icon" @click="onSearchAndFilterClear">
<span class="material-icons text-sm">close</span> <span class="material-icons text-sm">close</span>
</button> </button>