Преглед изворни кода

Tweak font sizes en radio button positie

Harry de Boer пре 6 година
родитељ
комит
29e8ffdb1b

+ 1 - 1
deploy.sh

@@ -1,5 +1,5 @@
 #!/bin/sh
-mvn clean package
+mvn package
 docker build . --tag quintor/puzzeltocht:1.0-SNAPSHOT
 docker-compose down
 docker-compose up -d

+ 2 - 2
src/main/java/puzzeltocht/service/EventService.java

@@ -16,8 +16,8 @@ public class EventService {
 
     public EventService(RouteService rs, TeamService ts) {
         this.teamService = ts;
-        createEvent("Summercamp MINI puzzeltocht", "Korte route", rs.mockRoute());
-        createEvent("Summercamp MAXI puzzeltocht", "Lange route", rs.mockRoute());
+        createEvent("Summercamp MINI", "Korte route", rs.mockRoute());
+        createEvent("Summercamp MAXI", "Lange route", rs.mockRoute());
     }
 
     private void createEvent(String title, String description, Route r){

+ 0 - 1
src/main/resources/static/index.html

@@ -2,7 +2,6 @@
 <html lang="nl">
 <head>
     <meta charset="UTF-8">
-    <meta title="viewport" content="width=device-width, initial-scale=1.0">
     <title>Puzzeltochten</title>
     <script src="main.js"></script>
     <link rel="stylesheet" href="main.css">

+ 27 - 15
src/main/resources/static/main.css

@@ -1,18 +1,22 @@
 html, body {
     position: relative;
-    height: 100vh;
+    min-height: 100vh;
     width: 100vw;
-    overflow: hidden;
-    margin: 0; padding: 0;
+    overflow-x: hidden;
+    margin: 0;
+    padding: 0;
     color: black;
     background-color: white;
     box-sizing: border-box;
     font-family: "Times New Roman", Times, serif;
+    font-size: calc(10pt + 0.5em);
     line-height: 1.15;
 }
 
 *, *:before, *:after {
     box-sizing: inherit;
+    line-height: inherit;
+    font-size: inherit;
 }
 
 header, footer {
@@ -21,6 +25,7 @@ header, footer {
 
 header > h1,
 header > h2 {
+    font-size: larger;
     margin: 1.5vh 0;
 }
 
@@ -30,16 +35,18 @@ body > footer {
     padding: 1.5vh;
     background-color: #c23350;
     color: #eee;
+    width: 100vw;
 }
 
 main {
     padding: 1vh 2vw;
 }
 
-body > footer {
-    position: absolute;
-    bottom: 0;
-    width: 100vw;
+body {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
 }
 
 #join > p {
@@ -50,11 +57,11 @@ body > footer {
     display: flex;
     flex-direction: column;
     width: 96vw;
-    padding: 0 1vw
+    padding: 0 1vw;
+    font-size: larger;
 }
 
-#joinForm > label,
-#joinForm > button {
+#joinForm > label {
     margin: 1vh 0;
     border-bottom: 1px solid #bbbbbb;
 }
@@ -79,17 +86,22 @@ body > footer {
 }
 
 #events > label {
-    display: inline-flex;
-    align-items: center;
     margin: 1vmin 0;
-    padding: 2vmin;
+    padding: 2vmin 4vmin;
     background-color: #c23350;
     color: #eeeeee;
     border: 1px solid darkred;
     border-radius: 2vmin;
-    line-height: 1.25;
 }
 
 #events > label > input {
-    margin: 0 2.5vmin 0 1.5vmin;
+    margin: 0;
+}
+
+#events > label > span {
+    padding-left: 3vmin;
+}
+
+#mission {
+    font-size: larger;
 }

+ 1 - 1
src/main/resources/static/main.js

@@ -126,7 +126,7 @@ class JoinScreen {
         let events = document.getElementById("events");
         events.innerHTML = "";
         eventJson.forEach((e) => {
-            events.innerHTML += '<label><input name="eventId" value="' + e.id + '" type="radio">' + e.title + '</label>';
+            events.innerHTML += '<label><input name="eventId" value="' + e.id + '" type="radio"><span>' + e.title + '</span></label>';
         });
         document.getElementById("joinButton").disabled = false;
     }