tykayn/libre-charge-map
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

up mobile style

Browse Source
This commit is contained in:
Tykayn 2024-12-31 23:47:08 +01:00 committed by tykayn
parent 92262a1039
commit e929c3c228
2 changed files with 151 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -105,33 +105,35 @@
<p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative <a <p>Cartes des stations de recharge pour véhicules électriques basée sur les données collaborative <a
href="https://openstreetmap.org">OpenStreetMap</a></p> href="https://openstreetmap.org">OpenStreetMap</a></p>
<form onclick="searchLocation()"> <form onclick="searchLocation()">
<!-- <fieldset>--> <!-- <fieldset>-->
<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input"> <input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
<button id="searchButton" class="rounded-button">➤ Ville</button> <button id="searchButton" class="rounded-button">➤ Ville</button>
<!-- </fieldset>--> <!-- </fieldset>-->
</form> </form>
<button id="removeMarkers" class="rounded-button">
🗑️ Effacer les marqueurs
</button>
<button id="chercherButton" class="rounded-button">
🔄 Recharger
</button>
<button id="setRandomView" class="rounded-button">
🎲 Une ville au hasard
</button>
<button id="sendToJOSM" class="rounded-button">
🗺️ Éditer dans JOSM
</button>
<button id="shareUrl" class="rounded-button">
📤 Partager l'URL
</button>
<!-- <button id="toggle">--> <div class="filters-box">
<!-- toggle : montrer les stations avec à minima 150kW de puissance dispo--> <button id="removeMarkers" class="rounded-button">
<!-- </button>--> 🗑️ Effacer les marqueurs
</button>
<button id="chercherButton" class="rounded-button">
🔄 Recharger
</button>
<button id="setRandomView" class="rounded-button">
🎲 Une ville au hasard
</button>
<button id="sendToJOSM" class="rounded-button">
🗺️ Éditer dans JOSM
</button>
<button id="shareUrl" class="rounded-button">
📤 Partager l'URL
</button>
<!-- <button id="toggle">-->
<!-- toggle : montrer les stations avec à minima 150kW de puissance dispo-->
<!-- </button>-->
</div>
<div id="infos_carte"></div> <div id="infos_carte"></div>
@ -142,7 +144,7 @@
<div class="filter-group"> <div class="filter-group">
qualité qualité
<button id="filterUnkown">❓ kW max inconnu</button> <button id="filterUnkown">❓ kW max inconnu</button>
<!-- <button id="filterChelou">les valeurs chelou</button>--> <!-- <button id="filterChelou">les valeurs chelou</button>-->
</div> </div>
<!-- TODO add more filters--> <!-- TODO add more filters-->
<!-- <div class="filter-group">--> <!-- <div class="filter-group">-->

174
styles/style.css
View File

