From 37dabdd39ce10c5e64bae1c18aaa96851b990435 Mon Sep 17 00:00:00 2001
From: Simon Barner <barner@fortiss.org>
Date: Thu, 28 May 2020 13:08:26 +0200
Subject: [PATCH] Layout and style optimizations
* Get rid of external icon font dependency
* Remove fortiss logo
* Alignment of dropdown menus
* Add a few further TODOs
Issue-Ref: 4006
Issue-Url: https://af3-developer.fortiss.org/issues/4006
Signed-off-by: Simon Barner <barner@fortiss.org>
---
.../html/requirements/MIRA.glossary.html | 31 +++++++------
.../html/requirements/stylesheet.css | 46 ++++++++++++++++---
2 files changed, 55 insertions(+), 22 deletions(-)
diff --git a/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html b/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html
index 1fc40f7..314ee3b 100644
--- a/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html
+++ b/org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html
@@ -1,27 +1,27 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<!--
- Documentation of MIRA - Model-based Integrated Requirements Analysis.
-
- @author abid
- @ConQAT.Rating GREEN Hash: 850E39092E4DF6F9EEB6D26D886BEF68
--->
+<!-- Documentation of MIRA - Model-based Integrated Requirements Analysis. -->
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="box">
<div class="navbar">
-<a href="https://www.fortiss.org/" align="left">
+<!--a href="https://www.fortiss.org/" align="left">
<img src="fortiss-logo.png" width="90px" height="20px" align="left">
-</a>
+</a-->
<div class="dropdown">
- <button class="btn"><i class="fa fa-bars"></i></button>
+ <button class="btn" id="hamburger">
+ <label for="hamburger" class="hamburger">
+ <span class="hamburgerLine"></span>
+ <span class="hamburgerLine"></span>
+ <span class="hamburgerLine"></span>
+ </label>
+ </button>
<div class="dropdown-content">
<a href="../getting_started.html"> Main Page</a>
<a href="#">Modeling and Simulation</a>
@@ -32,7 +32,7 @@
</div>
</div>
<div class="dropdown">
- <button class="dropbtn">Requirements Engineering <i class="fa fa-caret-down"></i></button>
+ <button class="dropbtn">Requirements Engineering <i class="triangle"></i></button>
<div class="dropdown-content">
<a href="MIRA.requirements_analysis.html">Requirements Analysis</a>
<a href="MIRA.requirements.html">Requirements Creation</a>
@@ -48,7 +48,7 @@
</div>
<div class="box">
-<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
+<button onclick="topFunction()" id="upBtn" title="Go to top">Top</button>
<h2>Creating a Glossary</h2>
@@ -91,18 +91,19 @@ When you add a picture it is copied into the <i>Images</i> folder in the project
If you want to send the model file to someone else, you should also send the <i>Images</i> folder. </p>
</div>
+<!-- TODO (SB): Move to separate .js file -->
<script>
//Get the button
-var mybutton = document.getElementById("myBtn");
+var upButton = document.getElementById("upBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
- mybutton.style.display = "block";
+ upButton.style.display = "block";
} else {
- mybutton.style.display = "none";
+ upButton.style.display = "none";
}
}
diff --git a/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css b/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css
index 82f1786..caf0ce1 100644
--- a/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css
+++ b/org.fortiss.af3.rcp.help/html/requirements/stylesheet.css
@@ -1,5 +1,5 @@
.btn {
- background-color: inherit;
+ background-color: #004696;
border: none;
color: white;
padding: 16px 17px;
@@ -181,16 +181,18 @@ h4 {
outline: none;
color: white;
padding: 14px 16px;
- background-color: inherit;
+ background-color: #004696;
font-family: inherit;
margin: 0;
}
.dropdown-content {
+ position: relative;
+ top: 50px; /* TODO (SB): This might why the drop-down menu disappears when you are not fast enough.*/
display: none;
position: absolute;
background-color: white;
- min-width: 160px;
+ min-width: 300px;
box-shadow: white;
z-index: 1;
}
@@ -205,7 +207,7 @@ h4 {
}
.topnav a:hover, .dropdown:hover {
- background-color: #555;
+ background-color: #004696;
color: white;
}
@@ -251,7 +253,7 @@ h4 {
}
/* up button */
- #myBtn {
+ #upBtn {
display: none;
position: fixed;
bottom: 20px;
@@ -267,10 +269,40 @@ h4 {
border-radius: 4px;
}
-#myBtn:hover {
- background-color: #555;
+#upBtn:hover {
+ color: #add8e6;
}
+label.hamburger {
+ display: block;
+ background: #004696;
+ width: 18px; height: 18px;
+ position: relative;
+ margin-left: 0px;
+ margin-right: 0px;
+ border-radius: 0px;
+}
+.hamburgerLine {
+ position: absolute;
+ left:2px;
+ height: 2px; width: 18px;
+ background: #fff; border-radius: 2px;
+ display: block;
+}
+.hamburgerLine:nth-child(1) { top: 2px; }
+.hamburgerLine:nth-child(2) { top: 8px; }
+.hamburgerLine:nth-child(3) { top: 14px; }
+
+.triangle {
+ position: absolute;
+ top: 22px;
+ width: 0;
+ height: 0;
+ margin-left: 6px;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-top: 7px solid white;
+}
\ No newline at end of file
--
GitLab