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:
Tykayn
tykayn
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()">
|
||||
<!-- <fieldset>-->
|
||||
<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>
|
||||
<!-- </fieldset>-->
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const lcm_config = {
|
|||
overrideQuery: true,
|
||||
initialZoom: 12,
|
||||
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,
|
||||
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 {
|
||||
position: fixed;
|
||||
bottom: 0.7rem;
|
||||
|
|
@ -594,9 +571,6 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
|
||||
|
|
@ -678,251 +652,10 @@ header {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animation au survol plus visible */
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '_osmose.scss';
|
||||
@import '_recherche.scss';
|
||||
@import '_mobile.scss';
|
||||
@import '_overrides.scss';
|
||||
@import '_responsive.scss';
|
||||
@import '_animations.scss';
|
||||
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