Implemented 2nd part of new style

This commit is contained in:
2021-04-06 11:30:19 +02:00
parent 0348082f9d
commit 261cd57899
2 changed files with 72 additions and 15 deletions

View File

@@ -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>