HM-74. Добавлена модалка-сайдбар. Реализована модалка для просмотра логов. (#32)

2020-07-25 23:39:53 +03:00
parent c425ffea45
commit f0013d1514
19 changed files with 472 additions and 7 deletions
--- a/src/app.html
+++ b/src/app.html
@ -5,6 +5,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Storage Service</title>
+    <script src="https://kit.fontawesome.com/008e1ef4e8.js" crossorigin="anonymous"></script>
 </head>

 <body>
@ -32,7 +33,7 @@
                        </li>
                    </ul>
                </div>
-            </nav>
+        </nav>

    </template>
    <!-- Шаблон контейнера страниц-->
@ -224,6 +225,35 @@
            </div>
        </div>
    </template>
+
+    <!-- Шаблоны форм для просмотры логов -->
+    <template id="logs-view-form">
+        <div class="h-100 overflow-auto">
+            <p class="h2 mb-2 p-3 pr-5 sticky-top border-bottom bg-light"></p>
+            <form class="p-3"></form>
+        </div>
+    </template>
+
+    <!-- Шаблон FormControl компонента -->
+    <template id="form-control">
+        <div class="mb-3">
+            <label class="form-label"></label>
+            <div class="form-text"></div>
+        </div>
+    </template>
+
+
+    <!-- Шаблон для Модального Сайдбара -->
+    <template id="modal-sidebar">
+        <div class="ModalSidebar row justify-content-end m-0">
+            <div class="ModalSidebar__window col-12 col-md-9 col-lg-8 col-xl-7 p-0">
+                <button class="ModalSidebar__close d-flex justify-center align-items-center" type="button">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+        </div>
+    </template>
+
    <!-- Шаблон для создания апи -->
    <template id="create-api">
        <div class="card text-center Info__container">