Move slick buttons to a clickable location

UI/ShowDataLayer.ts

@@ -37,7 +37,6 @@ export default class ShowDataLayer {
         let cluster = undefined;
 
         function update() {
-            console.log("Updating the data layer...", features.data.length, "objects loaded")
             if (features.data === undefined) {
                 return;
             }
@@ -146,16 +145,12 @@ export default class ShowDataLayer {
         })
 
         State.state.selectedElement.addCallbackAndRun(selected => {
-            if(selected !== undefined && feature.properties.id === selected.properties.id){
-                console.log("Currently selected feature:", selected, "feature is",feature, "is same?", selected == feature)
-            }
            
                 if (selected === undefined) {
                     if (popup.isOpen()) {
                         popup.remove();
                     }
                 } else if (selected == feature && selected.geometry.type === feature.geometry.type) {
-                    console.log("Found the popup to open!")
                     // If wayhandling introduces a centerpoint and an area, this code might become unstable:
                     // The popup for the centerpoint would open, a bit later the area would close the first popup and open it's own
                     // In the process, the 'selectedElement' is set to undefined and to the other feature again, causing an infinite loop
@@ -165,7 +160,6 @@ export default class ShowDataLayer {
                     const mp = this._leafletMap.data;
                     if (!popup.isOpen() && mp !== undefined) {
                         var centerpoint = GeoOperations.centerpointCoordinates(feature);
-                        console.log("centerpoint:", centerpoint,"of",feature)
                         popup
                             .setLatLng(GeoOperations.centerpointCoordinates(feature))
                             .openOn(mp);

css/slideshow.css

@@ -1,81 +1,22 @@
 
-.image-slideshow {
+.slick-next {
-    position: relative;
+    top: unset;
-    display: block;
+    bottom: -25px;
-    text-align: center;
+    right: 15px;
-    max-width: 100%;
+    z-index: 10000;
-    margin-top: 1em;
-    margin-bottom: 1em;
 }
 
-.slides {
+.slick-prev {
-    display: block;
+    top: unset;
-    overflow: hidden;
+    bottom: -25px;
-}
-
-.prev-button {
-    display: block;
-    background-color: black;
-    opacity: 0.3;
-    width: 4.0em;
-
-    height: 100%;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    position: absolute;
-    top: 50%;
     left: 0;
-    transform: translate(0, -50%);
+    z-index: 10000;
-
-    z-index: 5060;
-
-    border-radius: 1em;
 }
 
-
+.slick-next::before {
-.next-button {
+    font-size: 35px;
-    display: block;
-    background-color: black;
-    opacity: 0.3;
-    width: 4.0em;
-    height: 100%;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translate(0, -50%);
-    border-radius: 1em;
-
-
-    z-index: 5060;
-
 }
 
-.vspan {
+.slick-prev::before {
-    height: calc(50% - 3em);
+    font-size: 35px;
-}
-
-.prev-button img {
-    margin-left: -1em;
-    width: 6em;
-    text-align: center;
-}
-
-.next-button img {
-    margin-left: -1em;
-    width: 6em;
-    text-align: center;
-}
-
-.slide > span {
-    max-height: 40vh;
-}
-
-.slide > span img {
-    height: auto;
-    width: auto;
-    max-width: 100%;
-    max-height: 30vh;
-    border-radius: 1em;
 }

index.html

@@ -9,13 +9,13 @@
     <link rel="stylesheet" href="./index.css"/>
     <link rel="stylesheet" href="./css/userbadge.css"/>
     <link rel="stylesheet" href="./css/tabbedComponent.css"/>
-    <link rel="stylesheet" href="./css/slideshow.css"/>
     <link rel="stylesheet" href="./css/mobile.css"/>
     <link rel="stylesheet" href="./css/openinghourstable.css"/>
     <link rel="stylesheet" href="./css/tagrendering.css"/>
     <link rel="stylesheet" href="./css/imageUploadFlow.css"/>
     <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
     <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
+    <link rel="stylesheet" href="./css/slideshow.css"/>
 
 
     <link href="css/ReviewElement.css" rel="stylesheet"/>