diff --git a/js/headfoot.js b/js/headfoot.js index 5ad1aab6a3d7fce44954447be5c1fa008b59f3ca..d5c002a92e399c1747305575498f9aed271ad60a 100755 --- a/js/headfoot.js +++ b/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+=" "; + } + 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+=" "; - } - 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();