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

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

@ -1,9 +1,10 @@
<template>
<div
: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'"
>
<div class="w-full lg:w-auto flex overflow-x-scroll large-overflow-unset" :class="filtered.length ? 'h-12 lg:h-auto' : ''">
<div class="tags-group group items-center" style="display:contents;" v-for="(filter, index) in filtered" :index="index">
<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 }}
@ -26,12 +27,13 @@
<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>
</div>
</div>
<div class="relative w-full h-full flex">
<input
v-if="!show_date"
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'"
:placeholder="dynamicPlaceholder"
:ref="'input-search-field-' + _uid"
@ -47,7 +49,7 @@
@on-open="onInputFocus"
@blur="onBlur"
: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'"
:placeholder="dynamicPlaceholder"
:ref="'input-search-date-field-' + _uid"
@ -65,7 +67,7 @@
search
</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>
</button>