3rd update

Pages/Desktop.razor

@@ -20,23 +20,7 @@
                     Формат: Цифровой хакатон <br>
                     Статус: Открыта регистрация <br>
                     ID: Dh001<br>
-                </div>
-                <div class="slider__item">
-                    Тема: Цифровой двойник синтеза метанола <br>
-                    Организатор: ООО«ПроК» <br>
-                    Дата проведения: с 1 дек. по 30 дек. 2021 года <br>
-                    Формат: Цифровой хакатон <br>
-                    Статус: Открыта регистрация <br>
-                    ID: Dh001<br>
-                </div>
-                <div class="slider__item">
-                    Тема: Цифровой двойник синтеза метанола <br>
-                    Организатор: ООО«ПроК» <br>
-                    Дата проведения: с 1 дек. по 30 дек. 2021 года <br>
-                    Формат: Цифровой хакатон <br>
-                    Статус: Открыта регистрация <br>
-                    ID: Dh001<br>
-                </div>
+                </div>                
             </div>
             <div class="footer-block">
                 <div class="footer-block__left__button">

Pages/ModalInfo.razor

@@ -1,32 +1,27 @@
-<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">@Title</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="@Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+<div class="modal" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow: hidden">
+    <div class="modal-container">
+        <div class="modal__body">
+            <div class="modal__body__header">
+                <div class="modal__body__header__info">
+                    <img src="img/user.svg" alt="">
+                    <p>@Title</p>
+                </div>
             </div>
-            <div class="modal-body">
-                @Body
-                @if (modalMessage.Length > 0)
-                {
-                    <p>@modalMessage</p>
-                }
-            </div>
-            <div class="modal-footer">                
-                <button type="button" class="upload__btn" data-dismiss="modal" @onclick="@Close">Закрыть</button>
+            <div class="modal__body__container modal__body__container_noflex">
+                <div class="modal__404__text__box">
+                    @Body
+                    @message
+                </div>
             </div>
         </div>
+        <a href="" class="modal_close" @onclick="@Close">&#10006;</a>
     </div>
 </div>
 
-@if (showBackdrop)
-{
-    <div class="modal-backdrop fade show"></div>
-}
-
 @code {
+    [Inject]
+    public IJSRuntime JsRuntime { get; set; }
+
     [Parameter]
     public RenderFragment Title { get; set; }
 
@@ -34,22 +29,18 @@
     public RenderFragment Body { get; set; }
 
     private string modalDisplay = "none;";
-    private string modalClass = "";
-    private string modalMessage = "";
-    private bool showBackdrop = false;
+    private string message = "";
 
     public void Open(string message = "")
     {
+        JsRuntime.InvokeVoidAsync("BodyScroll", false);
         modalDisplay = "block;";
-        modalClass = "show";
-        showBackdrop = true;
-        modalMessage = message;
+        this.message = message;
     }
 
     public void Close()
     {
+        JsRuntime.InvokeVoidAsync("BodyScroll", true);
         modalDisplay = "none";
-        modalClass = "";
-        showBackdrop = false;
     }
 }

Pages/ModalLoading.razor

@@ -1,21 +1,23 @@
-<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
-    <div class="modal-dialog modal-sm" role="document">
-        <div class="modal-content">
-            <div class="modal-body">
-                <div style="text-align: center;">
-                    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+<div class="modal" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow: hidden">
+    <div class="modal-container">
+        <div class="modal__body">
+            <div class="modal__body__header">
+                <div class="modal__body__header__info">
+                    <img src="img/options.svg" alt="">
+                    <p>Пожалуйста, подождите...</p>
                 </div>
-                <p style="text-align:center; margin-top:20px">Пожалуйста, подождите...</p>
             </div>
-        </div>
+            <div class="modal__body__container modal__body__container_noflex">
+                <div class="modal__404__text__box">
+                    <div style="text-align: center;">
+                        <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+                    </div>
+                </div>
+            </div>
+        </div>        
     </div>
 </div>
 
