up icons
This commit is contained in:
Tykayn
tykayn
parent
01767971dc
commit
023a6ddf89
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
32
index.html
32
index.html
|
|
@ -12,8 +12,15 @@
|
|||
<link
|
||||
rel='stylesheet'
|
||||
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">
|
||||
<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>
|
||||
<body>
|
||||
<div
|
||||
|
|
@ -23,8 +30,6 @@
|
|||
<img class="icon" src="img/french.png" alt="plat avec sa cloche">
|
||||
|
||||
Melting Pot</h1>
|
||||
|
||||
|
||||
<p>
|
||||
Par
|
||||
<a href='https://www.cipherbliss.com'>
|
||||
|
|
@ -33,6 +38,12 @@
|
|||
|
||||
</p>
|
||||
</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">
|
||||
Données reçues
|
||||
</div>
|
||||
|
|
@ -43,10 +54,6 @@
|
|||
<div
|
||||
id='overpass-api-controls'
|
||||
class='leaflet-bar leaflet-control'>
|
||||
<!-- <input-->
|
||||
<!-- id='query-textfield'-->
|
||||
<!-- value='amenity=restaurant'-->
|
||||
<!-- size='50' >-->
|
||||
<input
|
||||
id='query-button'
|
||||
type='button'
|
||||
|
|
@ -92,7 +99,9 @@
|
|||
</p>
|
||||
<p>
|
||||
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>
|
||||
<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>
|
||||
</p>
|
||||
</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>
|
||||
</html>
|
||||
|
|
|
|||
309144
js/data.json
309144
js/data.json
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
1034
js/main.js
1034
js/main.js
File diff suppressed because it is too large
Load Diff
|
|
@ -2,14 +2,17 @@ html, body{
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, p {
|
||||
font-family: Calibri, Roboto, Arial, "Ubuntu Mono";
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
|
@ -20,9 +23,11 @@ p{
|
|||
margin: 0;
|
||||
border: solid 2px;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#heading {
|
||||
background: #000;
|
||||
color: #ddd;
|
||||
|
|
@ -31,6 +36,7 @@ p{
|
|||
width: 100%;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 2rem !important;
|
||||
height: 2rem !important;
|
||||
|
|
@ -47,9 +53,11 @@ p{
|
|||
margin-right: 1em;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#success_load {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
|
|
@ -65,12 +73,15 @@ h2{
|
|||
box-sizing: border-box;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.could-be-visible {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -99,6 +110,7 @@ img.leaflet-marker-icon{
|
|||
margin-top: -20px;
|
||||
box-shadow: 0 0 0.5em green;
|
||||
}
|
||||
|
||||
img.leaflet-marker-icon.tag-amenity_drinking_water {
|
||||
|
||||
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 {
|
||||
border: solid 3px green;
|
||||
}
|
||||
|
||||
button{
|
||||
padding: 0.5em;
|
||||
border-radius: 0.25em;
|
||||
border: none;
|
||||
margin-bottom: 2px;
|
||||
margin-right: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#query-button,
|
||||
.edit-button {
|
||||
background: #497cd3;
|
||||
|
|
@ -114,13 +136,17 @@ img.leaflet-marker-icon.diet--vegetarian_yes{
|
|||
border-radius: 0.25em;
|
||||
color: white;
|
||||
border: solid 1px #497CD3FF;
|
||||
float:right;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#query-button:hover,
|
||||
.edit-button:hover {
|
||||
background: #0d377b;
|
||||
border: solid 1px #08285c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
margin-left: 1ch;
|
||||
|
||||
|
|
@ -133,19 +159,32 @@ img.leaflet-marker-icon.diet--vegetarian_yes{
|
|||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.description{
|
||||
min-height: 3rem;
|
||||
min-width: 10rem;
|
||||
}
|
||||
|
||||
/**
|
||||
mettre en valeur les restaurants qui n'ont pas renseigné leurs horaires d'ouverture
|
||||
*/
|
||||
.tag-no-opening-hours.tag-amenity_restaurant {
|
||||
background: #333333 !important;
|
||||
border-color: #888 !important;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(359deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3388ff;
|
||||
}
|
||||
|
||||
#spinning_icon {
|
||||
position: fixed;
|
||||
top: 11rem;
|
||||
|
|
@ -154,6 +193,7 @@ a{
|
|||
background: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#spinning_icon svg {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
|
|
@ -163,6 +203,7 @@ a{
|
|||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
#spinning_icon svg {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
|
@ -171,3 +212,26 @@ a{
|
|||
max-width: 70ch;
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue