Skip to content
GitLab
Commit e857d332 authored by Rosanny Sihombing's avatar Rosanny Sihombing
Browse files

MLAB-205: update images and positioning

parent d45b7fcf
master testing
3 merge requests!32Prepare production,!29Mlab 197,!23Mlab 205
This commit is part of merge request !32. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
Showing
with 50 additions and 55 deletions
+50 -55
js/headfoot.js
+ 50
- 55
View file @ e857d332
......@@ -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();
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal