mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 21:38:13 +00:00
Poprawki błędów (1.3.5)
This commit is contained in:
@@ -1,166 +1,166 @@
|
||||
<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";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
|
||||
@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.3rem;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
width: 65%;
|
||||
max-width: 950px;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background: rgba(black, 0.85);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<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";
|
||||
|
||||
import StorageManager from "@/scripts/storageManager";
|
||||
|
||||
@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.3rem;
|
||||
|
||||
border-radius: 1em;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
width: 65%;
|
||||
max-width: 950px;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background: rgba(black, 0.85);
|
||||
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>
|
||||
+108
-108
@@ -1,109 +1,109 @@
|
||||
<template>
|
||||
<div class="select-box">
|
||||
<div class="title">Sortuj według</div>
|
||||
|
||||
<div class="option-selected" @click="toggleOptionList">
|
||||
<span>{{ selectedOption }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<div class="option-container">
|
||||
<ul class="option-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option-item"
|
||||
v-for="(option, i) in sortOptionList"
|
||||
:key="i"
|
||||
@click="() => chooseOption(option)"
|
||||
>
|
||||
<input type="option-radio" name="sort" :id="option.id" />
|
||||
<label :for="option.id">{{ option.content }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class SelectBox extends Vue {
|
||||
@Prop() title!: string;
|
||||
@Prop() optionList!: string[];
|
||||
|
||||
selectedOption: string = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.option {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-list {
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
}
|
||||
<template>
|
||||
<div class="select-box">
|
||||
<div class="title">Sortuj według</div>
|
||||
|
||||
<div class="option-selected" @click="toggleOptionList">
|
||||
<span>{{ selectedOption }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<div class="option-container">
|
||||
<ul class="option-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option-item"
|
||||
v-for="(option, i) in sortOptionList"
|
||||
:key="i"
|
||||
@click="() => chooseOption(option)"
|
||||
>
|
||||
<input type="option-radio" name="sort" :id="option.id" />
|
||||
<label :for="option.id">{{ option.content }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
@Component
|
||||
export default class SelectBox extends Vue {
|
||||
@Prop() title!: string;
|
||||
@Prop() optionList!: string[];
|
||||
|
||||
selectedOption: string = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.option {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-list {
|
||||
background: #333;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 150px;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
width: 100%;
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user