[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-anastasis-www] branch master updated: topnav changes
|
From: |
gnunet |
|
Subject: |
[taler-anastasis-www] branch master updated: topnav changes |
|
Date: |
Fri, 28 Aug 2020 15:50:11 +0200 |
This is an automated email from the git hooks/post-receive script.
ds-meister pushed a commit to branch master
in repository anastasis-www.
The following commit(s) were added to refs/heads/master by this push:
new 1d89165 topnav changes
1d89165 is described below
commit 1d89165b9807a12b09137ede44eddbe307acdfed
Author: Dominik Meister <dominik.meister@hotmail.ch>
AuthorDate: Fri Aug 28 15:50:04 2020 +0200
topnav changes
---
common/base.j2 | 3 ---
common/navigation.j2.inc | 38 ++++++++++++++++++++++++++----
static/styles.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++--
3 files changed, 92 insertions(+), 9 deletions(-)
diff --git a/common/base.j2 b/common/base.j2
index 7d2742d..e31bd9e 100644
--- a/common/base.j2
+++ b/common/base.j2
@@ -10,9 +10,6 @@
<body>
<div id="page-container">
<div id="content-wrap">
- <div class="main-title">
- <h1 style="color:white;">Anastasis</h1>
- </div>
<div class="toolbar">
{% include "common/navigation.j2.inc" %}
</div>
diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index cc8dc5e..9bbda17 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -10,14 +10,44 @@
{{ navlink('about.html', _('About')) }}
{{ navlink('docs.html', _('Docs')) }}
{{ navlink('news/index.html', _('News')) }}
-<a href="{{ self_localized('en') }}" style="float:right;">EN</a>
-<a href="{{ self_localized('de') }}" style="float:right;">DE</a>
-<a href="javascript:void(0);" class="icon" onclick="myFunction()">
+<a href="javascript:void(0);" class="icon" onclick="burgerChange()">
<i class="fa fa-bars"></i></a>
</div>
+<div class="dropdown">
+ <button onclick="dropDown()" class="dropbtn">{{lang}}</button>
+ <div id="myDropdown" class="dropdown-content">
+ <a href="{{ self_localized('en') }}">en</a>
+ <a href="{{ self_localized('de') }}">de</a>
+ </div>
+</div>
+
+
+
+
<script>
-function myFunction() {
+
+/* When the user clicks on the button,
+toggle between hiding and showing the dropdown content */
+function dropDown() {
+ document.getElementById("myDropdown").classList.toggle("show");
+}
+
+// Close the dropdown menu if the user clicks outside of it
+window.onclick = function(event) {
+ if (!event.target.matches('.dropbtn')) {
+ var dropdowns = document.getElementsByClassName("dropdown-content");
+ var i;
+ for (i = 0; i < dropdowns.length; i++) {
+ var openDropdown = dropdowns[i];
+ if (openDropdown.classList.contains('show')) {
+ openDropdown.classList.remove('show');
+ }
+ }
+ }
+}
+
+function burgerChange() {
var x = document.getElementById("navigation");
if (x.className === "topnav") {
x.className += " responsive";
diff --git a/static/styles.css b/static/styles.css
index 2f48bb6..dad46d5 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -50,10 +50,14 @@ h3 {
/* Toolbar style*/
/******************************************/
+.toolbar {
+ background-color: #333;
+ display: flex;
+ justify-content: space-between;
+}
.topnav {
- overflow: hidden;
- background-color: #333;
+ overflow: hidden;
margin: 0;
padding: 0;
}
@@ -101,6 +105,58 @@ h3 {
}
+ /* Dropdown Button */
+.dropbtn {
+ background-color: #333;
+ display: block;
+ color: white;
+ border: none;
+ text-align: center;
+ padding: 20px 20px;
+ text-decoration: none;
+ /* Does not inherit for some reason ? */
+ font-size: 20px;
+ font-family: 'Lato';
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+ background-color: #2980B9;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+ position: relative;
+ float: right;
+ display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+ width: 100%;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
+.show {display:block;}
+
+
+
/* Flex Box Layouts for the different pages*/
/*******************************************/
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-anastasis-www] branch master updated: topnav changes,
gnunet <=