diff --git a/package.json b/package.json index 2a8b705..7b71d72 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "stacjownik", - "version": "1.9.3", + "version": "1.9.5", "private": true, "scripts": { "serve": "vue-cli-service serve", diff --git a/src/App.scss b/src/App.scss index 28982ad..a868f58 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,8 +1,7 @@ -@import "./styles/responsive.scss"; -@import "./styles/variables.scss"; -@import "./styles/global.scss"; -@import "./styles/scenery_status.scss"; - +@import './styles/responsive.scss'; +@import './styles/variables.scss'; +@import './styles/global.scss'; +@import './styles/scenery_status.scss'; // VUE ROUTE CHANGE ANIMATION .view-anim { @@ -49,7 +48,6 @@ min-width: 0; min-height: 100vh; - header { flex: 0 0 auto; } @@ -80,7 +78,7 @@ .app_header { display: flex; justify-content: center; - + position: relative; background-color: $primaryCol; } @@ -94,35 +92,13 @@ width: 1350px; padding: 0.5em 0.3em 0 0.3em; border-radius: 0 0 1em 1em; - } &_brand { - position: relative; - width: 100%; - font-size: 4.25em; - - text-align: center; - - .logo-image { - width: 0.6em; - margin: 0 0.05em; - } - - .brand_lang { - position: absolute; - right: 0; - - transform: translate(110%, -35%); - - img { - width: 0.6em; - } - - cursor: pointer; + img { + width: 22em; } } - &_info { display: flex; @@ -144,37 +120,62 @@ padding: 0.5em; } + &_icons { + position: absolute; + right: 0; + top: 0; + height: 100%; + + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + padding: 1em 0.5em; + + @include smallScreen() { + right: auto; + left: 0.5em; + padding: 0.5em 0; + + align-items: center; + } + } } // ICONS .icons { - display: flex; - position: absolute; - right: 0.5em; - bottom: 0; + position: relative; - a { - margin: 0.5em 0; - margin-left: 0.6em; - user-select: none; - } - - img { - width: 1.9em; + &-top { + img { + width: 2.5em; + + cursor: pointer; + } + + margin-bottom: 0.5em; } - @include smallScreen() { - flex-direction: column; - right: 0.25em; - right: auto; - left: 0.5em; - + &-bottom { + display: flex; a { - margin: 0.25em 0; + margin-left: 0.6em; + user-select: none; + } + + img { + width: 1.9em; + } + + @include smallScreen() { + flex-direction: column; + + a { + margin: 0.25em 0; + } } } - } // COUNTER @@ -207,4 +208,4 @@ footer.app_footer { text-align: center; vertical-align: middle; -} \ No newline at end of file +} diff --git a/src/App.vue b/src/App.vue index 87f3c30..49386b8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,11 +8,16 @@ -->
-
- +
+ + icon-pl + icon-en + + icon paypal + icon discord @@ -22,32 +27,7 @@
- - S - tacj - - wnik - - - - icon-pl - - - icon-en - - + Stacjownik @@ -89,10 +69,8 @@
@@ -156,6 +134,8 @@ export default defineComponent({ hasReleaseNotes: false, currentLang: 'pl', + brand_logo: require('@/assets/stacjownik-header-logo.svg'), + icons: { en: require('@/assets/icon-en.jpg'), pl: require('@/assets/icon-pl.svg'), diff --git a/src/assets/stacjownik-header-logo.svg b/src/assets/stacjownik-header-logo.svg new file mode 100644 index 0000000..b4c0e57 --- /dev/null +++ b/src/assets/stacjownik-header-logo.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/stacjownik-logo.png b/src/assets/stacjownik-logo.png deleted file mode 100644 index 5c8519c..0000000 Binary files a/src/assets/stacjownik-logo.png and /dev/null differ diff --git a/src/assets/stacjownik-logo.svg b/src/assets/stacjownik-logo.svg deleted file mode 100644 index ab09157..0000000 --- a/src/assets/stacjownik-logo.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue index 0c14080..ecf2e2f 100644 --- a/src/components/TrainsView/TrainInfo.vue +++ b/src/components/TrainsView/TrainInfo.vue @@ -206,6 +206,7 @@ export default defineComponent({ width: 6em; height: 1em; + margin: 0.5em 0; .bar-fg, .bar-bg { @@ -243,6 +244,8 @@ export default defineComponent({ grid-template-columns: 1fr; gap: 1em 0; text-align: center; + + font-size: 1.25em; } .info-stats {