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

Poprawki wizualne responsywności

Browse Source
This commit is contained in:
Spythere
2021-03-13 19:11:00 +01:00
parent 2f2c247574
commit 12c7c44014
15 changed files with 127 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+24 -15
View File
@@ -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;
src/components/SceneryView/SceneryInfo.vue
+1 -1
View File
@@ -346,7 +346,7 @@ h3 {
.user,
.spawn {
font-weight: 600;
font-size: 0.9em;
font-size: 0.85em;
display: inline-block;
padding: 0;
src/components/SceneryView/SceneryTimetable.vue
+4 -4
View File
@@ -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;
src/components/StationsView/FilterCard.vue
+6 -1
View File
@@ -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;
}
}
src/components/StationsView/StationTable.vue
+9 -8
View File
@@ -208,7 +208,7 @@
</div>
<div class="no-stations" v-if="stations.length == 0">
Ups! Brak stacji do wyświetlenia!
{{ $t("sceneries.no-stations") }}
</div>
</section>
</template>
@@ -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;
}
src/components/TrainsView/TrainOptions.vue
+1 -3
View File
@@ -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%;
}
src/components/TrainsView/TrainStats.vue
+1 -1
View File
@@ -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;
src/components/TrainsView/TrainTable.vue
+20 -46
View File
@@ -17,8 +17,8 @@
@click="changeScheduleShowState(train.timetableData.timetableId)"
>
<div class="info-main">
<div class="info-category">
<div class="category-left">
<div class="info-top">
<div class="top-category">
<span class="warning twr" v-if="train.timetableData.TWR">
TWR
</span>
@@ -37,7 +37,7 @@
</span>
</div>
<div class="category-right tooltip">
<div class="top-timetable-btn tooltip">
<img
:src="
showedSchedule === train.timetableData.timetableId
@@ -235,10 +235,11 @@ export default class TrainTable extends Vue {
.no-trains {
text-align: center;
font-size: 1.35em;
padding: 1rem;
margin: 1rem 0;
padding: 1em;
margin: 1em 0;
font-size: 1.35em;
background: var(--clr-bg);
}
@@ -253,7 +254,7 @@ export default class TrainTable extends Vue {
&-row {
padding: 1em;
margin-bottom: 1rem;
margin-bottom: 1em;
background-color: var(--clr-secondary);
@@ -263,17 +264,11 @@ export default class TrainTable extends Vue {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@include smallScreen() {
@include midScreen() {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, minmax(100px, 1fr));
gap: 0.4em 0;
font-size: 1.1em;
}
@include bigScreen() {
font-size: 1.1rem;
}
}
}
@@ -284,41 +279,14 @@ export default class TrainTable extends Vue {
flex-direction: column;
justify-content: space-between;
&-category {
&-top {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1em;
div {
display: flex;
}
.category-right {
padding: 0.15em 0.5em;
background-color: var(--clr-accent);
border-radius: 1em;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
img {
vertical-align: middle;
width: 1.2em;
}
.tooltip-text {
font-size: 0.9em;
background-color: var(--clr-accent);
&::after {
border-color: var(--clr-accent) transparent transparent transparent;
}
}
}
}
&-route {
@@ -327,13 +295,17 @@ export default class TrainTable extends Vue {
margin: 5px 0;
font-size: 1.2em;
font-size: 1.1em;
}
&-stops {
margin-bottom: 10px;
font-size: 0.85em;
font-size: 0.7em;
@include smallScreen() {
font-size: 0.85em;
}
}
&-bottom {
@@ -372,7 +344,7 @@ export default class TrainTable extends Vue {
}
&-loco img {
width: 13em;
width: 200px;
max-width: 200px;
}
}
@@ -382,6 +354,8 @@ export default class TrainTable extends Vue {
flex-direction: column;
justify-content: space-around;
font-size: 0.95em;
&-main {
display: flex;
margin-bottom: 1.5em;
@@ -441,7 +415,7 @@ export default class TrainTable extends Vue {
@include bigScreen() {
.item {
font-size: 1rem;
font-size: 1em;
}
}
src/lang/en.json
+2 -1
View File
@@ -58,7 +58,8 @@
"general": "General info",
"users": "Drivers online",
"spawns": "Spawns online",
"timetables": "Active timetables"
"timetables": "Active timetables",
"no-stations": "No stations to show here!"
},
"trains": {
"no-trains": "Oops! No trains online!",
src/lang/pl.json
+3 -2
View File
@@ -58,10 +58,11 @@
"general": "Informacje <br> 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]",
src/store/modules/DataModule.ts
+18
View File
@@ -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 };
}
}
src/styles/global.scss
+21 -8
View File
@@ -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;
src/styles/responsive.scss
+7
View File
@@ -4,6 +4,13 @@
}
}
@mixin midScreen() {
@media only screen and (max-width: 950px) {
@content;
}
}
@mixin bigScreen() {
@media only screen and (min-width: 2000px) {
@content;
src/views/StationsView.vue
+10 -22
View File
@@ -24,7 +24,7 @@
<p>{{ $t("options.donate") }}</p>
</button> -->
</div>
<!--
<div class="bar_indicators">
<transition name="indicator-anim">
<span
@@ -45,7 +45,7 @@
<img :src="timetableIcon" alt="icon-timetable" />
</span>
</transition>
</div>
</div> -->
</div>
<div class="body_table">
@@ -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;
src/views/TrainsView.vue
-4
View File
@@ -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 {