From 4dcfae8c847a79066bce001042f95c1001fccbd6 Mon Sep 17 00:00:00 2001
From: Josh Borrow <joshua.borrow@durham.ac.uk>
Date: Fri, 18 Aug 2017 14:16:29 +0100
Subject: [PATCH] Added mobile navbar and required javascript
---
javascript/navbar.js | 15 +++++++++++++++
stylesheets/stylesheet.css | 17 ++++++++++++++++-
templates/base.html | 1 +
templates/helpers.html | 9 ++++++---
4 files changed, 38 insertions(+), 4 deletions(-)
create mode 100644 javascript/navbar.js
diff --git a/javascript/navbar.js b/javascript/navbar.js
new file mode 100644
index 0000000..37813c6
--- /dev/null
+++ b/javascript/navbar.js
@@ -0,0 +1,15 @@
+var showhide = document.getElementById('showhide')
+
+showhide.style.cursor = 'pointer'
+var leftnav = document.getElementById('left-nav')
+var rightnav = document.getElementById('right-nav')
+
+showhide.onclick = function() {
+ if ((leftnav.style.display == "none") || (leftnav.style.display == "")) {
+ leftnav.style.display="inline"
+ rightnav.style.display="inline"
+ } else {
+ leftnav.style.display="none";
+ rightnav.style.display="none";
+ }
+};
\ No newline at end of file
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index ba9b98d..cbde681 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -138,6 +138,17 @@ h1, h2, h3, h4, h5, h6 {
text-decoration: none;
}
+.navbutton {
+ display: none;
+ width: 100%;
+}
+
+.navbutton i {
+ float: right;
+ padding: 1em;
+ color: white;
+}
+
/* We only want a border on all but the last element to act as a separator */
.rightborder {
border-right: 1px solid white;
@@ -170,12 +181,16 @@ h1, h2, h3, h4, h5, h6 {
max-height: 15%;
}
-
/* Media Queries */
@media screen and (max-width: 768px) {
+ .navbutton {
+ display: block;
+ }
+
.left-nav, .right-nav {
width: 100%;
+ display: none;
}
.left-nav ul, .right-nav ul {
diff --git a/templates/base.html b/templates/base.html
index c1a53f2..ffca0e0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,6 +16,7 @@
<body>
{% block content %}{% endblock %}
{% block js %}{% endblock %}
+ <script src="navbar.js"></script>
</body>
</html>
diff --git a/templates/helpers.html b/templates/helpers.html
index 44ce883..0af1319 100644
--- a/templates/helpers.html
+++ b/templates/helpers.html
@@ -17,7 +17,10 @@
link is simply the link to the codebase (this is stored in a data file rather than the template).
#}
<div class='nav mono'>
- <div class='left-nav'>
+ <div class="navbutton" id="showhide">
+ <i class="fa fa-bars" aria-hidden="true"></i>
+ </div>
+ <div class="left-nav" id="left-nav">
<ul>
{% for item in items %}
<li class="{{ item[2] }}">
@@ -29,9 +32,9 @@
</ul>
</div>
- <div class='right-nav'>
+ <div class="right-nav" id="right-nav">
<ul>
- <li class='btn-orange code'>
+ <li class="btn-orange code">
<a href="{{ link }}"><i class="fa fa-gitlab" aria-hidden="true"></i> Code</a>
</li>
</ul>
--
GitLab