R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Added category menu (#117)

Browse Source 
Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: R11/release11-tools-web#117
This commit is contained in:
Adam Bem
2023-03-15 13:26:37 +01:00
parent 8f6047bb9f
commit 09409dc698
4 changed files with 80 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Frontend/assets/css/frame.css
View File

@@ -27,6 +27,9 @@ div#header {
background-color: #FFFFFF; background-color: #FFFFFF;
width: 100%; width: 100%;
height: 80px; height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
} }
#logo { #logo {
@@ -47,7 +50,7 @@ div#content {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
div#toolList { div#leftBar {
float: left; float: left;
width: 200px; width: 200px;
background-color: transparent; background-color: transparent;
@@ -71,7 +74,7 @@ div#copyright a, a:visited, a:active {
color: rgb(192, 192, 192); color: rgb(192, 192, 192);
} }
ul#toolList { #toolList {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 10px 0 0 0; padding: 10px 0 0 0;
@@ -99,14 +102,41 @@ ul#toolList {
transition-duration: .3s; transition-duration: .3s;
} }
#leftElements {
display: flex;
align-items: center;
}
#titlebar { #titlebar {
display: block; /* padding: 10px 0; */
padding: 10px 0;
color: black; color: black;
height: fit-content;
margin-top: -78px; margin: 0px 20px;
font-size: 36px; font-size: 36px;
text-align: center; text-align: center;
} }
#menu {
display: flex;
height: fit-content;
}
#menu a {
display: block;
margin: 0px 10px;
padding: 0px 10px;
font-size: 28px;
text-decoration: none;
color: black;
}
#menu a.active {
border-bottom: 3px solid #2A93B0;
}
#menu a:hover {
transform: scale(1.25, 1.25);
transition-duration: .3s;
}

2
Frontend/assets/scripts/dyn_host.js
View File

@@ -1,6 +1,4 @@
$(document).ready( function() { $(document).ready( function() {
document.getElementsByName("iframe")[0].src =
window.location.protocol + "//" + window.location.hostname + ":8097";
document.getElementById("rest-mock").href = document.getElementById("rest-mock").href =
window.location.protocol + "//" + window.location.hostname + ":8097"; window.location.protocol + "//" + window.location.hostname + ":8097";
console.log("DONE") console.log("DONE")

23
Frontend/assets/scripts/frame.js Normal file
View File

@@ -0,0 +1,23 @@
function changeActiveTools(activeClass, activeCategoryButton) {
let tools = document.getElementById("toolList").children
for (i = 0; i < tools.length; i++) {
if (tools[i].classList.contains(activeClass)) {
tools[i].style.display = "block";
}
else {
tools[i].style.display = "none";
}
}
let categories = document.getElementById("menu").children
for (i = 0; i < categories.length; i++) {
if (categories[i].innerText == activeCategoryButton) {
categories[i].classList.add("active")
}
else {
categories[i].classList.remove("active")
}
}
}

27
Frontend/index.html
View File

@@ -6,6 +6,7 @@
<link rel="stylesheet" href="assets/css/frame.css"> <link rel="stylesheet" href="assets/css/frame.css">
<script src="assets/scripts/common/jquery-3.6.0.slim.min.js"></script> <script src="assets/scripts/common/jquery-3.6.0.slim.min.js"></script>
<script src="assets/scripts/dyn_host.js"></script> <script src="assets/scripts/dyn_host.js"></script>
<script src="assets/scripts/frame.js"></script>
<!-- <link rel="stylesheet" href="common.css"> --> <!-- <link rel="stylesheet" href="common.css"> -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
@@ -14,19 +15,29 @@
<body> <body>
<div id="header"> <div id="header">
<div id="leftElements">
<div id="logo"><a href="http://release11.com/"><img src="assets/images/logo_czarne.svg" alt="Release11"></a></div> <div id="logo"><a href="http://release11.com/"><img src="assets/images/logo_czarne.svg" alt="Release11"></a></div>
<div id="menu">
<a href="#" onclick="changeActiveTools('xmlTool', 'XML')" class="active">XML</a>
<a href="#" onclick="changeActiveTools('jsonTool', 'JSON')">JSON</a>
<a href="#" onclick="changeActiveTools('restTool', 'REST')">REST</a>
</div>
</div>
<div id="titlebar"><p>Internet Tools</p></div> <div id="titlebar"><p>Internet Tools</p></div>
</div> </div>
<div id="content"> <div id="content">
<div id="toolList"> <div id="leftBar">
<ul id="toolList"> <ul id="toolList">
<li id="toolListRow" class="dynamic"><a id="rest-mock" href="http://tools.zipper.release11.com:8097/" target="iframe">REST Mock</a></li> <li id="toolListRow" class="dynamic restTool">
<li id="toolListRow"><a href="./tools/xpath.html" target="iframe">XPath</a></li> <a id="rest-mock" href="http://tools.zipper.release11.com:8097/" target="iframe">REST Mock</a>
<li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li> </li>
<li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li> <li id="toolListRow" class="xmlTool"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
<li id="toolListRow"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li> <li id="toolListRow" class="xmlTool"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
<li id="toolListRow"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li> <li id="toolListRow" class="xmlTool"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
<li id="toolListRow" class="xmlTool"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
<li id="toolListRow" class="jsonTool"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
</ul> </ul>
<div id="copyright"> <div id="copyright">
Build: [:VERSION:]<br> Build: [:VERSION:]<br>
@@ -36,7 +47,7 @@
<a href="http://release11.com/privacy">Privacy statement</a> <a href="http://release11.com/privacy">Privacy statement</a>
</div> </div>
</div> </div>
<iframe id="frame" name="iframe" src="http://tools.zipper.release11.com:8097/" frameborder="0"></iframe> <iframe id="frame" name="iframe" src="./tools/xpath.html" frameborder="0"></iframe>
</div> </div>
</body> </body>