Header more mobile-friendly

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>

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>

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

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>

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>

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>

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>

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>

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

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>-->

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>

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

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>

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);

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

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>