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

2021-05-18 17:24:11 +02:00
parent c6aa110b19
commit e81d6c98c9
41 changed files with 243 additions and 75 deletions
--- a/README.md
+++ b/README.md
@@ -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")

 ## Features

- generated static website powered a small python script
+- Generates a static website powered a small python script
    - easily extensible by a YAML definition
- responsive layout
+- Responsive layout
 - Respects Privacy and Security by being ready for CSP and RP

 ## 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

@@ -29,3 +29,6 @@ chmod +x build+deploy.sh
 - clean the output folder
 - build the project
 - upload to the remote SSH target
+
+## Roadmap
+- Provide localized versions of the portal
--- a/build.py
+++ b/build.py
@@ -14,6 +14,7 @@ content_folder = os.path.join(__location__, 'content')
 output_folder = os.path.join(__location__, 'dist')

 config_file = sys.argv[1]
+output_file = sys.argv[2]

 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()
 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 += template_item.substitute(config_item)
+items = ''
+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 = 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)

-outfile_index = os.path.join(output_folder, 'index.html')
+outfile_index = os.path.join(output_folder, output_file)

 copy_tree(static_folder, output_folder)

--- a/content/index.tmpl.html
+++ b/content/index.tmpl.html
@@ -1,21 +1,50 @@
 <!doctype html>
+<!-- Icons taken from https://remixicon.com -->
 <html lang="en">
    <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 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>
    <body>
        <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">
            $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>
    </body>
 </html>
--- a/content/navigation.tmpl.html
+++ b/content/navigation.tmpl.html
@@ -0,0 +1 @@
+<a href="$target"><div class="nav $cssClass">$text</div></a>
--- a/docs/screenshot.png
+++ b/docs/screenshot.png
--- a/items_page_1.yml
+++ b/items_page_1.yml
@@ -11,47 +11,27 @@ items:
    title: Webmail
    description: "Email client in your web browser"
    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
    title: Chat
    description: "Chat directly or within channels and groups<br />(like Slack®)"
    cssClass: chat
-  - 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://my.ecogood.org/index_extended.html
-    title: Page 2
-    description: "I want to see more IT tools"
-    cssClass: next
-  - 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://datacloud.ecogood.org/apps/calendar/
+    title: Calendar
+    description: Manage and share calendars
+    cssClass: calendar
+  - url: https://datacloud.ecogood.org/apps/contacts/
+    title: Contacts
+    description: Manage and share contacts
+    cssClass: contacts
+  - url: https://datacloud.ecogood.org/apps/polls/
+    title: Polls
+    description: "Schedule meetings<br />(like Doodle®)"
+    cssClass: polls
+  - url: https://datacloud.ecogood.org/apps/deck/
+    title: Deck
+    description: KanBan Board<br />(like Trello®)
+    cssClass: deck
+navigation:
+  - text: Next page
+    target: index2.html
+    cssClass: float-right
--- a/items_page_2.yml
+++ b/items_page_2.yml
@@ -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
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/static/background.png
+++ b/static/background.png
--- a/static/browserconfig.xml
+++ b/static/browserconfig.xml
@@ -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>
--- a/static/ecg-portal-logo.png
+++ b/static/ecg-portal-logo.png
--- a/static/ecogood.css
+++ b/static/ecogood.css
@@ -15,17 +15,42 @@ a {
 	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;
-    background-color: #deffbc;
-    margin: auto;
-    width: auto;
-    margin-left: auto;
-    margin-right: auto;
-    width: 48rem;
-    padding: 0.5rem;
-    border: 1px solid #9ace3e;
-    border-radius: 0.25rem;
+}
+
+.footer {
+    margin-top: 10rem;
+}
+
+.footer > p > a, .footer > p > a:visited, .footer > p > a:active {
+    color: #747474;
 }

 .epframe {
@@ -42,6 +67,11 @@ a {
    margin: 0.5%;
    display: inline-block;
    background-size: cover;
+    opacity: 1;
+}
+
+.epsquare:hover {
+    opacity: 0.75;
 }

 .eptextfunc {
@@ -66,7 +96,7 @@ a {
 }

 .epcolprojekte {
-    background-color: #889e33;
+    background-color: #97a141;
    background-image: url(epprojekte.png);
 }

@@ -76,7 +106,7 @@ a {
 }

 .epcolmaillist {
-    background-color: #889e33;
+    background-color: #0aa6df;
    background-image: url(epmaillist.png);
 }

@@ -85,6 +115,26 @@ a {
    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 {
    background-color: #E05656;
    background-image: url(epsmartwe.png);
@@ -102,13 +152,24 @@ a {

 .epcolsurvey {
    background-color: #42ac00;
-    background-image: url(epsmartwe.png);
+    background-image: url(epsurvey.png);
 }

-.epcolnext {
-    background-color: #b694ff;
-    background-image: url(epnext.png);
+.epcolmap {
+    background-color: #008600;
+    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) {
    .epsquare {
        width: 30%;
--- a/static/epaudittool.png
+++ b/static/epaudittool.png
--- a/static/epcalendar.png
+++ b/static/epcalendar.png
--- a/static/epchat.png
+++ b/static/epchat.png
--- a/static/epcloud.png
+++ b/static/epcloud.png
--- a/static/epcode.png
+++ b/static/epcode.png
--- a/static/epcontacts.png
+++ b/static/epcontacts.png
--- a/static/epdeck.png
+++ b/static/epdeck.png
--- a/static/epecg.png
+++ b/static/epecg.png
--- a/static/epmail.png
+++ b/static/epmail.png
--- a/static/epmaillist.png
+++ b/static/epmaillist.png
--- a/static/epmap.png
+++ b/static/epmap.png
--- a/static/epnext.png
+++ b/static/epnext.png
--- a/static/eppolls.png
+++ b/static/eppolls.png
--- a/static/epprojekte.png
+++ b/static/epprojekte.png
--- a/static/epsmartwe.png
+++ b/static/epsmartwe.png
--- a/static/epsurvey.png
+++ b/static/epsurvey.png
--- a/static/epwiki.png
+++ b/static/epwiki.png
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/gwoe-arbeitsbuch-5k.jpg
+++ b/static/gwoe-arbeitsbuch-5k.jpg
--- a/static/gwoe-arbeitsbuch-5v.jpg
+++ b/static/gwoe-arbeitsbuch-5v.jpg
--- a/static/gwoe-regelwerk.jpg
+++ b/static/gwoe-regelwerk.jpg
--- a/static/metaimage.jpg
+++ b/static/metaimage.jpg
--- a/static/mstile-150x150.png
+++ b/static/mstile-150x150.png
--- a/static/safari-pinned-tab.svg
+++ b/static/safari-pinned-tab.svg
@@ -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>
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
@@ -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"
+}
				`@@ -0,0 +1 @@`
				`<a href="$target"><div class="nav $cssClass">$text</div></a>`