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

style shadow on bubbles, place of search button

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

58
index.html
View File

@ -23,8 +23,35 @@
<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>
<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 id='spinning_icon' >
<div class='message-loading'> <div class='message-loading'>
chargement en cours... chargement en cours...
@ -44,34 +71,9 @@
423,301 350,250 277,301 303,215 423,301 350,250 277,301 303,215
231,161 321,161' /> 231,161 321,161' />
</svg > </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>
</div > </div >
</div > </div >

4
js/main.js
View File

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

35
styles/style.css
View File

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