Home Explore Help
Sign In
quintor
/
puzzeltocht
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Eerste versie dashboard map

Harry de Boer 5 years ago
parent
d504e24bff
commit
a4eedcffb5
3 changed files with 121 additions and 0 deletions
Split View Show Diff Stats
  1. 68 0
      src/main/resources/static/dashboard/dashboard.css
  2. 20 0
      src/main/resources/static/dashboard/dashboard.js
  3. 33 0
      src/main/resources/static/dashboard/index.html

+ 68 - 0
src/main/resources/static/dashboard/dashboard.css
View File 

@@ -0,0 +1,68 @@
 
+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;
 
+    width: 100vw;
 
+    overflow-x: hidden;
 
+    margin: 0;
 
+    padding: 0;
 
+    color: black;
 
+    background-color: white;
 
+    box-sizing: border-box;
 
+    font-family: Arial, Helvetica, sans-serif;
 
+    line-height: 1.15;
 
+}
 
+
 
+*, *:before, *:after {
 
+    box-sizing: inherit;
 
+    line-height: inherit;
 
+}
 
+
 
+header {
 
+    width: 100vw;
 
+    min-height: 7.5vh;
 
+    margin: 0;
 
+    padding: 1.5vh;
 
+    font-size: larger;
 
+    background-color: #c23350;
 
+    color: #eee;
 
+}
 
+
 
+header > h1 {
 
+    margin: 1.5vh 0;
 
+    font-size: larger;
 
+}
 
+
 
+#map {
 
+    width: 100vw;
 
+    height: 75vh;
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+#teams {
 
+    width: 100vw;
 
+    min-height: 17.5vh;
 
+    margin: 0;
 
+    padding: 1.5vh;
 
+    font-size: medium;
 
+    background-color: #c23350;
 
+    color: #eee;
 
+}

+ 20 - 0
src/main/resources/static/dashboard/dashboard.js
View File 

@@ -0,0 +1,20 @@
 
+"use strict";
 
+
 
+let map = undefined;
 
+window.addEventListener("DOMContentLoaded", () => {
 
+    map = L.map('map', {
 
+        center: [53.2212, 6.5586],
 
+        zoom: 16,
 
+        minZoom: 15,
 
+        maxZoom: 17,
 
+        maxBounds: [
 
+            [53.2338, 6.5083],
 
+            [53.2005, 6.6031]
 
+        ]
 
+    });
 
+
 
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 
+        maxZoom: 17
 
+    }).addTo(map);
 
+});

+ 33 - 0
src/main/resources/static/dashboard/index.html
View File 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="nl">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta title="viewport" content="width=device-width, initial-scale=1.0, user-scalable=true">
 
+    <title>Puzzeltocht dashboard</title>
 
+    <link rel="stylesheet" href="dashboard.css">
 
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
 
+          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
 
+          crossorigin=""/>
 
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
 
+            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
 
+            crossorigin=""></script>
 
+    <script src="dashboard.js"></script>
 
+</head>
 
+<body>
 
+
 
+<header>
 
+    <h1>Puzzeltocht dashboard</h1>
 
+</header>
 
+
 
+<main>
 
+    <div id="map"></div>
 
+    <div id="teams">
 
+        <p>Actieve teams:</p>
 
+        <ul>
 
+            <li>stub</li>
 
+        </ul>
 
+    </div>
 
+</main>
 
+
 
+</body>
 
+</html>