Update src/style/custom.css

src/style/custom.css

@@ -1,3 +1,15 @@
+body {
+    background: var(--darkdark);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.leaflet-control-attribution,
 .leaflet-popup-close-button {
     visibility: hidden;
 }
@@ -6,30 +18,6 @@
     position: absolute;
 }
 
-.list-group {
-    overflow: auto;
-    white-space: nowrap;
-    scrollbar-width: none;
-    padding: 1rem 0rem;
-}
-
-.list-group-item {
-    border: 1px solid var(--darkdark);
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    text-align: center;
-    padding: 0.5rem 0.8rem;
-}
-
-.list-group-item:hover {
-    filter: brightness(85%);
-}
-
-.leaflet-control-attribution {
-    display: none;
-}
-
 .display-none {
     display: none;
 }
@@ -79,6 +67,10 @@
     height: 100%;
 }
 
+.w-100 {
+    width: 100%;
+}
+
 .map-menu {
     position: absolute;
     display: flex;
@@ -141,14 +133,8 @@
 
 .leaflet-popup-content {
     margin: 10px 20px !important;
-    /* display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto !important;
-  max-width: 100%; */
 }
 
-
 .leaflet-popup>.leaflet-popup-content-wrapper {
     border-radius: var(--border-radius);
     width: 350px;
@@ -188,12 +174,45 @@
     filter: brightness(85%);
 }
 
-.scroll-content>div:first-child {
+.scroll-content.list-group>.list-group-item {
+    display: none;
+}
+
+.list-group-item.placeholder-left.show.bg-dark,
+.list-group-item.placeholder-right.show.bg-dark {
+    background: var(--darkdark);
+}
+
+.list-group-item.placeholder-left.show {
+    margin-left: auto;
+    color: transparent;
+    cursor: default;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--white) 50%);
+}
+
+.list-group-item.placeholder-right.show {
+    margin-right: auto;
+    color: transparent;
+    cursor: default;
+    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, var(--white) 50%);
+}
+
+.list-group-item.add {
+    position: absolute;
+    right: 0
+}
+
+.scroll-content>.list-group-item.active,
+.scroll-content>.list-group-item.show {
+    display: inline-block;
+}
+
+.scroll-content>div:nth-child(2) {
     border-top-left-radius: var(--border-radius);
     border-bottom-left-radius: var(--border-radius);
 }
 
-.scroll-content>div:nth-last-child(3) {
+.scroll-content>div:nth-last-child(4) {
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
 }
@@ -202,6 +221,39 @@
     border-radius: var(--border-radius);
 }
 
+@media (min-width: 768px) {
+    .scroll-content.list-group>.list-group-item {
+        display: inline-block;
+    }
+
+    .scroll-content>.list-group-item.placeholder-left,
+    .scroll-content>.list-group-item.placeholder-right {
+        display: none;
+    }
+}
+
+.list-group {
+    display: flex;
+    overflow: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+    padding: 1rem 0rem;
+}
+
+.list-group-item {
+    border: 1px solid var(--darkdark);
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    text-align: center;
+    padding: .5rem .5rem;
+    max-width: 90%;
+}
+
+.list-group-item:hover {
+    filter: brightness(85%);
+}
+
 .mx-datepicker {
     width: 100% !important;
 }