From 1344166fa4f6dc28ac657a490c70bdd28635a303 Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Mon, 18 Dec 2023 15:14:30 +0300
Subject: [PATCH] pages tree fix

---
 .../form-field-relation.component.scss        | 199 -----------------
 src/assets/css/_forms.scss                    | 203 ++++++++++++++++-
 src/vniigaz-v2/css/_admin.scss                |   4 +-
 src/vniigaz-v2/css/_basics.scss               | 207 +++++++++++++++++-
 src/vniigaz-v2/css/_slider.scss               |   3 +-
 5 files changed, 413 insertions(+), 203 deletions(-)

diff --git a/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss b/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss
index b9931de..e69de29 100644
--- a/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss
+++ b/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss
@@ -1,199 +0,0 @@
-.combobox {
-  position: relative;
-  font-family: "PT Sans";
-  border: solid 1px var(--second-dis);
-  border-radius: 12px;
-  font-size: 20px;
-  color: var(--second-act);
-  padding: 8px 12px 8px 16px;
-  background: no-repeat left 16px center / 173px 19px url('~src/assets/images/icons/placeholder.svg');
-
-  &:hover{
-    border-color: var(--second);
-    outline: none;
-  }
-  &.active {
-    border-color: var(--prime);
-    outline: none;
-    
-  }
-  &:disabled{
-    border-color: #EDEDED;
-    outline: none;
-  }
-
-  .toggle {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 100%;
-    height: 24px;
-    font-size: 20px;
-    box-sizing: border-box;
-    cursor: pointer;
-    .caption {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      background-color: #ffffff;
-      p {
-        padding: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        &.faded {
-          font-size: 0.875rem;
-          color: #7f7f7f;
-        }
-      }
-    }
-    .filter {
-      display: none;
-      width: 100%;
-      input {
-        width: 100%;
-        padding: 8px 0;
-        border: 0;
-      }
-    }
-
-
-
-    &:after {
-      display: block;
-      width: 24px;
-      height: 20px;
-      margin-left: auto;
-      background: url('~src/assets/images/icons/arrow_drop_down_grey_24dp.svg') 50% 50% no-repeat;
-      content: "";
-      transition: transform 0.2s;
-    }
-    
-    &:hover:after {
-      background: url('~src/assets/images/icons/arrow_drop_down_dark_24dp.svg') 50% 50% no-repeat;
-    }   
-
-  }
-
-  &.active .toggle:after {
-    background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat;
-  }
-
-  .dropdown {
-    display: none;
-    position: absolute;
-    top: calc(100% + 1px);
-    left: -1px;
-    width: calc(100% + 2px);
-    margin-bottom: 50px;
-    background-color: #ffffff;
-    border: #dfdfdf solid 1px;
-    border-radius: 4px;
-    box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
-    overflow: hidden;
-    z-index: 100;
-
-    ul {
-      padding: 0;
-      margin: 0;
-      max-height: 280px;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-      .empty {
-        padding: 10px 16px;
-        background-color: #f7f7f7;
-        color: #7f7f7f;
-        .add {
-          display: block;
-          color: #2c86cd;
-          cursor: pointer;
-        }
-      }
-
-      li {
-        .title {
-          padding: 10px 16px;
-          border-bottom: #dfdfdf solid 1px;
-          cursor: pointer;
-          p {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            margin: 0;
-            padding: 0;
-            &.faded {
-              font-size: 0.875rem;
-              color: #7f7f7f;
-            }
-          }
-          &:hover {
-            background-color: #f7f7f7;
-          }
-          &.selected {
-            background-color: #e3eff9;
-          }
-        }
-      }
-    }
-  }
-
-  &.active {
-    .toggle {
-      .caption {
-        display: none;
-      }
-      .filter {
-        display: block;
-      }
-      &::after {
-        transform: rotateZ(180deg);
-      }
-    }
-    .dropdown {
-      display: block;
-    }
-  }
-}
-
-
-.values {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-
-  .item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 4px 8px 4px 12px;
-    margin: 8px 8px 0 0;
-    background-color: #E3EFF9;
-    border-radius: 16px;
-
-    .name {
-      padding-right: 8px;
-      font-size: 0.875rem;
-      line-height: 20px;
-
-      p {
-        margin: 0;
-      }
-
-      .faded {
-        color: #7f7f7f;
-
-      }
-    }
-
-    .remove {
-      width: 16px;
-      height: 16px;
-      padding: 0;
-      margin: auto;
-      border: none;
-      //background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
-      cursor: pointer;
-    }
-  }
-}
diff --git a/src/assets/css/_forms.scss b/src/assets/css/_forms.scss
index 9d03d6e..0460926 100644
--- a/src/assets/css/_forms.scss
+++ b/src/assets/css/_forms.scss
@@ -376,4 +376,205 @@ auth-page, auth-modal{
     }
   }
   