-@if (showBackdrop)
-{
-    <div class="modal-backdrop fade show"></div>
-}
-
 <style>
     .lds-roller {
         display: inline-block;
@@ -124,24 +126,23 @@
 </style>
 
 @code {
+    [Inject]
+    public IJSRuntime JsRuntime { get; set; }
+
     [Parameter]
     public RenderFragment Body { get; set; }
 
     private string modalDisplay = "none;";
-    private string modalClass = "";
-    private bool showBackdrop = false;
 
     public void Open()
     {
+        JsRuntime.InvokeVoidAsync("BodyScroll", false);
         modalDisplay = "block;";
-        modalClass = "show";
-        showBackdrop = true;
     }
 
     public void Close()
     {
+        JsRuntime.InvokeVoidAsync("BodyScroll", true);
         modalDisplay = "none";
-        modalClass = "";
-        showBackdrop = false;
     }
 }

Shared/Sidebar.razor

@@ -1,5 +1,7 @@
 @attribute [Authorize]
 
+@using HyperCube.Pages
+
 <AuthorizeView>
     <Authorized>
         <nav class="nav">
@@ -7,46 +9,52 @@
                 <div class="top-href__logo">
                     <img src="img/logo.svg" alt="">
                 </div>
-                <a href="" title="Личные данные" class='js-open-modal' data-modal="profile-modal">
+                <a href="" title="Личные данные" @onclick="@ErrorClick">
                     <img src="img/user.svg" alt="">
                 </a>
             </div>
             <div class="middle-href">
-                <a href="" title="Файлы" class='js-open-modal' data-modal="files-modal">
+                <a href="" title="Файлы" @onclick="@ErrorClick">
                     <img src="img/files.svg" alt="">
                 </a>
-                <a href="" title="Компетенции" class='js-open-modal' data-modal="competence-modal">
+                <a href="" title="Компетенции" @onclick="@ErrorClick">
                     <img src="img/competence.svg" alt="">
                 </a>
-                <a href="" title="Рейтинги" class='js-open-modal' data-modal="raiting-modal">
+                <a href="" title="Рейтинги" @onclick="@ErrorClick">
                     <img src="img/raiting.svg" alt="">
                 </a>
-                <a href="" title="Правила системы" class='js-open-modal' data-modal="rules-modal">
+                <a href="" title="Правила системы" @onclick="@ErrorClick">
                     <img src="img/rules.svg" alt="">
                 </a>
-                <a href="" title="Цифровые активы" @onclick="@WalletClick">
+                <a href="" title="Цифровые активы" @onclick="@AssetsClick">
                     <img src="img/packet.svg" alt="">
                 </a>
             </div>
             <div class="bottom-href">
-                <a href="" title="Настройки" class='js-open-modal' data-modal="qual-modal">
+                <a href="" title="Настройки" @onclick="@ErrorClick">
                     <img src="img/options.svg" alt="">
                 </a>
-                <a href="" title="Выйти" class='js-open-modal' data-modal="404-modal">
+                <a href="" title="Выйти" @onclick="@ExitClick">
                     <img src="img/enter.svg" alt="">
                 </a>
             </div>
         </nav>
 
-    <HyperCube.Pages.ModalWallet @ref="modalWallet">
-        <Title></Title>
-    </HyperCube.Pages.ModalWallet>
+        <ModalAssets @ref="modalAssets">
+            <Title></Title>
+        </ModalAssets>
+
+        <ModalInfo @ref="modalError404">
+            <Title>Страница не работает</Title>
+            <Body>
+                <p class="modal__404__text">Извините, страница в разработке и не работает.</p>
+                <p class="modal__404__text">Возможно ведутся обновления.</p>
+            </Body>
+        </ModalInfo>
 
-    <HyperCube.Pages.ModalInfo @ref="modalInfo">
-        <Title></Title>
-        <Body>
-        </Body>
-    </HyperCube.Pages.ModalInfo>
+        <ModalLoading @ref="modalLoading">
+            <Body></Body>
+        </ModalLoading>
 
     </Authorized>
 </AuthorizeView>

Shared/Sidebar.razor.cs

@@ -11,19 +11,31 @@ namespace HyperCube.Shared
 {
     public partial class Sidebar : ComponentBase
     {
-        ModalWallet modalWallet { get; set; }
-        ModalInfo modalInfo { get; set; }
+        [Inject]
+        NavigationManager navigationManager { get; set; }
+
+        ModalAssets modalAssets { get; set; }
+        ModalInfo modalError404 { get; set; }
+        ModalLoading modalLoading { get; set; }
 
         protected override async Task OnInitializedAsync()
-        {
-            
+        {            
+
+        }
+
+        void AssetsClick()
+        {            
+            modalAssets.Open();
+        }
 
+        void ExitClick()
+        {            
+            navigationManager.NavigateTo("Identity/Account/Logout", true);
         }
 
-        void WalletClick()
+        void ErrorClick()
         {
-            modalWallet.Open();
-            //modalInfo.Open("Test");
+            modalError404.Open();            
         }
     }
 }