From 12c7c4401464415d8aa4e55bc6318aec007ea204 Mon Sep 17 00:00:00 2001 From: Spythere Date: Sat, 13 Mar 2021 19:11:00 +0100 Subject: [PATCH] =?UTF-8?q?Poprawki=20wizualne=20responsywno=C5=9Bci?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 39 ++++++----- src/components/SceneryView/SceneryInfo.vue | 2 +- .../SceneryView/SceneryTimetable.vue | 8 +-- src/components/StationsView/FilterCard.vue | 7 +- src/components/StationsView/StationTable.vue | 17 ++--- src/components/TrainsView/TrainOptions.vue | 4 +- src/components/TrainsView/TrainStats.vue | 2 +- src/components/TrainsView/TrainTable.vue | 66 ++++++------------- src/lang/en.json | 3 +- src/lang/pl.json | 5 +- src/store/modules/DataModule.ts | 18 +++++ src/styles/global.scss | 29 +++++--- src/styles/responsive.scss | 7 ++ src/views/StationsView.vue | 32 +++------ src/views/TrainsView.vue | 4 -- 15 files changed, 127 insertions(+), 116 deletions(-) create mode 100644 src/store/modules/DataModule.ts diff --git a/src/App.vue b/src/App.vue index e060dc2..6ba09c0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -98,6 +98,9 @@ import Clock from "@/components/App/Clock.vue"; import StorageManager from "@/scripts/storageManager"; +import DataModule from "@/store/modules/DataModule"; +import { getModule } from "vuex-module-decorators"; + @Component({ components: { Clock, UpdateModal }, }) @@ -115,9 +118,19 @@ export default class App extends Vue { iconEN = require("@/assets/icon-en.jpg"); iconPL = require("@/assets/icon-pl.svg"); + dataStore: DataModule = getModule(DataModule); + + get test() { + return this.dataStore.getTest; + } + mounted() { this.synchronizeData(); + setTimeout(() => { + this.dataStore.fetchTest(); + }, 3000); + if (StorageManager.getStringValue("lang")) { this.changeLang(StorageManager.getStringValue("lang")); } else if (window.navigator.language) { @@ -213,23 +226,19 @@ export default class App extends Vue { overflow: hidden; - font-size: calc(0.7rem + 0.2vw); + font-size: 1rem; - @include bigScreen { - font-size: 1rem; + @include midScreen() { + font-size: 0.95rem; } - @include smallScreen { - font-size: 0.6rem; + @include smallScreen() { + font-size: 0.7rem; } } // CONTAINER .app_container { - // display: grid; - // grid-template-rows: auto 1fr auto; - // grid-template-columns: minmax(0, 1fr); - display: flex; flex-flow: column; @@ -264,7 +273,7 @@ export default class App extends Vue { &_brand { position: relative; width: 100%; - font-size: 4.5em; + font-size: 4.25em; text-align: center; @@ -276,10 +285,10 @@ export default class App extends Vue { position: absolute; right: 0; - transform: translate(110%, -40%); + transform: translate(110%, -35%); img { - width: 0.5em; + width: 0.6em; } cursor: pointer; @@ -290,7 +299,7 @@ export default class App extends Vue { display: flex; justify-content: space-between; - font-size: 1.35em; + font-size: 1.25em; margin: 0 0.3em; padding: 0.2em; @@ -302,7 +311,7 @@ export default class App extends Vue { border-radius: 0.7em; - font-size: 1.35em; + font-size: 1.25em; padding: 0.5em; } } @@ -325,7 +334,7 @@ export default class App extends Vue { // FOOTER footer.app_footer { max-width: 100%; - padding: 0.3rem; + padding: 0.5em; z-index: 10; diff --git a/src/components/SceneryView/SceneryInfo.vue b/src/components/SceneryView/SceneryInfo.vue index 42bb30d..20e704b 100644 --- a/src/components/SceneryView/SceneryInfo.vue +++ b/src/components/SceneryView/SceneryInfo.vue @@ -346,7 +346,7 @@ h3 { .user, .spawn { font-weight: 600; - font-size: 0.9em; + font-size: 0.85em; display: inline-block; padding: 0; diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue index 2d703d3..a573791 100644 --- a/src/components/SceneryView/SceneryTimetable.vue +++ b/src/components/SceneryView/SceneryTimetable.vue @@ -265,7 +265,7 @@ h3 { } label { - padding: 0.5rem 1rem; + padding: 0.5em 0.35em; cursor: pointer; } } @@ -292,12 +292,12 @@ h3 { justify-content: space-between; align-items: center; - padding: 0.5rem 1rem; + padding: 0.35em 0.7em; min-width: 10em; cursor: pointer; span { - margin-right: 2rem; + margin-right: 2em; } img { @@ -346,7 +346,7 @@ h3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); - padding: 0 0.5rem; + padding: 0 0.35em; background: #555; diff --git a/src/components/StationsView/FilterCard.vue b/src/components/StationsView/FilterCard.vue index de43a42..0b61320 100644 --- a/src/components/StationsView/FilterCard.vue +++ b/src/components/StationsView/FilterCard.vue @@ -152,7 +152,11 @@ export default class FilterCard extends Vue { @import "../../styles/card"; .card { - font-size: 1.45em; + font-size: 1.25em; + + @include smallScreen() { + font-size: 1.35em; + } &-title { font-size: 2em; @@ -186,6 +190,7 @@ export default class FilterCard extends Vue { button { margin: 0 0.3em; border: 1px solid white; + font-size: 0.85em; } } diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue index 04d8b64..d9f708a 100644 --- a/src/components/StationsView/StationTable.vue +++ b/src/components/StationsView/StationTable.vue @@ -208,7 +208,7 @@
- Ups! Brak stacji do wyświetlenia! + {{ $t("sceneries.no-stations") }}
@@ -310,7 +310,6 @@ $rowCol: #4b4b4b; section.station_table { overflow: auto; overflow-y: hidden; - font-size: calc(0.55rem + 0.35vw); font-weight: 500; } @@ -365,14 +364,14 @@ tr.station { } & > td { - padding: 0.3rem 1rem; + padding: 0.25em 1em; text-align: center; cursor: pointer; @include smallScreen() { margin: 0; - padding: 0.1rem 0.5rem; + padding: 0.1em 0.5em; } } } @@ -416,8 +415,10 @@ td.station { } .track { - margin: 0 0.3rem; - padding: 0.5em; + margin: 0 0.3em; + padding: 0.35em 0.1em; + font-size: 1.05em; + white-space: pre-wrap; } } @@ -438,8 +439,8 @@ td.station { text-align: center; font-size: 1.5em; - padding: 1rem; - margin: 1rem 0; + padding: 1em; + margin: 1em 0; background: #333; } diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue index ff9fe45..e4b4415 100644 --- a/src/components/TrainsView/TrainOptions.vue +++ b/src/components/TrainsView/TrainOptions.vue @@ -172,7 +172,7 @@ export default class TrainOptions extends Vue { width: 100%; margin: 0.5rem 0; - font-size: 1.15em; + font-size: 0.85rem; } } @@ -264,8 +264,6 @@ export default class TrainOptions extends Vue { padding: 0.5rem 1rem; margin: 0; - font-size: 1em; - min-width: 85%; } diff --git a/src/components/TrainsView/TrainStats.vue b/src/components/TrainsView/TrainStats.vue index 0ee784e..1ade8b8 100644 --- a/src/components/TrainsView/TrainStats.vue +++ b/src/components/TrainsView/TrainStats.vue @@ -212,7 +212,7 @@ export default class TrainStats extends Vue { } .train-stats { - font-size: 1.15em; + font-size: 0.9rem; z-index: 10; margin-bottom: 0.5em; diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index be04a55..1d53320 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/src/components/TrainsView/TrainTable.vue @@ -17,8 +17,8 @@ @click="changeScheduleShowState(train.timetableData.timetableId)" >
-
-
+
+
TWR @@ -37,7 +37,7 @@
-
+
ogólne", "users": "Maszyniści online", "spawns": "Otwarte spawny", - "timetables": "Aktywne rozkłady jazdy" + "timetables": "Aktywne rozkłady jazdy", + "no-stations": "Brak stacji do wyświetlenia!" }, "trains": { - "no-trains": "Ups! Brak pociągów online!", + "no-trains": "Brak pociągów online!", "stats": "STATYSTYKI RUCHU", "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]", "stats-length": "DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]", diff --git a/src/store/modules/DataModule.ts b/src/store/modules/DataModule.ts new file mode 100644 index 0000000..3c64758 --- /dev/null +++ b/src/store/modules/DataModule.ts @@ -0,0 +1,18 @@ +import store from "@/store"; +import { Module, VuexModule, Mutation, Action, MutationAction } from "vuex-module-decorators"; + +@Module({ dynamic: true, store, name: "dataModule" }) +export default class MyModule extends VuexModule { + test: string = "xd"; + + get getTest() { + return this.test; + } + + @MutationAction + async fetchTest() { + const fetched = "aaa"; + + return { test: fetched }; + } +} diff --git a/src/styles/global.scss b/src/styles/global.scss index 89b8f65..5bc8cd8 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -32,19 +32,31 @@ body { .tooltip { position: relative; - + + background-color: var(--clr-accent); + padding: .1em .5em; + border-radius: 1em; + + + display: flex; + justify-content: center; + align-items: center; + & > &-text { display: inline-block; width: 150px; - padding: .5rem .35rem; - background-color: #830000; - border-radius: .5rem; + + font-size: 0.9em; + + background-color: var(--clr-accent); + + padding: .15em .5em; + border-radius: 1em; display: inline-block; max-width: 150px; - font-size: 1em; text-align: center; color: #fff; @@ -66,7 +78,7 @@ body { margin-left: -5px; border-width: 5px; border-style: solid; - border-color: #830000 transparent transparent transparent; + border-color: var(--clr-accent) transparent transparent transparent; } } @@ -137,10 +149,11 @@ input { border: none; color: #bdbdbd; - font-size: 0.9em; + + font-size: 1em; outline: none; - padding: 0.35em; + padding: 0.35em 0.5em; cursor: pointer; transition: all 0.3s; diff --git a/src/styles/responsive.scss b/src/styles/responsive.scss index 09f6520..baf7847 100644 --- a/src/styles/responsive.scss +++ b/src/styles/responsive.scss @@ -4,6 +4,13 @@ } } + +@mixin midScreen() { + @media only screen and (max-width: 950px) { + @content; + } +} + @mixin bigScreen() { @media only screen and (min-width: 2000px) { @content; diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue index 8ad33f3..c64dada 100644 --- a/src/views/StationsView.vue +++ b/src/views/StationsView.vue @@ -24,7 +24,7 @@

{{ $t("options.donate") }}

-->
- +
@@ -243,7 +243,7 @@ export default class StationsView extends Vue { .stations_view { position: relative; - padding: 1rem 0; + padding: 1em 0; min-height: 100%; } @@ -255,37 +255,25 @@ export default class StationsView extends Vue { .stations_body { margin: 0 auto; overflow: auto; +} - & > .body_bar { - display: flex; - justify-content: space-between; - } +.body_bar { + display: flex; + justify-content: space-between; } .bar_actions { - display: flex; - width: 100%; - font-size: 1.15em; - - button { - margin-right: 0.5em; - } + font-size: 1.1em; } .bar_indicators { - display: flex; - align-items: flex-end; + border: 1px solid red; > span { - display: flex; - justify-content: center; - align-items: center; - - width: 2.5em; - height: 2.5em; margin-left: 0.5em; + padding: 0.5em 0.5em; // background-color: #e68e00; border-radius: 1em 1em 0 0; diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue index 9728773..4b76536 100644 --- a/src/views/TrainsView.vue +++ b/src/views/TrainsView.vue @@ -136,10 +136,6 @@ export default class TrainsView extends Vue { max-width: 1300px; padding: 0 0.5rem; - - @include bigScreen() { - font-size: 0.9rem; - } } @include smallScreen {