Poprawki stylistyczne modalu aktualizacji; link do najnowszego wydania w stopce

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "stacjownik",
-  "version": "1.9.10",
+  "version": "1.10.1-alpha",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "stacjownik",
-      "version": "1.9.10",
+      "version": "1.10.1-alpha",
       "dependencies": {
         "core-js": "^3.12.1",
         "dotenv": "^8.6.0",

package.json

@@ -41,4 +41,3 @@
     "not dead"
   ]
 }
-

src/App.vue

@@ -74,7 +74,7 @@
     <footer class="app_footer">
       &copy;
       <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}
+      {{ new Date().getUTCFullYear() }} | <a :href="releaseURL" target="_blank">v{{ VERSION }}</a>
 
       <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
     </footer>
@@ -147,11 +147,10 @@ export default defineComponent({
 
   data: () => ({
     VERSION: packageInfo.version,
-    updateModalVisible: false,
-    hasReleaseNotes: false,
     options,
 
     currentLang: 'pl',
+    releaseURL: '',
 
     brand_logo: require('@/assets/stacjownik-header-logo.svg'),
 
@@ -171,23 +170,11 @@ export default defineComponent({
   },
 
   async mounted() {
-    if (StorageManager.getStringValue('version') != this.VERSION) {
+    this.updateStorage();
-      StorageManager.setStringValue('version', this.VERSION);
+    this.setReleaseURL();
-
-      if (this.hasReleaseNotes) StorageManager.setBooleanValue('version_notes_read', false);
-    }
-
-    this.updateModalVisible = this.hasReleaseNotes && !StorageManager.getBooleanValue('version_notes_read');
-
-    this.updateToNewestVersion();
   },
 
   methods: {
-    toggleUpdateModal() {
-      this.updateModalVisible = !this.updateModalVisible;
-      StorageManager.setBooleanValue('version_notes_read', true);
-    },
-
     changeRegion(region: { id: string; value: string }) {
       this.store.changeRegion(region);
     },
@@ -199,7 +186,13 @@ export default defineComponent({
       StorageManager.setStringValue('lang', lang);
     },
 
-    updateToNewestVersion() {
+    setReleaseURL() {
+      const releaseURL = StorageManager.getStringValue('releaseURL');
+
+      this.releaseURL = releaseURL || '';
+    },
+
+    updateStorage() {
       if (!StorageManager.isRegistered('unavailable-status')) {
         StorageManager.setBooleanValue('unavailable-status', true);
         StorageManager.setBooleanValue('ending-status', true);

src/components/App/UpdateModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="card-anim">
+  <transition name="modal-anim">
     <section class="update-modal card" v-if="releaseData && modalOpen">
       <h2 class="modal_header text--primary">
         <img :src="icons.logo" alt="stacjownik logo" />
@@ -17,6 +17,8 @@
         <br />
 
         <p>{{ $t('update.paragraph1') }}</p>
+
+        <!-- <div class="modal_changelog" v-html="markdownReleaseBody"></div> -->
       </div>
 
       <div class="modal_actions">
@@ -27,11 +29,14 @@
 </template>
 
 <script lang="ts">
+import axios from 'axios';
+import packageInfo from '../../../package.json';
+
 import { ReleaseAPIData } from '@/scripts/interfaces/github_api/ReleaseAPIData';
 import { defineComponent } from '@vue/runtime-core';
-import packageInfo from '../../../package.json';
+
-import axios from 'axios';
 import StorageManager from '@/scripts/managers/storageManager';
+import { useStore } from '@/store/store';
 
 const GH_LASTEST_RELEASE_URL = 'https://api.github.com/repos/Spythere/stacjownik/releases/latest';
 
@@ -52,14 +57,17 @@ export default defineComponent({
     };
   },
 
+  setup() {
+    return {
+      store: useStore()
+    }
+  },
+
   methods: {
     async fetchReleases() {
       const storedVersion = StorageManager.getStringValue('appVersion');
       const appVersion = packageInfo.version;
 
-      console.log(storedVersion, appVersion);
-      
-
       // Zmiana
       if (appVersion != storedVersion) {
         StorageManager.setStringValue('appVersion', appVersion);
@@ -74,6 +82,8 @@ export default defineComponent({
           if (lastReleaseVersion == appVersion) {
             this.releaseData = releaseData;        
             this.modalOpen = true;
+
+            StorageManager.setStringValue('releaseURL', releaseData.html_url);
           }
         } catch (error) {
           console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
@@ -88,6 +98,20 @@ export default defineComponent({
 @import '../../styles/card.scss';
 @import '../../styles/responsive.scss';
 
+
+.modal-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.45);
+  }
+}
+
 .update-modal {
   text-align: center;
   background-color: var(--clr-secondary);
@@ -132,6 +156,11 @@ export default defineComponent({
   }
 }
 
+.modal_changelog {
+  font-size: 0.8em;
+  margin-top: 2em;
+}
+
 @include smallScreen {
   .update-modal {
     height: auto;

src/components/StationsView/StationFilterCard.vue

@@ -257,8 +257,8 @@ export default defineComponent({
 
   &-enter-from,
   &-leave-to {
-    transform: translate(-50%, -50%) scale(0.8);
     opacity: 0;
+    transform: translate(-50%, -50%) scale(0.45);
   }
 }
 

src/components/TrainsView/TrainOptionsCard.vue

@@ -128,18 +128,6 @@ export default defineComponent({
 @import '../../styles/responsive';
 @import '../../styles/card';
 
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all $animDuration $animType;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.85);
-    opacity: 0;
-  }
-}
 
 .card {
   section {

src/styles/card.scss

@@ -13,19 +13,6 @@
   background: rgba(black, 0.65);
 }
 
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease-in-out;
-  }
-
-  &-enter-from,
-  &-leave-to {
-    transform: translate(-50%, -50%) scale(0.8);
-    opacity: 0;
-  }
-}
-
 .card {
   position: fixed;
   top: 50%;