Deployed new layout, Added second page, Added meta information, Compressed images and cleaned folders, Added imprint and privacy links, Changed screenshot and README

This commit is contained in:
2021-05-18 17:24:11 +02:00
parent c6aa110b19
commit e81d6c98c9
41 changed files with 243 additions and 75 deletions

View File

@@ -1,19 +1,19 @@
# Ecogood Portal Page # ECG portal page
This <abbr title="Single Page Application">SPA</abbr> shows a list of the available ECG web applications. This <abbr title="Single Page Application">SPA</abbr> shows a list of all available ECG web applications managed by the IT Hub.
![screenshot](docs/screenshot.png "Screenshot") ![screenshot](docs/screenshot.png "Screenshot")
## Features ## Features
- generated static website powered a small python script - Generates a static website powered a small python script
- easily extensible by a YAML definition - easily extensible by a YAML definition
- responsive layout - Responsive layout
- Respects Privacy and Security by being ready for CSP and RP - Respects Privacy and Security by being ready for CSP and RP
## Build ## Build
python3 build.py items.yml python3 build.py items_page_1.yml index.html ; python3 build.py items_page_2.yml index2.html
## Deployment ## Deployment
@@ -29,3 +29,6 @@ chmod +x build+deploy.sh
- clean the output folder - clean the output folder
- build the project - build the project
- upload to the remote SSH target - upload to the remote SSH target
## Roadmap
- Provide localized versions of the portal

View File

@@ -14,6 +14,7 @@ content_folder = os.path.join(__location__, 'content')
output_folder = os.path.join(__location__, 'dist') output_folder = os.path.join(__location__, 'dist')
config_file = sys.argv[1] config_file = sys.argv[1]
output_file = sys.argv[2]
yaml = YAML(typ='safe') yaml = YAML(typ='safe')
@@ -28,18 +29,26 @@ template_item_text = codecs.open(os.path.join(content_folder, 'item.tmpl.html'),
encoding='utf-8').read() encoding='utf-8').read()
template_item = Template(template_item_text) template_item = Template(template_item_text)
items = '' navigation_item_text = codecs.open(os.path.join(content_folder, 'navigation.tmpl.html'), 'r',
encoding='utf-8').read()
navigation_item = Template(navigation_item_text)
for config_item in config['items']: items = ''
items += template_item.substitute(config_item) navigation = ''
for config_item_1 in config['items']:
items += template_item.substitute(config_item_1)
for config_item_2 in config['navigation']:
navigation += navigation_item.substitute(config_item_2)
template_page_text = codecs.open(os.path.join(content_folder, 'index.tmpl.html'), 'r', encoding='utf-8').read() template_page_text = codecs.open(os.path.join(content_folder, 'index.tmpl.html'), 'r', encoding='utf-8').read()
template_page = Template(template_page_text) template_page = Template(template_page_text)
outcome = template_page.substitute(items=items) outcome = template_page.substitute(items=items, nav=navigation)
os.makedirs(output_folder, exist_ok=True) os.makedirs(output_folder, exist_ok=True)
outfile_index = os.path.join(output_folder, 'index.html') outfile_index = os.path.join(output_folder, output_file)
copy_tree(static_folder, output_folder) copy_tree(static_folder, output_folder)

View File

@@ -1,21 +1,50 @@
<!doctype html> <!doctype html>
<!-- Icons taken from https://remixicon.com -->
<html lang="en"> <html lang="en">
<head> <head>
<title>ECG portal</title>
<link rel="stylesheet" href="ecogood.css"/>
<link rel="icon" href="favicon-cropped.webp" sizes="32x32" />
<link rel="icon" href="favicon.webp" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="favicon.png" />
<meta name="msapplication-TileImage" content="favicon.webp" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- META -->
<title>ECG portal</title>
<meta name="title" content="ECG portal">
<meta name="description" content="Overview of all ECG tools managed by the IT hub">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://my.ecogood.org/">
<meta property="og:title" content="ECG portal">
<meta property="og:description" content="Overview of all ECG tools managed by the IT hub">
<meta property="og:image" content="">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://my.ecogood.org/">
<meta property="twitter:title" content="ECG portal">
<meta property="twitter:description" content="Overview of all ECG tools managed by the IT hub">
<meta property="twitter:image" content="">
<!-- FAVICON -->
<link rel="stylesheet" href="ecogood.css"/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head> </head>
<body> <body>
<img class="heading-img" src="ecg-portal-logo.png" /> <img class="heading-img" src="ecg-portal-logo.png" />
<div class="heading-summary">
<p>This is your ECG start page where you find shortcuts to all tools you can access inside ECG.</p>
</div>
<div class="epframe"> <div class="epframe">
$items $items
<div class="nav-container">
$nav
</div>
</div>
<div class="footer">
<p class="center"><a href="https://www.ecogood.org/imprint/" target="_blank">Imprint</a> &middot; <a href="https://www.ecogood.org/privacy/" target="_blank">Privacy</a></p>
</div> </div>
</body> </body>
</html> </html>

