Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 13:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: added links to other external tools; changed design of the donation button

Browse Source
This commit is contained in:
Spythere
2025-05-02 02:36:19 +02:00
parent c30c2206ce
commit f73c3f4aec
7 changed files with 160 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StationsView/StationFilterCard.vue
+7 -8
View File
@@ -411,11 +411,6 @@ h3.section-header {
.card_controls {
display: flex;
gap: 0.5em;
input {
border-radius: 0.5em 0.5em 0 0;
height: 100%;
}
}
.card_content {
@@ -606,7 +601,7 @@ h3.section-header {
border: 3px solid var(--clr-primary);
background-color: #333;
@include responsive.smallScreen{
@include responsive.smallScreen {
width: 15px;
height: 15px;
margin-top: -5px;
@@ -625,7 +620,7 @@ h3.section-header {
cursor: pointer;
@include responsive.smallScreen{
@include responsive.smallScreen {
width: 1em;
height: 1em;
border: 3px solid var(--clr-primary);
@@ -658,7 +653,7 @@ h3.section-header {
}
}
@include responsive.smallScreen{
@include responsive.smallScreen {
.slider {
display: flex;
flex-wrap: wrap;
@@ -672,5 +667,9 @@ h3.section-header {
text-align: center;
}
}
.card_controls > button > p {
display: none;
}
}
</style>
src/components/StationsView/StationStats.vue
+5 -1
View File
@@ -8,7 +8,7 @@
<button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
<img src="/images/icon-stats.svg" alt="Open filters icon" />
{{ $t('station-stats.stats-button') }}
<span>{{ $t('station-stats.stats-button') }}</span>
</button>
<transition name="dropdown-anim">
@@ -282,5 +282,9 @@ h1.stats-title img {
h1.stats-title {
text-align: center;
}
.filter-button > span {
display: none;
}
}
</style>
src/locales/en.json
+3 -2
View File
@@ -50,7 +50,9 @@
"migration-confirm": "Roger that!",
"offline": "App is in the offline mode!",
"tooltip-driver-offline": "Driver is offline",
"tooltip-scenery-offline": "Scenery is offline"
"tooltip-scenery-offline": "Scenery is offline",
"pojazdownik-link-content": "POJAZDOWNIK",
"gnr-link-content": "WRITTEN ORDERS"
},
"footer": {
"discord": "Stacjownik Discord server"
@@ -399,7 +401,6 @@
"number-propositions": "PROPOSE NUMBER",
"stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
"stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
"number-propositions-header": "Generate number examples for selected category:",
"number-propositions-third-number": "Third digit:",
"number-propositions-last-nums": "{count} last digits from the range of:",
src/locales/pl.json
+3 -3
View File
@@ -47,7 +47,9 @@
"no-result": "Brak wyników o podanych kryteriach!",
"offline": "Aplikacja w trybie offline!",
"tooltip-driver-offline": "Maszynista offline",
"tooltip-scenery-offline": "Sceneria offline"
"tooltip-scenery-offline": "Sceneria offline",
"pojazdownik-link-content": "POJAZDOWNIK",
"gnr-link-content": "ROZKAZY PISEMNE"
},
"footer": {
"discord": "Serwer Discord Stacjownika"
@@ -386,13 +388,11 @@
"number-propositions": "ZAPROPONUJ NUMER",
"stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
"stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
"number-propositions-header": "Wygeneruj propozycje numerów dla kategorii pociągu:",
"number-propositions-third-number": "Trzecia cyfra:",
"number-propositions-last-nums": "{count} ostatnie cyfry z przedziału:",
"number-propositions-title": "Propozycje:",
"number-propositions-empty": "Brak propozycji dla wybranej kategorii! :/"
},
"train-stats": {
"stats-button": "STATYSTYKI",
src/views/StationsView.vue
+71 -30
View File
@@ -1,24 +1,46 @@
<template>
<section class="stations-view">
<div class="wrapper">
<div class="stations-options">
<StationFilterCard
:showCard="filterCardOpen"
:exit="filterCardOpen = false"
ref="filterCardRef"
/>
<div class="stations-topbar">
<div class="topbar-cards">
<StationFilterCard
:showCard="filterCardOpen"
:exit="filterCardOpen = false"
ref="filterCardRef"
/>
<StationStats />
<StationStats />
</div>
<button
class="btn-donation btn--image"
ref="btn"
@click="isDonationCardOpen = true"
@focus="isDonationCardOpen = false"
>
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
<span>{{ $t('donations.button-title') }}</span>
</button>
<div class="topbar-links">
<a
class="a-button btn--image gnr-link"
href="https://generator-td2.web.app/"
target="_blank"
>
<img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
<span>{{ $t('app.gnr-link-content') }}</span>
</a>
<a
class="a-button btn--image pojazdownik-link"
href="https://pojazdownik-td2.web.app/"
target="_blank"
>
<img src="/images/icon-pojazdownik.svg" alt="Pojazdownik app icon" />
<span>{{ $t('app.pojazdownik-link-content') }}</span>
</a>
<button
class="btn--image donation-button"
ref="btn"
@click="isDonationCardOpen = true"
@focus="isDonationCardOpen = false"
>
<img src="/images/icon-diamond.svg" alt="dollar donation icon" />
<span>{{ $t('donations.button-title') }}</span>
</button>
</div>
</div>
<DonationCard :is-card-open="isDonationCardOpen" @toggle-card="toggleDonationCard" />
@@ -94,32 +116,51 @@ export default defineComponent({
width: var(--max-container-width);
}
.stations-options {
.stations-topbar {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
justify-content: space-between;
position: relative;
margin-bottom: 0.5em;
& > div {
display: flex;
gap: 0.5em;
}
}
button.btn-donation {
button.donation-button {
margin-left: auto;
background-color: #254069;
background: #833AB4;
background: linear-gradient(120deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(131, 58, 180, 1) 100%);
transition: background 300ms;
background-size: 300%;
&:hover {
background-color: #2e4f81;
}
@include responsive.smallScreen {
span {
display: none;
}
background-size: 100%;
}
}
.count {
padding: 0.5em;
a.pojazdownik-link {
background-color: #1f263b;
&:hover {
background-color: #2e3958;
}
}
a.gnr-link {
background-color: #141414;
&:hover {
background-color: #222222;
}
}
@media only screen and (max-width: 900px) {
.topbar-links > * > span {
display: none;
}
}
</style>