tykayn
/
melting-pot
mirror of https://forge.chapril.org/tykayn/melting-pot.git
1
0
Fork 0
Code Issues Releases Activity

up icons

This commit is contained in:
Tykayn 2024-02-26 13:29:09 +01:00 committed by tykayn
parent 01767971dc
commit 023a6ddf89
6 changed files with 319173 additions and 8387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/pad-thai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

32
index.html
View File

@ -12,8 +12,15 @@
<link <link
rel='stylesheet' rel='stylesheet'
href='styles/style.css'/> href='styles/style.css'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"> <meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
<link rel="shortcut icon" href="img/french.png"> <link rel="shortcut icon" href="img/french.png">
<script src='js/leaflet.js'></script>
<script src='js/jquery-3.2.1.min.js'></script>
<script src='js/osmtogeojson.js'></script>
<script
type='module'
src='/js/main.js'></script>
</head> </head>
<body> <body>
<div <div
@ -23,8 +30,6 @@
<img class="icon" src="img/french.png" alt="plat avec sa cloche"> <img class="icon" src="img/french.png" alt="plat avec sa cloche">
Melting Pot</h1> Melting Pot</h1>
<p> <p>
Par Par
<a href='https://www.cipherbliss.com'> <a href='https://www.cipherbliss.com'>
@ -33,6 +38,12 @@
</p> </p>
</div> </div>
<div class="filters">
<h2>Filtres</h2>
<button id="toggle_restaurant" >restaurants</button>
<button id="toggle_fast_food" >fast food</button>
<button id="toggle_cafe" >cafés</button>
</div>
<div id="success_load" class="could-be-visible hidden"> <div id="success_load" class="could-be-visible hidden">
Données reçues Données reçues
</div> </div>
@ -43,10 +54,6 @@
<div <div
id='overpass-api-controls' id='overpass-api-controls'
class='leaflet-bar leaflet-control'> class='leaflet-bar leaflet-control'>
<!-- <input-->
<!-- id='query-textfield'-->
<!-- value='amenity=restaurant'-->
<!-- size='50' >-->
<input <input
id='query-button' id='query-button'
type='button' type='button'
@ -92,7 +99,9 @@
</p> </p>
<p> <p>
Déplacez vous sur la carte et cliquez sur le bouton pour charger les données de l'emplacement actuel. <br> Déplacez vous sur la carte et cliquez sur le bouton pour charger les données de l'emplacement actuel. <br>
Vous pouvez trouver grâce à cette carte non seulement des restaurants, mais aussi des food trucks, des fast food, le tout illustré selon le type de cuisine principale renseigné. Trouvez aussi les emplacements de points d'eau potable et des distributeurs. Vous pouvez trouver grâce à cette carte non seulement des restaurants, mais aussi des food trucks, des fast
food, le tout illustré selon le type de cuisine principale renseigné. Trouvez aussi les emplacements de points
d'eau potable et des distributeurs.
</p> </p>
<p> <p>
<img class="icon" src="img/croissant.png" alt="croissant"> <img class="icon" src="img/croissant.png" alt="croissant">
@ -106,12 +115,7 @@
<a href="https://forge.chapril.org/tykayn/melting-pot">Sources disponibles sur la forge du Chapril.</a> <a href="https://forge.chapril.org/tykayn/melting-pot">Sources disponibles sur la forge du Chapril.</a>
</p> </p>
</div> </div>
<script src='js/leaflet.js' ></script >
<script src='js/jquery-3.2.1.min.js' ></script >
<script src='js/osmtogeojson.js' ></script >
<script
type='module'
src='js/main.js' ></script >
</body> </body>
</html> </html>

309144
js/data.json
View File

File diff suppressed because it is too large Load Diff

7390
js/data_.json Normal file
View File

File diff suppressed because it is too large Load Diff

1034
js/main.js
View File

File diff suppressed because it is too large Load Diff

70
styles/style.css
View File