View File

@@ -0,0 +1 @@
<a href="$target"><div class="nav $cssClass">$text</div></a>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 93 KiB

View File

@@ -11,47 +11,27 @@ items:
title: Webmail title: Webmail
description: "Email client in your web browser" description: "Email client in your web browser"
cssClass: mail cssClass: mail
- url: https://wiki.ecogood.org/display/INTERN/Mailinglisten-Anmeldung
title: Mailinglists
description: "Information distribution lists via email"
cssClass: maillist
- url: https://datacloud.ecogood.org/apps/calendar/
title: Calendar
description: Manage and share calendars
cssClass: cloud
- url: https://datacloud.ecogood.org/apps/contacts/
title: Contacts
description: Manage and share contacts
cssClass: cloud
- url: https://datacloud.ecogood.org/apps/polls/
title: Polls
description: "Schedule meetings<br />(like Doodle®)"
cssClass: cloud
- url: https://datacloud.ecogood.org/apps/deck/
title: Deck
description: KanBan Board<br />(like Trello®)
cssClass: cloud
- url: https://chat.ecogood.org - url: https://chat.ecogood.org
title: Chat title: Chat
description: "Chat directly or within channels and groups<br />(like Slack®)" description: "Chat directly or within channels and groups<br />(like Slack®)"
cssClass: chat cssClass: chat
- url: https://survey.ecogood.org/index.php/admin - url: https://datacloud.ecogood.org/apps/calendar/
title: LimeSurvey title: Calendar
description: "Create and send complex surveys" description: Manage and share calendars
cssClass: survey cssClass: calendar
- url: https://git.ecogood.org - url: https://datacloud.ecogood.org/apps/contacts/
title: Gitea title: Contacts
description: "Code hosting and collaboration platform" description: Manage and share contacts
cssClass: code cssClass: contacts
- url: https://my.ecogood.org/index_extended.html - url: https://datacloud.ecogood.org/apps/polls/
title: Page 2 title: Polls
description: "I want to see more IT tools" description: "Schedule meetings<br />(like Doodle®)"
cssClass: next cssClass: polls
- url: https://login.smartwe.de/SmartWe/ - url: https://datacloud.ecogood.org/apps/deck/
title: SmartWe title: Deck
description: "Manage all data regarding ECG membership" description: KanBan Board<br />(like Trello®)
cssClass: smartwe cssClass: deck
- url: https://jira.ecogood.org navigation:
title: JIRA - text: Next page
description: "Ticketing system" target: index2.html
cssClass: projekte cssClass: float-right

33
items_page_2.yml Normal file
View File

@@ -0,0 +1,33 @@
items:
- url: https://wiki.ecogood.org/display/INTERN/Mailinglisten-Anmeldung
title: Mailinglists
description: "Information distribution lists via email"
cssClass: maillist
- url: https://survey.ecogood.org/index.php/admin
title: LimeSurvey
description: "Create and send complex surveys"
cssClass: survey
- url: https://git.ecogood.org
title: Gitea
description: "Code hosting and collaboration platform"
cssClass: code
- url: https://login.smartwe.de/SmartWe/
title: SmartWe
description: "Manage all data regarding ECG membership"
cssClass: smartwe
- url: https://jira.ecogood.org
title: JIRA
description: "Ticketing system"
cssClass: projekte
- url: https://audit.ecogood.org
title: Audit tool
description: "Database of all balanced companies"
cssClass: audittool
- url: https://audit.ecogood.org/ecg-map-companies-associations-chapters/
title: ECG map
description: "Map with markers of the entire international movement"
cssClass: map
navigation:
- text: Previous page
target: index.html
cssClass: float-left

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 18 KiB

9
static/browserconfig.xml Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View File

