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

Zmiany w wyglądzie, poprawki responsywności

Browse Source
This commit is contained in:
Spythere
2021-03-20 20:16:09 +01:00
parent 12c7c44014
commit 1a93fa3249
11 changed files with 90 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -5
View File
@@ -228,12 +228,8 @@ export default class App extends Vue {
font-size: 1rem; font-size: 1rem;
@include midScreen() {
font-size: 0.95rem;
}
@include smallScreen() { @include smallScreen() {
font-size: 0.7rem; font-size: calc(0.35rem + 1vw);
} }
} }
src/components/SceneryView/SceneryInfo.vue
+34 -35
View File
@@ -99,9 +99,9 @@
</div> </div>
<div class="info-dispatcher"> <div class="info-dispatcher">
<div> <div class="dispatcher">
<span <span
class="level" class="dispatcher_level"
:style=" :style="
calculateExpStyle( calculateExpStyle(
stationInfo.dispatcherExp, stationInfo.dispatcherExp,
@@ -114,7 +114,7 @@
}} }}
</span> </span>
<span class="name">{{ stationInfo.dispatcherName }}</span> <span class="dispatcher_name">{{ stationInfo.dispatcherName }}</span>
</div> </div>
<span class="status-badge" :class="stationInfo.statusID" <span class="status-badge" :class="stationInfo.statusID"
@@ -233,7 +233,7 @@ h3 {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1.2em; font-size: 1.5em;
img { img {
width: 1.1em; width: 1.1em;
@@ -243,30 +243,33 @@ h3 {
.info { .info {
&-header { &-header {
padding: 1rem; padding: 1em;
& > .scenery-name { & > .scenery-name {
font-size: 3em;
font-weight: bold; font-weight: bold;
color: $accentCol; color: $accentCol;
font-size: 4em;
text-transform: uppercase; text-transform: uppercase;
} }
& > .scenery-hash { & > .scenery-hash {
font-size: 1em;
line-height: 0.8em; line-height: 0.8em;
color: #aaa; color: #aaa;
font-size: 1.5em;
} }
} }
&-stats { &-stats {
font-size: 1.3em;
padding: 1rem 0; padding: 1rem 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 1.7em;
& > span { & > span {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -286,11 +289,11 @@ h3 {
} }
&-brief { &-brief {
padding: 1rem 0; padding: 1em 0;
img { img {
width: 2.5em; width: 3.5em;
margin: 0 0.5rem; margin: 0 0.5em;
border: 2px solid #4e4e4e; border: 2px solid #4e4e4e;
border-radius: 0.5em; border-radius: 0.5em;
@@ -302,28 +305,29 @@ h3 {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.level { .dispatcher {
display: inline-block;
margin-right: 0.3em;
background: firebrick;
border-radius: 0.1em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
font-size: 2em; font-size: 2em;
font-weight: bold;
&_level {
display: inline-block;
margin-right: 0.3em;
background: firebrick;
border-radius: 0.1em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
font-weight: bold;
}
&_name {
margin-right: 1em;
}
} }
.name { .status-badge {
font-size: 1.6em; font-size: 1.2em;
margin-right: 1em;
}
.status {
font-size: 1em;
border-radius: 1em;
} }
} }
@@ -346,7 +350,6 @@ h3 {
.user, .user,
.spawn { .spawn {
font-weight: 600; font-weight: 600;
font-size: 0.85em;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
@@ -359,10 +362,6 @@ h3 {
display: inline-block; display: inline-block;
padding: 0.2em 0.4em; padding: 0.2em 0.4em;
} }
@include smallScreen() {
font-size: 1em;
}
} }
.user { .user {
src/components/SceneryView/SceneryTimetable.vue
+4 -3
View File
@@ -226,7 +226,7 @@ h3 {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1.2em; font-size: 1.5em;
img { img {
width: 1.1em; width: 1.1em;
@@ -254,6 +254,8 @@ h3 {
.select-box { .select-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 1.2em;
} }
.option { .option {
@@ -341,10 +343,10 @@ h3 {
&-item { &-item {
margin: 1em auto; margin: 1em auto;
font-size: 0.8em;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0 0.5em;
padding: 0 0.35em; padding: 0 0.35em;
@@ -393,7 +395,6 @@ h3 {
@include smallScreen() { @include smallScreen() {
width: 100%; width: 100%;
margin: 0.7em 0; margin: 0.7em 0;
font-size: 1.8em;
} }
} }
} }
src/components/StationsView/FilterCard.vue
-4
View File
@@ -154,10 +154,6 @@ export default class FilterCard extends Vue {
.card { .card {
font-size: 1.25em; font-size: 1.25em;
@include smallScreen() {
font-size: 1.35em;
}
&-title { &-title {
font-size: 2em; font-size: 2em;
font-weight: 700; font-weight: 700;
src/components/TrainsView/TrainOptions.vue
+6 -7
View File
@@ -166,13 +166,11 @@ export default class TrainOptions extends Vue {
background: #333; background: #333;
border-radius: 0.5em 0.5em 0 0; border-radius: 0.5em 0.5em 0 0;
margin-right: 0.5rem; margin-right: 0.35em;
@include smallScreen() { @include smallScreen() {
width: 100%; width: 100%;
margin: 0.5rem 0; margin: 0.35em 0;
font-size: 0.85rem;
} }
} }
@@ -221,7 +219,7 @@ export default class TrainOptions extends Vue {
} }
label { label {
padding: 0.5rem 1rem; padding: 0.5em 1em;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
} }
@@ -234,7 +232,7 @@ export default class TrainOptions extends Vue {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.5rem 0.5rem; padding: 0.25em 0.5em;
min-width: 200px; min-width: 200px;
cursor: pointer; cursor: pointer;
@@ -261,7 +259,8 @@ export default class TrainOptions extends Vue {
&-input { &-input {
border: none; border: none;
padding: 0.5rem 1rem; padding: 0.5em 0.5em;
margin: 0; margin: 0;
min-width: 85%; min-width: 85%;
src/components/TrainsView/TrainStats.vue
+2 -6
View File
@@ -212,7 +212,6 @@ export default class TrainStats extends Vue {
} }
.train-stats { .train-stats {
font-size: 0.9rem;
z-index: 10; z-index: 10;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@@ -224,7 +223,6 @@ export default class TrainStats extends Vue {
.stats { .stats {
&-btn { &-btn {
font-size: 1em;
padding: 0.5em; padding: 0.5em;
} }
@@ -245,7 +243,6 @@ export default class TrainStats extends Vue {
} }
&-content { &-content {
font-size: 1.1em;
color: #ddd; color: #ddd;
} }
} }
@@ -255,7 +252,6 @@ export default class TrainStats extends Vue {
&-list { &-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 0.95em;
} }
margin-right: 0.4em; margin-right: 0.4em;
@@ -313,7 +309,7 @@ export default class TrainStats extends Vue {
@include smallScreen { @include smallScreen {
.button { .button {
font-size: 0.85rem; font-size: 1.2em;
} }
.stats-body { .stats-body {
@@ -327,7 +323,7 @@ export default class TrainStats extends Vue {
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 1rem; margin-top: 1em;
} }
} }
</style> </style>
src/components/TrainsView/TrainTable.vue
+31 -21
View File
@@ -78,18 +78,19 @@
</span> </span>
<span class="driver"> <span class="driver">
<span class="driver-name"> <div class="driver-info">
<a <span class="driver-name">
:href="'https://td2.info.pl/profile/?u=' + train.driverId" <a
target="_blank" :href="'https://td2.info.pl/profile/?u=' + train.driverId"
> target="_blank"
{{ train.driverName }} >
</a> {{ train.driverName }}
</span> </a>
</span>
<span class="driver-type"> <span class="driver-type">
{{ train.locoType }} {{ train.locoType }}
</span> </span>
</div>
<span class="driver-loco"> <span class="driver-loco">
<img <img
@@ -262,14 +263,14 @@ export default class TrainTable extends Vue {
& > .wrapper { & > .wrapper {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@include midScreen() { gap: 2em 0;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, minmax(100px, 1fr));
gap: 0.4em 0; // @include midScreen() {
} // grid-template-columns: 1fr;
// grid-template-rows: repeat(3, minmax(0, 1fr));
// }
} }
} }
} }
@@ -304,7 +305,7 @@ export default class TrainTable extends Vue {
font-size: 0.7em; font-size: 0.7em;
@include smallScreen() { @include smallScreen() {
font-size: 0.85em; font-size: 0.75em;
} }
} }
@@ -326,7 +327,13 @@ export default class TrainTable extends Vue {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-flow: column;
grid-row: span 2;
&-info {
margin-bottom: 1em;
}
&-name { &-name {
margin: 0 0.3em; margin: 0 0.3em;
@@ -354,7 +361,10 @@ export default class TrainTable extends Vue {
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
font-size: 0.95em; font-size: 0.85em;
// grid-column: 1 / 3;
// grid-column: span 2;
&-main { &-main {
display: flex; display: flex;
src/styles/card.scss
+7 -5
View File
@@ -15,8 +15,8 @@
box-shadow: 0 0 15px 5px #474747; box-shadow: 0 0 15px 5px #474747;
width: 75%; // width: 75%;
max-width: 650px; width: 650px;
max-height: 95%; max-height: 95%;
padding: 0.5em 1em; padding: 0.5em 1em;
@@ -26,9 +26,11 @@
width: 95%; width: 95%;
} }
@include bigScreen { // @include midScreen {
font-size: 1.4rem; // width: 85%;
} // }
&-exit { &-exit {
position: absolute; position: absolute;
src/styles/scenery_status.scss
+1 -2
View File
@@ -10,8 +10,7 @@ $taken: #09a116;
border-radius: 1rem; border-radius: 1rem;
font-weight: 500; font-weight: 500;
font-size: 0.9em; padding: 0.2em .55em;
padding: 0.2em 0.6em;
background-color: $taken; background-color: $taken;
src/views/SceneryView.vue
+2 -30
View File
@@ -72,44 +72,16 @@ export default class SceneryView extends Vue {
@import "../styles/responsive.scss"; @import "../styles/responsive.scss";
@import "../styles/variables.scss"; @import "../styles/variables.scss";
h3 {
margin: 0.5em 0;
padding: 0.3em;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
img {
width: 1.1em;
margin-left: 0.5em;
}
}
.scenery { .scenery {
&-view { &-view {
min-height: 100%; min-height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 1.35em;
@include bigScreen() {
font-size: 1.25rem;
align-items: flex-start;
}
@include smallScreen {
font-size: calc(0.5rem + 1vw);
}
} }
&-offline { &-offline {
align-self: center; align-self: center;
font-size: 1.5em;
text-align: center; text-align: center;
padding: 2em 1em; padding: 2em 1em;
@@ -125,10 +97,10 @@ h3 {
&-wrapper { &-wrapper {
// background: #555; // background: #555;
max-width: 950px;
width: 75%; width: 75%;
max-width: 950px;
@include smallScreen { @include midScreen {
width: 95%; width: 95%;
} }
src/views/TrainsView.vue
+2 -2
View File
@@ -139,8 +139,8 @@ export default class TrainsView extends Vue {
} }
@include smallScreen { @include smallScreen {
.options-wrapper { .options-bar {
justify-content: center; font-size: 1.15em;
} }
} }
</style> </style>