Add filter school tooltip

frontend/components/FindAppropriateSchool.vue

@@ -123,9 +123,11 @@ export default {
   methods: {
     ...mapMutations({
       mapSetAge: 'map/setAge',
+      mapSetAppropriateSchool: 'map/setAppropriateSchool',
     }),
     showSchool() {
       this.mapSetAge(this.studentAge);
+      this.mapSetAppropriateSchool(this.appropriateSchool);
       this.$store.dispatch('map/show');
     },
   },

frontend/components/Map.vue

@@ -7,18 +7,110 @@
       frameborder="0"
       :src="mapUrl.toString()"
     />
+    <div v-if="filterTooltipVisible && appropriateSchool != null" class="filter-popover">
+      <div class="flex flex-col">
+        <span>
+          {{ $t('components.Map.filter_tooltip') }}
+        </span>
+        <span class="font-body-bold">
+          {{ appropriateSchool }}
+        </span>
+      </div>
+      <span class="close" @click="setFilterTooltipVisible(false)" />
+    </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 
 export default {
+  data() {
+    return {
+      filterTooltipVisible: true,
+    };
+  },
   computed: {
     // mix the getters into computed with object spread operator
     ...mapGetters({
       mapUrl: 'map/url',
+      appropriateSchool: 'map/appropriateSchool',
     }),
   },
+  watch: {
+    appropriateSchool() {
+      this.filterTooltipVisible = true;
+    },
+  },
+  methods: {
+    setFilterTooltipVisible(visible) {
+      this.filterTooltipVisible = visible;
+    },
+  },
 };
 </script>
+<style scoped>
+.filter-popover {
+  position: absolute;
+  bottom: 85px;
+  right: 60px;
+  z-index: 100;
+  background-color: white;
+  @apply p-s rounded-outer font-body-small text-body-small flex flex-row items-start;
+}
+
+/*down arrow*/
+.filter-popover::after {
+  content: '';
+  position: absolute;
+  right: 5%;
+  top: 100%;
+  width: 0;
+  height: 0;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px solid white;
+  clear: both;
+}
+
+/* At width 1380px umapa changes position of filters */
+@media(max-width: 1380px) {
+  .filter-popover {
+    bottom: 120px;
+    right: 65px;
+  }
+  /*right arrow*/
+  .filter-popover::after {
+    right: -20px;
+    top: 40%;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid white;
+  }
+}
+
+.close {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  margin-left: 12px;
+  opacity: 0.5;
+}
+.close:hover {
+  opacity: 1;
+}
+.close:before, .close:after {
+  position: absolute;
+  left: 6px;
+  content: ' ';
+  height: 12px;
+  width: 2px;
+  background-color: #333;
+}
+.close:before {
+  transform: rotate(45deg);
+}
+.close:after {
+  transform: rotate(-45deg);
+}
+</style>

frontend/locales/cz.json

@@ -55,6 +55,9 @@
       "how_the_Czech_education_system_works": "Jak funguje český vzdělávací systém",
       "how_to_enroll_a_child_in_school": "Jak přihlásit dítě do školy",
       "more_information": "Další informace"
+    },
+    "Map": {
+      "filter_tooltip" : "Zafiltrovali jsme školy, které přijímají do"
     }
   },
   "pages": {

frontend/locales/ua.json

@@ -55,6 +55,9 @@
       "how_the_Czech_education_system_works": "Як працює чеська система освіти",
       "how_to_enroll_a_child_in_school": "Як записати дитину до школи",
       "more_information": "Більше інформації"
+    },
+    "Map": {
+      "filter_tooltip" : "Ми відфільтрували школи, які приймають"
     }
   },
   "pages": {

frontend/store/map.js

@@ -41,6 +41,7 @@ export const state = () => ({
   defaultSearchParams: [],
   fullTextSearch: null,
   age: null,
+  appropriateSchool: null,
   locale: 'uk',
   show: false,
 });
@@ -58,11 +59,13 @@ export const mutations = {
   setAge(state, newAge) {
     state.age = newAge;
   },
+  setAppropriateSchool(state, newAppropriateSchool) {
+    state.appropriateSchool = newAppropriateSchool;
+  },
   setLocale(state, newLocale) {
     state.locale = newLocale;
   },
   setShow(state, show) {
-    console.log('setShow', show);
     state.show = show;
   },
 };
@@ -72,6 +75,10 @@ export const getters = {
     return state.age;
   },
 
+  appropriateSchool(state) {
+    return state.appropriateSchool;
+  },
+
   // convert current state to URL
   url(state) {
     const url = new URL(state.baseUrl);