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

Merge pull request #416 from VILLASframework/branding-opalrt

Browse source 
Add OPAL-RT Branding
This commit is contained in:
Steffen Vogel 2023-05-02 16:07:17 +02:00 • committed by GitHub
commit 08a394e61b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 917 additions and 416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
.gitlab-ci.yml
View file

@ -24,26 +24,16 @@ build.slew:
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
extends: build
deploy.latest:
stage: deploy
build.opalrt:
variables:
DOCKER_TAG: latest
before_script:
- docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
script:
- docker push ${DOCKER_IMAGE}:${DOCKER_TAG}
only:
refs:
- master
tags:
- docker
dependencies:
- build
BRANDING: opalrt
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
extends: build
deploy.slew:
deploy:
stage: deploy
variables:
BRANDING: slew
BRANDING: villasweb
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
before_script:
- docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
@ -52,4 +42,24 @@ deploy.slew:
tags:
- docker
dependencies:
- build.slew
- build
deploy.slew:
extends: deploy
variables:
BRANDING: slew
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
deploy.opalrt:
extends: deploy
variables:
BRANDING: opalrt
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
deploy.latest:
extends: deploy
variables:
DOCKER_TAG: latest
only:
refs:
- master

417
src/branding/branding.js
View file

@ -21,253 +21,196 @@ import villasweb_values from './villasweb/villasweb-values';
import { slew_home, slew_welcome } from './slew/slew-functions';
import slew_values from './slew/slew-values';
import { opalrt_home, opalrt_welcome } from './opalrt/opalrt-functions';
import opalrt_values from './opalrt/opalrt-values';
import { template_welcome, template_home, template_footer } from './template/template-functions';
import template_values from './template/template-values';
class Branding {
constructor(chosenbrand) {
this.brand = chosenbrand;
this.setValues();
this.checkValues();
this.applyStyle();
constructor(brand) {
this.brand = brand;
Branding.branding = this;
this.setValues();
this.checkValues();
this.applyStyle();
Branding.branding = this;
}
setValues() {
switch (this.brand) {
case 'villasweb':
this.values = villasweb_values;
break;
case 'slew':
this.values = slew_values;
break;
case 'opalrt':
this.values = opalrt_values;
break;
case 'template':
this.values = template_values;
break;
default:
console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
this.brand = 'villasweb';
this.values = villasweb_values;
break;
}
}
getHome(username = '', userid = '', role = '') {
var homepage = '';
switch (this.brand) {
case 'villasweb':
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
case 'slew':
homepage = slew_home();
break;
case 'opalrt':
homepage = opalrt_home();
break;
case 'template':
homepage = template_home();
break;
default:
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
}
return homepage;
}
getFooter() {
var footer = '';
switch (this.brand) {
case 'template':
footer = template_footer();
break;
default:
footer = villasweb_footer();
break;
}
return footer;
}
getWelcome() {
var welcome = '';
switch (this.brand) {
case 'villasweb':
welcome = villasweb_welcome();
break;
case 'slew':
welcome = slew_welcome();
break;
case 'opalrt':
welcome = opalrt_welcome();
break;
case 'template':
welcome = template_welcome();
break;
default:
welcome = this.defaultWelcome();
break;
}
return welcome;
}
defaultWelcome() {
return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
}
// if icon cannot be found, the default favicon will be used
changeHead() {
// set title of document
let title = this.getTitle();
if (this.getSubtitle()) {
title += " " + this.getSubtitle();
}
document.title = title;
// set document icon
if (!this.values.icon) {
return;
}
var oldlink = document.getElementById('dynamic-favicon');
var link = document.createElement('link');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon'
link.href = '/' + this.values.icon;
if (oldlink) {
document.head.removeChild(oldlink);
}
document.head.appendChild(link);
}
checkValues() {
if (!this.values.hasOwnProperty('pages')) {
let pages = {};
pages.home = true;
pages.scenarios = true;
pages.infrastructure = true;
pages.users = true;
pages.account = true;
pages.api = true;
this.values.pages = pages;
} else {
if (!this.values.pages.hasOwnProperty('home')) {
this.values.pages['home'] = false;
}
if (!this.values.pages.hasOwnProperty('scenarios')) {
this.values.pages['scenarios'] = false;
}
if (!this.values.pages.hasOwnProperty('infrastructure')) {
this.values.pages['infrastructure'] = false;
}
if (!this.values.pages.hasOwnProperty('users')) {
this.values.pages['users'] = false;
}
if (!this.values.pages.hasOwnProperty('account')) {
this.values.pages['account'] = false;
}
if (!this.values.pages.hasOwnProperty('api')) {
this.values.pages['api'] = false;
}
}
}
applyStyle() {
this.changeHead();
const rootEl = document.querySelector(':root');
for (const [key, value] of Object.entries(this.values.style)) {
rootEl.style.setProperty('--' + key, value);
}
}
getLogo(style) {
let image = null;
try {
image = <img style={style} src={require('./' + this.brand + '/img/' + this.values.logo).default} alt={'Logo ' + this.values.title} />
} catch (err) {
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
}
setValues() {
switch (this.brand) {
case 'villasweb':
this.values = villasweb_values;
break;
case 'slew':
this.values = slew_values;
break;
case 'template':
this.values = template_values;
break;
default:
console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
this.brand = 'villasweb';
this.values = villasweb_values;
break;
}
}
return image;
}
getHome(username = '', userid = '', role = '') {
var homepage = '';
switch (this.brand) {
case 'villasweb':
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
case 'slew':
homepage = slew_home();
break;
case 'template':
homepage = template_home();
break;
default:
homepage = villasweb_home(this.getTitle(), username, userid, role);
break;
}
return homepage;
}
getTitle() {
return this.values.title ? this.values.title : "No Title!";
}
getFooter() {
var footer = '';
switch(this.brand) {
case 'template':
footer = template_footer();
break;
default:
footer = villasweb_footer();
break;
}
return footer;
}
getWelcome() {
var welcome = '';
switch (this.brand) {
case 'villasweb':
welcome = villasweb_welcome();
break;
case 'slew':
welcome = slew_welcome();
break;
case 'template':
welcome = template_welcome();
break;
default:
welcome = this.defaultWelcome();
break;
}
return welcome;
}
defaultWelcome() {
return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
}
// if icon cannot be found, the default favicon will be used
changeHead() {
// set title of document
let title = this.getTitle();
if (this.getSubtitle()) {
title += " " + this.getSubtitle();
}
document.title = title;
// set document icon
if (!this.values.icon) {
return;
}
var oldlink = document.getElementById('dynamic-favicon');
var link = document.createElement('link');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon'
link.href = '/' + this.values.icon;
if (oldlink) {
document.head.removeChild(oldlink);
}
document.head.appendChild(link);
}
checkValues() {
if (!this.values.hasOwnProperty('pages')) {
let pages = {};
pages.home = true;
pages.scenarios = true;
pages.infrastructure = true;
pages.users = true;
pages.account = true;
pages.api = true;
this.values.pages = pages;
} else {
if (!this.values.pages.hasOwnProperty('home')) {
this.values.pages['home'] = false;
}
if (!this.values.pages.hasOwnProperty('scenarios')) {
this.values.pages['scenarios'] = false;
}
if (!this.values.pages.hasOwnProperty('infrastructure')) {
this.values.pages['infrastructure'] = false;
}
if (!this.values.pages.hasOwnProperty('users')) {
this.values.pages['users'] = false;
}
if (!this.values.pages.hasOwnProperty('account')) {
this.values.pages['account'] = false;
}
if (!this.values.pages.hasOwnProperty('api')) {
this.values.pages['api'] = false;
}
}
}
applyStyle() {
this.changeHead();
const rootEl = document.querySelector(':root');
let background = this.getBackgroundColor();
if (background) {
rootEl.style.setProperty('--bg', background);
} else {
console.log(document.body.style.backgroundColor)
}
let maincolor = this.getMainColor();
if (maincolor) {
rootEl.style.setProperty('--maincolor', maincolor);
}
let highlight = this.getHighlightColor();
if (highlight) {
rootEl.style.setProperty('--highlights', highlight);
}
let secondary = this.getSecondaryTextColor();
if (secondary) {
rootEl.style.setProperty('--secondarytext', secondary);
}
let font = this.getFont();
if (font) {
rootEl.style.setProperty('--mainfont', font);
}
let borderradius = this.getBorderRadius();
if (borderradius) {
rootEl.style.setProperty('--borderradius', borderradius);
}
}
getLogo(style) {
let image = null;
try {
image = <img style={style} src={require('./' + this.brand + '/img/' + this.values.logo).default} alt={'Logo ' + this.values.title} />
} catch (err) {
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
}
return image;
}
getBackgroundColor() {
if (this.values.style && this.values.style.background) {
return this.values.style.background;
}
return null;
}
getMainColor() {
if (this.values.style && this.values.style.maincolor) {
return this.values.style.maincolor;
}
return null;
}
getHighlightColor() {
if (this.values.style && this.values.style.highlights) {
return this.values.style.highlights;
}
return null;
}
getSecondaryTextColor() {
if (this.values.style && this.values.style.secondarytext) {
return this.values.style.secondarytext;
}
return null;
}
getFont() {
if (this.values.style && this.values.style.font) {
return this.values.style.secondarytext;
}
return null;
}
getBorderRadius() {
if (this.values.style && this.values.style.borderradius) {
return this.values.style.borderradius;
}
return null;
}
getTitle() {
return this.values.title ? this.values.title : "No Title!";
}
getSubtitle() {
return this.values.subtitle ? this.values.subtitle : null;
}
getSubtitle() {
return this.values.subtitle ? this.values.subtitle : null;
}
};
var branding = new Branding(process.env.REACT_APP_BRAND);
export default branding;
export default branding;

BIN
src/branding/opalrt/img/datamodel.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 192 KiB

152
src/branding/opalrt/img/eonerc_rwth.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

128
src/branding/opalrt/img/opal-rt-logo-color.svg Normal file
View file

@ -0,0 +1,128 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
version="1.1"
id="svg2"
width="701.40002"
height="130.14667"
viewBox="0 0 701.40002 130.14667"
sodipodi:docname="Logo_OPAL-RT_Horizontal_Color.eps"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs6" />
<sodipodi:namedview
id="namedview4"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1" />
<g
id="g8"
inkscape:groupmode="layer"
inkscape:label="ink_ext_XXXXXX"
transform="matrix(1.3333333,0,0,-1.3333333,0,130.14667)">
<g
id="g10"
transform="scale(0.1)">
<path
d="M 900.691,359.191 0,200.41 v -67.051 l 935.426,164.922 c -10.84,20.754 -22.336,41.114 -34.735,60.91"
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path12" />
<path
d="M 951.465,266.32 0,98.5469 V 0 h 1029.37 c -11.92,94.2383 -38.722,183.594 -77.905,266.32"
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path14" />
<path
d="M 0,819.387 V 235.195 L 880.18,390.391 C 695.293,660.117 366.098,831.508 0,819.387"
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path16" />
<path
d="M 0,976.094 V 907.367 C 400.563,906.703 748.902,701.539 929.246,399.043 l 90.414,15.937 c -3.72,6.719 -7.36,13.477 -11.25,20.051 l 250.52,4.785 -213.73,-73.195 c -2.76,5.567 -5.65,11.035 -8.53,16.594 l -89.529,-15.832 c 10.996,-20.137 21.332,-40.664 30.839,-61.59 l 88.41,15.566 c -2.76,6.289 -5.35,12.657 -8.23,18.836 l 244.41,4.715 -215.77,-73.933 c -2.28,6.035 -4.68,11.964 -7.04,17.949 L 992.051,273.457 C 1027.26,187.434 1049.78,95.6172 1057.38,0 H 1342.7 V 976.098 L 0,976.094"
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path18" />
<path
d="M 1698.06,775.063 V 515.137 h 315.06 v 259.926 z m -95.6,-23.696 c 0,37.317 7.02,62.813 21.01,76.559 13.98,13.633 40.95,20.594 80.82,20.594 h 302.17 c 39.92,0 66.83,-6.961 80.81,-20.594 14,-13.746 21.02,-39.242 21.02,-76.559 V 535.078 c 0,-37.644 -7.02,-63.16 -21.02,-76.785 -13.98,-13.566 -40.89,-20.391 -80.81,-20.391 h -302.17 c -39.87,0 -66.84,6.825 -80.82,20.391 -13.99,13.625 -21.01,39.141 -21.01,76.785 v 216.289"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path20" />
<path
d="M 2577.42,777.484 H 2362.58 V 668.66 h 214.84 c 16.62,0 27.87,2.379 33.98,7.106 6.1,4.8 9.1,13.445 9.1,25.449 v 43.961 c 0,11.949 -3,20.258 -9.1,25.027 -6.11,4.86 -17.36,7.281 -33.98,7.281 M 2268.66,437.902 V 848.52 h 351.08 c 32.67,0 56.3,-6.262 70.9,-18.797 14.68,-12.7 21.99,-32.95 21.99,-60.852 v -91.785 c 0,-27.672 -7.31,-47.711 -21.99,-60.231 -14.6,-12.601 -38.23,-18.953 -70.9,-18.953 h -257.16 v -160 h -93.92"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path22" />
<path
d="m 2937.16,601.777 h 179.78 l -88.46,167.094 z M 2753.37,437.902 2985.69,848.52 h 92.09 l 235.39,-410.618 h -107.18 l -49.33,89.735 h -260.28 l -47.82,-89.735 h -95.19"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24" />
<path
d="M 3462.22,437.902 V 848.52 h 95.5 V 515.137 h 308.1 v -77.235 h -403.6"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path26" />
<path
d="m 3936.79,690.836 v -81.984 h 126.71 v 81.984 h -126.71"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path28" />
<path
d="m 4529.14,777.484 h -214.8 V 663.313 h 214.8 c 16.69,0 27.93,2.375 34.06,7.101 6.07,4.742 9.17,13.242 9.17,25.41 v 49.352 c 0,11.949 -3.1,20.258 -9.17,25.027 -6.13,4.86 -17.37,7.281 -34.06,7.281 M 4220.37,437.902 V 848.52 h 351.16 c 32.63,0 56.33,-6.262 70.96,-18.797 14.56,-12.746 21.89,-33.004 21.89,-60.852 v -96.32 c 0,-27.746 -7.33,-47.832 -21.89,-60.621 -14.63,-12.676 -38.33,-19.028 -70.96,-19.028 h -53.66 l 189.67,-155 h -137.23 l -165.41,155 h -90.56 v -155 h -93.97"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path30" />
<path
d="M 5071.43,775.137 V 437.902 h -95.66 v 337.235 h -188.42 v 73.383 h 473.15 v -73.383 h -189.07"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path32" />
<path
d="m 1745.33,284.016 v -168.43 h -47.67 v 168.43 h -94.15 v 36.543 h 236.36 v -36.543 h -94.54"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path34" />
<path
d="m 1898.26,115.586 v 204.973 h 209.75 v -34.954 h -162.07 v -45.683 h 94.54 v -34.961 h -94.54 V 154.113 H 2110 v -38.527 h -211.74"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path36" />
<path
d="M 2370.19,284.016 H 2241.48 V 154.113 h 128.71 v 44.102 l 47.67,-9.934 v -24.226 c 0,-19.075 -3.57,-31.926 -10.72,-38.535 -7.15,-6.633 -20.53,-9.934 -40.12,-9.934 h -122.36 c -19.6,0 -32.97,3.301 -40.12,9.934 -7.15,6.609 -10.73,19.46 -10.73,38.535 V 272.09 c 0,19.07 3.58,31.926 10.73,38.535 7.15,6.633 20.52,9.934 40.12,9.934 h 122.36 c 19.59,0 32.97,-3.301 40.12,-9.934 7.15,-6.609 10.72,-19.465 10.72,-38.535 v -19.461 l -47.67,-7.539 v 38.926"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path38" />
<path
d="m 2516.38,115.586 v 204.973 h 47.67 v -79.446 h 148.97 v 79.446 h 48.06 V 115.586 h -48.06 v 88.184 h -148.97 v -88.184 h -47.67"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path40" />
<path
d="m 2865.56,115.586 v 204.973 h 32.57 l 144.21,-120.762 c 10.33,-8.742 18.13,-16.152 23.44,-22.246 -1.34,19.07 -2,30.847 -2,35.359 v 107.649 h 42.89 V 115.586 h -32.57 l -150.54,126.719 c -6.37,5.293 -12.06,10.859 -17.08,16.691 1.3,-13.254 1.98,-24.101 1.98,-32.59 v -110.82 h -42.9"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path42" />
<path
d="m 3254.45,154.113 h 157.33 v 129.903 h -157.33 z m -47.66,117.977 c 0,19.07 3.57,31.926 10.73,38.535 7.15,6.633 20.52,9.934 40.13,9.934 h 150.95 c 19.59,0 32.96,-3.301 40.11,-9.934 7.15,-6.609 10.73,-19.465 10.73,-38.535 V 164.055 c 0,-19.075 -3.58,-31.926 -10.73,-38.535 -7.15,-6.633 -20.52,-9.934 -40.11,-9.934 h -150.95 c -19.61,0 -32.98,3.301 -40.13,9.934 -7.16,6.609 -10.73,19.46 -10.73,38.535 V 272.09"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path44" />
<path
d="m 3559.95,115.586 v 204.973 h 47.67 V 154.113 h 153.72 v -38.527 h -201.39"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path46" />
<path
d="m 3874.56,154.113 h 157.32 v 129.903 h -157.32 z m -47.67,117.977 c 0,19.07 3.59,31.926 10.74,38.535 7.15,6.633 20.51,9.934 40.12,9.934 h 150.96 c 19.59,0 32.96,-3.301 40.11,-9.934 7.15,-6.609 10.73,-19.465 10.73,-38.535 V 164.055 c 0,-19.075 -3.58,-31.926 -10.73,-38.535 -7.15,-6.633 -20.52,-9.934 -40.11,-9.934 h -150.96 c -19.61,0 -32.97,3.301 -40.12,9.934 -7.15,6.609 -10.74,19.46 -10.74,38.535 V 272.09"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path48" />
<path
d="M 4372.31,284.016 H 4223.34 V 154.113 h 148.97 v 45.684 h -77.85 v 34.969 h 124.33 v -70.711 c 0,-19.075 -3.57,-31.926 -10.71,-38.535 -7.15,-6.633 -20.54,-9.934 -40.13,-9.934 h -141.42 c -19.61,0 -32.98,3.301 -40.12,9.934 -7.15,6.609 -10.74,19.46 -10.74,38.535 V 272.09 c 0,19.07 3.59,31.926 10.74,38.535 7.14,6.633 20.51,9.934 40.12,9.934 h 141.42 c 19.07,0 32.31,-3.243 39.72,-9.731 7.41,-6.5 11.12,-18.738 11.12,-36.746 v -4.754 l -46.48,-8.359 v 23.047"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path50" />
<path
d="m 4519.7,115.586 v 204.973 h 47.67 V 115.586 h -47.67"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path52" />
<path
d="m 4672.24,115.586 v 204.973 h 209.74 V 285.605 H 4719.9 v -45.683 h 94.54 v -34.961 h -94.54 v -50.848 h 164.07 v -38.527 h -211.73"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path54" />
<path
d="m 5149.72,284.816 h -134.67 v -44.101 h 128.19 c 19.64,0 33.12,-3.313 40.41,-9.922 7.31,-6.633 10.95,-19.484 10.95,-38.535 v -28.203 c 0,-19.075 -3.64,-31.926 -10.92,-38.535 -7.28,-6.633 -20.72,-9.934 -40.32,-9.934 h -126.72 c -19.61,0 -33.06,3.301 -40.33,9.934 -7.29,6.609 -10.92,19.46 -10.92,38.535 v 5.547 l 42.11,8.75 v -24.239 h 145 v 46.875 h -127.93 c -19.59,0 -32.96,3.309 -40.11,9.93 -7.16,6.613 -10.73,19.465 -10.73,38.535 v 22.637 c 0,19.07 3.57,31.926 10.73,38.535 7.15,6.633 20.52,9.934 40.11,9.934 h 116.4 c 18.81,0 31.98,-3.176 39.53,-9.524 7.55,-6.355 11.33,-18.144 11.33,-35.359 v -4.367 l -42.11,-9.93 v 23.437"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path56" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.3 KiB

158
src/branding/opalrt/img/villas_web.svg Normal file
View file

@ -0,0 +1,158 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="149.71165mm"
height="149.71165mm"
viewBox="0 0 149.71165 149.71165"
version="1.1"
id="svg8"
inkscape:version="0.92.1 r"
sodipodi:docname="villasweb.svg"
inkscape:export-filename="/home/markus/Development/Projects/VILLASweb/doc/villasweb.svg.png"
inkscape:export-xdpi="21.299999"
inkscape:export-ydpi="21.299999">
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient4611">
<stop
style="stop-color:#00a2b0;stop-opacity:1"
offset="0"
id="stop4607" />
<stop
style="stop-color:#6ec5b0;stop-opacity:1"
offset="1"
id="stop4609" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4611"
id="linearGradient4613"
x1="65.497406"
y1="153.88686"
x2="65.497406"
y2="13.88037"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.0941748"
inkscape:cx="96.131516"
inkscape:cy="285.10587"
inkscape:document-units="mm"
inkscape:current-layer="g5005"
showgrid="false"
inkscape:snap-smooth-nodes="true"
inkscape:snap-bbox="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:bbox-nodes="true"
inkscape:object-paths="true"
inkscape:snap-intersection-paths="false"
inkscape:bbox-paths="false"
inkscape:snap-midpoints="true"
inkscape:window-width="1920"
inkscape:window-height="951"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:measure-start="37.9039,424.38"
inkscape:measure-end="101.386,461.031"
inkscape:snap-global="true" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(9.2667999,-9.6854979)">
<g
id="g5005"
transform="matrix(0.9623191,0,0,0.9623191,2.7484651,3.9385684)">
<path
inkscape:connector-curvature="0"
id="path4329"
d="M 65.519531,7.6875 C 30.952342,7.2288821 -1.7559504,32.928216 -9.0985572,66.77029 c -8.9441948,34.36253 9.91032274,73.19316 42.4331002,87.43912 31.90533,15.5955 73.697367,4.8306 94.125297,-24.21303 C 149.0773,101.82081 146.84579,58.724642 122.42805,32.933531 108.17012,16.922072 86.915542,7.695183 65.519531,7.6875 Z"
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:3.70000005;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
sodipodi:type="star"
style="fill:none;stroke:url(#linearGradient4613);stroke-width:20.38569832;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4572"
sodipodi:sides="6"
sodipodi:cx="65.497406"
sodipodi:cy="83.983902"
sodipodi:r1="58.333843"
sodipodi:r2="50.518589"
sodipodi:arg1="-0.52359878"
sodipodi:arg2="-4.4017012e-09"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 116.016,54.81698 0,58.33384 -50.518594,29.16693 -50.51859,-29.16693 0,-58.333839 50.51859,-29.166922 z"
transform="matrix(0.83725065,0,0,0.85461295,10.659664,12.436674)" />
<path
sodipodi:type="star"
style="fill:#007da9;fill-opacity:1;stroke:none;stroke-width:17.67682076;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4576-3"
sodipodi:sides="3"
sodipodi:cx="-80.89846"
sodipodi:cy="-21.019157"
sodipodi:r1="15.401051"
sodipodi:r2="7.7005253"
sodipodi:arg1="2.0943951"
sodipodi:arg2="3.1415927"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -88.598986,-7.6814564 0,-26.6754016 23.101576,13.337701 z"
transform="matrix(-1,0,0,-1.0094199,3.7691891,-0.07235845)"
inkscape:transform-center-x="3.7051813" />
<path
d="m 42.395834,161.35432 0,-26.6754 23.101576,13.3377 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="true"
sodipodi:arg2="3.1415927"
sodipodi:arg1="2.0943951"
sodipodi:r2="7.7005253"
sodipodi:r1="15.401051"
sodipodi:cy="148.01662"
sodipodi:cx="50.096359"
sodipodi:sides="3"
id="path4593"
style="fill:#007da9;fill-opacity:1;stroke:none;stroke-width:17.67682076;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
sodipodi:type="star"
inkscape:transform-center-x="-3.7051807"
transform="matrix(1,0,0,1.0094199,-4.2717477,-1.5199394)"
inkscape:transform-center-y="1.8921547e-06" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

69
src/branding/opalrt/opalrt-functions.js Normal file
View file

@ -0,0 +1,69 @@
/**
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import { Button } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
export function opalrt_welcome() {
let url = 'https://villas.fein-aachen.org/doc/web.html';
return (
<div >
<h1>Welcome!</h1>
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
It enables the management and monitoring of simulators, models and simulations.</p>
<span className='solid-button'>
<Button key="learnmore" onClick={e => window.location = url}>Learn more</Button>
</span>
</div>)
}
export function opalrt_home(title, username, userid, role) {
return (
<div className="home-container">
<img style={{ height: 120, float: 'right' }} src={require('./img/villas_web.svg').default} alt="Logo VILLASweb" />
<h1>Home</h1>
<p>
Welcome to <b>{title}</b>!
</p>
<p>
You are logged in as user <b>{username}</b> with <b>ID {userid}</b> and role <b>{role}</b>.
</p>
<h3>Credits</h3>
<p>VILLASweb is an open source project developed by the <a href="http://acs.eonerc.rwth-aachen.de">Institute for Automation of Complex Power Systems</a> at <a href="https;//www.rwth-aachen.de">RWTH Aachen University</a>.</p>
<img height={60} src={require('./img/eonerc_rwth.svg').default} alt="Logo ACS" />
<ul>
<li><a href="mailto:steffen.vogel@opal-rt.com">Steffen Vogel</a></li>
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
</ul>
<h3>Links</h3>
<ul>
<li><NavLink to="/api">VILLASweb API browser</NavLink></li>
<li><a href="http://fein-aachen.org/projects/villas-framework/">FEIN Aachen e.V. project page of VILLASframework</a></li>
<li><a href="https://villas.fein-aachen.org/docs/web">Documentation of VILLASweb</a></li>
<li><a href="https://git.rwth-aachen.de/acs/public/villas/web">Source Code of VILLASweb frontend</a></li>
<li><a href="https://git.rwth-aachen.de/acs/public/villas/web-backend-go">Source Code of VILLASweb backend</a></li>
</ul>
</div>)
}
export function opalrt_footer() {
return (
<footer className="app-footer">
Copyright &copy; {new Date().getFullYear()} - <a href="https://www.acs.eonerc.rwth-aachen.de">Institute for Automation of Complex Power Systems</a> - <a href="https://www.rwth-aachen.de">RWTH Aachen University</a>
</footer>
);
}

40
src/branding/opalrt/opalrt-values.js Normal file
View file

@ -0,0 +1,40 @@
/**
* This file is part of VILLASweb.
*
* VILLASweb is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* VILLASweb is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
const villasweb_values = {
title: 'OPAL-RT VILLASweb',
// subtitle: 'OPAL-RT Web Dashboards',
logo: 'villas_web.svg',
pages: {
home: true,
scenarios: true,
infrastructure: true,
account: true,
api: true,
},
style: {
background: '#f0f4f7',
backgroundText: '#000000',
highlights: '#1158a2',
main: '#092f56',
secondaryText: '#c4c4c4',
fontFamily: 'Open Sans',
// borderRadius: ''
}
}
export default villasweb_values;

70
src/branding/slew/slew-functions.js
View file

@ -19,48 +19,48 @@ import './slew.css'
export function slew_home() {
return (
<div className="home-container">
<h1>Home</h1>
<p>
Welcome to <b>SLEW</b>!
</p>
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
The platform enables interaction with the experiments in real time and performing analysis on the experimental results.</p>
return (
<div className="home-container">
<h1>Home</h1>
<p>
Welcome to <b>SLEW</b>!
</p>
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
The platform enables interaction with the experiments in real time and performing analysis on the experimental results.</p>
<p>The motivation behind SLEW is the ongoing transformation of the energy system, which is making the system more and more complex.
Hence, understanding new phenomena and underlying interactions is getting more challenging, also because real experimental
activities for obtaining a better understanding are not possible for obvious reasons of security and safety.</p>
<p>The motivation behind SLEW is the ongoing transformation of the energy system, which is making the system more and more complex.
Hence, understanding new phenomena and underlying interactions is getting more challenging, also because real experimental
activities for obtaining a better understanding are not possible for obvious reasons of security and safety.</p>
<p>The SLEW platform gives the possibility to perform experiments in a virtual infrastructure and to learn from the execution
of complex models. It provides a virtual power engineering world where complex phenomena take place while users can interact
with the system in real time.</p>
<p>The SLEW platform gives the possibility to perform experiments in a virtual infrastructure and to learn from the execution
of complex models. It provides a virtual power engineering world where complex phenomena take place while users can interact
with the system in real time.</p>
<p>The platform is based on the real-time simulation tool DPsim developed in RWTH,
which is available as open-source software project to the power engineering community. Besides, it integrates the interactive
computing environment Jupyter for further analysis of experimental results.</p>
<p>The platform is based on the real-time simulation tool DPsim developed in RWTH,
which is available as open-source software project to the power engineering community. Besides, it integrates the interactive
computing environment Jupyter for further analysis of experimental results.</p>
<h3>Contacts</h3>
<ul>
<li><a href="mailto:jdinkelbach@eonerc.rwth-aachen.de">Jan Dinkelbach</a></li>
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
<li><a href="mailto:post@steffenvogel.de">Steffen Vogel</a></li>
</ul>
<h3>Contacts</h3>
<ul>
<li><a href="mailto:jdinkelbach@eonerc.rwth-aachen.de">Jan Dinkelbach</a></li>
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
<li><a href="mailto:post@steffenvogel.de">Steffen Vogel</a></li>
</ul>
<h3>Credits</h3>
<div>
<img id="images" height={70} src={require('./img/eonerc_rwth.svg').default} alt="Logo EONERC"/>
<img id="images" height={70} src={require('./img/erigrid2.png').default} alt="Logo Erigrid"/>
<img id="images" height={70} src={require('./img/european_commission.svg').default} alt="Logo EU"/>
</div>
</div>)
<h3>Credits</h3>
<div>
<img id="images" height={70} src={require('./img/eonerc_rwth.svg').default} alt="Logo EONERC" />
<img id="images" height={70} src={require('./img/erigrid2.png').default} alt="Logo Erigrid" />
<img id="images" height={70} src={require('./img/european_commission.svg').default} alt="Logo EU" />
</div>
</div>)
}
export function slew_welcome() {
return (
<div >
<h1>Welcome!</h1>
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>
</div>)
<div >
<h1>Welcome!</h1>
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>
</div>)
}

48
src/branding/slew/slew-values.js
View file

@ -16,29 +16,29 @@
******************************************************************************/
const slew_values = {
title: 'SLEW',
subtitle: 'Second Life for Energiewende',
icon: "slew_blue.png",
logo: "slew_logo.png",
pages: {
home: true,
scenarios: true,
infrastructure: false,
account: false,
api: false
},
links: {
"DPsim Simulator": "https://dpsim.fein-aachen.org",
"VILLASframework": "https://villas.fein-aachen.org/doc"
},
style: {
background: 'rgba(207,209,210, 1)',
highlights: 'rgba(0,84,159, 0.75)',
maincolor: 'rgba(80,80,80, 1)',
secondarytext: 'rgba(80,80,80, 0.9)',
font: "16px Roboto, sans-serif",
borderradius: "10px"
}
title: 'SLEW',
subtitle: 'Second Life for Energiewende',
icon: "slew_blue.png",
logo: "slew_logo.png",
pages: {
home: true,
scenarios: true,
infrastructure: false,
account: false,
api: false
},
links: {
"DPsim Simulator": "https://dpsim.fein-aachen.org",
"VILLASframework": "https://villas.fein-aachen.org/doc"
},
style: {
background: 'rgba(207,209,210, 1)',
highlights: 'rgba(0,84,159, 0.75)',
main: 'rgba(80,80,80, 1)',
secondaryText: 'rgba(80,80,80, 0.9)',
fontFamily: "Roboto, sans-serif",
borderRadius: "10px"
}
}
export default slew_values;
export default slew_values;

2
src/branding/slew/slew.css
View file

@ -1,4 +1,4 @@
#images {
margin-left: 2em;
margin-right: 2em
}
}