@ -2,14 +2,17 @@ html, body{
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
html, p { html, p {
font-family: Calibri, Roboto, Arial, "Ubuntu Mono"; font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
font-size: 1rem; font-size: 1rem;
} }
p { p {
font-size: 1.25rem; font-size: 1.25rem;
} }
@ -20,9 +23,11 @@ p{
margin: 0; margin: 0;
border: solid 2px; border: solid 2px;
} }
.padded { .padded {
padding: 1rem; padding: 1rem;
} }
#heading { #heading {
background: #000; background: #000;
color: #ddd; color: #ddd;
@ -31,6 +36,7 @@ p{
width: 100%; width: 100%;
padding-left: 1em; padding-left: 1em;
} }
.icon { .icon {
width: 2rem !important; width: 2rem !important;
height: 2rem !important; height: 2rem !important;
@ -47,9 +53,11 @@ p{
margin-right: 1em; margin-right: 1em;
line-height: 1.5rem; line-height: 1.5rem;
} }
h2 { h2 {
font-weight: normal; font-weight: normal;
} }
#success_load { #success_load {
text-align: center; text-align: center;
font-weight: 400; font-weight: 400;
@ -65,12 +73,15 @@ h2{
box-sizing: border-box; box-sizing: border-box;
line-height: 2em; line-height: 2em;
} }
.could-be-visible { .could-be-visible {
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.hidden { .hidden {
opacity: 0; opacity: 0;
} }
.visible { .visible {
opacity: 1; opacity: 1;
} }
@ -99,6 +110,7 @@ img.leaflet-marker-icon{
margin-top: -20px; margin-top: -20px;
box-shadow: 0 0 0.5em green; box-shadow: 0 0 0.5em green;
} }
img.leaflet-marker-icon.tag-amenity_drinking_water { img.leaflet-marker-icon.tag-amenity_drinking_water {
box-shadow: 0 0 1em cornflowerblue; box-shadow: 0 0 1em cornflowerblue;
@ -107,6 +119,16 @@ img.leaflet-marker-icon.tag-amenity_drinking_water{
img.leaflet-marker-icon.diet--vegetarian_yes { img.leaflet-marker-icon.diet--vegetarian_yes {
border: solid 3px green; border: solid 3px green;
} }
button{
padding: 0.5em;
border-radius: 0.25em;
border: none;
margin-bottom: 2px;
margin-right: 2px;
cursor: pointer;
}
#query-button, #query-button,
.edit-button { .edit-button {
background: #497cd3; background: #497cd3;
@ -114,13 +136,17 @@ img.leaflet-marker-icon.diet--vegetarian_yes{
border-radius: 0.25em; border-radius: 0.25em;
color: white; color: white;
border: solid 1px #497CD3FF; border: solid 1px #497CD3FF;
float:right;
margin-left: 1rem;
} }
#query-button:hover, #query-button:hover,
.edit-button:hover { .edit-button:hover {
background: #0d377b; background: #0d377b;
border: solid 1px #08285c; border: solid 1px #08285c;
cursor: pointer; cursor: pointer;
} }
.edit-button { .edit-button {
margin-left: 1ch; margin-left: 1ch;
@ -133,19 +159,32 @@ img.leaflet-marker-icon.diet--vegetarian_yes{
.pull-left { .pull-left {
float: left; float: left;
} }
.description{
min-height: 3rem;
min-width: 10rem;
}
/** /**
mettre en valeur les restaurants qui n'ont pas renseigné leurs horaires d'ouverture mettre en valeur les restaurants qui n'ont pas renseigné leurs horaires d'ouverture
*/ */
.tag-no-opening-hours.tag-amenity_restaurant { .tag-no-opening-hours.tag-amenity_restaurant {
background: #333333 !important; border-color: #888 !important;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(359deg); } transform: rotate(0deg);
} }
100% {
transform: rotate(359deg);
}
}
a { a {
color: #3388ff; color: #3388ff;
} }
#spinning_icon { #spinning_icon {
position: fixed; position: fixed;
top: 11rem; top: 11rem;
@ -154,6 +193,7 @@ a{
background: white; background: white;
font-size: 2rem; font-size: 2rem;
} }
#spinning_icon svg { #spinning_icon svg {
position: fixed; position: fixed;
top: 1.5rem; top: 1.5rem;
@ -163,6 +203,7 @@ a{
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
} }
#spinning_icon svg { #spinning_icon svg {
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
} }
@ -171,3 +212,26 @@ a{
max-width: 70ch; max-width: 70ch;
margin: 0 auto; margin: 0 auto;
} }
.is-open-today-true{
border-color: lawngreen;
}
.filters button{
width:100%;
}
.filters {
position: absolute;
width: 10rem;
padding: 1rem;
top: calc(6rem + 2px);
z-index: 3000;
background: white;
right: 0;
border: solid 3px white;
}
.unknown-name{
font-style: italic;
color: #888;
}