styled layer slider luftbilder

technologiestiftung · Dec 7, 2023 · 401ceb0 · 401ceb0
1 parent 1d614b8
commit 401ceb0
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,9 @@ When setting up this had to be removed from devDependencies:
 a tool to search bezirke
 wfsSearch
 
+Layer Information:
+LayerInformation.vue
+
 ## Contributing
 
 Before you create a pull request, write an issue so we can discuss your changes.

diff --git a/portal/umweltatlas/custom.css b/portal/umweltatlas/custom.css
@@ -77,3 +77,39 @@
     margin-left: 22px;
 }
 
+.layer-item .bi-check2-square {
+    margin-left: 22px;
+}
+
+/* Luftbilder slider  */
+.slider-track {
+    /* display: none; */
+}
+
+.slider-handle {
+    background-image: none;
+    background-color: white;
+    border: 5px solid #e69636;
+}
+
+.slider-tick {
+    background-image: none;
+    background-color: white;
+    border: 1px solid black;
+}
+
+.slider-tick.in-selection {
+    background-image: none;
+    background-color: #e69636;
+    border: none;
+}
+
+.slider-selection.tick-slider-selection {
+    background-image: none !important;
+    background-color: #e69636 !important;
+}
+
+.color-green {
+    color: #1a4435;
+}
+
diff --git a/src/modules/tools/layerSlider/components/LayerSlider.vue b/src/modules/tools/layerSlider/components/LayerSlider.vue
@@ -1,7 +1,7 @@
 <script>
-import {mapGetters, mapMutations, mapActions} from "vuex";
+import { mapGetters, mapMutations, mapActions } from "vuex";
 import ToolTemplate from "../../ToolTemplate.vue";
-import {getComponent} from "../../../../utils/getComponent";
+import { getComponent } from "../../../../utils/getComponent";
 import getters from "../store/gettersLayerSlider";
 import mutations from "../store/mutationsLayerSlider";
 import LayerSliderHandle from "./LayerSliderHandle.vue";
