MLAB-205: update images and positioning

js/headfoot.js

@@ -59,18 +59,23 @@ function head() {
     alertbutton.setAttribute("data-dismiss", "alert");
     alertbutton.innerHTML = "×";
     prependChild(alertdiv, alertbutton);
-    
+
     // navigation header
     let navbar = document.createElement("nav");
     navbar.classList.add("navbar", "navbar-expand-md", "navbar-light");
     navbar.style = "background-color: #ffffff;";
-    let fluiddiv = document.createElement("div");
-    fluiddiv.classList.add("container-fluid", "navbar-header");
+
+    let navbarcontainer = document.createElement("div");
+    navbarcontainer.classList.add("container");
+
+    let navbarheader = document.createElement("div");
+    navbarheader.classList.add("navbar-header");
     // navigation header - logo
     let link_m4lab = document.createElement('a');
     link_m4lab.href = "/";
     link_m4lab.classList.add("navbar-brand");
-    link_m4lab.innerHTML = "<img src='images/demo/m4lab_logo.jpg' alt='Logo Innovationslabor M4_LAB'>";
+    link_m4lab.innerHTML = "<img src='img/header/Logozeile_Header.png' alt='Logo Innovationslabor M4_LAB'>";
+    navbarheader.appendChild(link_m4lab);
     // navigation header - toggle button menu for mobile devices
     let togglebutton = document.createElement('button');
     togglebutton.classList.add("navbar-toggler")
@@ -81,13 +86,10 @@ function head() {
     togglebutton.setAttribute("aria-expanded", "false");
     togglebutton.setAttribute("aria-label", "Toggle navigation");
     togglebutton.innerHTML = "<span class='navbar-toggler-icon'></span>";
-    // navigation header - menu
-    let navbardiv = document.createElement("div");
-    navbardiv.classList.add("collapse", "navbar-collapse");
-    navbardiv.id = "navbarCollapse"
+    // nav menu
     let navelements = document.createElement('ul');
-    navelements.id="navelemente";
-    navelements.classList.add("navbar-nav", "mr-auto");
+    navelements.id="navbarCollapse";
+    navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
     for(let j = 0; j<menu.length; j++){
         let headitem = document.createElement('li');
         let itemtype = menu[j].type;
@@ -122,12 +124,11 @@ function head() {
         prependChild(headitem, headlink)
         navelements.appendChild(headitem);
     }
-    navbardiv.appendChild(navelements);
 
-    fluiddiv.appendChild(link_m4lab);
-    fluiddiv.appendChild(togglebutton);
-    fluiddiv.appendChild(navbardiv);
-    navbar.appendChild(fluiddiv);
+    navbarcontainer.appendChild(navbarheader);
+    navbarcontainer.appendChild(togglebutton);
+    navbarcontainer.appendChild(navelements);
+    navbar.appendChild(navbarcontainer)
 
     navheader.appendChild(alertdiv);
     navheader.appendChild(navbar);
@@ -138,26 +139,42 @@ function head() {
  * creates footer and appends it to the documents body
  */
 
-function foot(){
+function foot() {
     let footerdiv = document.createElement('div');
     footerdiv.id="homepage";
     footerdiv.classList.add("last", "clear");
     footerdiv.innerHTML = "<hr>";
     let containerdiv = document.createElement('div');
-    containerdiv.classList.add('container-fluid');
+    containerdiv.classList.add('container');
     let containerdivrow = document.createElement('div');
     containerdivrow.classList.add('row');
-    let hftlink = document.createElement('a');
-    hftlink.classList.add("col-md-3");
-    hftlink.href="https://www.hft-stuttgart.de";
-    let hftimage = document.createElement('img');
-    hftimage.src="images/demo/hft_logo.jpg"; 
-    hftimage.alt="Logo der Hochschule für Technik Stuttgart";
-    hftimage.height= '75';
-    hftlink.appendChild(hftimage);
-    containerdivrow.appendChild(hftlink);
+
+    //bmbf
+    let bmbf = document.createElement('div');
+    bmbf.classList.add("col-md-auto");
+    bmbf.innerHTML = "<img src='img/footer/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.png' alt='Innovative Hochschule' style='height:90px'/>"
+    //m4labgrau
+    let m4labgrau = document.createElement('div');
+    m4labgrau.classList.add("col-md-auto");
+    m4labgrau.innerHTML = "<img src='img/footer/M4_LAB_LOGO_Graustufen.png' alt='M4_LAB' style='height:80px'/>"
+    // socmed
+    let socialdiv = document.createElement('div');
+    socialdiv.classList.add("col-md-auto");
+    let socialrow = document.createElement('div');
+    socialrow.id="socialmediabuttons";
+    for(let j = 0; j< socialmedias.length; j++){
+        let sociallink = document.createElement('a');
+        sociallink.href = socialmedias[j].url;
+        let socialcontent = document.createElement('i');
+        socialcontent.classList.add("fab", socialmedias[j].name);
+        sociallink.appendChild(socialcontent);
+        socialrow.appendChild(sociallink);
+        socialrow.innerHTML+="&nbsp;";
+    }
+    socialdiv.appendChild(socialrow);
+    // contact
     let contactdiv = document.createElement('div');
-    contactdiv.classList.add("col-md-3", "footer-unten")
+    contactdiv.classList.add("col-md-auto", "footer-unten")
     contactdiv.innerHTML="Hochschule für Technik Stuttgart";
     let rowdiv = document.createElement('div');
     rowdiv.classList.add("row");
@@ -172,38 +189,16 @@ function foot(){
         rowdiv.appendChild(coldiv);
     }
     contactdiv.appendChild(rowdiv);
-    containerdivrow.appendChild(contactdiv);
-    let socialdiv = document.createElement('div');
-    socialdiv.classList.add("col-md-3");
-    let socialrow = document.createElement('div');
-    socialrow.id="socialmediabuttons";
-    for(let j = 0; j< socialmedias.length; j++){
-        let sociallink = document.createElement('a');
-        sociallink.href = socialmedias[j].url;
-        let socialcontent = document.createElement('i');
-        socialcontent.classList.add("fab", socialmedias[j].name);
-        sociallink.appendChild(socialcontent);
-        socialrow.appendChild(sociallink);
-        socialrow.innerHTML+="&nbsp;";
-    }
-    socialdiv.appendChild(socialrow);
+
+    containerdivrow.appendChild(bmbf);
+    containerdivrow.appendChild(m4labgrau);
     containerdivrow.appendChild(socialdiv);
-    let imagediv = document.createElement('div');
-    imagediv.classList.add("col-md-3");
-    for (let k = 0; k< footer_images.length; k++){
-        let image = document.createElement('img');
-        image.src = footer_images[k].src;
-        image.width="300";
-        image.height= "73";
-        image.alt = footer_images[k].alt;
-        imagediv.appendChild(image);
-    }
-    containerdivrow.appendChild(imagediv);
+    containerdivrow.appendChild(contactdiv);
+
     containerdiv.appendChild(containerdivrow);
     footerdiv.appendChild(containerdiv);
     document.body.appendChild(footerdiv);
-};
-
+}
 
 head();
 foot();