ISITECH/tcl-guessr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make map fit screen

Browse source
This commit is contained in:
uku 2024-10-24 12:10:52 +02:00
parent 4f7d603848
commit ab2c93e71b
Signed by: uku
SSH key fingerprint: SHA256:4P0aN6M8ajKukNi6aPOaX0LacanGYtlfjmN+m/sHY/o
1 changed files with 28 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/routes/+page.svelte
View file

@ -87,38 +87,48 @@
} }
</script> </script>
<h1 class="banner">{data.gameData.stopName}</h1> <div class="container">
<span class="title">{data.gameData.stopName}</span>
<div class="banner" hidden={submitted}><button onclick={checkLocation}>SUBMIT</button></div> <div hidden={submitted}><button onclick={checkLocation}>SUBMIT</button></div>
<div class="banner results" hidden={!submitted}> <div class="results" hidden={!submitted}>
{Math.floor(points)} points! Vous etiez à {Math.floor(distance)}m. {Math.floor(points)} points! Vous etiez à {Math.floor(distance)}m.
</div>
<div {hidden}>
<span>distance: {distance}, points: {points}</span>
</div>
<div {hidden}>
<label>lines: <input type="checkbox" bind:checked={lines} /></label>
<label>labels: <input type="checkbox" bind:checked={labels} /></label>
</div>
<div id="map" use:createMap></div>
</div> </div>
<div class="banner" {hidden}>
<span>distance: {distance}, points: {points}</span>
</div>
<div class="banner" {hidden}>
<label>lines: <input type="checkbox" bind:checked={lines} /></label>
<label>labels: <input type="checkbox" bind:checked={labels} /></label>
</div>
<div id="map" use:createMap></div>
<style> <style>
.banner { .container {
padding: 4px; display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
text-align: center; text-align: center;
} }
.title {
font-weight: bold;
font-size: 32px;
}
.results { .results {
color: green; color: green;
font-size: 20px; font-size: 20px;
} }
#map { #map {
height: 100%; flex-grow: 1;
width: 100%; width: 100%;
} }
</style> </style>