HM-42 Облагородил вывод информации апи в модалке (#16)

src/app.html

@@ -80,14 +80,27 @@
     </template>
      <!-- Шаблон информации об апи -->
      <template id="api-info">
-        <div class="container">
+        <div class="card text-center Info__container">
-            <h1 class="Info__title"></h1>
+            <div class="card-header">
-            <div class="Info__body">
+                <h1 class="Info__title"></h1>
-                <div class="Info__sidebar"></div>
+                <div class="Info__controls">
-                <div class="Info__editor"></div>
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>
+                        <path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>
+                    </svg>
+                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                    </svg>
+                </div>
             </div>
-            <div class="Info__footer">
+            <div class="Info__body">
-
+                <div class="Info__sidebar">
+                </div>
+                <code contenteditable class="Info__editor"></code>
+            </div>
+            <div class="Info__footer card-footer text-muted">
+                
             </div>
         </div>
     </template>

src/components/api-info-component/ApiInfoComponent.css

@@ -0,0 +1,29 @@
+.Info__body {
+    height: 100%;
+    display: flex;
+}
+.Info__container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+}
+.Info__title {
+    text-align: center;
+}
+.Info__sidebar {
+    width: 30%;
+}
+.Info__editor {
+    border: 1px solid #F2F2F2;
+    text-align: left;
+    width: 100%;
+}
+.Info__controls {
+    position: absolute;
+    right: 10px;
+    top: 15px;
+    font-size: 20px;
+}

src/components/api-info-component/ApiInfoComponent.js

@@ -19,7 +19,7 @@ class ApiInfoComponent extends Component {
         if (this.object) {
             this.infoTitle.textContent = this.object.key ;
             this.infoSidebar.textContent = this.object.description;
-            this.infoEditor.textContent = this.object.value;
+            this.infoEditor.innerHTML = JSON.stringify(this.object.value);
             this.infoFooter.textContent = this.object.author;
         }
 

src/components/test-modal/TestModal.css

@@ -24,8 +24,11 @@
 }
 
 .TestModal__window {
+    position: relative;
     width: 80vw;
     height: 80vh;
     background-color: white;
+    border: 1px solid #F7F7F7;
+    border-radius: 5px;
     z-index: 5;
 }