mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
Aktualizacja
This commit is contained in:
@@ -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
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user