mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
chore: modals update
This commit is contained in:
+9
-4
@@ -27,9 +27,9 @@
|
||||
©
|
||||
<a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
|
||||
{{ new Date().getUTCFullYear() }} |
|
||||
<a :href="store.appUpdate?.releaseURL" target="_blank"
|
||||
>v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a
|
||||
>
|
||||
<button class="btn--text" @click="() => (updateModalOpen = true)">
|
||||
v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}
|
||||
</button>
|
||||
|
||||
<br />
|
||||
<a href="https://discord.gg/x2mpNN3svk">
|
||||
@@ -243,10 +243,15 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
// FOOTER
|
||||
footer.app_footer {
|
||||
.app_footer {
|
||||
max-width: 100%;
|
||||
padding: 0.5em;
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: 0.1em;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.1em;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
|
||||
+4
-5
@@ -27,11 +27,10 @@
|
||||
"SKR": "Train with exceeded gauge"
|
||||
},
|
||||
"update": {
|
||||
"title": "Stacjownik app update!",
|
||||
"version": "Version {0}",
|
||||
"confirm-button": "UPDATE NOW",
|
||||
"later-button": "LATER",
|
||||
"content": "context tooltips when hovering over project sponsors and timetable comment warnings\nvehicle image preview when hovering over its thumbnail in the active timetable card view and timetable journal\nlink to the driver's timetable history in the active timetable card view\nlink to the driver's active timetable card view in the timetable journal (available for online trains only)\nnew update card with version changelog"
|
||||
"title": "Stacjownik update!",
|
||||
"confirm": "ROGER THAT!",
|
||||
"info-1": "This changelog will be available to see once again after clicking the version number in the footer",
|
||||
"info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
|
||||
},
|
||||
"app": {
|
||||
"sceneries": "SCENERIES",
|
||||
|
||||
+3
-4
@@ -28,10 +28,9 @@
|
||||
},
|
||||
"update": {
|
||||
"title": "Aktualizacja Stacjownika!",
|
||||
"version": "Wersja {0}",
|
||||
"confirm-button": "UPDATE NOW",
|
||||
"later-button": "LATER",
|
||||
"content": "dymki kontekstowe po najechaniu kursorem na m.in. sponsorów projektu i uwagi eksploatacyjne\npodgląd pojazdu po najechaniu kursorem na jego miniaturkę w karcie aktywnego rozkładu jazdy oraz dzienniku RJ\nodnośnik do historii RJ maszynisty w widoku karty aktywnego rozkładu jazdy\nodnośnik do karty aktywnego rozkładu jazdy maszynisty w dzienniku (dostępny tylko dla pociągów online)\nnowa karta ze zmianami w aktualizacji"
|
||||
"confirm": "PRZYJĄŁEM!",
|
||||
"info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
|
||||
"info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
|
||||
},
|
||||
"app": {
|
||||
"sceneries": "SCENERIE",
|
||||
|
||||
@@ -213,6 +213,7 @@ a.a-button {
|
||||
&.btn--action {
|
||||
background-color: #424242;
|
||||
border-radius: 0.25em;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background-color: #555;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
|
||||
<DonationModal :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
|
||||
<StationTable @toggleDonationModal="toggleDonationModal" />
|
||||
<StationStats />
|
||||
</div>
|
||||
@@ -32,7 +32,7 @@ import StationTable from '../components/StationsView/StationTable.vue';
|
||||
import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
|
||||
import { useStationFiltersStore } from '../store/stationFiltersStore';
|
||||
import { useMainStore } from '../store/mainStore';
|
||||
import Donation from '../components/Global/Donation.vue';
|
||||
import DonationModal from '../components/Global/DonationModal.vue';
|
||||
import StationStats from '../components/StationsView/StationStats.vue';
|
||||
|
||||
export default defineComponent({
|
||||
@@ -40,7 +40,7 @@ export default defineComponent({
|
||||
StationTable,
|
||||
StationFilterCard,
|
||||
StationStats,
|
||||
Donation
|
||||
DonationModal
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
|
||||
Reference in New Issue
Block a user