首页 发现 帮助
登录
quintor
/
puzzeltocht
3
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Fix beantwoorden vragen en tweak font size

Harry de Boer 6 年之前
父节点
b1ac2af140
当前提交
1f4cfb9fcf
共有 3 个文件被更改，包括 41 次插入 和 9 次删除
分列视图 显示文件统计
  1. 5 3
      src/main/resources/static/index.html
  2. 33 2
      src/main/resources/static/main.css
  3. 3 4
      src/main/resources/static/main.js

+ 5 - 3
src/main/resources/static/index.html
查看文件 

@@ -2,6 +2,7 @@
 
 <html lang="nl">
 
 <head>
 
     <meta charset="UTF-8">
 
+    <meta title="viewport" content="width=device-width, initial-scale=1.0, user-scalable=true">
 
     <title>Puzzeltocht</title>
 
     <script src="main.js"></script>
 
     <link rel="stylesheet" href="main.css">
 
@@ -22,7 +23,7 @@
 
             Let op: deze app werkt alleen op apparaten met GPS functie, zorg dat deze aan staat!
 
         </p>
 
         <form id="joinForm">
 
-            <label for="teamName">Teamnaam: </label>
 
+            <label for="teamName">Teamnaam:</label>
 
             <input type="text" id="teamName" minlength="3" required/>
 
             <label for="events">Puzzeltocht:</label>
 
             <div id="events">
 
@@ -38,10 +39,11 @@
 
         </header>
 
         <p id="missionDescription">Deze app vereist een accurate locatie, zet daarom de GPS functie van je apparaat
 
             aan.</p>
 
-        <div id="questionMission">
 
+        <div id="questionMission" style="display: none">
 
             <form id="answerForm">
 
-                <label for="questionAnwser">Antwoord: </label>
 
+                <label for="questionAnwser">Antwoord:</label>
 
                 <input type="text" id="questionAnwser" required/>
 
+                <label for="answerButton">Bevestigen:</label>
 
                 <button id="answerButton">Verstuur antwoord</button>
 
             </form>
 
         </div>

+ 33 - 2
src/main/resources/static/main.css
查看文件 

@@ -1,3 +1,21 @@
 
+html {
 
+    font-size: 3rem;
 
+    text-size-adjust: none;
 
+    -webkit-text-size-adjust: none;
 
+    -moz-text-size-adjust: none;
 
+    -ms-text-size-adjust: none;
 
+}
 
+@media screen and (min-width: 320px) {
 
+    html {
 
+        font-size: calc(3rem - 2 * ((100vw - 320px) / 680));
 
+    }
 
+}
 
+@media screen and (min-width: 1000px) {
 
+    html {
 
+        font-size: 1rem;
 
+    }
 
+}
 
+
 
 html, body {
 
     position: relative;
 
     min-height: 100vh;
 
@@ -9,13 +27,15 @@ html, body {
 
     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;
 
+}
 
+
 
+input, button {
 
     font-size: inherit;
 
 }
 
 
@@ -70,8 +90,18 @@ body {
 
     border-bottom: 1px solid #bbbbbb;
 
 }
 
 
+#answerForm {
 
+    display: flex;
 
+    flex-direction: column;
 
+    width: 96vw;
 
+    padding: 0 1vw;
 
+    font-size: larger;
 
+}
 
+
 
 #joinForm > button,
 
-#joinForm > input {
 
+#joinForm > input,
 
+#answerForm > button,
 
+#answerForm > input {
 
     margin: 1vh 0;
 
     padding: 2vmin;
 
     border: 1px solid #111;
 
@@ -100,6 +130,7 @@ body {
 
 
 #events > label > input {
 
     margin: 0;
 
+    width: 0.75rem; height: 0.75rem;
 
 }
 
 
 #events > label > span {

+ 3 - 4
src/main/resources/static/main.js
查看文件 

@@ -20,7 +20,6 @@ class Puzzeltocht {
 
         this.eventId = this.joinScreen.eventId;
 
         this.teamId = teamId;
 
         document.getElementById("join").style.display = "none";
 
-        document.getElementById("questionMission").style.display = "none";
 
         document.getElementById("mission").style.display = "block";
 
         this.location.enable(p => this.updateLocation(p))
 
     }
 
@@ -34,7 +33,7 @@ class Puzzeltocht {
 
 
     updateLocation(position) {
 
         let l = document.getElementById("location");
 
-        if (position.accuracy() > 20) {
 
+        if (position.accuracy() > 20 && window.location.hostname !== "localhost") {
 
             l.innerText = "Onbetrouwbare locatie: " + position.string();
 
             return;
 
         }
 
@@ -68,8 +67,8 @@ class MissionScreen {
 
     static answer(submitEvent, callback) {
 
         submitEvent.preventDefault();
 
         let form = document.getElementById("answerForm");
 
-        let answer = form.elements["questionAnswer"].value;
 
-        form.elements["questionAnswer"].value = "";
 
+        let answer = form.elements["questionAnwser"].value;
 
+        form.elements["questionAnwser"].value = "";
 
         document.getElementById("answerButton").disabled = true;
 
         callback(answer);
 
     }