From 4a5e143efaa93c44e5d31da38c6fa560c40b91ef Mon Sep 17 00:00:00 2001
From: Athanasios <ath.kouk.oid@gmail.com>
Date: Wed, 3 Nov 2021 09:34:08 +0100
Subject: [PATCH] Header more mobile-friendly
---
bwcloud.html | 2 ++
confluence.html | 2 ++
css/m4lab-mobile.css | 33 +++++++++++++++++++++++++++++++++
help/gitlab-pages.html | 2 ++
help/gitlab.html | 2 ++
help/hpc.html | 2 ++
help/index.html | 2 ++
help/jitsi.html | 2 ++
help/mailinglists.html | 2 ++
index.html | 2 ++
info_hpc.html | 2 ++
info_partizipation.html | 2 ++
jira.html | 2 ++
js/headfoot.js | 36 ++++++++++++++++++++++++++++++------
js/mobile.js | 20 ++++++++++++++++++++
videoconference.html | 2 ++
16 files changed, 109 insertions(+), 6 deletions(-)
create mode 100644 css/m4lab-mobile.css
create mode 100644 js/mobile.js
diff --git a/bwcloud.html b/bwcloud.html
index f9f5247..c26ea90 100644
--- a/bwcloud.html
+++ b/bwcloud.html
@@ -7,6 +7,7 @@
<title>Kollaborative Dateibearbeitung</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -79,6 +80,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/confluence.html b/confluence.html
index 4e44432..f74a55f 100644
--- a/confluence.html
+++ b/confluence.html
@@ -7,6 +7,7 @@
<title>Wissensaustausch</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -83,6 +84,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/css/m4lab-mobile.css b/css/m4lab-mobile.css
new file mode 100644
index 0000000..8f1feb0
--- /dev/null
+++ b/css/m4lab-mobile.css
@@ -0,0 +1,33 @@
+body.offcanvas-active {
+ overflow: hidden;
+}
+
+.offcanvas-header {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .offcanvas-header {
+ display: block;
+ }
+
+ .navbar-collapse {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 100%;
+ width: 100%;
+ padding-right: 1rem;
+ padding-left: 1rem;
+ overflow-y: auto;
+ visibility: hidden;
+ background-color: white;
+ transition: visibility .2s ease-in-out, transform .2s ease-in-out;
+ }
+
+ .navbar-collapse.show {
+ z-index: 1;
+ visibility: visible;
+ transform: translateX(-100%);
+ }
+}
\ No newline at end of file
diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html
index b278887..1baddbe 100644
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -7,6 +7,7 @@
<title>Hilfe: Gitlab-Pages</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -643,6 +644,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/help/gitlab.html b/help/gitlab.html
index bc42162..21310c5 100644
--- a/help/gitlab.html
+++ b/help/gitlab.html
@@ -7,6 +7,7 @@
<title>Hilfe: Gitlab</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -194,6 +195,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/help/hpc.html b/help/hpc.html
index 575e791..bdf0489 100644
--- a/help/hpc.html
+++ b/help/hpc.html
@@ -7,6 +7,7 @@
<title>Hilfe: Gitlab-Pages</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -144,6 +145,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/help/index.html b/help/index.html
index c6dd6e4..fa23d30 100644
--- a/help/index.html
+++ b/help/index.html
@@ -7,6 +7,7 @@
<title>Hilfe</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -118,6 +119,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/help/jitsi.html b/help/jitsi.html
index fcc7515..cd07363 100644
--- a/help/jitsi.html
+++ b/help/jitsi.html
@@ -7,6 +7,7 @@
<title>Hilfe: Jitsi</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -67,6 +68,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/help/mailinglists.html b/help/mailinglists.html
index b9885eb..9cb2257 100644
--- a/help/mailinglists.html
+++ b/help/mailinglists.html
@@ -7,6 +7,7 @@
<title>Hilfe: Mailinglisten</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -522,6 +523,7 @@
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+ <script src="/js/mobile.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6498897..ae3ed47 100755
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
<title>Transferportal HfT Stuttgart</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
@@ -79,6 +80,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
<!--<script src="./js/bootstrap-collapse.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
diff --git a/info_hpc.html b/info_hpc.html
index fc2e76e..e0166d8 100644
--- a/info_hpc.html
+++ b/info_hpc.html
@@ -7,6 +7,7 @@
<title>Infos zur Hochleistungsrechnen</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -114,6 +115,7 @@ Um dieses rechenintensive Problem zu lösen, läuft der Algorithmus auf dem HPC
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/info_partizipation.html b/info_partizipation.html
index 8a6a06d..8a31bda 100644
--- a/info_partizipation.html
+++ b/info_partizipation.html
@@ -7,6 +7,7 @@
<title>Infos zur Bürgerbeteiligung</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -227,6 +228,7 @@
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+ <script src="/js/mobile.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/jira.html b/jira.html
index 808f4e9..ff75737 100644
--- a/jira.html
+++ b/jira.html
@@ -7,6 +7,7 @@
<title>Aufgabenmanagement</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -84,6 +85,7 @@
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
</body>
</html>
diff --git a/js/headfoot.js b/js/headfoot.js
index fd23991..62428bf 100755
--- a/js/headfoot.js
+++ b/js/headfoot.js
@@ -80,16 +80,37 @@ function head() {
let togglebutton = document.createElement('button');
togglebutton.classList.add("navbar-toggler")
togglebutton.type = "button";
- togglebutton.setAttribute("data-toggle", "collapse");
- togglebutton.setAttribute("data-target", "#navbarCollapse");
+ // togglebutton.setAttribute("data-toggle", "collapse");
+ togglebutton.setAttribute("data-target", "#mainNav");
togglebutton.setAttribute("aria-controls", "navbarCollapse");
togglebutton.setAttribute("aria-expanded", "false");
togglebutton.setAttribute("aria-label", "Toggle navigation");
togglebutton.innerHTML = "<span class='navbar-toggler-icon'></span>";
+
+ // main nav
+ let mainNav = document.createElement('div');
+ mainNav.setAttribute("id", "mainNav");
+ mainNav.classList.add("navbar-collapse");
+
+ // offcanvasHeader
+ let offcanvasHeader = document.createElement('div');
+ offcanvasHeader.classList.add("offcanvas-header", "mt-3");
+
+ // close button
+ let closeButton = document.createElement('button');
+ closeButton.classList.add("btn", "btn-outline-danger", "btn-close", "float-right");
+ closeButton.innerHTML = "× Schließen";
+
+ // offcanvas title
+ let offcanvasTitle = document.createElement('h5');
+ offcanvasTitle.classList.add("py-2");
+ offcanvasTitle.innerHTML = "Hauptnavigation";
+
// nav menu
let navelements = document.createElement('ul');
- navelements.id="navbarCollapse";
- navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
+ // navelements.id="navbarCollapse";
+ // navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
+ navelements.classList.add("nav", "navbar-nav", "justify-content-end");
for(let j = 0; j<menu.length; j++){
let headitem = document.createElement('li');
let itemtype = menu[j].type;
@@ -133,9 +154,12 @@ function head() {
navbarcontainer.appendChild(navbarheader);
navbarcontainer.appendChild(togglebutton);
- navbarcontainer.appendChild(navelements);
+ offcanvasHeader.appendChild(closeButton);
+ offcanvasHeader.appendChild(offcanvasTitle);
+ mainNav.appendChild(offcanvasHeader);
+ mainNav.appendChild(navelements);
+ navbarcontainer.appendChild(mainNav);
navbar.appendChild(navbarcontainer)
-
navheader.appendChild(alertdiv);
navheader.appendChild(navbar);
prependChild(document.body, navheader);
diff --git a/js/mobile.js b/js/mobile.js
new file mode 100644
index 0000000..b5b5f73
--- /dev/null
+++ b/js/mobile.js
@@ -0,0 +1,20 @@
+
+// show offcanvas menu
+$(".navbar-toggler").on("click", function () {
+ $("#mainNav").toggleClass("show");
+ $('body').toggleClass("offcanvas-active");
+});
+
+// close if press ESC button
+$(document).on('keydown', function (event) {
+ if (event.keyCode === 27) {
+ $(".navbar-collapse").removeClass("show");
+ $("body").removeClass("overlay-active");
+ }
+});
+
+// close button
+$(".btn-close").click(function (e) {
+ $(".navbar-collapse").removeClass("show");
+ $("body").removeClass("offcanvas-active");
+});
\ No newline at end of file
diff --git a/videoconference.html b/videoconference.html
index a499b27..0eaa5a8 100644
--- a/videoconference.html
+++ b/videoconference.html
@@ -7,6 +7,7 @@
<title>Videokonferenzen</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/m4lab.css">
+ <link rel="stylesheet" href="/css/m4lab-mobile.css">
<link rel="stylesheet" href="/fonts/font-awesome.min.css">
<link rel="stylesheet" href="/fonts/ionicons.min.css">
<link rel="stylesheet" href="/css/Testimonials.css">
@@ -149,6 +150,7 @@
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="/js/headfoot.js"></script>
+ <script src="/js/mobile.js"></script>
</body>
</html>
--
GitLab