-}
\ No newline at end of file
+}
+
+
+.combobox {
+  position: relative;
+  font-family: "PT Sans";
+  border: solid 1px var(--second-dis);
+  border-radius: 12px;
+  font-size: 20px;
+  color: var(--second-act);
+  padding: 8px 12px 8px 16px;
+  background: no-repeat left 16px center / 173px 19px url('~src/assets/images/icons/placeholder.svg');
+
+  &:hover{
+    border-color: var(--second);
+    outline: none;
+  }
+  &.active {
+    border-color: var(--prime);
+    outline: none;
+    
+  }
+  &:disabled{
+    border-color: #EDEDED;
+    outline: none;
+  }
+
+  .toggle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 24px;
+    font-size: 20px;
+    box-sizing: border-box;
+    cursor: pointer;
+    .caption {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      background-color: #ffffff;
+      p {
+        padding: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &.faded {
+          font-size: 0.875rem;
+          color: #7f7f7f;
+        }
+      }
+    }
+    .filter {
+      display: none;
+      width: 100%;
+      input {
+        width: 100%;
+        padding: 8px 0;
+        border: 0;
+      }
+    }
+
+
+
+    &:after {
+      display: block;
+      width: 24px;
+      height: 20px;
+      margin-left: auto;
+      background: url('~src/assets/images/icons/arrow_drop_down_grey_24dp.svg') 50% 50% no-repeat;
+      content: "";
+      transition: transform 0.2s;
+    }
+    
+    &:hover:after {
+      background: url('~src/assets/images/icons/arrow_drop_down_dark_24dp.svg') 50% 50% no-repeat;
+    }   
+
+  }
+
+  &.active .toggle:after {
+    background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat;
+  }
+
+  .dropdown {
+    display: none;
+    position: absolute;
+    top: calc(100% + 1px);
+    left: -1px;
+    width: calc(100% + 2px);
+    margin-bottom: 50px;
+    background-color: #ffffff;
+    border: #dfdfdf solid 1px;
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
+    overflow: hidden;
+    z-index: 100;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      max-height: 280px;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      .empty {
+        padding: 10px 16px;
+        background-color: #f7f7f7;
+        color: #7f7f7f;
+        .add {
+          display: block;
+          color: #2c86cd;
+          cursor: pointer;
+        }
+      }
+
+      li {
+        .title {
+          padding: 10px 16px;
+          border-bottom: #dfdfdf solid 1px;
+          cursor: pointer;
+          p {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: 0;
+            padding: 0;
+            &.faded {
+              font-size: 0.875rem;
+              color: #7f7f7f;
+            }
+          }
+          &:hover {
+            background-color: #f7f7f7;
+          }
+          &.selected {
+            background-color: #e3eff9;
+          }
+        }
+      }
+    }
+  }
+
+  &.active {
+    .toggle {
+      .caption {
+        display: none;
+      }
+      .filter {
+        display: block;
+      }
+      &::after {
+        transform: rotateZ(180deg);
+      }
+    }
+    .dropdown {
+      display: block;
+    }
+  }
+}
+
+
+.values {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 8px 4px 12px;
+    margin: 8px 8px 0 0;
+    background-color: #E3EFF9;
+    border-radius: 16px;
+
+    .name {
+      padding-right: 8px;
+      font-size: 0.875rem;
+      line-height: 20px;
+
+      p {
+        margin: 0;
+      }
+
+      .faded {
+        color: #7f7f7f;
+
+      }
+    }
+
+    .remove {
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      margin: auto;
+      border: none;
+      //background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/vniigaz-v2/css/_admin.scss b/src/vniigaz-v2/css/_admin.scss
index 8b09492..64f4caa 100644
--- a/src/vniigaz-v2/css/_admin.scss
+++ b/src/vniigaz-v2/css/_admin.scss
@@ -104,10 +104,11 @@ pages-tree{
       flex-direction: row;
       align-items: center;
       border-bottom: solid var(--second-dis) 1px;
-      height: 64px;
+
       .left {
         cursor: pointer;
         width: 24px;
+        flex-shrink: 0;
       }
       .mid {
         flex-grow: 1;
@@ -140,6 +141,7 @@ pages-tree{
             display: flex;
             flex-direction: column;
             height: 100%;
+            padding: 20px 0;
               a {
                 color: var(--dadk);
                 &:nth-child(2){
diff --git a/src/vniigaz-v2/css/_basics.scss b/src/vniigaz-v2/css/_basics.scss
index aa0975e..2ade346 100644
--- a/src/vniigaz-v2/css/_basics.scss
+++ b/src/vniigaz-v2/css/_basics.scss
@@ -468,4 +468,209 @@ modal{
       border-top: 1px solid var(--second-dis);
     }
   }
-}
\ No newline at end of file
+}
+
+
+.combobox {
+  position: relative;
+  font-family: "PT Sans";
+  border: solid 1px var(--second-dis);
+  border-radius: 12px;
+  font-size: 20px;
+  color: var(--second-act);
+  padding: 8px 12px 8px 16px;
+  background: no-repeat left 16px center / 140px 16px url('~src/assets/images/icons/placeholder.svg');
+
+  &:hover{
+    border-color: var(--second);
+    outline: none;
+  }
+  &.active {
+    border-color: var(--prime);
+    outline: none;
+    
+  }
+  &:disabled{
+    border-color: #EDEDED;
+    outline: none;
+  }
+
+  .toggle {
+    font-family: PT Sans;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 24px;
+    font-size: 20px;
+    box-sizing: border-box;
+    cursor: pointer;
+    .caption {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      background-color: #ffffff;
+      p {
+        padding: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &.faded {
+          color: #7f7f7f;
+        }
+      }
+    }
+    .filter {
+      display: none;
+      width: 100%;
+      input {
+        width: 100%;
+        padding: 8px 0;
+        border: 0;
+      }
+    }
+
+
+
+    &:after {
+      display: block;
+      width: 24px;
+      height: 20px;
+      margin-left: auto;
+      background: url('~src/assets/images/icons/arrow_drop_down_grey_24dp.svg') 50% 50% no-repeat;
+      content: "";
+      transition: transform 0.2s;
+    }
+    
+    &:hover:after {
+      background: url('~src/assets/images/icons/arrow_drop_down_dark_24dp.svg') 50% 50% no-repeat;
+    }   
+
+  }
+
+  &.active .toggle:after {
+    background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat;
+  }
+
+  .dropdown {
+    display: none;
+    position: absolute;
+    top: calc(100% + 1px);
+    left: -1px;
+    width: calc(100% + 2px);
+    margin-bottom: 50px;
+    background-color: #ffffff;
+    border: #dfdfdf solid 1px;
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
+    overflow: hidden;
+    z-index: 100;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      max-height: 280px;
+      overflow: auto;
+      -webkit-overflow-scrolling: touch;
+      .empty {
+        padding: 10px 16px;
+        background-color: #f7f7f7;
+        color: #7f7f7f;
+        .add {
+          display: block;
+          color: #2c86cd;
+          cursor: pointer;
+        }
+      }
+
+      li {
+        .title {
+          padding: 8px 16px;
+          border-bottom: #dfdfdf solid 1px;
+          margin: 0 !important;
+          cursor: pointer;
+          p {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: 0;
+            padding: 0;
+            font-size: 16px;
+            &.faded {
+              color: #7f7f7f;
+            }
+          }
+          &:hover {
+            background-color: #f7f7f7;
+          }
+          &.selected {
+            background-color: #e3eff9;
+          }
+        }
+      }
+    }
+  }
+
+  &.active {
+    .toggle {
+      .caption {
+        display: none;
+      }
+      .filter {
+        display: block;
+      }
+      &::after {
+        transform: rotateZ(180deg);
+      }
+    }
+    .dropdown {
+      display: block;
+    }
+  }
+}
+
+
+.values {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 8px 4px 12px;
+    margin: 8px 8px 0 0;
+    background-color: #E3EFF9;
+    border-radius: 16px;
+
+    .name {
+      padding-right: 8px;
+      line-height: 20px;
+
+      p {
+        margin: 0;
+      }
+
+      .faded {
+        color: #7f7f7f;
+
+      }
+    }
+
+    .remove {
+      width: 16px;
+      height: 16px;
+      padding: 0;
+      margin: auto;
+      border: none;
+      //background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
+      cursor: pointer;
+    }
+  }
+}
diff --git a/src/vniigaz-v2/css/_slider.scss b/src/vniigaz-v2/css/_slider.scss
index f47197d..1e22749 100644
--- a/src/vniigaz-v2/css/_slider.scss
+++ b/src/vniigaz-v2/css/_slider.scss
@@ -149,9 +149,10 @@
             font-weight: 400;
             line-height: 24px;
           }
-          input, .combobox{
+          input{
             height: 40px;
           }
+
         }
       }
     }