mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
split style
This commit is contained in:
parent
2265ee5c8b
commit
d9488e7151
18 changed files with 1005 additions and 277 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
.sass-cache/929db363425f9da7c60b4f49b8eea1ceaac4eeaa/main.scssc
Normal file
BIN
.sass-cache/929db363425f9da7c60b4f49b8eea1ceaac4eeaa/main.scssc
Normal file
Binary file not shown.
|
@ -72,7 +72,7 @@
|
||||||
<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">🔍 Rechercher</button>
|
<button id="searchButton" class="rounded-button">🔍</button>
|
||||||
<select id="searchResults" class="search-results" size="5" style="display: none;"></select>
|
<select id="searchResults" class="search-results" size="5" style="display: none;"></select>
|
||||||
<!-- </fieldset>-->
|
<!-- </fieldset>-->
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -4,7 +4,7 @@ const lcm_config = {
|
||||||
overrideQuery: true,
|
overrideQuery: true,
|
||||||
initialZoom: 12,
|
initialZoom: 12,
|
||||||
hide_osmose_markers_if_close_to_existing_charging_stations: true,
|
hide_osmose_markers_if_close_to_existing_charging_stations: true,
|
||||||
hide_osmose_markers_if_close_to_existing_charging_stations_distance: 5, // meters
|
hide_osmose_markers_if_close_to_existing_charging_stations_distance: 10, // meters
|
||||||
|
|
||||||
max_possible_station_output: 400,
|
max_possible_station_output: 400,
|
||||||
tileServers: {
|
tileServers: {
|
||||||
|
|
41
styles/_animations.scss
Normal file
41
styles/_animations.scss
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: rotate(-45deg) translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotate(-45deg) translateY(-5px);
|
||||||
|
}
|
||||||
|
}
|
72
styles/_mobile.scss
Normal file
72
styles/_mobile.scss
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
/* Style pour mobile ---------------------------------- */
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
header h1 {
|
||||||
|
width: 100vw;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bars_power {
|
||||||
|
position: fixed;
|
||||||
|
bottom: -16px;
|
||||||
|
width: 123vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#toggleSidePanel {
|
||||||
|
position: fixed;
|
||||||
|
top: 0.6rem;
|
||||||
|
right: 0.6rem;
|
||||||
|
z-index: 10;
|
||||||
|
background: #a9a9a9;
|
||||||
|
padding: 0.2rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
|
||||||
|
border: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
/* border: solid 3px blue; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-panel-open .side-panel {
|
||||||
|
position: static;
|
||||||
|
transform: none;
|
||||||
|
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
margin: 20px 0 0;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-panel.active {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-panel-open #map,
|
||||||
|
#map {
|
||||||
|
margin: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 90vh;
|
||||||
|
height: 55vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters-box {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-results-button {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--button-border);
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
top: -4.9rem;
|
||||||
|
right: 1.4rem;
|
||||||
|
height: 2.6rem;
|
||||||
|
}
|
||||||
|
}
|
56
styles/_osmose.scss
Normal file
56
styles/_osmose.scss
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
.osmose-marker-drop:hover .osmose-marker-inner {
|
||||||
|
animation: bounce 0.5s ease infinite;
|
||||||
|
background-color: #9F2BFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proposed-tags-container {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.proposed-tags {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 2px 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:first-child {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 5px 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-button.josm {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
50
styles/_overrides.scss
Normal file
50
styles/_overrides.scss
Normal file
|
@ -0,0 +1,50 @@
|
||||||
|
/**
|
||||||
|
overrides leaflet
|
||||||
|
*/
|
||||||
|
|
||||||
|
.leaflet-left .leaflet-control {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles pour les contrôles de couches */
|
||||||
|
.leaflet-control-layers {
|
||||||
|
&.base-layers {
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5zm0 6l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||||
|
background-size: 16px;
|
||||||
|
background-position: 6px center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-left: 28px !important;
|
||||||
|
|
||||||
|
.leaflet-control-layers-toggle {
|
||||||
|
background-image: none;
|
||||||
|
width: auto;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "Fonds";
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.overlay-layers {
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||||
|
background-size: 16px;
|
||||||
|
background-position: 6px center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
padding-left: 28px !important;
|
||||||
|
|
||||||
|
.leaflet-control-layers-toggle {
|
||||||
|
background-image: none;
|
||||||
|
width: auto;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "Calques";
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
58
styles/_recherche.scss
Normal file
58
styles/_recherche.scss
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
#searchLocation {
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border: 1px solid var(--button-border);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#removeMarkers {
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchResults {
|
||||||
|
width: 100%;
|
||||||
|
border-color: var(--button-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
#searchButton {
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-top: -2.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#count_features_fond {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
z-index: 10;
|
||||||
|
background: white;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-source-control {
|
||||||
|
margin: 5px 0;
|
||||||
|
font-size: 0.9em;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.close-results-button {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
0
styles/_responsive.scss
Normal file
0
styles/_responsive.scss
Normal file
279
styles/main.scss
279
styles/main.scss
|
@ -559,29 +559,6 @@ header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border: 1px solid var(--button-border);
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#count_features_fond {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 1rem;
|
|
||||||
right: 1rem;
|
|
||||||
z-index: 10;
|
|
||||||
background: white;
|
|
||||||
padding: 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#removeMarkers {
|
|
||||||
margin-right: 1rem;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-box {
|
.filters-box {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0.7rem;
|
bottom: 0.7rem;
|
||||||
|
@ -594,9 +571,6 @@ header {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#searchButton {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
|
|
||||||
|
@ -678,251 +652,10 @@ header {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animation au survol plus visible */
|
|
||||||
|
|
||||||
.osmose-marker-drop:hover .osmose-marker-inner {
|
@import '_osmose.scss';
|
||||||
animation: bounce 0.5s ease infinite;
|
@import '_recherche.scss';
|
||||||
background-color: #9F2BFF;
|
@import '_mobile.scss';
|
||||||
}
|
@import '_overrides.scss';
|
||||||
|
@import '_responsive.scss';
|
||||||
.proposed-tags-container {
|
@import '_animations.scss';
|
||||||
max-height: 200px;
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposed-tags {
|
|
||||||
width: 100%;
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposed-tags tr:nth-child(even) {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposed-tags td {
|
|
||||||
padding: 2px 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.proposed-tags td:first-child {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
margin-top: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons a {
|
|
||||||
padding: 5px 10px;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons .edit-button.josm {
|
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons a:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
#searchResults {
|
|
||||||
width: 100%;
|
|
||||||
border-color: var(--button-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-source-control {
|
|
||||||
margin: 5px 0;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-source-control label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-source-control input[type="checkbox"] {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: rotate(-45deg) translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: rotate(-45deg) translateY(-5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
overrides leaflet
|
|
||||||
*/
|
|
||||||
|
|
||||||
.leaflet-left .leaflet-control {
|
|
||||||
margin-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-results-button {
|
|
||||||
border: 0;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Style pour mobile ---------------------------------- */
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
header h1 {
|
|
||||||
width: 100vw;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#bars_power {
|
|
||||||
position: fixed;
|
|
||||||
bottom: -16px;
|
|
||||||
width: 123vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toggleSidePanel {
|
|
||||||
position: fixed;
|
|
||||||
top: 0.6rem;
|
|
||||||
right: 0.6rem;
|
|
||||||
z-index: 10;
|
|
||||||
background: #a9a9a9;
|
|
||||||
padding: 0.2rem 1rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
|
|
||||||
border: 0;
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
/* border: solid 3px blue; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-panel-open .side-panel {
|
|
||||||
position: static;
|
|
||||||
transform: none;
|
|
||||||
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
|
|
||||||
margin: 20px 0 0;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-panel.active {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-panel-open #map,
|
|
||||||
#map {
|
|
||||||
margin: 0;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 90vh;
|
|
||||||
height: 55vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
header {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filters-box {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-results-button {
|
|
||||||
border: 0;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: var(--button-border);
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
top: -4.9rem;
|
|
||||||
right: 1.4rem;
|
|
||||||
height: 2.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Styles pour les contrôles de couches */
|
|
||||||
.leaflet-control-layers {
|
|
||||||
&.base-layers {
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5zm0 6l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
|
||||||
background-size: 16px;
|
|
||||||
background-position: 6px center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
padding-left: 28px !important;
|
|
||||||
|
|
||||||
.leaflet-control-layers-toggle {
|
|
||||||
background-image: none;
|
|
||||||
width: auto;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "Fonds";
|
|
||||||
margin-left: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.overlay-layers {
|
|
||||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
|
||||||
background-size: 16px;
|
|
||||||
background-position: 6px center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
padding-left: 28px !important;
|
|
||||||
|
|
||||||
.leaflet-control-layers-toggle {
|
|
||||||
background-image: none;
|
|
||||||
width: auto;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "Calques";
|
|
||||||
margin-left: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
714
styles/style.css
714
styles/style.css
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue