Browse Source

Update design, optimize for mobile use

parent
commit
461f6f7ed7

+ 3
- 0
.gitignore View File

@@ -436,3 +436,6 @@ typings/
436 436
 
437 437
 
438 438
 # End of https://www.gitignore.io/api/rust,linux,latex,kdevelop4,intellij+all
439
+
440
+frontend/resources/*.png
441
+frontend/resources/*.ico

+ 7
- 6
README.md View File

@@ -4,15 +4,15 @@ Diese Software soll das gemeinsame Lernen für die AFU-Prüfung ermöglichen. Di
4 4
 ## Autor und Kontakt
5 5
 Christian Friedrich Coors, Rufzeichen DL5LQ, me@dl5lq.de
6 6
 
7
-Fragen, Anmerkungen, Kommentare, Erfahrungen und Pull Requests sind gerne gesehen. Accountanfragen für die "offizielle" Instanz auf https://agt.dl5lq.de/ werden gerne beantwortet.
7
+Fragen, Anmerkungen, Kommentare, Erfahrungen und Pull Requests sind gerne gesehen. Accountanfragen für die „offizielle“ Instanz auf https://agt.dl5lq.de/ werden gerne beantwortet.
8 8
 
9 9
 ## Einschränkungen
10 10
 Die bisher größte Einschränkung ist, dass der Fragenkatalog Technik A momentan noch nicht fertig ist. Dieser wird voraussichtlich zum nächsten Klasse A-Kurs in Bremen fertig.
11 11
 
12 12
 ## Technische Hintergründe
13
-Front- und Backend sind in JavaScript geschrieben. Das Backend wird mit Node ausgeführt, das Frontend basiert auf dem React-Framework und wird in "normales" HTML/JS/CSS übersetzt. Front- und Backend kommunizieren über einen WebSocket, also eine ständig offene TCP-Verbindung. Dadurch wird eine Kommunikation aller Teilnehmer mit geringer Latenz ermöglicht.
13
+Front- und Backend sind in JavaScript geschrieben. Das Backend wird mit Node ausgeführt, das Frontend basiert auf dem React-Framework und wird in „normales“ HTML/JS/CSS übersetzt. Front- und Backend kommunizieren über einen WebSocket, also eine ständig offene TCP-Verbindung. Dadurch wird eine Kommunikation aller Teilnehmer mit geringer Latenz ermöglicht.
14 14
 
15
-Die Software ist absichtlich sehr datensparsam designt: Alle Teilnehmer sind nicht ohne weitere Informationen identifizierbar. Insbesondere wird keine Statistik über richtig und falsch beantwortete Fragen erstellt. Sobald ein Teilnehmer die Seite verlässt und die Verbindung geschlossen wird "vergisst" das Backend alle Daten über diesen Teilnehmer. Es werden keine Cookies gesetzt oder sonstige persistente Daten auf den Endgerät des Teilnehmers gespeichert, die ihn identifizierbar machen.
15
+Die Software ist absichtlich sehr datensparsam designt: Alle Teilnehmer sind nicht ohne weitere Informationen identifizierbar. Insbesondere wird keine Statistik über richtig und falsch beantwortete Fragen erstellt. Sobald ein Teilnehmer die Seite verlässt und die Verbindung geschlossen wird „vergisst“ das Backend alle Daten über diesen Teilnehmer. Es werden keine Cookies gesetzt oder sonstige persistente Daten auf den Endgerät des Teilnehmers gespeichert, die ihn identifizierbar machen.
16 16
 
17 17
 Es wurden noch keine systematischen Lasttests durchgeführt. Theoretisch sollte das System gut skalieren und auch mit vielen Teilnehmern noch performant funktionieren, da über den WebSocket bis auf ein Mal die Fragendatenbank für den Dozenten nur sehr kleine Nachrichten verschickt werden und das Backend keine besonders rechenintensiven Aufgaben durchführt. Trotzdem ist ein Lasttest geplant.
18 18
 
@@ -32,7 +32,7 @@ Im Ordner `backend` muss die `main.js`-Datei angepasst werden. Zwischen den Zeil
32 32
 Anschließend im Ordner `backend` `npm install` ausführen, was die notwendigen Dependencies installiert. Das Backend kann dann mit `npm run backend` gestartet werden. Es sollte auf dem Server als Dienst eingerichtet werden.
33 33
 
34 34
 ### Frontend
35
-Das Frontend ist in [React](https://reactjs.org/) mit [create-react-app](https://facebook.github.io/create-react-app/) und einigen Dependencies entwickelt worden. Das Frontend kann lokal gebaut und auf einem normalen Webserver gehostet/deployt werden.
35
+Das Frontend ist in [React](https://reactjs.org/) mit [create-react-app](https://facebook.github.io/create-react-app/) und einigen Dependencies entwickelt worden. Das Frontend kann lokal gebaut und auf einen normalen Webserver gehostet/deployt werden.
36 36
 
37 37
 Im Ordner `frontend/src` ist die Datei `index.js` anzupassen. Hier gibt es diese Konfigurationsparameter:
38 38
 
@@ -42,6 +42,7 @@ Im Ordner `frontend/src` ist die Datei `index.js` anzupassen. Hier gibt es diese
42 42
 - `footerLink`: Eine React-Komponente, die in den Footer der Seite eingebaut wird. Hier kann etwa ein Link auf ein eigenes Impressum und eigene Datenschutzbestimmungen gesetzt werden.
43 43
 - `release`: Wenn aktiv, wird der Benutzer vor dem Verlassen der Seite gewarnt.
44 44
 
45
-**Die Parameter `mathJaxProvider` und `footerLink` müssen für eine eigene Installation angepasst werden! Ich betreibe kein CDN und mein Impressum und meine Datenschutzbestimmungen gelten ausschließlich auf von mir verwalteten Domains!**
45
+**Die Parameter `mathJaxProvider` und `footerLink` müssen für eine eigene Installation angepasst werden! Ich betreibe kein CDN und mein Impressum und meine Datenschutzbestimmungen gelten ausschließlich für die von mir verwalteten Domains!**
46
+
47
+Anschließend muss auch hier `npm install` ausgeführt werden. Dann kann das Frontend mit `yarn build` in den Ordner `frontend/build` gebaut werden. Dort landen die Dateien, die auf den Webserver kopiert werden sollen.
46 48
 
47
-Anschließend muss auch hier `npm install` ausgeführt werden. Abschließend kann das Frontend mit `yarn build` in den Ordner `frontend/build` gebaut werden. Dort landen die Dateien, die auf den Webserver kopiert werden sollen.

BIN
frontend/public/favicon.ico View File


BIN
frontend/public/icons/favicon_1024.png View File


BIN
frontend/public/icons/favicon_128.png View File


BIN
frontend/public/icons/favicon_144.png View File


BIN
frontend/public/icons/favicon_16.png View File


BIN
frontend/public/icons/favicon_180.png View File


BIN
frontend/public/icons/favicon_192.png View File


BIN
frontend/public/icons/favicon_24.png View File


BIN
frontend/public/icons/favicon_256.png View File


BIN
frontend/public/icons/favicon_32.png View File


BIN
frontend/public/icons/favicon_48.png View File


BIN
frontend/public/icons/favicon_512.png View File


BIN
frontend/public/icons/favicon_64.png View File


+ 6
- 26
frontend/public/index.html View File

@@ -2,24 +2,14 @@
2 2
 <html lang="de">
3 3
 <head>
4 4
     <meta charset="utf-8">
5
-    <meta name="viewport"
6
-          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no"/>
5
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no"/>
7 6
     <meta name="theme-color" content="#000000">
8
-    <!--
9
-      manifest.json provides metadata used when your web app is added to the
10
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11
-    -->
12 7
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14
-    <!--
15
-      Notice the use of %PUBLIC_URL% in the tags above.
16
-      It will be replaced with the URL of the `public` folder during the build.
17
-      Only files inside the `public` folder can be referenced from the HTML.
18
-
19
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20
-      work correctly both with client-side routing and a non-root public URL.
21
-      Learn how to configure a non-root public URL by running `npm run build`.
22
-    -->
8
+    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.ico">
9
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/icons/favicon_512.png">
10
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/icons/favicon_180.png">
11
+    <meta name="msapplication-TileColor" content="#cccccc">
12
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/icons/favicon_144.png">
23 13
     <title>AFU-group-trainer</title>
24 14
 
25 15
     <script type="text/x-mathjax-config">
@@ -34,15 +24,5 @@ MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
34 24
     You need to enable JavaScript to run this app.
35 25
 </noscript>
36 26
 <div id="root"></div>
37
-<!--
38
-  This HTML file is a template.
39
-  If you open it directly in the browser, you will see an empty page.
40
-
41
-  You can add webfonts, meta tags, or analytics to this file.
42
-  The build step will place the bundled scripts into the <body> tag.
43
-
44
-  To begin the development, run `npm start` or `yarn start`.
45
-  To create a production bundle, use `npm run build` or `yarn build`.
46
--->
47 27
 </body>
48 28
 </html>

+ 54
- 4
frontend/public/manifest.json View File

@@ -3,13 +3,63 @@
3 3
   "name": "AFU group trainer",
4 4
   "icons": [
5 5
     {
6
-      "src": "favicon.ico",
7
-      "sizes": "64x64 32x32 24x24 16x16",
8
-      "type": "image/x-icon"
6
+      "src": "icons/favicon_16.png",
7
+      "sizes": "16x16",
8
+      "type": "image/png"
9
+    },
10
+    {
11
+      "src": "icons/favicon_24.png",
12
+      "sizes": "24x24",
13
+      "type": "image/png"
14
+    },
15
+    {
16
+      "src": "icons/favicon_32.png",
17
+      "sizes": "32x32",
18
+      "type": "image/png"
19
+    },
20
+    {
21
+      "src": "icons/favicon_64.png",
22
+      "sizes": "64x64",
23
+      "type": "image/png"
24
+    },
25
+    {
26
+      "src": "icons/favicon_128.png",
27
+      "sizes": "128x128",
28
+      "type": "image/png"
29
+    },
30
+    {
31
+      "src": "icons/favicon_144.png",
32
+      "sizes": "144x144",
33
+      "type": "image/png"
34
+    },
35
+    {
36
+      "src": "icons/favicon_180.png",
37
+      "sizes": "180x180",
38
+      "type": "image/png"
39
+    },
40
+    {
41
+      "src": "icons/favicon_192.png",
42
+      "sizes": "192x192",
43
+      "type": "image/png"
44
+    },
45
+    {
46
+      "src": "icons/favicon_256.png",
47
+      "sizes": "256x256",
48
+      "type": "image/png"
49
+    },
50
+    {
51
+      "src": "icons/favicon_512.png",
52
+      "sizes": "512x512",
53
+      "type": "image/png"
54
+    },
55
+    {
56
+      "src": "icons/favicon_1024.png",
57
+      "sizes": "1024x1024",
58
+      "type": "image/png"
9 59
     }
10 60
   ],
11 61
   "start_url": "./index.html",
12 62
   "display": "standalone",
13 63
   "theme_color": "#000000",
14
-  "background_color": "#ffffff"
64
+  "background_color": "#cccccc"
15 65
 }

+ 125
- 0
frontend/resources/favicon.svg View File

@@ -0,0 +1,125 @@
1
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
3
+
4
+<svg
5
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
6
+   xmlns:cc="http://creativecommons.org/ns#"
7
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8
+   xmlns:svg="http://www.w3.org/2000/svg"
9
+   xmlns="http://www.w3.org/2000/svg"
10
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12
+   width="512"
13
+   height="512"
14
+   viewBox="0 0 135.46666 135.46667"
15
+   version="1.1"
16
+   id="svg8"
17
+   inkscape:version="0.92.4 5da689c313, 2019-01-14"
18
+   sodipodi:docname="favicon.svg">
19
+  <defs
20
+     id="defs2">
21
+    <inkscape:path-effect
22
+       effect="bspline"
23
+       id="path-effect4837"
24
+       is_visible="true"
25
+       weight="33.333333"
26
+       steps="2"
27
+       helper_size="0"
28
+       apply_no_weight="true"
29
+       apply_with_weight="true"
30
+       only_selected="false" />
31
+    <marker
32
+       inkscape:stockid="Arrow1Lstart"
33
+       orient="auto"
34
+       refY="0.0"
35
+       refX="0.0"
36
+       id="Arrow1Lstart"
37
+       style="overflow:visible"
38
+       inkscape:isstock="true">
39
+      <path
40
+         id="path4551"
41
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
42
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
43
+         transform="scale(0.8) translate(12.5,0)" />
44
+    </marker>
45
+    <marker
46
+       inkscape:stockid="Arrow1Lend"
47
+       orient="auto"
48
+       refY="0.0"
49
+       refX="0.0"
50
+       id="Arrow1Lend"
51
+       style="overflow:visible;"
52
+       inkscape:isstock="true">
53
+      <path
54
+         id="path4554"
55
+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
56
+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;"
57
+         transform="scale(0.8) rotate(180) translate(12.5,0)" />
58
+    </marker>
59
+  </defs>
60
+  <sodipodi:namedview
61
+     id="base"
62
+     pagecolor="#ffffff"
63
+     bordercolor="#666666"
64
+     borderopacity="1.0"
65
+     inkscape:pageopacity="0.0"
66
+     inkscape:pageshadow="2"
67
+     inkscape:zoom="3.5488281"
68
+     inkscape:cx="180.34122"
69
+     inkscape:cy="256"
70
+     inkscape:document-units="mm"
71
+     inkscape:current-layer="layer1"
72
+     showgrid="true"
73
+     units="px"
74
+     inkscape:window-width="3840"
75
+     inkscape:window-height="2078"
76
+     inkscape:window-x="3840"
77
+     inkscape:window-y="40"
78
+     inkscape:window-maximized="0">
79
+    <inkscape:grid
80
+       type="xygrid"
81
+       id="grid4518"
82
+       spacingx="2.1166666"
83
+       spacingy="2.1166666"
84
+       empspacing="4"
85
+       visible="false" />
86
+  </sodipodi:namedview>
87
+  <metadata
88
+     id="metadata5">
89
+    <rdf:RDF>
90
+      <cc:Work
91
+         rdf:about="">
92
+        <dc:format>image/svg+xml</dc:format>
93
+        <dc:type
94
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
95
+        <dc:title />
96
+      </cc:Work>
97
+    </rdf:RDF>
98
+  </metadata>
99
+  <g
100
+     inkscape:label="Layer 1"
101
+     inkscape:groupmode="layer"
102
+     id="layer1"
103
+     transform="translate(0,-161.53332)">
104
+    <rect
105
+       style="fill:#2ca119;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:6.69999981;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
106
+       id="rect4526"
107
+       width="131.23332"
108
+       height="131.23331"
109
+       x="2.1166666"
110
+       y="163.64999"
111
+       rx="23.283329"
112
+       ry="23.283329" />
113
+    <text
114
+       xml:space="preserve"
115
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:61.73611069px;line-height:1.25;font-family:Vollkorn;-inkscape-font-specification:Vollkorn;letter-spacing:0px;word-spacing:0px;fill:#eeeeee;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal;"
116
+       x="7.0983429"
117
+       y="250.8743"
118
+       id="text4549"><tspan
119
+         sodipodi:role="line"
120
+         id="tspan4547"
121
+         x="7.0983429"
122
+         y="250.8743"
123
+         style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-family:Overpass;-inkscape-font-specification:'Overpass Heavy';fill:#eeeeee;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal">AGT</tspan></text>
124
+  </g>
125
+</svg>

+ 14
- 0
frontend/resources/genFavicon.sh View File

@@ -0,0 +1,14 @@
1
+#!/usr/bin/env bash
2
+
3
+set -e
4
+sizes=(16 24 32 48 64 128 144 180 192 256 512 1024)
5
+input="favicon"
6
+
7
+for size in "${sizes[@]}"; do
8
+    inkscape -z -e ${input}_${size}.png -w $size -h $size $input.svg
9
+done
10
+
11
+exiftool -all= *.png
12
+rm *_original
13
+optipng *.png
14
+icotool -c -o $input.ico ${input}_16.png ${input}_32.png ${input}_64.png

Loading…
Cancel
Save