From 3691e393c6186117f0a4d2bdcf6fc448d32efc09 Mon Sep 17 00:00:00 2001
From: mrPadre <51297778+mrPadre@users.noreply.github.com>
Date: Thu, 16 Jul 2020 19:05:36 +0300
Subject: [PATCH] =?UTF-8?q?HM-42=20=D0=9E=D0=B1=D0=BB=D0=B0=D0=B3=D0=BE?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B4=D0=B8=D0=BB=20=D0=B2=D1=8B=D0=B2=D0=BE=D0=B4?=
 =?UTF-8?q?=20=D0=B8=D0=BD=D1=84=D0=BE=D1=80=D0=BC=D0=B0=D1=86=D0=B8=D0=B8?=
 =?UTF-8?q?=20=D0=B0=D0=BF=D0=B8=20=D0=B2=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=BA=D0=B5=20(#16)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.html                                  | 27 ++++++++++++-----
 .../api-info-component/ApiInfoComponent.css   | 29 +++++++++++++++++++
 .../api-info-component/ApiInfoComponent.js    |  2 +-
 src/components/test-modal/TestModal.css       |  3 ++
 4 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/app.html b/src/app.html
index 01a79c2..3662119 100644
--- a/src/app.html
+++ b/src/app.html
@@ -80,14 +80,27 @@
     </template>
      <!-- Шаблон информации об апи -->
      <template id="api-info">
-        <div class="container">
-            <h1 class="Info__title"></h1>
-            <div class="Info__body">
-                <div class="Info__sidebar"></div>
-                <div class="Info__editor"></div>
+        <div class="card text-center Info__container">
+            <div class="card-header">
+                <h1 class="Info__title"></h1>
+                <div class="Info__controls">
+                    <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>
diff --git a/src/components/api-info-component/ApiInfoComponent.css b/src/components/api-info-component/ApiInfoComponent.css
index e69de29..f281e96 100644
--- a/src/components/api-info-component/ApiInfoComponent.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/api-info-component/ApiInfoComponent.js b/src/components/api-info-component/ApiInfoComponent.js
index f1b95a1..964f6a0 100644
--- a/src/components/api-info-component/ApiInfoComponent.js
+++ b/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;
         }
 
diff --git a/src/components/test-modal/TestModal.css b/src/components/test-modal/TestModal.css
index 0ea0cd0..450a43f 100644
--- a/src/components/test-modal/TestModal.css
+++ b/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;
 }
\ No newline at end of file