up mobile style

index.html

@@ -105,13 +105,14 @@
 
     <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>-->
     </form>
+
+    <div class="filters-box">
         <button id="removeMarkers" class="rounded-button">
             🗑️ Effacer les marqueurs
         </button>
@@ -132,6 +133,7 @@
         <!--        toggle : montrer les stations avec à minima 150kW de puissance dispo-->
         <!--    </button>-->
 
+    </div>
 
     <div id="infos_carte"></div>
 

styles/style.css

@@ -114,6 +114,13 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
     border: solid 1px var(--button-border);
     float: right;
 }
+
+.panoramax-link {
+    top: 7rem;
+    position: absolute;
+    right: 1rem;
+}
+
 .panoramax-link img {
     width: 1rem;
     height: 1rem;
@@ -370,10 +377,12 @@ button {
 button + button {
     margin-left: 1rem;
 }
+
 .filter-group button {
     padding: 1rem 2rem;
     border-radius: 0.25rem;
 }
+
 .filter-group button:after {
     position: relative;
     float: right;
@@ -381,24 +390,30 @@ button + button{
     top: 1rem;
     font-size: 0.9em;
 }
+
 .filter-group button.filter-state-hide:after {
     content: "cacher";
     color: grey;
 }
+
 .filter-group button.filter-state-show:after {
     content: "montrer";
     color: green;
 }
+
 .filter-group button.filter-state-showOnly:after {
     content: "montrer uniquement";
     color: orange;
 }
+
 .filter-group button.filter-state-hide {
     background: #fff;
 }
+
 .filter-group button.filter-state-show {
     color: green;
 }
+
 .filter-group button.filter-state-showOnly {
     color: orange;
 }
@@ -410,6 +425,7 @@ button + button{
 #round_power_legend {
     font-size: 0.8rem;
 }
+
 .side-panel {
     font-size: 1rem;
     position: fixed;
@@ -438,19 +454,25 @@ button + button{
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
 header {
     padding-left: 2rem;
     color: #666;
 }
+
 .side-panel-open .side-panel {
     visibility: visible;
 }
+
 .side-panel-open #map {
-    margin-left: 23.5rem;
+    margin-left: 28.8vw;
+    top: 5.55rem;
 }
+
 #infos_carte {
     clear: both;
 }
+
 #zoomMessage {
     position: fixed;
     bottom: 5rem;
@@ -469,10 +491,13 @@ header{
 header {
     background: #222;
     position: fixed;
+    width: 20vw;
 }
+
 header h1 {
     line-height: 3rem;
 }
+
 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;
+    margin-left: 26vw;
 }
 
 
@@ -500,11 +526,21 @@ header img{
 .rounded-button:hover {
     background-color: #0d377b;
 }
+
 /* Style pour mobile */
 @media (max-width: 1200px) {
+
+    header h1{
+        width: 100vw;
+    }
+    #toggleSidePanel{
+        right: 1rem;
+        top: 1.3rem;
+    }
     body {
         /* border: solid 3px blue; */
     }
+
     .side-panel {
         margin: 0;
         position: static;
@@ -518,6 +554,7 @@ header img{
     .side-panel.active {
         transform: none;
     }
+
     .side-panel-open #map,
     #map {
         margin: 0;
@@ -527,32 +564,45 @@ header img{
         height: 90vh;
         height: 55vh;
     }
+
     header {
         position: static;
     }
-    #toggleSidePanel{
 
-        right: 4.6rem;
-        top: 1.3rem;
-    }
 }
+
 @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 {
-    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 {
     position: fixed;
     bottom: 1rem;
@@ -562,3 +612,29 @@ header img{
     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;
+}