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

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