From 5aa72fc610b27829df6c31e68c25f6a3cceffcab Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 2 Sep 2022 21:01:56 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=82=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SelectGenreDialog/SelectGenreDialog.vue   | 54 ++++++++-----------
 client/components/share/Dialog.vue            |  2 +-
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/client/components/Search/SelectGenreDialog/SelectGenreDialog.vue b/client/components/Search/SelectGenreDialog/SelectGenreDialog.vue
index 476e291..2740e3e 100644
--- a/client/components/Search/SelectGenreDialog/SelectGenreDialog.vue
+++ b/client/components/Search/SelectGenreDialog/SelectGenreDialog.vue
@@ -8,28 +8,26 @@
             </div>
         </template>
 
-        <div ref="box" class="col column" style="width: 350px">
-            <div class="col fit tree">
-                <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 />
-                </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 ref="box" class="column overflow-auto no-wrap" style="width: 350px; padding: 0px 10px 10px 10px;">
+            <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 />
             </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>
 
         <template #footer>
@@ -91,8 +89,8 @@ class GenreSelectDialog {
     }
 
     async init() {
-        await this.$refs.dialog.waitShown();
-        this.$refs.box.style.height = `${document.body.clientHeight - 160}px`;
+        //await this.$refs.dialog.waitShown();
+        //this.$refs.box.style.height = `${document.body.clientHeight - 160}px`;
     }
 
     get nodes() {
@@ -164,14 +162,8 @@ export default vueComponent(GenreSelectDialog);
 
 <style scoped>
 .top-panel {
-    height: 50px;
-    border-bottom: 1px solid gray;
-    padding: 0 10px 0 12px;
-}
-
-.tree {
-    padding: 0px 10px 10px 10px;
-    overflow: auto;
+    border-radius: 10px;
+    padding: 5px;
 }
 
 .checkbox-tick-all {
diff --git a/client/components/share/Dialog.vue b/client/components/share/Dialog.vue
index 7a93bac..31bf71e 100644
--- a/client/components/share/Dialog.vue
+++ b/client/components/share/Dialog.vue
@@ -12,7 +12,7 @@
                 </div>
             </div>
 
-            <div class="col q-mx-md">
+            <div class="col column q-mx-md">
                 <slot></slot>
             </div>