68
src/branding/template/template-functions.js
View file

@ -14,39 +14,39 @@
* You should have received a copy of the GNU General Public License
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
import React from 'react';
import React from 'react';
export function template_home() {
return (
<div className="home-container">
<img style={{ height: 120, float: 'right' }} src={require('./img/template_logo.svg').default} alt="Template Logo" />
<h1>Home</h1>
<p>
Welcome to <b>BRAND</b>!
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>)
}
export function template_welcome() {
return (
<div >
<h1>Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>)
}
export function template_footer() {
return (
<footer className="app-footer">
<p>HELLO WORLD, THIS IS MY FOOTER!</p>
</footer>)
}
export function template_home() {
return (
<div className="home-container">
<img style={{ height: 120, float: 'right' }} src={require('./img/template_logo.svg').default} alt="Template Logo" />
<h1>Home</h1>
<p>
Welcome to <b>BRAND</b>!
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>)
}
export function template_welcome() {
return (
<div >
<h1>Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>)
}
export function template_footer() {
return (
<footer className="app-footer">
<p>HELLO WORLD, THIS IS MY FOOTER!</p>
</footer>)
}

54
src/branding/template/template-values.js
View file

@ -15,30 +15,30 @@
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
******************************************************************************/
const template_values = {
title: 'Template',
subtitle: 'change me!',
icon: "template_logo.svg",
pages: {
home: true,
scenarios: true,
infrastructure: true,
users: true,
account: true,
api: true
},
links: {
"Google": "https://www.google.com/",
"StackOverFlow": "https://stackoverflow.com/"
},
style: {
background: 'rgba(50,30,90, 0.6)',
highlights: 'rgba(0,230,5, 0.75)',
maincolor: 'rgba(255,0,0, 1)',
secondarytext: 'rgba(0,0,100, 0.8)',
font: "16px Comic Sans, sans-serif",
borderradius: "60px"
}
}
export default template_values;
const template_values = {
title: 'Template',
subtitle: 'change me!',
icon: "template_logo.svg",
pages: {
home: true,
scenarios: true,
infrastructure: true,
users: true,
account: true,
api: true
},
links: {
"Google": "https://www.google.com/",
"StackOverFlow": "https://stackoverflow.com/"
},
style: {
background: 'rgba(50,30,90, 0.6)',
highlights: 'rgba(0,230,5, 0.75)',
main: 'rgba(255,0,0, 1)',
secondaryText: 'rgba(0,0,100, 0.8)',
fontFamily: "Comic Sans, sans-serif",
borderRadius: "60px"
}
}
export default template_values;

