Dodano modal aktualizacji, uzupełnienie scenerii

src/components/Global/DonationModal.vue

@@ -43,8 +43,6 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
 
-import StorageManager from "@/scripts/storageManager";
-
 @Component
 export default class Modal extends Vue {
   @Prop() modalHidden!: boolean;

src/components/Global/Dropdown.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="dropdown">
-    <div class="dropdown_wrapper">
-      <div class="dropdown_selected" @click="toggleList">
-        {{selectedItem}}
-        <img :src="isListOpen ? arrowAsc : arrowDesc" alt="arrow" />
-      </div>
-      <ul class="dropdown_list" v-if="isListOpen">
-        <li v-for="(item, i) in itemList" @click="selectItem(item)" :key="i">{{item}}</li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-
-@Component
-export default class Dropdown extends Vue {
-  arrowDesc = require("@/assets/icon-arrow-desc.svg");
-  arrowAsc = require("@/assets/icon-arrow-asc.svg");
-
-  selectedItem: string = "---";
-  isListOpen: boolean = false;
-
-  @Prop() itemList!: string[];
-
-  mounted() {
-    // this.selectedItem = this.itemList[0];
-  }
-
-  toggleList() {
-    this.isListOpen = !this.isListOpen;
-  }
-
-  selectItem(itemName: string) {
-    this.selectedItem = itemName;
-    this.isListOpen = false;
-
-    this.$emit("itemSelected", this.selectedItem);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.dropdown {
-  &_wrapper {
-    font-size: 1.15em;
-    min-width: 13em;
-
-    position: relative;
-  }
-
-  &_selected {
-    background-color: #333;
-    padding: 0.2em 0.5em;
-
-    cursor: pointer;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    img {
-      width: 1.35em;
-      vertical-align: middle;
-
-      margin-left: 0.5em;
-    }
-  }
-
-  &_list {
-    position: absolute;
-    width: 100%;
-
-    max-height: 250px;
-    overflow-y: scroll;
-  }
-
-  &_list > li {
-    padding: 0.3em 0.5em;
-    background-color: #666;
-
-    font-size: 0.8em;
-
-    cursor: pointer;
-
-    &:hover {
-      background-color: #555;
-    }
-  }
-}
-</style>

src/components/Global/UpdateModal.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="modal">
+    <div class="header">
+      <span>Stacj</span>
+      <img src="@/assets/trainlogo.png" alt="trainlogo" />
+      <span>wnik</span>
+      <sup style="font-size: 0.5em; margin-left: 10px;" class="title">1.4</sup>
+    </div>
+
+    <div class="title">Dziennik Aktywności Scenerii dostępny w wersji beta!</div>
+
+    <div class="content">
+      Do użytku został oddany Dziennik Aktywności Scenerii, który pozwala na dostęp do informacji kto i kiedy dyżurował na danej stacji.
+      Aby przejść do zakładki z dziennikiem wystarczy wybrać opcję "DZIENNIK" w menu na górze strony. Funkcjonalność ta jest nadal w trakcie prac,
+      więc informacje, które pokazuje, mogą być niepoprawne, a dane kasowane w ramach dalszych testów.
+      <div style="text-align: center; font-weight: bold; margin: 0.5em 0;">Miłego korzystania!</div>
+    </div>
+
+    <button class="button" @click="toggleUpdateModal">PRZYJĄŁEM!</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class UpdateModal extends Vue {
+  @Prop() currentVersion!: string;
+
+  STORAGE_ID = "modal_update";
+
+  toggleUpdateModal(type: string) {
+    this.$emit("toggleUpdateModal");
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive";
+
+.modal {
+  z-index: 100;
+
+  padding: 1em;
+
+  border-radius: 1em;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+
+  width: 65%;
+  max-width: 950px;
+
+  max-height: 95vh;
+  overflow: auto;
+
+  font-size: 1.2em;
+
+  transform: translate(-50%, -50%);
+
+  background: rgba(black, 0.85);
+  color: white;
+
+  text-align: center;
+
+  @include smallScreen() {
+    font-size: 1.2em;
+    width: 95%;
+  }
+}
+
+.header {
+  font-size: 5em;
+
+  img {
+    width: 0.8em;
+  }
+}
+
+.title {
+  font-size: 2em;
+}
+
+.content {
+  font-size: 1.4em;
+
+  text-align: justify;
+
+  ul {
+    list-style: square inside;
+  }
+}
+
+.button {
+  font-size: 1.25em;
+  margin: 0 auto;
+}
+</style>