chore: modals update

src/components/App/UpdateModal.vue

@@ -1,29 +1,19 @@
 <template>
   <AnimatedModal :is-open="updateModalOpen" @toggle-modal="toggleModal">
-    <div class="modal_content">
-      <div>
-        <h1 style="margin-bottom: 0.5em">{{ $t('update.title') }}</h1>
-      </div>
+    <div class="modal-content">
+      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
 
       <div class="features-body" v-html="htmlChangelog"></div>
 
-      <div class="modal_actions">
-        <button class="btn--action" @click="toggleModal">Przyjąłem!</button>
+      <button class="btn btn--action" ref="confirm-btn" @click="toggleModal">
+        {{ $t('update.confirm') }}
+      </button>
 
-        <p>Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony!</p>
-
-        <!-- <div class="actions-checkboxes">
-          <label>
-            <input type="checkbox" />
-            <span>nie pokazuj dla przyszłych aktualizacji</span>
-          </label>
-
-          <label>
-            <input type="checkbox" />
-            <span>nie pokazuj dla przyszłych aktualizacji</span>
-          </label>
-        </div> -->
-      </div>
+      <p class="bottom-info">
+        {{ $t('update.info-1') }}
+        <br />
+        <span v-html="$t('update.info-2')"></span>
+      </p>
     </div>
   </AnimatedModal>
 </template>
@@ -57,6 +47,14 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    updateModalOpen(val: boolean) {
+      this.$nextTick(() => {
+        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+      });
+    }
+  },
+
   computed: {
     htmlChangelog() {
       if (this.mainStore.appUpdate == null) return '';
@@ -91,14 +89,13 @@ export default defineComponent({
   line-height: 1.5em;
 }
 
-.modal_content {
-  padding: 2em;
-  height: 80vh;
-  min-height: 550px;
-
+.modal-content {
   display: grid;
   grid-template-rows: auto 1fr auto;
   gap: 0.5em;
+  padding: 1em 2em;
+  min-height: 700px;
+  overflow: auto;
 }
 
 hr.separator {
@@ -108,9 +105,18 @@ hr.separator {
   background-color: #fff;
 }
 
-.modal_actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
+button {
+  margin: 0 auto;
+  padding: 0.5em 0.75em;
+  font-size: 1.1em;
+}
+
+p.bottom-info {
+  text-align: center;
+  color: #ccc;
+}
+
+a {
+  text-decoration: underline;
 }
 </style>

src/components/Global/AnimatedModal.vue

@@ -1,8 +1,8 @@
 <template>
-  <transition name="modal-anim" tag="div" class="modal">
-    <div class="body" v-if="isOpen">
-      <div class="background" @click="toggleModal(false)"></div>
-      <div class="wrapper" ref="wrapper" tabindex="0">
+  <transition name="modal-anim" tag="div">
+    <div class="modal" v-if="isOpen">
+      <div class="modal-background" @click="toggleModal(false)"></div>
+      <div class="modal-wrapper" ref="wrapper" tabindex="0">
         <slot></slot>
       </div>
       <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
@@ -30,8 +30,7 @@ export default defineComponent({
   watch: {
     isOpen(v) {
       this.$nextTick(() => {
-        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
-        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+        if (v == false) (this.store.modalLastClickedTarget as HTMLElement)?.focus();
       });
     }
   },
@@ -47,17 +46,21 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.body {
+.modal {
   position: fixed;
   top: 0;
   left: 0;
+
+  width: 100%;
+  height: 100vh;
   z-index: 200;
 
-  width: 100vw;
-  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.background {
+.modal-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -69,28 +72,24 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.55);
 }
 
-.wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.modal-wrapper {
+  position: relative;
+  z-index: 210;
 
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #333333;
-
-  width: 95%;
-  max-width: 800px;
-  max-height: 95vh;
+  margin-top: 1em;
 
   & > :slotted(div) {
+    background-color: #1a1a1a;
+    box-shadow: 0 0 15px 10px #0e0e0e;
+
+    width: 95vw;
+    max-width: 850px;
     max-height: 95vh;
   }
 }
 
 @include smallScreen {
-  .wrapper {
-    top: 0;
-    transform: translate(-50%, 1em);
+  .modal-wrapper {
     max-height: 90vh;
 
     & > :slotted(div) {

src/components/Global/DonationModal.vue

@@ -66,6 +66,7 @@
           class="modal-action a-button btn--image coffee"
           href="https://buycoffee.to/spythere"
           target="_blank"
+          ref="action"
         >
           <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
           {{ $t('donations.action-buycoffee') }}
@@ -103,9 +104,13 @@ export default defineComponent({
   emits: ['toggleModal'],
 
   watch: {
-    isModalOpen(b: boolean) {
-      this.running = b;
+    isModalOpen(val: boolean) {
+      this.running = val;
       this.lastUpdate = Date.now();
+
+      this.$nextTick(() => {
+        if (val) (this.$refs['action'] as HTMLElement).focus();
+      });
     }
   },
 

src/components/TrainsView/TrainModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
-    <div class="modal_background" @click="closeModal"></div>
-    <div class="modal_content" ref="content" tabindex="0">
+    <div class="modal-background" @click="closeModal"></div>
+    <div class="modal-content" ref="content" tabindex="0">
       <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
       <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
@@ -71,7 +71,7 @@ export default defineComponent({
   text-align: left;
 }
 
-.modal_background {
+.modal-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -83,14 +83,14 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.55);
 }
 
-.modal_content {
+.modal-content {
   position: relative;
   overflow-y: scroll;
 
   margin-top: 1em;
 
   width: 95vw;
-  max-height: 96vh;
+  max-height: 95vh;
 
   background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;