up mobile style
This commit is contained in:
parent
92262a1039
commit
e929c3c228
50
index.html
50
index.html
@ -105,33 +105,35 @@
|
||||
|
||||
<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>
|
||||
|
||||
<form onclick="searchLocation()">
|
||||
<!-- <fieldset>-->
|
||||
<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
|
||||
<button id="searchButton" class="rounded-button">➤ Ville</button>
|
||||
<!-- </fieldset>-->
|
||||
<!-- <fieldset>-->
|
||||
<input type="text" id="searchLocation" placeholder="Rechercher un lieu" class="search-input">
|
||||
<button id="searchButton" class="rounded-button">➤ Ville</button>
|
||||
<!-- </fieldset>-->
|
||||
</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">-->
|
||||
<!-- toggle : montrer les stations avec à minima 150kW de puissance dispo-->
|
||||
<!-- </button>-->
|
||||
<div class="filters-box">
|
||||
<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">-->
|
||||
<!-- toggle : montrer les stations avec à minima 150kW de puissance dispo-->
|
||||
<!-- </button>-->
|
||||
|
||||
</div>
|
||||
|
||||
<div id="infos_carte"></div>
|
||||
|
||||
@ -142,7 +144,7 @@
|
||||
<div class="filter-group">
|
||||
qualité
|
||||
<button id="filterUnkown">❓ kW max inconnu</button>
|
||||
<!-- <button id="filterChelou">les valeurs chelou</button>-->
|
||||
<!-- <button id="filterChelou">les valeurs chelou</button>-->
|
||||
</div>
|
||||
<!-- TODO add more filters-->
|
||||
<!-- <div class="filter-group">-->
|
||||
|
||||
174
styles/style.css
174
styles/style.css
@ -114,7 +114,14 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
|
||||
border: solid 1px var(--button-border);
|
||||
float: right;
|
||||
}
|
||||
.panoramax-link img{
|
||||
|
||||
.panoramax-link {
|
||||
top: 7rem;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.panoramax-link img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
@ -363,53 +370,62 @@ button {
|
||||
border: solid 3px white;
|
||||
}
|
||||
|
||||
#infos_carte{
|
||||
#infos_carte {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
button + button{
|
||||
button + button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.filter-group button{
|
||||
|
||||
.filter-group button {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.filter-group button:after{
|
||||
|
||||
.filter-group button:after {
|
||||
position: relative;
|
||||
float:right;
|
||||
float: right;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.filter-group button.filter-state-hide:after{
|
||||
|
||||
.filter-group button.filter-state-hide:after {
|
||||
content: "cacher";
|
||||
color: grey;
|
||||
}
|
||||
.filter-group button.filter-state-show:after{
|
||||
|
||||
.filter-group button.filter-state-show:after {
|
||||
content: "montrer";
|
||||
color: green;
|
||||
}
|
||||
.filter-group button.filter-state-showOnly:after{
|
||||
|
||||
.filter-group button.filter-state-showOnly:after {
|
||||
content: "montrer uniquement";
|
||||
color: orange;
|
||||
}
|
||||
.filter-group button.filter-state-hide{
|
||||
|
||||
.filter-group button.filter-state-hide {
|
||||
background: #fff;
|
||||
}
|
||||
.filter-group button.filter-state-show{
|
||||
|
||||
.filter-group button.filter-state-show {
|
||||
color: green;
|
||||
}
|
||||
.filter-group button.filter-state-showOnly{
|
||||
|
||||
.filter-group button.filter-state-showOnly {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.leaflet-control-layers-toggle{
|
||||
background-size:contain;
|
||||
.leaflet-control-layers-toggle {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
#round_power_legend{
|
||||
#round_power_legend {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
font-size: 1rem;
|
||||
position: fixed;
|
||||
@ -418,7 +434,7 @@ button + button{
|
||||
width: 20vw;
|
||||
height: 74vh;
|
||||
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;
|
||||
padding: 1rem 2rem;
|
||||
padding-bottom: 15rem;
|
||||
@ -428,7 +444,7 @@ button + button{
|
||||
width: 26vw;
|
||||
}
|
||||
|
||||
#toggleSidePanel{
|
||||
#toggleSidePanel {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 2rem;
|
||||
@ -436,22 +452,28 @@ button + button{
|
||||
background: white;
|
||||
padding: 1rem 2rem;
|
||||
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;
|
||||
color: #666;
|
||||
}
|
||||
.side-panel-open .side-panel{
|
||||
|
||||
.side-panel-open .side-panel {
|
||||
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;
|
||||
bottom: 5rem;
|
||||
left: 50%;
|
||||
@ -459,21 +481,24 @@ header{
|
||||
background: var(--zoom-message-background);
|
||||
padding: 1rem 2rem;
|
||||
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;
|
||||
z-index: 10;
|
||||
border-left: 4px solid var(--zoom-message-border);
|
||||
animation: rainbow-border 4s linear infinite;
|
||||
}
|
||||
|
||||
header{
|
||||
header {
|
||||
background: #222;
|
||||
position: fixed;
|
||||
width: 20vw;
|
||||
}
|
||||
header h1{
|
||||
|
||||
header h1 {
|
||||
line-height: 3rem;
|
||||
}
|
||||
header img{
|
||||
|
||||
header img {
|
||||
float: left;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@ -483,8 +508,9 @@ header img{
|
||||
z-index: 1;
|
||||
top: 5.55rem;
|
||||
}
|
||||
.side-panel #map{
|
||||
margin-left: 20vw;
|
||||
|
||||
.side-panel #map {
|
||||
margin-left: 26vw;
|
||||
}
|
||||
|
||||
|
||||
@ -500,24 +526,35 @@ header img{
|
||||
.rounded-button:hover {
|
||||
background-color: #0d377b;
|
||||
}
|
||||
|
||||
/* Style pour mobile */
|
||||
@media (max-width: 1200px) {
|
||||
body{
|
||||
|
||||
header h1{
|
||||
width: 100vw;
|
||||
}
|
||||
#toggleSidePanel{
|
||||
right: 1rem;
|
||||
top: 1.3rem;
|
||||
}
|
||||
body {
|
||||
/* border: solid 3px blue; */
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
margin: 0;
|
||||
position: static;
|
||||
width: 95%;
|
||||
height: auto;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.side-panel.active {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.side-panel-open #map,
|
||||
#map {
|
||||
margin: 0;
|
||||
@ -527,33 +564,46 @@ header img{
|
||||
height: 90vh;
|
||||
height: 55vh;
|
||||
}
|
||||
header{
|
||||
|
||||
header {
|
||||
position: static;
|
||||
}
|
||||
#toggleSidePanel{
|
||||
|
||||
right: 4.6rem;
|
||||
top: 1.3rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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; }
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: calc(100% - 40px);
|
||||
width: calc(100% - 2rem);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid var(--button-border);
|
||||
border-radius: 5px;
|
||||
}
|
||||
#count_features_fond{
|
||||
|
||||
#count_features_fond {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
@ -561,4 +611,30 @@ header img{
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user