tykayn/melting-pot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style shadow on bubbles, place of search button

Browse Source
This commit is contained in:
Tykayn 2022-06-20 12:17:40 +02:00 committed by tykayn
parent c494a4787b
commit 7022982f8b
3 changed files with 59 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -23,30 +23,7 @@
<img class="icon" src="img/french.png" alt="plat avec sa cloche">
Melting Pot</h1>
<h2 class="pull-left title">Où manger et boire
<div id='spinning_icon' >
<div class='message-loading'>
chargement en cours...
</div>
<svg
id='star'
width='4cm'
height='4cm'
viewBox='0 0 700 400'
xmlns='http://www.w3.org/2000/svg'
version='1.1' >
<polygon
fill='red'
stroke='red'
stroke-width='10'
points='350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161' />
</svg >
</div >
</h2 >
<p >
Par
@ -56,6 +33,7 @@
</p >
</div >
<div id='map' >
<div class='leaflet-control-container' >
@ -70,8 +48,32 @@
<input
id='query-button'
type='button'
value='Chercher' >
value='🍽️ Chercher' >
</div >
<div class="research_display">
<div id='spinning_icon' >
<div class='message-loading'>
chargement en cours...
</div>
<svg
id='star'
width='4cm'
height='4cm'
viewBox='0 0 700 400'
xmlns='http://www.w3.org/2000/svg'
version='1.1' >
<polygon
fill='red'
stroke='red'
stroke-width='10'
points='350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161' />
</svg >
</div >
</div>
</div >
</div >

4
js/main.js
View File

@ -950,6 +950,9 @@ function displayPointsFromApi(points) {
}
return true;
},
onZoomEnd: function(event){
console.log('event', event);
},
onEachFeature: function (feature, layer) {
var popupContent = '';
popupContent = popupContent + '<dt>@id</dt><dd>' + feature.properties.type + '/' + feature.properties.id + '</dd>';
@ -1103,6 +1106,7 @@ function loadOverpassQuery() {
var overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue);
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
displayPointsFromApi(geoDataPointsFromApi);
$('#spinning_icon').fadeOut();
isLoading = false;

35
styles/style.css
View File

@ -18,6 +18,7 @@ p{
height: 70%;
width: 100%;
margin: 0;
border: solid 2px;
}
.padded{
padding: 1rem;
@ -52,8 +53,8 @@ h2{
#overpass-api-controls {
position: fixed;
top:0;
right: 1em;
top: 8em;
left: 4em;
padding: 10px;
background-color: rgb(255, 255, 255);
z-index: 10;
@ -72,6 +73,11 @@ img.leaflet-marker-icon{
border: solid 1px #ccc;
margin-left: -20px;
margin-top: -20px;
box-shadow: 0 0 3em green;
}
img.leaflet-marker-icon.tag-amenity_drinking_water{
box-shadow: 0 0 3em cornflowerblue;
}
img.leaflet-marker-icon.diet--vegetarian_yes{
@ -85,6 +91,16 @@ img.leaflet-marker-icon.diet--vegetarian_yes{
color: white;
border: solid 1px #497CD3FF;
}
#query-button:hover,
.edit-button:hover{
background: #0d377b;
border: solid 1px #08285c;
cursor:pointer;
}
.edit-button{
margin-left: 1ch;
}
#query-button{
min-width: 10em;
@ -103,13 +119,20 @@ a{
}
#spinning_icon{
position: fixed;
top: 0.5rem;
right: 0.5rem;
top: 11rem;
left: 3.5rem;
z-index: 10;
background: white;
font-size: 2rem;
}
#spinning_icon svg{
position: fixed;
top: 0.5rem;
right: 0.5rem;
top: 1.5rem;
left: 0.8rem;
background: white;
border-radius: 100%;
width: 3rem;
height: 3rem;
}
#spinning_icon svg{
animation: spin 2s linear infinite;