R11/release11-tools-mocked-services
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented 2nd part of new style

Browse Source
This commit is contained in:
Gabriel Modzelewski
2021-04-06 11:30:19 +02:00
parent 0348082f9d
commit 261cd57899
2 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/main/resources/static/css/commons/r11form.css
View File

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

62
src/main/resources/static/html/mock.html
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>