16
src/branding/villasweb/villasweb-functions.js
View file

@ -22,14 +22,14 @@ import { NavLink } from 'react-router-dom';
export function villasweb_welcome() {
let url = 'https://villas.fein-aachen.org/doc/web.html';
return (
<div >
<h1>Welcome!</h1>
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
It enables the management and monitoring of simulators, models and simulations.</p>
<span className='solid-button'>
<Button key="learnmore" onClick={e => window.location = url }>Learn more</Button>
</span>
</div>)
<div >
<h1>Welcome!</h1>
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
It enables the management and monitoring of simulators, models and simulations.</p>
<span className='solid-button'>
<Button key="learnmore" onClick={e => window.location = url}>Learn more</Button>
</span>
</div>)
}
export function villasweb_home(title, username, userid, role) {

34
src/branding/villasweb/villasweb-values.js
View file

@ -16,22 +16,22 @@
******************************************************************************/
const villasweb_values = {
title: 'VILLASweb',
subtitle: 'ACS',
logo: 'villas_web.svg',
pages: {
home: true,
scenarios: true,
infrastructure: true,
account: true,
api: true,
},
style: {
background: '#6EA2B0',
highlights: '#527984',
maincolor: '#4d4d4d',
secondarytext: '#818181',
}
title: 'VILLASweb',
subtitle: 'ACS',
logo: 'villas_web.svg',
pages: {
home: true,
scenarios: true,
infrastructure: true,
account: true,
api: true,
},
style: {
background: '#6EA2B0',
highlights: '#527984',
main: '#4d4d4d',
secondaryText: '#818181',
}
}
export default villasweb_values;
export default villasweb_values;

33
src/styles/app.css
View file

@ -20,30 +20,31 @@
*/
:root {
--bg: #eceded;
--main: #4d4d4d;
--background: #eceded;
--highlights: #527984;
--secondarytext: #818181;
--borderradius: 0px;
--mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
--maincolor: #4d4d4d;
--bgtext:#fff;
--secondaryText: #818181;
--borderRadius: 0px;
--fontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--backgroundText:#fff;
}
* {
color: var(--maincolor);
color: var(--main);
}
body {
background-color: var(--bg) !important;
background-color: var(--background) !important;
font-family: var(--fontFamily) !important;
}
.app {
height: 100vh;
color: var(--maincolor);
border-radius: var(--borderradius);
color: var(--main);
border-radius: var(--borderRadius);
font: var(--mainfont);
font: 16px;
hyphens: auto;
}
@ -91,13 +92,13 @@ a:active {
margin-top: 2em;
padding-bottom: 2em;
color: var(--bgtext);
color: var(--backgroundText);
text-align: center;
}
.app-footer a {
text-decoration: underline;
color: var(--bgtext);
color: var(--backgroundText);
}
.app-body-spacing {
@ -110,7 +111,7 @@ a:active {
.app-content {
padding: 15px 20px 20px 20px;
border-radius: var(--borderradius);
border-radius: var(--borderRadius);
width: auto;
@ -145,7 +146,7 @@ a:active {
padding: 20px;
margin-bottom: 20px;
width: 160px;
border-radius: var(--borderradius);
border-radius: var(--borderRadius);
background-color: #fff;
@ -159,7 +160,7 @@ a:active {
text-align: center;
margin-bottom: 20px;
width: 160px;
border-radius: var(--borderradius);
border-radius: var(--borderRadius);
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),