From 584c848473f91693b2851d6ff9d5b66260814db2 Mon Sep 17 00:00:00 2001 From: modzeleg Date: Fri, 19 Feb 2021 12:35:53 +0100 Subject: [PATCH] T141 stylesheet added. Fields needs resize --- src/main/resources/static/css/common.css | 94 ++++++++++++++++++++ src/main/resources/static/css/main.css | 61 ++----------- src/main/resources/static/js/datatransfer.js | 6 +- src/main/resources/templates/mock.html | 15 ++-- 4 files changed, 114 insertions(+), 62 deletions(-) create mode 100644 src/main/resources/static/css/common.css diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css new file mode 100644 index 0000000..1421743 --- /dev/null +++ b/src/main/resources/static/css/common.css @@ -0,0 +1,94 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap'); + +body { + font-family: 'Nunito', sans-serif; + color: #2e3133; + font-weight: normal; + margin: 0px; +} + +textarea:focus { + box-shadow: 0 0 5px rgba(81, 203, 238); + outline: none; +} + +.tooltip{ + border: 2px solid rgba(155, 165, 160, 0.507); + border-radius: 15px; + padding: 20px; +} + +a, a:visited, a:active { + color: rgb(47, 125, 146); +} + +a:hover{ + filter: brightness(120%); +} + +.field { + border: 2px solid rgba(56, 59, 58, 0.507); + border-radius: 5px; +} + +button { + font-size: 20px; + text-align: center; + cursor: pointer; + border: none; + text-decoration: none; +} + +input { + border-radius: 5px; + border: 1px solid rgba(155, 165, 160, 0.507); +} + +button:hover{ + filter: brightness(110%); + /* TODO Insert animation here! */ +} + +.tooltip h1{ + margin: 0px; + font-size: 24px; + font-weight: bold; +} + +.tooltip button{ + background-color: rgba(155, 165, 160, 0.507); + color: rgb(44, 44, 44); + border-bottom: 2px solid rgba(99, 99, 99, 0.507); + padding: 14px; +} + +.btn-action { + background-color: #3bc4f1; + color: white; + padding: 15px 32px; + display: inline-block; +} + +.resizeVertical { + resize: vertical; +} + +.resizeNone { + resize: none; +} + +table{ + border: none; +} + +.collapsibleData { + padding: 0 18px; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; + background-color: #f1f1f1; +} + +textField-key{ + background-color: #f0f0f0; +} \ No newline at end of file diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css index 758b9aa..71be7c6 100644 --- a/src/main/resources/static/css/main.css +++ b/src/main/resources/static/css/main.css @@ -2,14 +2,8 @@ width: 1400px; margin-left: auto; margin-right: auto; - min-height: 1900px; + min-height: 700px; background: white; - font-family: 'Josefin Slab', serif; -} - -.borderStyle { - border: 3px solid lightgray; - border-radius: 5px; } #toolName { @@ -18,7 +12,6 @@ font-size: 72px; text-align: center; padding: 50px; - font-family: 'Acme', sans-serif; } .articleHead { @@ -54,8 +47,6 @@ margin-top: 30px; width: 720px; height: 50px; - border-bottom: 1px solid lightgray; - } .advancedMenuTab { @@ -94,26 +85,11 @@ float: left; margin-left: 10px; margin-right: 10px; - background: gray; - color: white; font-size: 24px; padding: 12px; - cursor: pointer; - border-radius: 15px; text-align: center; } -.functionBarButton:hover { - float: left; - margin-left: 10px; - margin-right: 10px; - background: lightgray; - color: white; - font-size: 24px; - padding: 12px; - cursor: pointer; -} - #link { width: 750px; margin-bottom: 40px; @@ -122,7 +98,6 @@ #messageLink { width: 630px; padding: 10px; - background: #f0f0f0; font-size: 18px; } @@ -149,13 +124,6 @@ margin-right: 30px; } -.label { - margin-top: 15px; - margin-bottom: 0px; - font-size: 12px; - color: lightgray; -} - .menuItem { float: left; width: 150px; @@ -194,16 +162,17 @@ font-weight: 400; } +/*TODO add style to general stylesheet. Gray if inactive red if hover*/ .btn-del-MenuItem { float: left; font-size: 24px; - color: red; + color: lightgray; text-align: center; cursor: pointer; } .btn-del-MenuItem:hover { - color: indianred; + color: red; } #headerTable { @@ -212,7 +181,6 @@ } .tableHead { - font-size: 24px; width: 240px; padding: 5px; } @@ -221,18 +189,6 @@ height: 20px; padding: 5px; width: 240px; - font-size: 18px; - background: white; - border: 1px solid lightgray; - border-radius: 5px; -} - -.headerName { - background: #f0f0f0; -} - -.httpStatusValue { - } #mockIntroTip { @@ -247,23 +203,24 @@ font-weight: 700; } +/*TODO add to general styles. Gray if inactive green if hover*/ .btn-table-add { - color: green; + color: lightgray; cursor: pointer; } .btn-table-add:hover { - color:lightgreen; + color: green; } .btn-table-remove { - color: red; + color: lightgray; cursor: pointer; } .btn-table-remove:hover { - color:indianred; + color: red; } diff --git a/src/main/resources/static/js/datatransfer.js b/src/main/resources/static/js/datatransfer.js index e9b8437..a1febe1 100644 --- a/src/main/resources/static/js/datatransfer.js +++ b/src/main/resources/static/js/datatransfer.js @@ -127,7 +127,7 @@ function fillHeaderTable(headers){ innerHTML += generateHeaderTable(headers); $('#httpStatusValues').html(innerHTML); } - +//TODO: Add addRow() to generate new rows and populate them with data function generateHeaderTable(headers){ let count = 0; let innerHTML = ''; @@ -149,7 +149,7 @@ function generateHeaderTable(headers){ innerHTML+= '' + '' + - '' + + '' + '' + '' + 'X' + @@ -171,7 +171,7 @@ function addRow(){ var innerHtml = '' + '' + - '' + '' + '' + diff --git a/src/main/resources/templates/mock.html b/src/main/resources/templates/mock.html index 40ab973..1ade8b7 100644 --- a/src/main/resources/templates/mock.html +++ b/src/main/resources/templates/mock.html @@ -5,6 +5,7 @@ + @@ -28,15 +29,15 @@
- + - @@ -44,7 +45,7 @@
- +
@@ -58,8 +59,8 @@ - - + + @@ -101,7 +102,7 @@
-
+

What's mock service?

It's super simple! Need data as response from the server? Mock your api in just a few clicks.

HeaderValueHeaderValue