widjet menu position fix, css update

Pages/Desktop.razor

@@ -69,18 +69,16 @@
     <div class="second-block">
         <div class="header-block header-block_second">
             <div class="header-block__text">Рабочий стол</div>
-            <div class="header-block__span" @onclick="@(() => WidgetMenuClick(".second-block__dropbox"))">
+            <div class="header-block__span" @onclick="@(() => WidgetMenuClick(".block__dropbox", "desktop_menu"))">
                 <span></span>
                 <span></span>
                 <span></span>
             </div>
         </div>
-
-        <div class="second-block__dropbox" id="desktop_menu">
-            <p class="third-block__dropbox__header__text">Выбрать действие</p>            
-            <a class="third-block__dropbox__search" style="cursor:pointer" @onclick="NewDocument">Новый документ</a>
+        <div class="block__dropbox" id="desktop_menu">
+            <p class="block__dropbox__header__text">Выбрать действие</p>            
+            <a class="block__dropbox__search" style="cursor:pointer" @onclick="NewDocument">Новый документ</a>
         </div>
-
         <div class="second-block__button">
             <button class=@_uploadButtonClass @onclick="(() => SwitchDesktopTab(0))">Загрузка</button>
             <button class=@_verifyButtonClass @onclick="(() => SwitchDesktopTab(1))">Верифицировать</button>
@@ -182,29 +180,29 @@
     <div class="third-block">
         <div class="header-block header-block_third">
             <div class="header-block__text">Библиотека</div>
-            <div class="header-block__span" @onclick="@(() => WidgetMenuClick(".third-block__dropbox"))">
+            <div class="header-block__span" @onclick="@(() => WidgetMenuClick(".block__dropbox", "library_menu"))">
                 <span></span>
                 <span></span>
                 <span></span>
             </div>
         </div>
-        <div class="third-block__dropbox" id="library_menu">
-            <p class="third-block__dropbox__header__text">Сортировка</p>
-            <p class="third-block__dropbox__header__text">Выбрать</p>
-            <select name="" id="" class="third-block__dropbox__select">
+        <div class="block__dropbox" id="library_menu">
+            <p class="block__dropbox__header__text">Сортировка</p>
+            <p class="block__dropbox__search">Выбрать</p>
+            <select name="" id="" class="block__dropbox__select">
                 <option value="Верифицированные">Верифицированные</option>
                 <option value="На верификации">На верификации</option>
                 <option value="Отклоненные">Отклоненные</option>
             </select>
-            <label for="" class="third-block__dropbox__search">
+            <label for="" class="block__dropbox__search">
                 Найти по номеру
                 <input type="text">
             </label>
-            <label for="" class="third-block__dropbox__search">
+            <label for="" class="block__dropbox__search">
                 Найти по мероприятию
                 <input type="text">
             </label>
-            <label for="" class="third-block__dropbox__search"></label>
+            <label for="" class="block__dropbox__search"></label>
         </div>
         <div class="third-block__info">
             <ul class="third-block__info__ul" style="cursor:pointer">

Pages/Desktop.razor.cs

@@ -114,9 +114,9 @@ namespace HyperCube.Pages
             }
         }
 
-        async Task WidgetMenuClick(string menuname)
+        async Task WidgetMenuClick(string menuname, string elementid)
         {            
-            await JsRuntime.InvokeVoidAsync("WidgetMenuClick", menuname);
+            await JsRuntime.InvokeVoidAsync("WidgetMenuClick", menuname, elementid);
             _counter = 1;
         }
 

wwwroot/css/style.css

@@ -31,27 +31,21 @@
 .fadein {
     animation-name: modal-fadein;
     animation-duration: 500ms;
-    animation-timing-function: linear;
-}
-
+    animation-timing-function: linear; }
 @keyframes modal-fadein {
-    0% {
-        opacity: 0%;
-    }
-
-    100% {
-        opacity: 100%;
-    }
+    0% { opacity: 0%; }
+    100% { opacity: 100%; }
 }
 
 body {
-  background-color: #afb0b0;
-  font-weight: normal;
-  font-style: normal; }
+    background-color: #afb0b0;
+    font-weight: normal;
+    font-style: normal;
+    height: 100%; }
 
 .wrap {
   width: 100%;
-  height: 100%;
+  min-height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -59,6 +53,13 @@ body {
   -ms-flex-pack: start;
   justify-content: start; }
 
+.main-content {
+    display: flex;
+    flex-direction: column; }
+
+.blocks {
+    flex: 1; }
+
 .nav {
   padding-top: 1.5%;
   position: sticky;
@@ -120,13 +121,13 @@ body {
   min-width: 0; }
 
 footer {
-  width: 100%;
-  padding: 15px 0px;
-  background-color: #57526a;
-  text-align: center;
-  position: sticky;
-  bottom: 0;
-  left: 0; }
+    width: 100%;
+    padding: 15px 0px;
+    background-color: #3a474d;
+    text-align: center;
+    position: sticky;
+    bottom: 0;
+    left: 0; }
 
 .footer__logo {
   width: 70px; }
@@ -345,6 +346,7 @@ footer {
     font-size: 16px; }
 
 .second-block {
+  position: relative;
   -webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -1368,19 +1370,7 @@ footer {
     height: 12px;
     background: #f27e00; }
 
-.second-block__dropbox {
-    display: none;
-    position: absolute;
-    top: 80px;
-    left: 68.5%;
-    -webkit-transform: translateX(-100%);
-    -ms-transform: translateX(-100%);
-    transform: translateX(-100%);
-    background-color: #fff;
-    padding: 20px;
-    z-index: 2; }
-
-.third-block__dropbox {
+.block__dropbox {
   display: none;
   position: absolute;
   top: 64px;
@@ -1391,24 +1381,24 @@ footer {
   background-color: #fff;
   padding: 20px;
   z-index: 2; }
-  .third-block__dropbox__header__text {
+  .block__dropbox__header__text {
     color: black;
     font-family: 'Bahn';
     font-size: 21px;
     margin-bottom: 10px; }
-  .third-block__dropbox__select {
+  .block__dropbox__select {
     display: block;
     color: black;
     font-family: 'Bahn';
     font-size: 16px;
     margin-top: 10px; }
-  .third-block__dropbox__search {
+  .block__dropbox__search {
     margin-top: 30px;
     display: block;
     color: black;
     font-family: 'Bahn';
     font-size: 16px; }
-    .third-block__dropbox__search input {
+    .block__dropbox__search input {
       display: block;
       margin-top: 8px;
       padding: 5px; }

wwwroot/js/main.js

@@ -6,12 +6,16 @@ function BodyScroll(mode)
         $('body').css('overflow', 'auto');
 }
 
-function WidgetMenuClick(menu)
+function WidgetMenuClick(menu, elementid)
 {
-    //console.log('WidgetMenuClick:' + menu);
+    //console.log("WidgetMenuClick:" + menu + " elementid: " + elementid);
     if (!$(menu).queue().length) {
-        $(menu).fadeToggle("fast", "linear");
+        $('#' + elementid).fadeToggle("fast", "linear");
     }
+
+    //if (!$(menu).queue().length) {
+    //    $(menu).fadeToggle("fast", "linear");
+    //}
 }
 
 // Загрузка файлов