Skip to content
Snippets Groups Projects
Commit 37dabdd3 authored by Simon Barner's avatar Simon Barner
Browse files

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: default avatarSimon Barner <barner@fortiss.org>
parent db65aefd
No related branches found
No related tags found
1 merge request!31Task 4006 online help content
This commit is part of merge request !31. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
org.fortiss.af3.rcp.help/html/requirements/MIRA.glossary.html
+ 16
− 15
View file @ 37dabdd3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- <!-- Documentation of MIRA - Model-based Integrated Requirements Analysis. -->
Documentation of MIRA - Model-based Integrated Requirements Analysis.
@author abid
@ConQAT.Rating GREEN Hash: 850E39092E4DF6F9EEB6D26D886BEF68
-->
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"> <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> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="box"> <div class="box">
<div class="navbar"> <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"> <img src="fortiss-logo.png" width="90px" height="20px" align="left">
</a> </a-->
<div class="dropdown"> <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"> <div class="dropdown-content">
<a href="../getting_started.html"> Main Page</a> <a href="../getting_started.html"> Main Page</a>
<a href="#">Modeling and Simulation</a> <a href="#">Modeling and Simulation</a>
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
</div> </div>
</div> </div>
<div class="dropdown"> <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"> <div class="dropdown-content">
<a href="MIRA.requirements_analysis.html">Requirements Analysis</a> <a href="MIRA.requirements_analysis.html">Requirements Analysis</a>
<a href="MIRA.requirements.html">Requirements Creation</a> <a href="MIRA.requirements.html">Requirements Creation</a>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</div> </div>
<div class="box"> <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> <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 ...@@ -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> If you want to send the model file to someone else, you should also send the <i>Images</i> folder. </p>
</div> </div>
<!-- TODO (SB): Move to separate .js file -->
<script> <script>
//Get the button //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 // When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()}; window.onscroll = function() {scrollFunction()};
function scrollFunction() { function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block"; upButton.style.display = "block";
} else { } else {
mybutton.style.display = "none"; upButton.style.display = "none";
} }
} }
......
org.fortiss.af3.rcp.help/html/requirements/stylesheet.css
+ 39
− 7
View file @ 37dabdd3
.btn { .btn {
background-color: inherit; background-color: #004696;
border: none; border: none;
color: white; color: white;
padding: 16px 17px; padding: 16px 17px;
...@@ -181,16 +181,18 @@ h4 { ...@@ -181,16 +181,18 @@ h4 {
outline: none; outline: none;
color: white; color: white;
padding: 14px 16px; padding: 14px 16px;
background-color: inherit; background-color: #004696;
font-family: inherit; font-family: inherit;
margin: 0; margin: 0;
} }
.dropdown-content { .dropdown-content {
position: relative;
top: 50px; /* TODO (SB): This might why the drop-down menu disappears when you are not fast enough.*/
display: none; display: none;
position: absolute; position: absolute;
background-color: white; background-color: white;
min-width: 160px; min-width: 300px;
box-shadow: white; box-shadow: white;
z-index: 1; z-index: 1;
} }
...@@ -205,7 +207,7 @@ h4 { ...@@ -205,7 +207,7 @@ h4 {
} }
.topnav a:hover, .dropdown:hover { .topnav a:hover, .dropdown:hover {
background-color: #555; background-color: #004696;
color: white; color: white;
} }
...@@ -251,7 +253,7 @@ h4 { ...@@ -251,7 +253,7 @@ h4 {
} }
/* up button */ /* up button */
#myBtn { #upBtn {
display: none; display: none;
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
...@@ -267,10 +269,40 @@ h4 { ...@@ -267,10 +269,40 @@ h4 {
border-radius: 4px; border-radius: 4px;
} }
#myBtn:hover { #upBtn:hover {
background-color: #555; 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment