From 79fc3f54e5f2a41d397aafbb3a398023cf817f7a Mon Sep 17 00:00:00 2001
From: pietervdvn <pietervdvn@posteo.net>
Date: Mon, 15 Feb 2021 19:06:06 +0100
Subject: [PATCH] Move slick buttons to a clickable location

---
 UI/ShowDataLayer.ts | 10 ++----
 css/slideshow.css   | 85 +++++++--------------------------------------
 index.html          |  2 +-
 3 files changed, 16 insertions(+), 81 deletions(-)

diff --git a/UI/ShowDataLayer.ts b/UI/ShowDataLayer.ts
index a3a4053..812b053 100644
--- a/UI/ShowDataLayer.ts
+++ b/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;
             }
@@ -68,7 +67,7 @@ export default class ShowDataLayer {
             } else {
                 mp.addLayer(geoLayer)
             }
-            
+
             State.state.selectedElement.ping();
         }
 
@@ -84,7 +83,7 @@ export default class ShowDataLayer {
         const layer = this._layerDict[feature._matching_layer_id];
         return layer.GenerateLeafletStyle(tagsSource, layer._showOnPopup !== undefined);
     }
-    
+
     private pointToLayer(feature, latLng): L.Layer {
         // Leaflet cannot handle geojson points natively
         // We have to convert them to the appropriate icon
@@ -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);
diff --git a/css/slideshow.css b/css/slideshow.css
index 38eebd5..7fe59c1 100644
--- a/css/slideshow.css
+++ b/css/slideshow.css
@@ -1,81 +1,22 @@
 
-.image-slideshow {
-    position: relative;
-    display: block;
-    text-align: center;
-    max-width: 100%;
-    margin-top: 1em;
-    margin-bottom: 1em;
+.slick-next {
+    top: unset;
+    bottom: -25px;
+    right: 15px;
+    z-index: 10000;
 }
 
-.slides {
-    display: block;
-    overflow: hidden;
-}
-
-.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%;
+.slick-prev {
+    top: unset;
+    bottom: -25px;
     left: 0;
-    transform: translate(0, -50%);
-
-    z-index: 5060;
-
-    border-radius: 1em;
+    z-index: 10000;
 }
 
-
-.next-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%;
-    right: 0;
-    transform: translate(0, -50%);
-    border-radius: 1em;
-
-
-    z-index: 5060;
-
+.slick-next::before {
+    font-size: 35px;
 }
 
-.vspan {
-    height: calc(50% - 3em);
-}
-
-.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;
+.slick-prev::before {
+    font-size: 35px;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index dc84ec5..8724e48 100644
--- a/index.html
+++ b/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"/>