@@ -12,47 +12,47 @@ export default {
     components: {
         ToolTemplate,
         LayerSliderHandle,
-        LayerSliderPlayer
+        LayerSliderPlayer,
     },
     computed: {
-        ...mapGetters("Tools/LayerSlider", Object.keys(getters))
+        ...mapGetters("Tools/LayerSlider", Object.keys(getters)),
     },
     watch: {
-        active (isActive) {
+        active(isActive) {
             if (!isActive) {
                 this.setWindowsInterval(null);
                 this.resetActiveLayer();
             }
-        }
+        },
     },
-    created () {
+    created() {
         this.$on("close", this.close);
     },
-    mounted () {
+    mounted() {
         this.checkIfAllLayersAvailable(this.layerIds);
         this.addIndexToLayerIds(this.layerIds);
     },
     methods: {
         ...mapMutations("Tools/LayerSlider", Object.keys(mutations)),
         ...mapActions("Tools/LayerSlider", [
             "addIndexToLayerIds",
-            "checkIfAllLayersAvailable"
+            "checkIfAllLayersAvailable",
         ]),
 
         /**
          * Sets active to false.
          * @returns {void}
          */
-        close () {
+        close() {
             this.setActive(false);
             // The value "isActive" of the Backbone model is also set to false to change the CSS class in the menu (menu/desktop/tool/view.toggleIsActiveClass)
             const model = getComponent(this.id);
 
             if (model) {
                 model.set("isActive", false);
             }
-        }
-    }
+        },
+    },
 };
 </script>
 
@@ -66,31 +66,49 @@ export default {
         :deactivate-gfi="deactivateGFI"
     >
         <template #toolBody>
-            <div
-                v-if="active"
-                id="tool-layer-slider"
-            >
-                <h5>
+            <div v-if="active" id="tool-layer-slider">
+                <!-- <h5>
                     {{ $t(title) }}
-                </h5>
-                <LayerSliderPlayer
-                    v-if="sliderType === 'player'"
-                />
-                <LayerSliderHandle
-                    v-else-if="sliderType === 'handle'"
-                />
+                </h5> -->
+
+                <h3>
+                    Luftbilder-Zeitreihe von Berlin 1928-2023. Klicken Sie ein
+                    bestimmtes Jahr an oder lassen Sie die Luftbilder
+                    automatisch nacheinander abspielen.
+                </h3>
+
+                <p class="color-green" style="margin-top: 15px">
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-exclamation-circle-fill"
+                        viewBox="0 0 16 16"
+                        style="margin-bottom: 3px"
+                    >
+                        <path
+                            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
+                        />
+                    </svg>
+                    Bitte Beachten Sie, dass das Neurendern des
+                    Kartenausschnitts beim Zoomen manchmal etwas länger dauern
+                    kann
+                </p>
+                <LayerSliderPlayer v-if="sliderType === 'player'" />
+                <LayerSliderHandle />
             </div>
         </template>
     </ToolTemplate>
 </template>
 
 <style lang="scss" scoped>
-    @import "~variables";
+@import "~variables";
 
-    #tool-layer-slider {
-        @include media-breakpoint-up(sm) {
-            min-width: 350px;
-        }
+#tool-layer-slider {
+    @include media-breakpoint-up(sm) {
+        min-width: 350px;
     }
-
+}
 </style>
+
diff --git a/src/modules/tools/layerSlider/components/LayerSliderHandle.vue b/src/modules/tools/layerSlider/components/LayerSliderHandle.vue
@@ -1,18 +1,18 @@
 <script>
-import {mapGetters, mapMutations, mapActions} from "vuex";
+import { mapGetters, mapMutations, mapActions } from "vuex";
 import getters from "../store/gettersLayerSlider";
 import mutations from "../store/mutationsLayerSlider";
 import "bootstrap-slider";
 
 export default {
     name: "LayerSliderHandle",
     computed: {
-        ...mapGetters("Tools/LayerSlider", Object.keys(getters))
+        ...mapGetters("Tools/LayerSlider", Object.keys(getters)),
     },
-    created () {
+    created() {
         this.setActiveIndex(0);
     },
-    mounted () {
+    mounted() {
         const dataSliderTicks = this.prepareSliderTicks(this.layerIds);
 
         this.setDataSliderMax(String((this.layerIds.length - 1) * 10));
@@ -23,7 +23,7 @@ export default {
         ...mapMutations("Tools/LayerSlider", Object.keys(mutations)),
         ...mapActions("Tools/LayerSlider", [
             "sendModification",
-            "setActiveIndex"
+            "setActiveIndex",
         ]),
 
         /**
@@ -33,13 +33,18 @@ export default {
          */
         initializeSlider: function () {
             this.$nextTick(() => {
-                $(".slider").slider({
-                    "ticks_labels": this.layerIds.map(layerId => layerId.title)
-                }).on("slide", event => {
-                    this.dragHandle(event.value);
-                }).on("slideStop", event => {
-                    this.dragHandle(event.value);
-                });
+                $(".slider")
+                    .slider({
+                        ticks_labels: this.layerIds.map(
+                            (layerId) => layerId.title
+                        ),
+                    })
+                    .on("slide", (event) => {
+                        this.dragHandle(event.value);
+                    })
+                    .on("slideStop", (event) => {
+                        this.dragHandle(event.value);
+                    });
             });
         },
 
@@ -112,31 +117,32 @@ export default {
          * @returns {void}
          */
         showLayer: function (layerId, transparency, layerIds) {
-            if (layerIds.filter(layer => layer.layerId === layerId).length > 0) {
+            if (
+                layerIds.filter((layer) => layer.layerId === layerId).length > 0
+            ) {
                 this.sendModification({
                     layerId: layerId,
                     status: transparency >= 0 && transparency <= 100,
-                    transparency: transparency
+                    transparency: transparency,
                 });
             }
 
             if (transparency === 0) {
-                const filteredObj = layerIds.filter(obj => obj.layerId === layerId),
+                const filteredObj = layerIds.filter(
+                        (obj) => obj.layerId === layerId
+                    ),
                     index = layerIds.indexOf(filteredObj[0]);
 
                 this.setActiveIndex(index);
             }
-        }
-    }
+        },
+    },
 };
 </script>
 
 <template lang="html">
     <div id="tool-layer-slider-handle">
-        <label
-            id="label-slider"
-            for="slider"
-        />
+        <label id="label-slider" for="slider" />
         <input
             id="slider"
             ref="sliderHandle"
@@ -148,11 +154,12 @@ export default {
             data-slider-value="0"
             :data-slider-ticks="dataSliderTicks"
             data-slider-tooltip="hide"
-        >
+        />
     </div>
 </template>
 
 <style lang="scss" scoped>
+@import "~variables";
 #tool-layer-slider-handle {
     display: flex;
     justify-content: space-evenly;
@@ -162,6 +169,10 @@ export default {
     #label-slider {
         flex-basis: 100%;
     }
+
+    .slider.slider-horizontal {
+        width: 80%;
+    }
 }
 </style>
 
@@ -172,3 +183,4 @@ export default {
     }
 }
 </style>
+