@ -114,7 +114,14 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
border: solid 1px var(--button-border); border: solid 1px var(--button-border);
float: right; float: right;
} }
.panoramax-link img{
.panoramax-link {
top: 7rem;
position: absolute;
right: 1rem;
}
.panoramax-link img {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
} }
@ -363,53 +370,62 @@ button {
border: solid 3px white; border: solid 3px white;
} }
#infos_carte{ #infos_carte {
padding: 1rem 0; padding: 1rem 0;
} }
button + button{ button + button {
margin-left: 1rem; margin-left: 1rem;
} }
.filter-group button{
.filter-group button {
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.filter-group button:after{
.filter-group button:after {
position: relative; position: relative;
float:right; float: right;
left: 1rem; left: 1rem;
top: 1rem; top: 1rem;
font-size: 0.9em; font-size: 0.9em;
} }
.filter-group button.filter-state-hide:after{
.filter-group button.filter-state-hide:after {
content: "cacher"; content: "cacher";
color: grey; color: grey;
} }
.filter-group button.filter-state-show:after{
.filter-group button.filter-state-show:after {
content: "montrer"; content: "montrer";
color: green; color: green;
} }
.filter-group button.filter-state-showOnly:after{
.filter-group button.filter-state-showOnly:after {
content: "montrer uniquement"; content: "montrer uniquement";
color: orange; color: orange;
} }
.filter-group button.filter-state-hide{
.filter-group button.filter-state-hide {
background: #fff; background: #fff;
} }
.filter-group button.filter-state-show{
.filter-group button.filter-state-show {
color: green; color: green;
} }
.filter-group button.filter-state-showOnly{
.filter-group button.filter-state-showOnly {
color: orange; color: orange;
} }
.leaflet-control-layers-toggle{ .leaflet-control-layers-toggle {
background-size:contain; background-size: contain;
} }
#round_power_legend{ #round_power_legend {
font-size: 0.8rem; font-size: 0.8rem;
} }
.side-panel { .side-panel {
font-size: 1rem; font-size: 1rem;
position: fixed; position: fixed;
@ -418,7 +434,7 @@ button + button{
width: 20vw; width: 20vw;
height: 74vh; height: 74vh;
background: white; background: white;
box-shadow: -2px 0 5px rgba(0,0,0,0.2); box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
overflow-y: auto; overflow-y: auto;
padding: 1rem 2rem; padding: 1rem 2rem;
padding-bottom: 15rem; padding-bottom: 15rem;
@ -428,7 +444,7 @@ button + button{
width: 26vw; width: 26vw;
} }
#toggleSidePanel{ #toggleSidePanel {
position: fixed; position: fixed;
top: 1rem; top: 1rem;
right: 2rem; right: 2rem;
@ -436,22 +452,28 @@ button + button{
background: white; background: white;
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
header{
header {
padding-left: 2rem; padding-left: 2rem;
color: #666; color: #666;
} }
.side-panel-open .side-panel{
.side-panel-open .side-panel {
visibility: visible; visibility: visible;
} }
.side-panel-open #map{
margin-left: 23.5rem; .side-panel-open #map {
margin-left: 28.8vw;
top: 5.55rem;
} }
#infos_carte{
clear:both; #infos_carte {
clear: both;
} }
#zoomMessage{
#zoomMessage {
position: fixed; position: fixed;
bottom: 5rem; bottom: 5rem;
left: 50%; left: 50%;
@ -459,21 +481,24 @@ header{
background: var(--zoom-message-background); background: var(--zoom-message-background);
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: center; text-align: center;
z-index: 10; z-index: 10;
border-left: 4px solid var(--zoom-message-border); border-left: 4px solid var(--zoom-message-border);
animation: rainbow-border 4s linear infinite; animation: rainbow-border 4s linear infinite;
} }
header{ header {
background: #222; background: #222;
position: fixed; position: fixed;
width: 20vw;
} }
header h1{
header h1 {
line-height: 3rem; line-height: 3rem;
} }
header img{
header img {
float: left; float: left;
margin-right: 1rem; margin-right: 1rem;
} }
@ -483,8 +508,9 @@ header img{
z-index: 1; z-index: 1;
top: 5.55rem; top: 5.55rem;
} }
.side-panel #map{
margin-left: 20vw; .side-panel #map {
margin-left: 26vw;
} }
@ -500,24 +526,35 @@ header img{
.rounded-button:hover { .rounded-button:hover {
background-color: #0d377b; background-color: #0d377b;
} }
/* Style pour mobile */ /* Style pour mobile */
@media (max-width: 1200px) { @media (max-width: 1200px) {
body{
header h1{
width: 100vw;
}
#toggleSidePanel{
right: 1rem;
top: 1.3rem;
}
body {
/* border: solid 3px blue; */ /* border: solid 3px blue; */
} }
.side-panel { .side-panel {
margin: 0; margin: 0;
position: static; position: static;
width: 95%; width: 95%;
height: auto; height: auto;
transform: none; transform: none;
box-shadow: 0 -2px 5px rgba(0,0,0,0.2); box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
margin-top: 20px; margin-top: 20px;
} }
.side-panel.active { .side-panel.active {
transform: none; transform: none;
} }
.side-panel-open #map, .side-panel-open #map,
#map { #map {
margin: 0; margin: 0;
@ -527,33 +564,46 @@ header img{
height: 90vh; height: 90vh;
height: 55vh; height: 55vh;
} }
header{
header {
position: static; position: static;
} }
#toggleSidePanel{
right: 4.6rem;
top: 1.3rem;
}
} }
@keyframes rainbow-border { @keyframes rainbow-border {
0% { border-left-color: #ff0000; } 0% {
17% { border-left-color: #ff8000; } border-left-color: #ff0000;
33% { border-left-color: #ffff00; } }
50% { border-left-color: #00ff00; } 17% {
67% { border-left-color: #0000ff; } border-left-color: #ff8000;
83% { border-left-color: #8000ff; } }
100% { border-left-color: #ff0000; } 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;
}
} }
.search-input { .search-input {
width: calc(100% - 40px); width: calc(100% - 2rem);
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid var(--button-border); border: 1px solid var(--button-border);
border-radius: 5px; border-radius: 5px;
} }
#count_features_fond{
#count_features_fond {
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
right: 1rem; right: 1rem;
@ -561,4 +611,30 @@ header img{
background: white; background: white;
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: 8px;
}
#removeMarkers{
margin-right: 1rem;
}
.filters-box{
margin-top: 4rem;
height: 10rem;
width: auto;
}
.filters-box .rounded-button{
margin-right: 1rem;
margin-bottom: 1rem;
}
#searchButton{
margin-right: 1rem;
}
/**
overrides leaflet
*/
/*.leaflet-control-layers .leaflet-control:nth-of-type(1) .leaflet-control-layers-toggle{*/
/* background-image: url('/styles/images/marker-icon.png');*/
/*}*/
.leaflet-left .leaflet-control{
margin-left: 2rem;
} }