Implemented first segment of new styles
This commit is contained in:
@@ -163,9 +163,10 @@
|
||||
}
|
||||
|
||||
|
||||
.headline {
|
||||
.float-left {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.version-span {
|
||||
@@ -174,7 +175,7 @@
|
||||
color: rgba(85,85,85,0.555);
|
||||
}
|
||||
|
||||
.tool-window {
|
||||
.block-display {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -227,20 +228,36 @@
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.medium-input {
|
||||
.quater-width {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.half-width {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.small-input {
|
||||
width: 30%;
|
||||
.half-width.with-padding {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.large-input {
|
||||
.max-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.large-button {
|
||||
width: 100%;
|
||||
.max-width.with-padding {
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
.max-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.max-height.with-padding {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
.small-margins {
|
||||
margin: 3%;
|
||||
}
|
||||
|
||||
.small-vertical-margin {
|
||||
|
||||
@@ -3,33 +3,39 @@
|
||||
<head>
|
||||
<title>R11 MockedServices</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../css/main.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/tooltip.css" type="text/css">
|
||||
<link rel="stylesheet" href="http://gordon.zipper.release11.com:8085/common.css" type="text/css">
|
||||
<link rel="stylesheet" href="../Dependency/fontello-plus/css/fontello.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="../css/modal.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/table.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/commons/r11form.css" type="text/css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<div id="toolName">Mocked Service <span id="version">v0.0.1</span></div>
|
||||
<div id="itemData">
|
||||
<div id="basicItemData" class="articleHead">Your message</div>
|
||||
<div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId">0</span></div>
|
||||
<div id="link">
|
||||
<label for="messageLink">Link</label>
|
||||
<div id="messageLink" class="field">https://www.testlink.com/doesntwork/tho</div>
|
||||
<div class="container">
|
||||
<div class="tool extended">
|
||||
<div class="tool-context">
|
||||
<div class="float-left">
|
||||
<h1>MockedServices <span class="version-span">v0.0.1</span></h1>
|
||||
</div>
|
||||
<div id="msgBody">
|
||||
<div id="messageFields">
|
||||
<div class="fieldFloater">
|
||||
<div>
|
||||
<div>
|
||||
<!-- h2 -->
|
||||
<div><h2>Your Message</h2></div>
|
||||
<!-- save -->
|
||||
<div>
|
||||
<!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
|
||||
</div>
|
||||
<!-- link -->
|
||||
<div>
|
||||
<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">
|
||||
<!-- status and type -->
|
||||
<div class="medium-input block-display small-vertical-margin">
|
||||
<!-- status -->
|
||||
<div class="max-width with-padding small-vertical-margin">
|
||||
<label for="httpStatus">Http Status</label>
|
||||
<input type="text" id="httpStatus" class="field fieldDefault" value="200" list="httpStatusSuggestion">
|
||||
<input id="httpStatus" class="bordered-field max-width" type="text" value="200" list="httpStatusSuggestion">
|
||||
<datalist id="httpStatusSuggestion">
|
||||
<option value="200">
|
||||
<option value="300">
|
||||
@@ -39,9 +45,10 @@
|
||||
<option value="500">
|
||||
</datalist>
|
||||
</div>
|
||||
<div id="typeSelection">
|
||||
<!-- content type -->
|
||||
<div class="max-width with-padding small-vertical-margin">
|
||||
<label for="typeSelector">Content Type</label>
|
||||
<input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/>
|
||||
<input id="typeSelector" class="bordered-field max-width" type="text" value="application/xml" list="contentTypes">
|
||||
<datalist id="contentTypes">
|
||||
<option value="application/xml">
|
||||
<option value="application/json">
|
||||
@@ -49,145 +56,37 @@
|
||||
</datalist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fieldFloater" id="functionBar">
|
||||
<div class="buttonSpacer"></div>
|
||||
<div><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
|
||||
<div class="buttonSpacer"></div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
<button class="small-margins half-width with-padding action-button active">Save</button>
|
||||
</div>
|
||||
|
||||
<div id="bodyEdition">
|
||||
<label for="bodyEditor">Body:</label>
|
||||
<textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="optional">> show/hide advanced settings</div>
|
||||
<div id="advanced" style="display: none;">
|
||||
<div id="advancedMenu">
|
||||
<div id="headersTab" class="advancedMenuTabSelected">Headers</div>
|
||||
<div id="historyTab" class="advancedMenuTab">History</div>
|
||||
</div>
|
||||
<div id="headers">
|
||||
<table id="headerTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Header</td>
|
||||
<td>Value</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="httpStatusValues">
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
|
||||
<td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
|
||||
<td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div id="history" style="display:none;">
|
||||
<div id="historyFunction">
|
||||
<div>
|
||||
<label for="historyFrom">From</label>
|
||||
<input type="date" name="dateFrom" id="historyFrom"/>
|
||||
<input type="time" name="timeFrom" id="historyTimeFrom"/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="historyTo">To</label>
|
||||
<input type="date" name="dateTo" id="historyTo"/>
|
||||
<input type="time" name="dateTo" id="historyTimeTo"/>
|
||||
</div>
|
||||
<button id="btn-searchHistory">Search</button>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
<div id="historyDisplay">
|
||||
<table id="historyTable" class="simpleTable">
|
||||
<thead>
|
||||
<tr class="head">
|
||||
<th>Timestamp</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- body -->
|
||||
<div></div>
|
||||
<!-- show/hide -->
|
||||
<div></div>
|
||||
<!-- advanced -->
|
||||
<div>
|
||||
<!-- tab menu -->
|
||||
<div></div>
|
||||
<!-- container -->
|
||||
<div>
|
||||
<!-- headers -->
|
||||
<div></div>
|
||||
<!-- history -->
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-extention">
|
||||
<!-- header -->
|
||||
<div></div>
|
||||
<!-- container -->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div id="selectMenu">
|
||||
<div id="selectMenuContent" style="display: none;">
|
||||
<div id="selectMenuHead" class="articleHead">List</div>
|
||||
<div id="listItems"></div>
|
||||
<div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tooltip" class="fixed tooltip">
|
||||
<div id="mockIntroTip">
|
||||
<h2>What's mock service?</h2>
|
||||
<p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
|
||||
<p>Hover over an item to see description!</p>
|
||||
<br>
|
||||
<h2>Help:</h2>
|
||||
</div>
|
||||
<div class="tooltip-window lite">
|
||||
|
||||
<div id="messageLinkTip" class="collapsible" style="display: none;">
|
||||
<!--style="display: none;"-->
|
||||
<h4>The link</h4>
|
||||
<p>It's url where you need send your request</p>
|
||||
</div>
|
||||
<div id="httpStatusTip" class="collapsible" style="display: none;">
|
||||
<h4>Http status</h4>
|
||||
<p>Set http status for server response. 200 OK is default.</p>
|
||||
</div>
|
||||
<div id="typeSelectorTip" class="collapsible" style="display: none;">
|
||||
<h4>Content type</h4>
|
||||
<p>Select content type of body. Set plain text if data has no format.</p>
|
||||
</div>
|
||||
<div id="bodyEditorTip" class="collapsible" style="display: none;">
|
||||
<h4>Body</h4>
|
||||
<p>Text placed in this field will be displayed as response body</p>
|
||||
</div>
|
||||
<div id="headersTabTip" class="collapsible" style="display: none;">
|
||||
<h4>Headers</h4>
|
||||
<p>Set headers for your messages.</p>
|
||||
</div>
|
||||
<div id="historyTabTip" class="collapsible" style="display: none;">
|
||||
<h4>History</h4>
|
||||
<p>Check history of this message</p>
|
||||
</div>
|
||||
<div id="newHeaderTip" class="collapsible" style="display: none;">
|
||||
<h4>Next header value</h4>
|
||||
<p>Type values and press enter to add new header.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="overlay"></div>
|
||||
<div id="modal-confirm" class="modal">
|
||||
<div class="header">
|
||||
<div>Message saved<i class="r-exclamation"></i></div>
|
||||
<button>×</button>
|
||||
</div>
|
||||
<div class="body">Your message has been successfuly saved.<br>You might view it under the link.</div>
|
||||
</div>
|
||||
<div id="modal-query" class="modal">
|
||||
<div class="header">
|
||||
<div>Unsaved data<i class="r-exclamation"></i></div>
|
||||
<button>×</button>
|
||||
</div>
|
||||
<div class="body">You haven't saved your message! Any changes will be lost.<br>Do you want to continue?</div>
|
||||
<div class="function">
|
||||
<button>Yes</button>
|
||||
<button>No</button>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="/js/modal.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user