From 261cd57899216ace6a8578781d020016497ca0b6 Mon Sep 17 00:00:00 2001
From: modzeleg <g.modzelewski@protonmail.com>
Date: Tue, 6 Apr 2021 11:30:19 +0200
Subject: [PATCH] Implemented 2nd part of new style

---
 .../resources/static/css/commons/r11form.css  | 25 +++++++-
 src/main/resources/static/html/mock.html      | 62 +++++++++++++++----
 2 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index 469813e..91f13cb 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -15,7 +15,8 @@
 .tooltip-window {
     position: fixed;
     right: 0;
-    background: #8ab8c938;
+    filter: drop-shadow(-2px 0px 2px darkgray);
+    background: #e8f3f7;
     padding: 15px 30px;
     font-family: 'Nunito', sans-serif;
     width: 40%;
@@ -83,6 +84,19 @@
     display: none;
 }
 
+.clickable-text {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+    cursor: pointer;
+}
+
+.clickable-text.highlight:hover {
+    color: #3bc4f1;
+}
+
 .deletion-button {
     padding: 0;
     outline: none;
@@ -209,6 +223,10 @@
     flex-grow: 1;
 }
 
+.big-font {
+    font-size: 20px;
+}
+
 .action-button.active {
     background: #3bc4f1;
     border: 1px solid #7ed0eb;
@@ -252,6 +270,10 @@
     height: 100%;
 }
 
+.height-300 {
+    height: 300px;
+}
+
 .max-height.with-padding {
     height: 90%;
 }
@@ -289,7 +311,6 @@
 }
 
 .table-map input{
-    width: 100%;
     font-size: 16px;
     padding: 7px;
     border: 1px solid rgba(145, 146, 146, 0.849);
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index bd64b5d..2fb583c 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -14,7 +14,7 @@
     <div class="container">
         <div class="tool extended">
             <div class="tool-context">
-                <div class="float-left">
+                <div>
                     <h1>MockedServices <span class="version-span">v0.0.1</span></h1>
                 </div>
                 <div>
@@ -29,11 +29,11 @@
                         <label for="message-link" class="block-display">Link</label>
                         <input id="message-link" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
                     </div>
-                    <div class="float-left">
+                    <div class="display-space-between max-width">
                         <!-- status and type -->
                         <div class="medium-input block-display small-vertical-margin">
                             <!-- status -->
-                            <div class="max-width with-padding small-vertical-margin">
+                            <div class="max-width  small-vertical-margin">
                                 <label for="httpStatus">Http Status</label>
                                 <input id="httpStatus" class="bordered-field max-width" type="text" value="200" list="httpStatusSuggestion">
                                 <datalist id="httpStatusSuggestion">
@@ -46,7 +46,7 @@
                                 </datalist>
                             </div>
                             <!-- content type -->
-                            <div class="max-width with-padding small-vertical-margin">
+                            <div class="max-width  small-vertical-margin">
                                 <label for="typeSelector">Content Type</label>
                                 <input id="typeSelector" class="bordered-field max-width" type="text" value="application/xml" list="contentTypes">
                                 <datalist id="contentTypes">
@@ -56,22 +56,58 @@
                                 </datalist>
                             </div>
                         </div>
-                        <button class="small-margins half-width with-padding action-button active">Save</button>
+                        <button class="small-margins half-width  action-button active">Save</button>
                     </div>
                     <!-- body -->
-                    <div></div>
+                    <div class="small-vertical-margin">
+                        <label for="bodyEditor">Body</label>
+                        <textarea id="bodyEditor" class="bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
+                    </div>
                     <!-- show/hide -->
-                    <div></div>
+                    <div class="clickable-text highlight">
+                        <h3>&gt; show/hide advanced settings</h3>
+                    </div>
                     <!-- advanced -->
-                    <div>
+                    <div class="max-width with-padding">
                         <!-- tab menu -->
-                        <div></div>
+                        <div class="tabmenu medium-vertical-margin">
+                            <button class="tabitem active clickable-text big-font">Headers</button>
+                            <button class="tabitem clickable-text big-font">History</button>
+                        </div>
                         <!-- container -->
-                        <div>
+                        <div class="medium-vertical-margin">
                             <!-- headers -->
-                            <div></div>
+                            <div class="medium-vertical-margin tabcontent centered-content">
+                                <table class="table-map">
+                                    <tr>
+                                        <th>Name</th>
+                                        <th>Value</th>
+                                        <th></th>
+                                    </tr>
+                                    <tr>
+                                        <td><input class="key" value="basic value"></td>
+                                        <td><input value="basic value"></td>
+                                        <td><button class="deletion-button btn-hashmap"><i class="icon-cancel"></i></button></td>
+                                    </tr>
+                                </table>
+                            </div>
                             <!-- history -->
-                            <div></div>
+                            <div class="medium-vertical-margin tabcontent centered-content">
+                                <table class="table-default">
+                                    <tr class="bottom-border">
+                                        <th>Timestamp</th>
+                                        <th>Type</th>
+                                    </tr>
+                                    <tr class="even">
+                                        <td>2021-01-01T10:57:26</td>
+                                        <td>Client request</td>
+                                    </tr>
+                                    <tr>
+                                        <td>2021-01-01T10:57:26</td>
+                                        <td>Client request</td>
+                                    </tr>
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -79,7 +115,7 @@
             <div class="tool-extention">
                 <!-- header -->
                 <div></div>
-                <!-- container -->
+                <!-- tile list -->
                 <div>
 
                 </div>