Merge branch 'MLAB-571' into 'testing'

Header more mobile-friendly See merge request !140

Merge branch 'MLAB-571' into 'testing'
Header more mobile-friendly See merge request !140
d4833cdb · Koukofikis · 81a2c0ea · 4a5e143e · d4833cdb · d4833cdb
Commit d4833cdb authored Nov 03, 2021 by Koukofikis
--- 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>
--- 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>
--- a/css/m4lab-mobile.css
+++ b/css/m4lab-mobile.css
+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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>-->

--- 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>
--- 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
--- 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>
--- 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 = "&times 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);

--- a/js/mobile.js
+++ b/js/mobile.js
+
+// 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
--- 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>