Aktualizacja

This commit is contained in:
2021-06-21 21:20:41 +02:00
parent ae74d0ad5b
commit cbcb085446
3 changed files with 2 additions and 172 deletions
-168
View File
@@ -1,168 +0,0 @@
<template>
<div class="modal" v-if="!modalHidden">
<div class="modal_content">
<span class="modal_title">Grosza daj Stacjownikowi...</span>
<div class="modal_body">
<div class="modal_body-header">
Stacjownik to projekt całkowicie darmowy dla wszystkich. Jednak jeśli
chcesz go wesprzeć i pomóc w rozwoju strony oraz nowych
funkcjonalności, które wykraczają poza darmowe możliwości hostingu, na
którym jest postawiony, zostaw złotówkę, nowigradzką koronę czy nawet
rubla!
</div>
<div class="modal_payments">
<div>Płatności dokonasz korzystając z poniższych metod:</div>
<div class="payment">
<div>
<a target="_blank" href="https://paypal.me/spythere">
<img :src="paypalIcon" alt="icon-paypal" />
<span>PAYPAL</span>
</a>
</div>
</div>
<div class="payment">
<div>
<div class="payment_open" v-if="showNumber">
94 1140 2004 0000 3502 7784 9203
</div>
<div class="payment_closed" v-else @click="showNumber = true">
<b>PRZELEW NA KONTO</b>
</div>
</div>
</div>
</div>
<div>Wielkie dzięki i do zobaczenia na szlaku!</div>
<div class="modal_buttons">
<button class="button" @click="toggleModal">PRZYJĄŁEM!</button>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Modal extends Vue {
@Prop() modalHidden!: boolean;
showNumber = false;
STORAGE_ID = "modal_donation";
paypalIcon: string = require("@/assets/icon-paypal.svg");
toggleModal(type: string) {
this.$emit("toggleModal");
}
}
</script>
<style lang="scss" scoped>
@import "../../styles/responsive";
.modal {
z-index: 100;
font-size: calc(1rem + 0.8vw);
padding: 0.5rem;
position: fixed;
top: 50%;
left: 50%;
width: 65%;
max-width: 750px;
transform: translate(-50%, -50%);
background: rgba(black, 0.85);
box-shadow: 0 0 20px 5px #1f1f1f;
color: white;
@include bigScreen() {
font-size: 2rem;
}
@include smallScreen() {
font-size: 1.2rem;
width: 95%;
}
&_content {
margin: 0 auto;
text-align: center;
padding: 0.5em;
}
&_title {
color: gold;
font-weight: bold;
}
&_body {
font-size: 0.75em;
&-header {
text-align: justify;
}
> div {
margin-top: 0.5em;
}
}
&_payments {
> span {
margin-right: 0.5em;
}
.payment {
display: flex;
justify-content: center;
margin-top: 0.3em;
&_closed {
cursor: pointer;
&:hover {
color: gold;
}
}
a {
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.2em;
padding: 0.15em 0.3em;
font-size: 1.1em;
font-weight: bold;
}
img {
width: 1.2em;
margin-right: 0.2em;
}
}
}
&_buttons {
display: flex;
justify-content: center;
> button {
margin: 0 0.5em;
}
}
}
</style>
File diff suppressed because one or more lines are too long
+1 -3
View File
@@ -65,7 +65,6 @@ import inputData from "@/data/options.json";
import StationTable from "@/components/StationsView/StationTable.vue";
import FilterCard from "@/components/StationsView/FilterCard.vue";
import DonationModal from "@/components/Global/DonationModal.vue";
import ActionButton from "@/components/Global/ActionButton.vue";
import { StoreData } from "@/scripts/interfaces/StoreData";
import { DataStatus } from "@/scripts/enums/DataStatus";
@@ -74,7 +73,6 @@ import { DataStatus } from "@/scripts/enums/DataStatus";
components: {
StationTable,
FilterCard,
DonationModal,
ActionButton,
},
})
@@ -270,7 +268,7 @@ export default class StationsView extends Vue {
a:hover img,
a:focus img {
box-shadow: 0 0 10px 3px #0f62ce;
box-shadow: 0 0 10px 4px #04477e;
}
}