From 414c2ae1239069fa2632896c2b21827352e96a8e Mon Sep 17 00:00:00 2001
From: jonasbul <jonas.bulcke@cegeka.com>
Date: Mon, 2 Oct 2023 13:38:32 +0200
Subject: [PATCH] feat: z-stack bug fixed + checkboxtile finished

---
 .../src/components/checkbox/CheckboxTile.vue  |  6 +--
 frontend/src/components/map/LeafletMap.vue    | 46 ++-----------------
 frontend/src/components/modal/MapButtons.vue  | 45 ++++++++++++++++++
 frontend/src/components/slider/Slider.vue     |  2 +-
 4 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/checkbox/CheckboxTile.vue b/frontend/src/components/checkbox/CheckboxTile.vue
index d0bbb33..9ab91b2 100644
--- a/frontend/src/components/checkbox/CheckboxTile.vue
+++ b/frontend/src/components/checkbox/CheckboxTile.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="checkbox-tile" :class="{ 'checked': checked }" @click="checked = !checked">
     <div class="checkmark-container">
-      <img v-if="checked" src="../../assets/svgs/checkboxtile/check-checked.svg" alt="checkbox checked"/>
+      <img v-if="checked" class="checkmark-checked" src="../../assets/svgs/checkboxtile/check-checked.svg" alt="checkbox checked"/>
       <span v-else class="checkmark"/>
     </div>
-    <h5 class="header5">{{ label }} {{ checked ? "(Active)" : "" }}</h5>
+    <h5 class="header5">{{ label }}</h5>
   </div>
 </template>
 
@@ -69,7 +69,7 @@ export default {
   background-color: #fff;
 }
 
-.checkmark.checked {
+.checkmark-checked {
   border: #fff solid 1px;
   width: 18px;
   height: 18px;
diff --git a/frontend/src/components/map/LeafletMap.vue b/frontend/src/components/map/LeafletMap.vue
index bb48d84..57e3f3e 100644
--- a/frontend/src/components/map/LeafletMap.vue
+++ b/frontend/src/components/map/LeafletMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="z-stack">
     <MapButtons></MapButtons>
     <div class="linked-data-container">
       <div style="width: 50%" id="map"></div>
@@ -135,56 +135,20 @@ export default {
 </script>
 
 <style>
-.map-buttons {
+.linked-data-container {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: end;
   z-index: 2;
-  width: 50%;
-  top: 350px;
-  right: 12px;
-  margin-top: -160px;
-  margin-bottom: 30px;
-  gap: 10px;
+  display: flex;
+  width: 100%;
 }
 
-.linked-data-container {
+.z-stack {
   position: relative;
   z-index: 1;
-  display: flex;
   width: 100%;
   height: 350px;
 }
 
-.map-button {
-  width: 74px;
-  height: 60px;
-  border: none;
-  background-color: #fff;
-  border-radius: 3px;
-
-  display: inline-flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: center;
-  justify-content: center;
-}
-
-.map-button > img {
-  width: 24px;
-  height: 24px;
-}
-
-.map-button > span {
-  color: #0055CC;
-  font-family: Flanders Art Sans, sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  letter-spacing: 0;
-}
-
 .leaflet-control-zoom-in,
 .leaflet-control-zoom-out {
   color: #05C !important;
diff --git a/frontend/src/components/modal/MapButtons.vue b/frontend/src/components/modal/MapButtons.vue
index d09edb4..40db094 100644
--- a/frontend/src/components/modal/MapButtons.vue
+++ b/frontend/src/components/modal/MapButtons.vue
@@ -50,6 +50,51 @@ function onMapButtonClicked(button : "layers" | "legend") {
 </template>
 
 <style scoped>
+.map-buttons {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: end;
+  gap: 10px;
+  z-index: 10;
+  width: fit-content;
+  margin-right: 12px;
+  right: 50%;
+  bottom: 0;
+  margin-bottom: 30px;
+}
+
+.map-button {
+  width: 74px;
+  height: 60px;
+  border: none;
+  background-color: #fff;
+  border-radius: 3px;
+
+  display: inline-flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.map-button:hover {
+  cursor: pointer;
+}
+
+.map-button > img {
+  width: 24px;
+  height: 24px;
+}
+
+.map-button > span {
+  color: #0055CC;
+  font-family: Flanders Art Sans, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0;
+}
 .modal {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/slider/Slider.vue b/frontend/src/components/slider/Slider.vue
index 85b9172..85b66e7 100644
--- a/frontend/src/components/slider/Slider.vue
+++ b/frontend/src/components/slider/Slider.vue
@@ -4,7 +4,7 @@ import {computed, reactive, ref, watch} from "vue";
 
 const emit = defineEmits(['timestampChanged', 'realtimeToggled'])
 const now = new Date();
-const isRealtime = ref(false)
+const isRealtime = ref(true)
 
 watch(isRealtime, (newVal, oldVal) => {
   if(newVal !== oldVal) {