Поправки разметки

This commit is contained in:
Book Pauk
2022-09-02 21:01:56 +07:00
parent bc46142426
commit 5aa72fc610
2 changed files with 24 additions and 32 deletions

View File

@@ -8,28 +8,26 @@
</div> </div>
</template> </template>
<div ref="box" class="col column" style="width: 350px"> <div ref="box" class="column overflow-auto no-wrap" style="width: 350px; padding: 0px 10px 10px 10px;">
<div class="col fit tree"> <div class="row items-center top-panel bg-grey-3">
<div class="row items-center top-panel bg-grey-3"> <q-input ref="search" v-model="search" class="col" outlined dense bg-color="white" placeholder="Найти" clearable />
<q-input ref="search" v-model="search" class="col" outlined dense bg-color="white" placeholder="Найти" clearable />
</div>
<div v-show="nodes.length" class="checkbox-tick-all">
<q-checkbox v-model="tickAll" size="36px" label="Выбрать/снять все" @update:model-value="makeTickAll" toggle-order="ft" />
</div>
<q-tree
v-model:ticked="ticked"
v-model:expanded="expanded"
class="q-my-xs"
:nodes="nodes"
node-key="key"
tick-strategy="leaf"
selected-color="black"
:filter="search"
no-nodes-label="Жанров нет"
no-results-label="Ничего не найдено"
>
</q-tree>
</div> </div>
<div v-show="nodes.length" class="checkbox-tick-all">
<q-checkbox v-model="tickAll" size="36px" label="Выбрать/снять все" toggle-order="ft" @update:model-value="makeTickAll" />
</div>
<q-tree
v-model:ticked="ticked"
v-model:expanded="expanded"
class="q-my-xs"
:nodes="nodes"
node-key="key"
tick-strategy="leaf"
selected-color="black"
:filter="search"
no-nodes-label="Жанров нет"
no-results-label="Ничего не найдено"
>
</q-tree>
</div> </div>
<template #footer> <template #footer>
@@ -91,8 +89,8 @@ class GenreSelectDialog {
} }
async init() { async init() {
await this.$refs.dialog.waitShown(); //await this.$refs.dialog.waitShown();
this.$refs.box.style.height = `${document.body.clientHeight - 160}px`; //this.$refs.box.style.height = `${document.body.clientHeight - 160}px`;
} }
get nodes() { get nodes() {
@@ -164,14 +162,8 @@ export default vueComponent(GenreSelectDialog);
<style scoped> <style scoped>
.top-panel { .top-panel {
height: 50px; border-radius: 10px;
border-bottom: 1px solid gray; padding: 5px;
padding: 0 10px 0 12px;
}
.tree {
padding: 0px 10px 10px 10px;
overflow: auto;
} }
.checkbox-tick-all { .checkbox-tick-all {

View File

@@ -12,7 +12,7 @@
</div> </div>
</div> </div>
<div class="col q-mx-md"> <div class="col column q-mx-md">
<slot></slot> <slot></slot>
</div> </div>