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 StationTable from "@/components/StationsView/StationTable.vue";
|
||||||
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
import FilterCard from "@/components/StationsView/FilterCard.vue";
|
||||||
import DonationModal from "@/components/Global/DonationModal.vue";
|
|
||||||
import ActionButton from "@/components/Global/ActionButton.vue";
|
import ActionButton from "@/components/Global/ActionButton.vue";
|
||||||
import { StoreData } from "@/scripts/interfaces/StoreData";
|
import { StoreData } from "@/scripts/interfaces/StoreData";
|
||||||
import { DataStatus } from "@/scripts/enums/DataStatus";
|
import { DataStatus } from "@/scripts/enums/DataStatus";
|
||||||
@@ -74,7 +73,6 @@ import { DataStatus } from "@/scripts/enums/DataStatus";
|
|||||||
components: {
|
components: {
|
||||||
StationTable,
|
StationTable,
|
||||||
FilterCard,
|
FilterCard,
|
||||||
DonationModal,
|
|
||||||
ActionButton,
|
ActionButton,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@@ -270,7 +268,7 @@ export default class StationsView extends Vue {
|
|||||||
|
|
||||||
a:hover img,
|
a:hover img,
|
||||||
a:focus 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