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;
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
}
#logo {
@@ -47,7 +50,7 @@ div#content {
backdrop-filter: blur(10px);
}
div#toolList {
div#leftBar {
float: left;
width: 200px;
background-color: transparent;
@@ -71,7 +74,7 @@ div#copyright a, a:visited, a:active {
color: rgb(192, 192, 192);
}
ul#toolList {
#toolList {
list-style-type: none;
margin: 0;
padding: 10px 0 0 0;
@@ -99,14 +102,41 @@ ul#toolList {
transition-duration: .3s;
}
#leftElements {
display: flex;
align-items: center;
}
#titlebar {
display: block;
padding: 10px 0;
/* padding: 10px 0; */
color: black;
margin-top: -78px;
height: fit-content;
margin: 0px 20px;
font-size: 36px;
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.getElementsByName("iframe")[0].src =
window.location.protocol + "//" + window.location.hostname + ":8097";
document.getElementById("rest-mock").href =
window.location.protocol + "//" + window.location.hostname + ":8097";
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">
<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/frame.js"></script>
<!-- <link rel="stylesheet" href="common.css"> -->
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
@@ -14,19 +15,29 @@
<body>
<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="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>
<div id="content">
<div id="toolList">
<div id="leftBar">
<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"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
<li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
<li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
<li id="toolListRow"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
<li id="toolListRow"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
<li id="toolListRow" class="dynamic restTool">
<a id="rest-mock" href="http://tools.zipper.release11.com:8097/" target="iframe">REST Mock</a>
</li>
<li id="toolListRow" class="xmlTool"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
<li id="toolListRow" class="xmlTool"><a href="./tools/xslt.html" target="iframe">XSLT</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>
<div id="copyright">
Build: [:VERSION:]<br>
@@ -36,7 +47,7 @@
<a href="http://release11.com/privacy">Privacy statement</a>
</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>
</body>