fknoch/vc-customization
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Extend quicklinks and style language chooser

Browse Source
This commit is contained in:
Linux User 2021-02-18 18:53:34 +01:00
parent 208e7d8958
commit ee43574972
2 changed files with 86 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
eets-wiai.css
View File

@ -34,8 +34,8 @@
} }
.wiai-quick-link { .wiai-quick-link {
height: 60px; height: 40px;
width: 60px; width: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -56,3 +56,29 @@
color: var(--color); color: var(--color);
text-decoration: none; text-decoration: none;
} }
.wiai-quick-link .fa {
font-size: 200%;
}
/**
* Lanugage chooser
* ================
*/
div.wiai-language-chooser {
margin: 0;
}
div.wiai-language-chooser .wiai-language-option {
border: none;
margin: 0;
margin-bottom: 2px;
background-color: #19adc6;
font-weight: bold;
color: rgba(255, 255, 255, .6);
}
div.wiai-language-chooser .wiai-language-option.active {
background-color: #038399;
color: white;
}

67
eets-wiai.js
View File

@ -1,3 +1,5 @@
(function module() {
const URL = "https://wiai.stuve-bamberg.de/vc-customization/" const URL = "https://wiai.stuve-bamberg.de/vc-customization/"
const LOGO_URL = "img/logos/" const LOGO_URL = "img/logos/"
@ -9,7 +11,7 @@ const quickLinks = [
url_english: "https://wiai.de/home", url_english: "https://wiai.de/home",
background: "#00457d", background: "#00457d",
color: "white", color: "white",
icon: "map-marked" icon: "gamepad"
}, },
{ {
name_german: "Teams", name_german: "Teams",
@ -19,7 +21,34 @@ const quickLinks = [
background: "#6731b7", background: "#6731b7",
color: "transparent", color: "transparent",
logo: "microsoft-teams.jpg" logo: "microsoft-teams.jpg"
} },
{
name_german: "Zeitplan",
name_english: "Schedule",
url_german: "#",
url_english: "#",
background: "#6731b7",
color: "white",
icon: "calendar-alt"
},
{
name_german: "Hilfe & FAQ",
name_english: "Help & FAQ",
url_german: "https://vc.uni-bamberg.de/mod/page/view.php?id=1122808",
url_english: "#",
background: "purple",
color: "white",
icon: "question-circle"
},
{
name_german: "Glossar",
name_english: "Glossary",
url_german: "https://vc.uni-bamberg.de/mod/glossary/view.php?id=1122803",
url_english: "https://vc.uni-bamberg.de/mod/glossary/view.php?id=1122803",
background: "#c16978",
color: "white",
icon: "book"
}
] ]
window.addEventListener('load', init); window.addEventListener('load', init);
@ -70,17 +99,37 @@ function addQuickLinks() {
const element = document.createElement('a'); const element = document.createElement('a');
element.href = quickLink.url_german element.href = quickLink.url_german
element.classList.add('wiai-quick-link'); element.classList.add('wiai-quick-link');
element.classList.add('wiai-german');
element.style.setProperty('--bg-color', quickLink.background); element.style.setProperty('--bg-color', quickLink.background);
element.style.setProperty('--color', quickLink.color); element.style.setProperty('--color', quickLink.color);
if (quickLink.logo) { if (quickLink.logo) {
element.style.setProperty('--bg-image', `url(${URL}${LOGO_URL}${quickLink.logo})`); element.style.setProperty('--bg-image', `url(${URL}${LOGO_URL}${quickLink.logo})`);
element.innerText = quickLink.name_german; element.innerText = quickLink.name_german;
} else { } else {
element.innerHTML = `<i class="fa fa-${quickLink.icon}"/>` element.innerHTML = `<i class="fa fa-${quickLink.icon}"/>`
} }
element.title = `${quickLink.name_german} | ${quickLink.name_english}`; element.title = quickLink.name_german;
quickLinkContainer.appendChild(element); quickLinkContainer.appendChild(element);
const elementEnglish = document.createElement('a');
elementEnglish.href = quickLink.url_english
elementEnglish.classList.add('wiai-quick-link');
elementEnglish.classList.add('wiai-english');
elementEnglish.style.setProperty('--bg-color', quickLink.background);
elementEnglish.style.setProperty('--color', quickLink.color);
if (quickLink.logo) {
elementEnglish.style.setProperty('--bg-image', `url(${URL}${LOGO_URL}${quickLink.logo})`);
elementEnglish.innerText = quickLink.name_english;
} else {
elementEnglish.innerHTML = `<i class="fa fa-${quickLink.icon}"/>`
}
elementEnglish.title = quickLink.name_english;
quickLinkContainer.appendChild(elementEnglish);
}); });
} }
})();