Style fix and scripted advanced option visibility

2021-01-18 18:15:13 +01:00
parent a73736b237
commit 410cd23c03
5 changed files with 239 additions and 85 deletions
--- a/src/main/resources/static/css/design.css
+++ b/src/main/resources/static/css/design.css
@@ -0,0 +1,182 @@
+#container {
+    width: 950px;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 1900px;
+    background: white;
+    font-family: 'Josefin Slab', serif;
+}
+
+.borderStyle {
+    border: 3px solid lightgray;
+    border-radius: 5px;
+}
+
+#toolName {
+    width: 850px;
+    font-weight: 400;
+    font-size: 72px;
+    text-align: center;
+    padding: 50px;
+    font-family: 'Acme', sans-serif;
+}
+
+.articleHead {
+    font-size: 48px;
+    font-weight: 400;
+    height: 70px;
+    padding: 10px;
+}
+
+#itemData {
+    min-height: 1736px;
+    float: left;
+    width: 720px;
+    font-size: 24px;
+}
+
+#optional {
+    width: 100%;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+#optional:hover {
+    color: orange;
+}
+
+#advanced {
+    width: 100%;
+    margin-bottom: 50px;
+}
+
+#advancedMenu {
+    margin-top: 30px;
+    width: 720px;
+    height: 50px;
+    border-bottom: 1px solid lightgray;
+
+}
+
+.advancedMenuTab {
+    width: 340px;
+    height: 30px;
+    float: left;
+    text-align: center;
+    padding: 10px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.advancedMenuTab:hover {
+    font-weight: 700;
+}
+
+.advancedMenuTabSelected {
+    width: 340px;
+    height: 30px;
+    float: left;
+    text-align: center;
+    padding: 10px;
+    font-size: 24px;
+    background: gray;
+    color: white;
+    font-weight: 700;
+}
+
+#functionBar {
+    width: 100%;
+    margin-top: 50px;
+}
+
+.functionBarButton {
+    width: 200px;
+    float: left;
+    margin-left: 10px;
+    margin-right: 10px;
+    background: gray;
+    color: white;
+    font-size: 24px;
+    padding: 12px;
+    cursor: pointer;
+    border-radius: 15px;
+    text-align: center;
+}
+
+.functionBarButton:hover {
+    float: left;
+    margin-left: 10px;
+    margin-right: 10px;
+    background: lightgray;
+    color: white;
+    font-size: 24px;
+    padding: 12px;
+    cursor: pointer;
+}
+
+#link {
+    width: 750px;
+    margin-bottom: 40px;
+}
+
+#messageLink {
+    width: 630px;
+    padding: 10px;
+    background: lightgray;
+    border: 1px solid gray;
+}
+
+.fieldDefault {
+    width: 300px;
+    height: 30px;
+}
+
+.fieldText {
+    width: 630px;
+    padding: 10px;
+    height: 296px;
+    resize: none;
+}
+
+#selectMenu {
+    min-height: 1736px;
+    float: left;
+    width: 200px;
+    margin-right: 30px;
+}
+
+.label {
+    margin-top: 15px;
+    margin-bottom: 0px;
+    font-size: 12px;
+    color: lightgray;
+}
+
+.menuItem {
+    width: 174px;
+    padding: 13px;
+    font-size: 24px;
+    text-align: center;
+    margin-bottom: 5px;
+    border: 1px solid lightgray;
+    cursor: pointer;
+}
+
+.menuItem:hover {
+    background: lightgray;
+    color: white;
+    font-weight: 400;
+}
+
+.menuItemSelected {
+    width: 174px;
+    padding: 13px;
+    font-size: 24px;
+    text-align: center;
+    margin-bottom: 5px;
+    border: 1px solid lightgray;
+    background: gray;
+    color: white;
+    font-weight: 400;
+}
+
--- a/src/main/resources/static/js/design.js
+++ b/src/main/resources/static/js/design.js
@@ -0,0 +1,17 @@
+var advancedVisibility = false;
+var selectMenu = $("#selectMenuContent");
+var advancedTab = $("#advanced");
+function changeAdvancedVisibility(){
+    if(advancedVisibility){
+        selectMenu.css('display', 'none');
+        advancedTab.css('display', 'none');
+        advancedVisibility = false;
+    }
+    else {
+        selectMenu.css('display', 'block');
+        advancedTab.css('display', 'block');
+        advancedVisibility = true;
+    }
+}
+
+document.getElementById("optional").addEventListener("click", changeAdvancedVisibility);