From df14518590680fbf54d48a494c873fd7e599e021 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Sat, 10 Oct 2020 23:30:52 +0200
Subject: Improved frontend (not sure about #777)

---
 admin/public/index.html    | 10 ++++++----
 admin/public/style.css     | 12 +++++++-----
 auth/public/style.css      |  6 ++++--
 mottovote/public/style.css |  8 +++++---
 overview/public/index.html | 41 +++++++++++++++++++++++++++++------------
 overview/public/style.css  |  6 ++++--
 poll/public/style.css      |  7 +++++--
 profile/public/style.css   |  6 ++++--
 quotes/public/style.css    |  9 ++++++---
 9 files changed, 70 insertions(+), 35 deletions(-)

diff --git a/admin/public/index.html b/admin/public/index.html
index 815b6aa..389157c 100644
--- a/admin/public/index.html
+++ b/admin/public/index.html
@@ -20,10 +20,12 @@
         </div>
         <div class="card">
             <h2>Admin</h2>
-            <ul>
-                <li><a href="ranking.html">Ranking</a></li>
-                <li><a href="votes.html">Votes</a></li>
-            </ul>
+            <div class="pure-menu">
+                <ul class="pure-menu-list">
+                    <li class="pure-menu-item"><a href="ranking.html" class="pure-menu-link">Ranking</a></li>
+                    <li class="pure-menu-item"><a href="votes.html" class="pure-menu-link">Votes</a></li>
+                </ul>
+            </div>
         </div>
     </body>
 </html>
diff --git a/admin/public/style.css b/admin/public/style.css
index 4e3cffc..e7941e0 100644
--- a/admin/public/style.css
+++ b/admin/public/style.css
@@ -4,15 +4,17 @@ body {
     margin: 0;
     height: 100%;
     width: 100%;
+    color: #777;
+    line-height: 1.6;
     background-color: #eec0c6;
     background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
 }
 
 .card {
     position: absolute;
-    max-height: 80%;
-    overflow: auto;
-    width: 40%;
+    max-height: calc(100% - 140px);
+    overflow-y: auto;
+    width: 50%;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
@@ -26,8 +28,8 @@ div {
     background: white;
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 700px) {
     .card {
-        width: calc(100% - 50px);
+        width: calc(100% - 20%);
     }
 }
diff --git a/auth/public/style.css b/auth/public/style.css
index 413ace1..26622e1 100644
--- a/auth/public/style.css
+++ b/auth/public/style.css
@@ -4,6 +4,8 @@ body {
     margin: 0;
     height: 100%;
     width: 100%;
+    color: #777;
+    line-height: 1.6;
     background-color: #eec0c6;
     background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
 }
@@ -14,7 +16,7 @@ div {
 
 form {
     position: absolute;
-    width: 40%;
+    width: 50%;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
@@ -31,6 +33,6 @@ button {
 
 @media only screen and (max-width: 700px) {
     form {
-        width: calc(100% - 50px);
+        width: calc(100% - 20%);
     }
 }
diff --git a/mottovote/public/style.css b/mottovote/public/style.css
index 90bf0f6..3ac011d 100644
--- a/mottovote/public/style.css
+++ b/mottovote/public/style.css
@@ -4,6 +4,8 @@ body {
     margin: 0;
     height: 100%;
     width: 100%;
+    color: #777;
+    line-height: 1.6;
     background-color: #eec0c6;
     background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
 }
@@ -16,6 +18,8 @@ main {
     display: flex;
     flex-flow: row wrap;
     position: absolute;
+    max-height: calc(100% - 140px);
+    overflow-y: auto;
     width: 50%;
     left: 50%;
     top: 50%;
@@ -31,9 +35,7 @@ main {
 }
 
 #vote {
-    max-height: 80%;
     margin-bottom: 20px;
-    overflow-y: auto;
     width: 100%;
 }
 
@@ -54,6 +56,6 @@ select {
 
 @media only screen and (max-width: 700px) {
     main {
-        width: calc(100% - 50px);
+        width: calc(100% - 20%);
     }
 }
diff --git a/overview/public/index.html b/overview/public/index.html
index b9c08bb..8d7a471 100644
--- a/overview/public/index.html
+++ b/overview/public/index.html
@@ -29,22 +29,39 @@
                 Ihr solltet inzwischen eure Benutzernamen und Passwörter erhalten haben, mit welchen ihr folgende Tools
                 nutzen könnt:
             </p>
-            <ul>
-                <!-- <li><a href="/motto">Motto Wähler</a></li> -->
-                <li><a href="/mottovote">Motto-Voting</a></li>
-                <li><a href="/quotes">Zitate</a></li>
-                <li><a href="/profile">Steckbrief</a></li>
-                <li><a href="/poll?type=pupil">Schüler-Ranking</a></li>
-                <li><a href="/poll?type=teacher">Lehrer-Ranking</a></li>
-            </ul>
+            <div class="pure-menu">
+                <ul class="pure-menu-list">
+                    <li class="pure-menu-item">
+                        <a href="/mottovote" class="pure-menu-link">Motto-Voting</a>
+                    </li>
+                    <li class="pure-menu-item">
+                        <a href="/quotes" class="pure-menu-link">Zitate</a>
+                    </li>
+                    <li class="pure-menu-item">
+                        <a href="/profile" class="pure-menu-link">Steckbrief</a>
+                    </li>
+                    <li class="pure-menu-item">
+                        <a href="/poll?type=pupil" class="pure-menu-link">Schüler-Ranking</a>
+                    </li>
+                    <li class="pure-menu-item">
+                        <a href="poll?type=teacher" class="pure-menu-link">Lehrer-Ranking</a>
+                    </li>
+                </ul>
+            </div>
             <p>
                 Falls ihr uns bei der Entwicklung helfen wollt, Fehler gefunden habt oder Fragen an uns habt, könnt ihr
                 gerne mit dem Entwicklungs-Team Kontakt aufnehmen:
             </p>
-            <ul>
-                <li><a href="mailto:abitur@marvinborner.de?subject=Feedback">E-Mail</a></li>
-                <li><a href="https://github.com/marvinborner/Abizeugs/">Öffentlicher Source-Code</a></li>
-            </ul>
+            <div class="pure-menu pure-menu-horizontal">
+                <ul class="pure-menu-list">
+                    <li class="pure-menu-item">
+                        <a href="mailto:abitur@marvinborner.de?subject=Feedback" class="pure-menu-link">E-Mail</a>
+                    </li>
+                    <li class="pure-menu-item">
+                        <a href="https://github.com/marvinborner/Abizeugs/" class="pure-menu-link">Source-Code</a>
+                    </li>
+                </ul>
+            </div>
         </div>
 
         <script src="script.js"></script>
diff --git a/overview/public/style.css b/overview/public/style.css
index b199697..10e2ac9 100644
--- a/overview/public/style.css
+++ b/overview/public/style.css
@@ -4,15 +4,17 @@ body {
     margin: 0;
     height: 100%;
     width: 100%;
+    color: #777;
+    line-height: 1.6;
     background-color: #eec0c6;
     background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
 }
 
 .card {
     position: absolute;
-    max-height: calc(100% - 120px);
+    max-height: calc(100% - 140px);
     overflow: auto;
-    width: 40%;
+    width: 50%;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
diff --git a/poll/public/style.css b/poll/public/style.css
index 80f9294..bd455f4 100644
--- a/poll/public/style.css
+++ b/poll/public/style.css
@@ -4,6 +4,8 @@ body {
     margin: 0;
     height: 100%;
     width: 100%;
+    color: #777;
+    line-height: 1.6;
     background-color: #eec0c6;
     background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
 }
@@ -14,7 +16,7 @@ div {
 
 main {
     position: absolute;
-    width: 40%;
+    width: 50%;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
@@ -28,10 +30,11 @@ input,
 button,
 select {
     width: 100%;
+    color: #777;
 }
 
 @media only screen and (max-width: 700px) {
     main {
-        width: calc(100% - 50px);
+        width: calc(100% - 20%);
     }
 }
diff --git a/profile/public/style.css b/profile/public/style.css
index e674e71..0ea9c37 100644
--- a/profile/public/style.css
+++ b/profile/public/style.css
@@ -4,6 +4,8 @@ body {
     margin: 0;
     height: 100%;
     width: 100%;
+    color: #777;
+    line-height: 1.6;
     background-color: #eec0c6;
     background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
 }
@@ -14,7 +16,7 @@ div {
 
 main {
     position: absolute;
-    max-height: 80%;
+    max-height: calc(100% - 140px);
     overflow-y: auto;
     width: 50%;
     left: 50%;
@@ -39,6 +41,6 @@ img {
 
 @media only screen and (max-width: 600px) {
     main {
-        width: calc(100% - 50px);
+        width: calc(100% - 20%);
     }
 }
diff --git a/quotes/public/style.css b/quotes/public/style.css
index ae0642b..483289a 100644
--- a/quotes/public/style.css
+++ b/quotes/public/style.css
@@ -4,6 +4,8 @@ body {
     margin: 0;
     height: 100%;
     width: 100%;
+    color: #777;
+    line-height: 1.6;
     background-color: #eec0c6;
     background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
 }
@@ -14,9 +16,9 @@ div {
 
 main {
     position: absolute;
-    max-height: 80%;
+    max-height: calc(100% - 140px);
     overflow-y: auto;
-    width: 40%;
+    width: 50%;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
@@ -52,10 +54,11 @@ input,
 button,
 select {
     width: 100%;
+    color: #777;
 }
 
 @media only screen and (max-width: 700px) {
     main {
-        width: calc(100% - 50px);
+        width: calc(100% - 20%);
     }
 }
-- 
cgit v1.2.3