@@ -15,17 +15,42 @@ a {
margin: auto; margin: auto;
} }
.heading-summary { .nav-container {
clear: both;
}
.nav {
margin-top: 1rem;
background-color: #747474;
border: none;
color: #fff;
padding: 10px 16px;
text-decoration: none;
display: inline-block;
}
.nav:hover {
opacity: 0.75;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.center {
text-align: center; text-align: center;
background-color: #deffbc; }
margin: auto;
width: auto; .footer {
margin-left: auto; margin-top: 10rem;
margin-right: auto; }
width: 48rem;
padding: 0.5rem; .footer > p > a, .footer > p > a:visited, .footer > p > a:active {
border: 1px solid #9ace3e; color: #747474;
border-radius: 0.25rem;
} }
.epframe { .epframe {
@@ -42,6 +67,11 @@ a {
margin: 0.5%; margin: 0.5%;
display: inline-block; display: inline-block;
background-size: cover; background-size: cover;
opacity: 1;
}
.epsquare:hover {
opacity: 0.75;
} }
.eptextfunc { .eptextfunc {
@@ -66,7 +96,7 @@ a {
} }
.epcolprojekte { .epcolprojekte {
background-color: #889e33; background-color: #97a141;
background-image: url(epprojekte.png); background-image: url(epprojekte.png);
} }
@@ -76,7 +106,7 @@ a {
} }
.epcolmaillist { .epcolmaillist {
background-color: #889e33; background-color: #0aa6df;
background-image: url(epmaillist.png); background-image: url(epmaillist.png);
} }
@@ -85,6 +115,26 @@ a {
background-image: url(epcloud.png); background-image: url(epcloud.png);
} }
.epcolcalendar {
background-color: #3B6CA6;
background-image: url(epcalendar.png);
}
.epcolcontacts {
background-color: #3B6CA6;
background-image: url(epcontacts.png);
}
.epcolpolls {
background-color: #3B6CA6;
background-image: url(eppolls.png);
}
.epcoldeck {
background-color: #3B6CA6;
background-image: url(epdeck.png);
}
.epcolsmartwe { .epcolsmartwe {
background-color: #E05656; background-color: #E05656;
background-image: url(epsmartwe.png); background-image: url(epsmartwe.png);
@@ -102,13 +152,24 @@ a {
.epcolsurvey { .epcolsurvey {
background-color: #42ac00; background-color: #42ac00;
background-image: url(epsmartwe.png); background-image: url(epsurvey.png);
} }
.epcolnext { .epcolmap {
background-color: #b694ff; background-color: #008600;
background-image: url(epnext.png); background-image: url(epmap.png);
} }
.epcolaudittool {
background-color: #7ca399;
background-image: url(epaudittool.png);
}
.epcolprevious {
background-color: #b694ff;
background-image: url(epprevious.png);
}
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
.epsquare { .epsquare {
width: 30%; width: 30%;

BIN
static/epaudittool.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
static/epcalendar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
static/epcontacts.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
static/epdeck.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/epmap.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/eppolls.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/epsurvey.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
static/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
static/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
static/metaimage.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
static/mstile-150x150.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View File

@@ -0,0 +1,29 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="192.000000pt" height="192.000000pt" viewBox="0 0 192.000000 192.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,192.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M771 1895 c-194 -44 -332 -117 -470 -249 -125 -121 -207 -255 -257
-423 -37 -125 -44 -318 -16 -453 64 -309 284 -574 573 -689 133 -53 199 -65
359 -65 176 0 265 20 415 94 247 120 435 351 506 620 29 110 32 337 6 444 -44
176 -128 327 -252 452 -125 126 -259 206 -426 254 -98 29 -342 37 -438 15z
m449 -134 c273 -92 469 -298 551 -576 28 -97 35 -258 16 -365 -70 -399 -422
-699 -819 -700 l-58 0 0 415 c0 228 3 415 6 415 4 0 43 -32 88 -71 97 -85 248
-200 294 -223 26 -14 32 -14 32 -2 0 16 -85 137 -160 227 -28 33 -50 62 -48
64 2 1 53 -5 114 -15 134 -22 237 -29 244 -15 5 12 -86 59 -215 110 -49 20
-93 40 -98 44 -4 4 39 24 95 45 140 52 228 93 228 105 0 23 -230 3 -457 -40
l-112 -21 -93 84 c-170 153 -343 286 -356 274 -11 -12 35 -88 119 -196 44 -56
78 -104 75 -107 -2 -3 -37 2 -78 10 -110 23 -267 41 -275 33 -5 -4 1 -15 12
-23 25 -19 188 -97 262 -124 30 -12 51 -25 46 -29 -4 -4 -33 -15 -63 -25 -84
-26 -270 -106 -270 -115 0 -5 10 -10 23 -12 35 -5 222 11 332 28 55 8 117 18
138 21 l37 6 0 -427 c0 -304 -3 -426 -11 -426 -35 0 -146 37 -226 75 -117 57
-223 142 -294 236 -77 102 -103 148 -140 259 -41 123 -51 297 -25 431 54 268
246 502 499 607 118 49 194 62 352 58 126 -2 149 -6 235 -35z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

14
static/site.webmanifest Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "ECG portal",
"short_name": "ECG portal",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}