Aktualizacja

src/components/Global/DonationModal.vue

@@ -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>