mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
scroller sponsorów projektu w modalu
This commit is contained in:
@@ -1,129 +1,157 @@
|
||||
<template>
|
||||
<div class="donation-modal" @keydown.esc="toggleModal(false)">
|
||||
<button
|
||||
class="btn-toggle btn--image"
|
||||
ref="btn"
|
||||
@click="toggleModal(true)"
|
||||
@focus="toggleModal(false)"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
|
||||
<span>{{ $t('donations.button-title') }}</span>
|
||||
</button>
|
||||
<AnimatedModal
|
||||
class="donation-modal"
|
||||
:isOpen="isModalOpen"
|
||||
@toggleModal="toggleModal"
|
||||
@keydown.esc="toggleModal(false)"
|
||||
>
|
||||
<div class="modal_content">
|
||||
<div class="modal_main">
|
||||
<h1 v-html="$t('donations.header')"></h1>
|
||||
<div class="donators-slider" v-if="donatorList.length != 0">
|
||||
<span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
|
||||
|
||||
<AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
|
||||
<div class="modal_content">
|
||||
<div class="modal_main">
|
||||
<h1 v-html="$t('donations.header')"></h1>
|
||||
<br />
|
||||
<p v-html="$t('donations.p1')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p2" tag="p">
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p2-b1') }}</b>
|
||||
</template>
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p2-b2') }}</b>
|
||||
</template>
|
||||
<template v-slot:b3>
|
||||
<b>{{ $t('donations.p2-b3') }}</b>
|
||||
</template>
|
||||
<template v-slot:link>
|
||||
<a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
|
||||
{{ $t('donations.p2-a1') }}
|
||||
</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<p v-html="$t('donations.p3')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p4" tag="p">
|
||||
<template v-slot:img>
|
||||
<transition mode="out-in" name="slider-anim" class="current-name">
|
||||
<span :key="displayingName">
|
||||
<img src="/images/icon-diamond.svg" alt="donator diamond icon" />
|
||||
</template>
|
||||
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p4-b1') }}</b>
|
||||
</template>
|
||||
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p4-b2') }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<i
|
||||
v-html="$t('donations.p5')"
|
||||
style="display: flex; justify-content: flex-end; text-align: right"
|
||||
>
|
||||
</i>
|
||||
{{ displayingName }}
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
<br />
|
||||
<p v-html="$t('donations.p1')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p2" tag="p">
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p2-b1') }}</b>
|
||||
</template>
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p2-b2') }}</b>
|
||||
</template>
|
||||
<template v-slot:b3>
|
||||
<b>{{ $t('donations.p2-b3') }}</b>
|
||||
</template>
|
||||
<template v-slot:link>
|
||||
<a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
|
||||
{{ $t('donations.p2-a1') }}
|
||||
</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<p v-html="$t('donations.p3')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p4" tag="p">
|
||||
<template v-slot:img>
|
||||
<img src="/images/icon-diamond.svg" alt="donator diamond icon" />
|
||||
</template>
|
||||
|
||||
<div class="modal_actions">
|
||||
<a
|
||||
class="modal-action a-button btn--image coffee"
|
||||
href="https://buycoffee.to/spythere"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
|
||||
{{ $t('donations.action-buycoffee') }}
|
||||
</a>
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p4-b1') }}</b>
|
||||
</template>
|
||||
|
||||
<a
|
||||
class="modal-action a-button btn--image paypal"
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="paypal donation" />
|
||||
{{ $t('donations.action-paypal') }}
|
||||
</a>
|
||||
|
||||
<button class="modal-action btn--image exit" @click="toggleModal(false)">
|
||||
<img src="/images/icon-exit.svg" alt="dollar donation icon" />
|
||||
{{ $t('donations.action-exit') }}
|
||||
</button>
|
||||
</div>
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p4-b2') }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<i
|
||||
v-html="$t('donations.p5')"
|
||||
style="display: flex; justify-content: flex-end; text-align: right"
|
||||
>
|
||||
</i>
|
||||
</div>
|
||||
</AnimatedModal>
|
||||
</div>
|
||||
|
||||
<div class="modal_actions">
|
||||
<a
|
||||
class="modal-action a-button btn--image coffee"
|
||||
href="https://buycoffee.to/spythere"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
|
||||
{{ $t('donations.action-buycoffee') }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="modal-action a-button btn--image paypal"
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="paypal donation" />
|
||||
{{ $t('donations.action-paypal') }}
|
||||
</a>
|
||||
|
||||
<button class="modal-action btn--image exit" @click="toggleModal(false)">
|
||||
<img src="/images/icon-exit.svg" alt="dollar donation icon" />
|
||||
{{ $t('donations.action-exit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import AnimatedModal from './AnimatedModal.vue';
|
||||
import { useApiStore } from '../../store/apiStore';
|
||||
|
||||
export default defineComponent({
|
||||
components: { AnimatedModal },
|
||||
props: {
|
||||
isModalOpen: Boolean
|
||||
},
|
||||
|
||||
emits: ['toggleModal'],
|
||||
|
||||
watch: {
|
||||
isModalOpen(b: boolean) {
|
||||
this.running = b;
|
||||
this.lastUpdate = Date.now();
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.runUpdate();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
apiStore: useApiStore(),
|
||||
displayingIndex: 0,
|
||||
lastUpdate: 0,
|
||||
running: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
displayingName() {
|
||||
return this.donatorList[this.displayingIndex];
|
||||
},
|
||||
|
||||
donatorList() {
|
||||
return this.apiStore.donatorsData.slice().sort(() => Math.sign(Math.random() * -2 + 1));
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleModal(value: boolean) {
|
||||
this.$emit('toggleModal', value);
|
||||
},
|
||||
|
||||
runUpdate() {
|
||||
if (Date.now() >= this.lastUpdate + 2000 && this.running) {
|
||||
this.displayingIndex = (this.displayingIndex + 1) % this.donatorList.length;
|
||||
this.lastUpdate = Date.now();
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(this.runUpdate);
|
||||
}
|
||||
},
|
||||
components: { AnimatedModal }
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
|
||||
button.btn-toggle {
|
||||
$btnColor: #254069;
|
||||
|
||||
background-color: $btnColor;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($btnColor, 5%);
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal_content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
@@ -151,6 +179,7 @@ button.btn-toggle {
|
||||
|
||||
.modal_main {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
img {
|
||||
max-height: 20px;
|
||||
@@ -198,4 +227,30 @@ button.btn-toggle {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donators-slider {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
|
||||
.current-name {
|
||||
backface-visibility: hidden;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
color: var(--clr-donator);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-anim {
|
||||
&-move,
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,8 +59,6 @@ export default defineComponent({
|
||||
'store.region.id': {
|
||||
handler(regionId) {
|
||||
this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
|
||||
|
||||
console.log('region id', regionId);
|
||||
}
|
||||
},
|
||||
'$route.query.region': {
|
||||
|
||||
@@ -98,8 +98,6 @@ export default defineComponent({
|
||||
fallbackName += isCarPassenger ? 'passenger' : 'cargo';
|
||||
}
|
||||
|
||||
console.log(stockName, fallbackName);
|
||||
|
||||
(event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -256,8 +256,6 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
handleAuthorsInput() {
|
||||
console.log(this.authorsInputValue);
|
||||
|
||||
this.filterStore.changeFilterValue('authors', this.authorsInputValue);
|
||||
|
||||
if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"donations": {
|
||||
"button-title": "TOSS A COIN",
|
||||
"header": "Toss a coin to Stacjownik!",
|
||||
"donator-title": "Project is supported by more than <b>{count}</b> people, including:",
|
||||
"p1": "<b>Hello o7!</b> This is Spythere, the creator of Stacjownik, Pojazdownik and several other applications that enhance the gameplay of Train Driver 2!",
|
||||
"p2": "{b1} is a completely free tool, created and continuously developed for the Train Driver 2 simulator community since 2020. However, a part of the project is sustained solely through my private financial contribution. Features such as {b2} or {b3} (operating on my {link} - to which you are warmly invited) must function on a dedicated server where they can collect and process data, and then display it on the website.",
|
||||
"p2-b1": "Stacjownik",
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
"donations": {
|
||||
"button-title": "GROSZA DAJ",
|
||||
"header": "Grosza daj Stacjownikowi!",
|
||||
"donator-title": "Projekt wspiera już ponad <b>{count}</b> osób, w tym:",
|
||||
"p1": "<b>Hej o7!</b> Z tej strony Spythere, twórca Stacjownika, Pojazdownika oraz kilku innych aplikacji wspomagających rozgrywkę symulatora Train Driver 2!",
|
||||
"p2": "{b1} to narzędzie całkowicie darmowe, tworzone i rozwijane dla społeczności symulatora TD2 nieprzerwanie od 2020 roku. Jednakże, część projektu jest podtrzymywana wyłącznie dzięki mojemu prywatnemu wkładowi finansowemu. Funkcje takie jak {b2} czy też {b3} działający na moim {link} (na który serdeczne zapraszam) muszą działać na wydzielonym serwerze, gdzie będą mogły zbierać i przetwarzać dane, aby następnie pokazać je na stronie.",
|
||||
"p2-b1": "Stacjownik",
|
||||
|
||||
@@ -49,6 +49,9 @@ body {
|
||||
padding: 0;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-weight: 500;
|
||||
text-rendering: optimizeLegibility !important;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
|
||||
overflow-y: scroll;
|
||||
|
||||
&.no-scroll {
|
||||
|
||||
@@ -8,9 +8,18 @@
|
||||
ref="filterCardRef"
|
||||
/>
|
||||
|
||||
<Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
|
||||
<button
|
||||
class="btn-donation btn--image"
|
||||
ref="btn"
|
||||
@click="isDonationModalOpen = true"
|
||||
@focus="isDonationModalOpen = false"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
|
||||
<span>{{ $t('donations.button-title') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
|
||||
<StationTable :stations="computedStationList" @toggleDonationModal="toggleDonationModal" />
|
||||
</div>
|
||||
</section>
|
||||
@@ -109,4 +118,20 @@ export default defineComponent({
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
button.btn-donation {
|
||||
$btnColor: #254069;
|
||||
|
||||
background-color: $btnColor;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($btnColor, 5%);
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user