diff --git a/src/App.scss b/src/App.scss index 611f939..eb9bfdb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -49,12 +49,15 @@ min-width: 0; min-height: 100vh; + header { flex: 0 0 auto; } main { flex: 1 1 auto; + + padding: 0 0.5em; } footer { @@ -79,14 +82,21 @@ justify-content: center; position: relative; - background: $primaryCol; - padding: 0.5em 0.3em 0 0.3em; - - border-radius: 0 0 1em 1em; - + background-color: $primaryCol; } .header { + &_container { + display: flex; + justify-content: center; + position: relative; + + width: 1350px; + padding: 0.5em 0.3em 0 0.3em; + border-radius: 0 0 1em 1em; + + } + &_brand { position: relative; width: 100%; @@ -112,6 +122,7 @@ cursor: pointer; } } + &_info { display: flex; @@ -133,61 +144,36 @@ padding: 0.5em; } - &_badges { - position: absolute; - top: 0; - right: 0; - - .badge { - display: flex; - align-items: center; - justify-content: center; - - font-weight: bold; - padding: 3px 10px; - margin: 0.5em 0; - - span { - margin-left: 0.5em; - } - } - - img { - width: 1.3em; - } - - - @media only screen and (max-width: 850px) { - // display: flex; - // top: 100%; - // right: 1em; - - left: 0; - right: auto; - bottom: 0.5em; - top: auto; +} + +// ICONS +.icons { + display: flex; + position: absolute; + right: 0.5em; + bottom: 0; + + a { + margin: 0.5em 0; + margin-left: 0.6em; + } + + img { + width: 1.9em; + } + + @include smallScreen() { + flex-direction: column; + right: 0.25em; + right: auto; + left: 0.5em; - .badge { - // margin: 0 0.25em; - - span { - display: none; - } - } + a { + margin: 0.25em 0; } } -} - -.badge.paypal { - background-color: white; - color: black; -} - -.badge.discord { - background-color: black; - color: white; - font-size: 0.9em; + } // COUNTER diff --git a/src/App.vue b/src/App.vue index c816742..5f865a9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,75 +7,74 @@

Absolutny zakaz wjazdu!

-->
-
- +
+
+ + + icon paypal + + + icon discord + + +
- - - S - tacj -
@@ -143,9 +142,7 @@ export default defineComponent({ trainCount: computed(() => data.value.trainList.length), - dispatcherCount: computed( - () => data.value.stationList.filter((station) => station.onlineInfo).length - ), + dispatcherCount: computed(() => data.value.stationList.filter((station) => station.onlineInfo).length), openFilterCard() { isFilterCardVisible.value = true; @@ -163,7 +160,7 @@ export default defineComponent({ en: require('@/assets/icon-en.jpg'), pl: require('@/assets/icon-pl.svg'), error: require('@/assets/icon-error.svg'), - paypal: require('@/assets/icon-paypal.svg'), + dollar: require('@/assets/icon-dollar.svg'), discord: require('@/assets/icon-discord.png'), }, }), diff --git a/src/assets/icon-dollar.svg b/src/assets/icon-dollar.svg new file mode 100644 index 0000000..cdce7d6 --- /dev/null +++ b/src/assets/icon-dollar.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index 9a03170..1c56583 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -342,19 +342,21 @@ section.station_table { .table_wrapper { overflow: auto; + } table { white-space: nowrap; border-collapse: collapse; + min-width: 1350px; + - min-width: 1000px; thead th { position: sticky; top: 0; - min-width: 85px; + min-width: 75px; padding: 0.5em; background-color: $primaryCol; @@ -391,7 +393,7 @@ tr.station { background-color: lighten($rowCol, 20); } - & > td { + td { padding: 0.25em 1em; text-align: center; diff --git a/src/components/TrainsView/TrainInfoExtended.vue b/src/components/TrainsView/TrainInfoExtended.vue index e8b2c2a..4f39a61 100644 --- a/src/components/TrainsView/TrainInfoExtended.vue +++ b/src/components/TrainsView/TrainInfoExtended.vue @@ -31,7 +31,13 @@ {{ train.driverName }} - offline + offline @@ -81,7 +87,10 @@ {{ $t('trains.current-scenery') }} - {{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)  + {{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} + (offline)  @@ -89,8 +98,10 @@ - {{ $t('trains.current-track') }} {{ train['connectedTrack'] }} + {{ $t('trains.current-track') }} {{ train['connectedTrack'] }}  + + ({{ displayDistance(train.distance) }})
diff --git a/src/components/TrainsView/TrainInfoSimple.vue b/src/components/TrainsView/TrainInfoSimple.vue index e11cf9a..50086ec 100644 --- a/src/components/TrainsView/TrainInfoSimple.vue +++ b/src/components/TrainsView/TrainInfoSimple.vue @@ -13,9 +13,14 @@  | {{ train.driverName }} - offline + />
@@ -52,7 +57,8 @@ - {{ $t('trains.current-scenery') }} {{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, "") }} (offline)  + {{ $t('trains.current-scenery') }} + {{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }} (offline)  @@ -60,8 +66,10 @@ - {{ $t('trains.current-track') }} {{ train['connectedTrack'] }} + {{ $t('trains.current-track') }} {{ train['connectedTrack'] }}  + + ({{ displayDistance(train.distance) }})
@@ -107,7 +115,7 @@ export default defineComponent({ data: () => ({ icons: { warning: require('@/assets/icon-warning.svg'), - offline: require("@/assets/icon-offline.svg") + offline: require('@/assets/icon-offline.svg'), }, }), }); @@ -116,7 +124,8 @@ export default defineComponent({