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

54
index.html
View File

@ -23,8 +23,35 @@
<img class="icon" src="img/french.png" alt="plat avec sa cloche">
Melting Pot</h1>
<h2 class="pull-left title">Où manger et boire
<p >
Par
<a href='https://www.cipherbliss.com' >
CipherBliss.com
</a >
</p >
</div >
<div id='map' >
<div class='leaflet-control-container' >
<div class='leaflet-top leaflet-right' >
<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'
value='🍽️ Chercher' >
</div >
<div class="research_display">
<div id='spinning_icon' >
<div class='message-loading'>
chargement en cours...
@ -46,31 +73,6 @@
</svg >
</div >
</h2 >
<p >
Par
<a href='https://www.cipherbliss.com' >
CipherBliss.com
</a >
</p >
</div >
<div id='map' >
<div class='leaflet-control-container' >
<div class='leaflet-top leaflet-right' >
<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'
value='Chercher' >
</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;