A more sticky control buttons and centered loading
This commit is contained in:
parent
c588768401
commit
17aaee56ad
3
TODO
Normal file
3
TODO
Normal file
@ -0,0 +1,3 @@
|
||||
- Add expert mode with typing autocompletion
|
||||
- Generate a quizz of 10 question
|
||||
- Add a more local species selector
|
@ -16,5 +16,6 @@
|
||||
"Correct!": "Correct!",
|
||||
"Set": "Set",
|
||||
"Play the quizz": "Play the quizz",
|
||||
"About this game": "About this game"
|
||||
"About this game": "About this game",
|
||||
"Launch a quizz": "Launch a quizz"
|
||||
}
|
@ -6,7 +6,6 @@ function getCoordinates() {
|
||||
let lng = getCookie("lng");
|
||||
if (lat != undefined && lng != undefined) {
|
||||
location = [lat, lng];
|
||||
console.log(`Got a previous geolocation cookie at ${location[0]}, ${location[1]}`)
|
||||
}
|
||||
return location;
|
||||
}
|
||||
@ -21,7 +20,7 @@ function geolocationHandler() {
|
||||
let location = getCoordinates();
|
||||
let message = document.querySelector('.message');
|
||||
// Init map
|
||||
let map = L.map('map').setView(location, 15);
|
||||
let map = L.map('map').setView(location, 5);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
|
@ -1,4 +1,8 @@
|
||||
|
||||
header h1 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.link {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -29,10 +33,12 @@
|
||||
footer .link:after {
|
||||
border-bottom: 2px dotted white;
|
||||
}
|
||||
|
||||
|
||||
#map {
|
||||
height: 50vh;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.invit {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
|
||||
@ -52,3 +58,10 @@ footer .link:after {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.game-loading {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
@ -24,3 +24,8 @@
|
||||
@apply flex flex-col md:flex-row;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: white;
|
||||
opacity: 50%;
|
||||
}
|
@ -1,11 +1,16 @@
|
||||
.game
|
||||
.game-map-step
|
||||
#map.h-100
|
||||
.invit
|
||||
#map
|
||||
.controls
|
||||
button.button.geolocation-button(aria-label=__('Geolocalize yourself on the map'))
|
||||
i(data-feather="map-pin")
|
||||
button.button.start-button(aria-label=__('Start the game'))
|
||||
i(data-feather="play")
|
||||
button.button.quizz-start-button(aria-label=__('Launch a quizz'))
|
||||
i(data-feather="clipboard")
|
||||
.game-quizz.none
|
||||
.invit
|
||||
.game-loading
|
||||
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
|
||||
@ -20,10 +25,12 @@
|
||||
span.com
|
||||
span.sci
|
||||
audio(controls).none
|
||||
.controls
|
||||
button.button.restart-button(aria-label=__('Start a new quizz'))
|
||||
i(data-feather="repeat")
|
||||
button.button.map-button(aria-label=__('Return to the map'))
|
||||
i(data-feather="map")
|
||||
|
||||
link(rel="stylesheet" href="/dist/leaflet/leaflet.css")
|
||||
link(rel="stylesheet" href="/stylesheets/spinner.css")
|
||||
script(src="/dist/leaflet/leaflet.js")
|
||||
|
@ -20,7 +20,7 @@ html
|
||||
include lang.pug
|
||||
header
|
||||
h1= title
|
||||
main
|
||||
main.flex-1
|
||||
block content
|
||||
footer.w-full.bg-black.text-white.text-center.p-5
|
||||
.description
|
||||
|
Loading…
Reference in New Issue
Block a user