Dodano przycisk PayPal

src/App.vue

@@ -20,6 +20,7 @@ git <template>
             </span>
 
             <span class="brand_lang">
+
               <span
                 class="lang pl"
                 @click="changeLang('en')"
@@ -100,13 +101,8 @@ git <template>
         >
           Spythere
         </a>
-        2021 | v{{ VERSION }} | [
+        2021 | v{{ VERSION }}
-        <a
+
-          target="_blank"
-          href="https://paypal.me/spythere"
-        >{{ $t("app.support") }}!
-        </a>
-        ]
       </footer>
     </div>
   </div>
@@ -378,5 +374,6 @@ footer.app_footer {
   color: white;
 
   text-align: center;
+  vertical-align: middle;
 }
 </style>

src/styles/global.scss

@@ -137,6 +137,8 @@ input {
 }
 
 a {
+  display: inline-block;
+  
   color: white;
   text-decoration: none;
 

src/views/StationsView.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="stations-view">
-    <DonationModal :modalHidden="modalHidden" @toggleModal="toggleModal" />
+    <DonationModal
+      :modalHidden="modalHidden"
+      @toggleModal="toggleModal"
+    />
 
     <div class="wrapper">
       <div class="body">
@@ -13,29 +16,20 @@
             />
             <p>{{ $t("options.filters") }}</p>
           </action-button>
-        </div>
-        <!-- 
-          <div class="bar_indicators">
-            <transition name="indicator-anim">
-              <span
-                class="indicator_scenery-data"
-                v-if="data.dataConnectionStatus < 2"
-                :class="dataStatusClass"
-              >
-                <img :src="trainIcon" alt="icon-train" />
-              </span>
-            </transition>
 
-            <transition name="indicator-anim">
+          <div class="paypal-link">
-              <span
+            <a
-                class="indicator_timetable-data"
+              target="_blank"
-                v-if="data.timetableDataStatus < 2"
+              href="https://paypal.me/spythere"
-                :class="timetableDataStatusClass"
+            >
+              <img
+                src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white"
+                alt="PayPal image"
+                style="width: 7em"
               >
-                <img :src="timetableIcon" alt="icon-timetable" />
+            </a>
-              </span>
+          </div>
-            </transition>
+        </div>
-          </div> -->
 
         <StationTable
           :stations="computedStations"
@@ -255,47 +249,34 @@ export default class StationsView extends Vue {
 }
 
 .body {
-  margin: 0 auto;
+  max-width: 100%;
-  overflow: auto;
 }
 
 .options-bar {
   display: flex;
+
   margin-bottom: 0.5em;
 }
 
-// .bar_indicators {
+.paypal-link {
-//   border: 1px solid red;
+  flex-grow: 2;
+  text-align: right;
 
-//   & > span {
+  img {
-//     margin-left: 0.5em;
+    vertical-align: middle;
-//     padding: 0.5em 0.5em;
+    border-radius: 0.5em;
+    transition: box-shadow 150ms;
+  }
 
-//     // background-color: #e68e00;
+  a:hover img,
-//     border-radius: 1em 1em 0 0;
+  a:focus img {
-
+    box-shadow: 0 0 10px 3px #0f62ce;
-//     &.loading {
+  }
-//       background-color: $accentCol;
+}
-//     }
-
-//     &.error {
-//       background-color: $errorCol;
-//     }
-
-//     &.success {
-//       background-color: $secondaryCol;
-//     }
-
-//     & > img {
-//       width: 1.7em;
-//       animation: blinkAnim 2s ease-in-out infinite forwards;
-//     }
-//   }
-// }
 
 @include smallScreen {
   .options-bar {
-    font-size: 1.2em;
+    font-size: 1.1em;
   }
 }
 </style>