up bandeau latéral
This commit is contained in:
parent
12b399615c
commit
ce029e2c76
34
index.html
34
index.html
@ -27,24 +27,16 @@
|
||||
<body>
|
||||
|
||||
|
||||
<div id="zoomMessage">
|
||||
Zoomez pour voir les stations de recharge
|
||||
</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='chercherButton'-->
|
||||
<!-- type='button'-->
|
||||
<!-- value='Chercher'>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<div class="research_display">
|
||||
<div id='spinning_icon'>
|
||||
<div class='messageLoading'>
|
||||
chargement en cours...
|
||||
</div>
|
||||
<div id='spinning_icon'>
|
||||
<svg
|
||||
id='star'
|
||||
width='4cm'
|
||||
@ -68,8 +60,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bottom-content">
|
||||
|
||||
<div class="side-panel">
|
||||
<h1>
|
||||
<img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
|
||||
</h1>
|
||||
@ -157,12 +148,15 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
Puissances des stations:
|
||||
</h2>
|
||||
|
||||
<div id="found_charging_stations">
|
||||
<div id="statsChargingStation">
|
||||
|
||||
<h2 id="toggle-stats" style="cursor: pointer;">
|
||||
Puissances des stations: 🔽
|
||||
</h2>
|
||||
|
||||
<div id="found_charging_stations">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h2 class="title">
|
||||
|
||||
19
js/main.js
19
js/main.js
@ -592,10 +592,11 @@ function onMapMoveEnd() {
|
||||
let center = map.getCenter()
|
||||
let zoom = map.getZoom()
|
||||
let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
|
||||
if (zoom > 10) {
|
||||
loadOverpassQuery()
|
||||
if (zoom < 10) {
|
||||
$('#zoomMessage').show()
|
||||
} else {
|
||||
infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)'
|
||||
$('#zoomMessage').hide()
|
||||
loadOverpassQuery()
|
||||
}
|
||||
$('#infos_carte').html(infos)
|
||||
updateURLWithMapCoordinatesAndZoom()
|
||||
@ -661,3 +662,15 @@ function cycleVariableState(filterVariableName, selectorId) {
|
||||
return filterVariableName
|
||||
}
|
||||
|
||||
// toggle des stats
|
||||
$('#toggle-stats').on('click', function() {
|
||||
$('#found_charging_stations').slideToggle();
|
||||
|
||||
// Change le symbole de la flèche
|
||||
let text = $(this).text();
|
||||
if(text.includes('🔽')) {
|
||||
$(this).text(text.replace('🔽', '🔼'));
|
||||
} else {
|
||||
$(this).text(text.replace('🔼', '🔽'));
|
||||
}
|
||||
});
|
||||
|
||||
@ -15,11 +15,11 @@ html, p {
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#map {
|
||||
height: 80vh;
|
||||
height: 95vh;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: solid 2px;
|
||||
@ -300,14 +300,11 @@ button {
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
text-align: right;
|
||||
padding: 0.55rem;
|
||||
padding-right: 0.25rem;
|
||||
float: left;
|
||||
/*background: grey;*/
|
||||
/*border-right: 1px solid white;*/
|
||||
}
|
||||
|
||||
.key-values {
|
||||
@ -366,19 +363,78 @@ button {
|
||||
color: orange;
|
||||
}
|
||||
.filter-group button.filter-state-hide{
|
||||
/*color: #670a0a;*/
|
||||
background: #fff;
|
||||
}
|
||||
.filter-group button.filter-state-show{
|
||||
color: green;
|
||||
/*background: #96b1ea;*/
|
||||
|
||||
}
|
||||
.filter-group button.filter-state-showOnly{
|
||||
color: orange;
|
||||
/*background: #96b1ea;*/
|
||||
}
|
||||
|
||||
.leaflet-control-layers-toggle{
|
||||
background-size:contain;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
font-size: 1rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 20vw;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: -2px 0 5px rgba(0,0,0,0.2);
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
z-index: 1000;
|
||||
}
|
||||
#zoomMessage{
|
||||
position: fixed;
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255,255,255,0.9);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
border-left: 4px solid #ff0000;
|
||||
animation: rainbow-border 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rainbow-border {
|
||||
0% { border-left-color: #ff0000; }
|
||||
17% { border-left-color: #ff8000; }
|
||||
33% { border-left-color: #ffff00; }
|
||||
50% { border-left-color: #00ff00; }
|
||||
67% { border-left-color: #0000ff; }
|
||||
83% { border-left-color: #8000ff; }
|
||||
100% { border-left-color: #ff0000; }
|
||||
}
|
||||
|
||||
#map {
|
||||
z-index: 1;
|
||||
margin-right: 300px; /* Pour laisser de la place au panneau */
|
||||
}
|
||||
|
||||
/* Style pour mobile */
|
||||
@media (max-width: 768px) {
|
||||
.side-panel {
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: none;
|
||||
box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.side-panel.active {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#map {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user