deadcxap/inpx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшение разметки для мобильных устройств

Browse Source
This commit is contained in:
Book Pauk
2023-01-13 19:21:38 +07:00
parent 302dd8eeb4
commit ab57dbfbe7
1 changed files with 244 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
client/components/Search/Search.vue
View File

@@ -1,8 +1,11 @@
<template>
<div class="root column fit" style="position: relative">
<div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
<div ref="toolPanel" class="tool-panel q-pb-xs column bg-cyan-2" style="position: sticky; top: 0; z-index: 10;">
<div class="header q-mx-md q-mb-xs q-mt-sm row items-center">
<!-- Tool Panel begin -->
<div ref="toolPanel" class="tool-panel q-pb-xs row bg-cyan-2" style="position: sticky; top: 0; z-index: 10;">
<div class="column col">
<div class="header q-mb-xs q-ml-sm q-mt-sm row items-center">
<div class="row no-wrap items-center">
<a :href="newSearchLink" style="height: 33px; width: 34px">
<img src="./assets/logo.png" />
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
@@ -19,6 +22,7 @@
no-caps
rounded
/>
</div>
<div class="row items-center q-ml-sm" style="font-size: 150%;">
<div class="q-mr-xs">
@@ -27,38 +31,20 @@
<div class="clickable" @click.stop.prevent="showCollectionInfo">
{{ collection }}
</div>
</div>
<div class="col"></div>
<DivBtn class="q-ml-md text-white bg-secondary" :size="30" :icon-size="24" icon="la la-question" round @click.stop.prevent="showSearchHelp">
<DivBtn class="q-ml-sm text-grey-5 bg-yellow-1" :size="28" :icon-size="24" icon="la la-question" round @click.stop.prevent="showSearchHelp">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Памятка
</q-tooltip>
</template>
</DivBtn>
<DivBtn class="q-ml-sm text-white bg-secondary" :size="30" :icon-size="24" :imt="1" icon="la la-cog" round @click.stop.prevent="settingsDialogVisible = true">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Настройки
</q-tooltip>
</template>
</DivBtn>
<DivBtn v-if="!config.freeAccess" class="q-ml-sm text-white bg-secondary" :size="30" :icon-size="24" :imt="1" icon="la la-sign-out-alt" round @click.stop.prevent="logout">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Выход
</q-tooltip>
</template>
</DivBtn>
</div>
<div v-show="!isExtendedSearch" class="row q-mx-md q-mb-xs items-center">
</div>
<div v-show="!isExtendedSearch" class="row q-mx-sm q-mb-xs items-center" style="max-width: 1024px">
<q-input
ref="authorInput" v-model="search.author" :maxlength="5000" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor('author')" style="width: 200px;" label="Автор" stack-label outlined dense clearable
class="q-mt-xs col-3" :bg-color="inputBgColor('author')" style="min-width: 150px" label="Автор" stack-label outlined dense clearable
>
<q-tooltip v-if="search.author" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
{{ search.author }}
@@ -67,7 +53,7 @@
<div class="q-mx-xs" />
<q-input
v-model="search.series" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor('series')" style="width: 200px;" label="Серия" stack-label outlined dense clearable
class="q-mt-xs col-3" :bg-color="inputBgColor('series')" style="min-width: 150px" label="Серия" stack-label outlined dense clearable
>
<q-tooltip v-if="search.series" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
{{ search.series }}
@@ -76,7 +62,7 @@
<div class="q-mx-xs" />
<q-input
v-model="search.title" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor('title')" style="width: 200px;" label="Название" stack-label outlined dense clearable
class="q-mt-xs col-3" :bg-color="inputBgColor('title')" style="min-width: 150px;" label="Название" stack-label outlined dense clearable
>
<q-tooltip v-if="search.title" :delay="500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
{{ search.title }}
@@ -85,7 +71,7 @@
<div class="q-mx-xs" />
<q-input
v-model="search.lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 90px;" label="Язык" stack-label outlined dense clearable readonly
class="q-mt-xs col-1" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 90px;" label="Язык" stack-label outlined dense clearable readonly
@click.stop.prevent="selectLang"
>
<template v-if="search.lang" #append>
@@ -109,10 +95,10 @@
</template>
</DivBtn>
</div>
<div v-show="!isExtendedSearch && extendedParams" class="row q-mx-md q-mb-xs items-center">
<div v-show="!isExtendedSearch && extendedParams" class="row q-mx-sm q-mb-xs items-center" style="max-width: 1024px">
<q-input
v-model="genreNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
class="q-mt-xs col-3" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 150px;" label="Жанр" stack-label outlined dense clearable readonly
@click.stop.prevent="selectGenre"
>
<template v-if="genreNames" #append>
@@ -127,11 +113,11 @@
<div class="q-mx-xs" />
<q-select
v-model="searchDate"
class="q-mt-xs"
class="q-mt-xs col-3"
:options="searchDateOptions"
dropdown-icon="la la-angle-down la-sm"
:bg-color="inputBgColor()"
style="width: 200px;"
style="min-width: 150px;"
label="Дата поступления" stack-label
outlined dense emit-value map-options clearable
>
@@ -158,7 +144,7 @@
<div class="q-mx-xs" />
<q-input
v-model="librateNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 90px;" label="Оценка" stack-label outlined dense clearable readonly
class="q-mt-xs col-1" :bg-color="inputBgColor()" input-style="cursor: pointer" style="min-width: 90px;" label="Оценка" stack-label outlined dense clearable readonly
@click.stop.prevent="selectLibRate"
>
<template v-if="librateNames" #append>
@@ -176,10 +162,10 @@
<DivBtn
v-show="!isExtendedSearch && (extendedParams || !extendedParamsMessage)"
class="text-grey-6" :size="16" :icon-size="16"
class="text-grey-6" :size="16" :icon-size="14"
:icon="(extendedParams ? 'la la-angle-double-up' : 'la la-angle-double-down')"
@click.stop.prevent="extendedParams = !extendedParams"
no-shadow
@click.stop.prevent="extendedParams = !extendedParams"
>
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
@@ -266,6 +252,26 @@
</DivBtn>
</div>
</div>
<div class="column q-mx-sm">
<div style="height: 3px" />
<DivBtn v-if="!config.freeAccess" class="q-mt-sm text-white bg-secondary" :size="28" :icon-size="24" :imt="1" icon="la la-sign-out-alt" round @click.stop.prevent="logout">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Выход
</q-tooltip>
</template>
</DivBtn>
<DivBtn class="q-mt-sm text-white bg-secondary" :size="28" :icon-size="24" :imt="1" icon="la la-cog" round @click.stop.prevent="settingsDialogVisible = true">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Настройки
</q-tooltip>
</template>
</DivBtn>
</div>
</div>
<!-- Tool Panel end -->
<div class="row items-center q-ml-lg q-mt-sm">
<div style="width: 400px;">