Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

icon & font

Browse source
This commit is contained in:
irismarie 2021-03-09 16:23:56 +01:00
parent 71cf864902
commit d82f24dc3f
6 changed files with 44 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type=image/x-icon href="%PUBLIC_URL%/favicon.ico">
<link id="dynamic-favicon" rel="shortcut icon" type=image/x-icon href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.

34
src/app.js
View file

@ -60,17 +60,30 @@ class App extends React.Component {
}
this.setBrandingStyle();
//const head = document.querySelector('head');
/*
document.body.style.backgroundColor = "black";
const rootEl = document.querySelector(':root');
rootEl.style.setProperty('--highlights', 'yellow');
rootEl.style.setProperty('--bg', 'blue');
**/
}
changeHead() {
if (Branding.instance.default) {
console.log("default branding");
return;
}
document.title = Branding.instance.brand.title + " " + Branding.instance.brand.subtitle;
var oldlink = document.getElementById('dynamic-favicon');
var link = document.createElement('link');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon'
link.href = Branding.instance.brand.icon;
if (oldlink) {
document.head.removeChild(oldlink);
}
document.head.appendChild(link);
}
setBrandingStyle() {
this.changeHead();
const rootEl = document.querySelector(':root');
let background = Branding.instance.getBackgroundColor();
@ -92,6 +105,11 @@ class App extends React.Component {
if (secondary) {
rootEl.style.setProperty('--secondary', secondary);
}
let font = Branding.instance.getFont();
if (font) {
rootEl.style.setProperty('--mainfont', font);
}
}
componentDidMount() {

12
src/branding/branding.js
View file

@ -29,7 +29,10 @@ class Branding {
if (!brand) {
console.error("Branding '" + chosenbrand + "' not available, will use 'villasweb' branding");
brand = _.get(brands, ['villasweb']);
chosenbrand = 'villasweb'
chosenbrand = 'villasweb';
this.default = true;
} else {
this.default = false;
}
this.brand = brand;
@ -81,6 +84,13 @@ class Branding {
}
return null;
}
getFont() {
if (this.brand.style && this.brand.style.font) {
return this.brand.style.secondarytext;
}
return null;
}
};

2
src/branding/brands.js
View file

@ -39,6 +39,7 @@ const brands = {
title: 'SLEW',
subtitle: 'Second Life for Energiewende',
logo: "slew-logo.png",
icon: "/slew_icon.png",
pages: {
home: true,
scenarios: true,
@ -56,6 +57,7 @@ const brands = {
highlights: '#610C04',
primarytext: '#420C09',
secondarytext: '#710C04',
font: "16px Roboto, sans-serif",
}
},
test: {

5
src/common/home.js
View file

@ -42,9 +42,8 @@ class Home extends React.Component {
return (
<div>
{branding.getHome(currentUser.username, currentUser.id, currentUser.role)}
</div>
);
}
</div>);
}
}
export default Home;

3
src/styles/app.css
View file

@ -24,6 +24,7 @@
--highlights: #527984;
--primarytext: #4d4d4d;
--secondarytext: #818181;
--mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body {
@ -34,7 +35,7 @@ body {
height: 100vh;
color: var(--primarytext);
font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
font: var(--mainfont);
hyphens: auto;
}