Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-02 21:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Poprawki wyglądu i funkcjonalności

Browse Source
This commit is contained in:
Spythere
2021-03-03 01:03:21 +01:00
parent 4aa64803b1
commit 639888a499
12 changed files with 2224 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+46 -29
View File
@@ -79,7 +79,7 @@ export default class App extends Vue {
hasReleaseNotes = false; hasReleaseNotes = false;
updateModalVisible = false; updateModalVisible = false;
async mounted() { mounted() {
this.synchronizeData(); this.synchronizeData();
if (StorageManager.getStringValue("version") != this.VERSION) { if (StorageManager.getStringValue("version") != this.VERSION) {
@@ -89,9 +89,9 @@ export default class App extends Vue {
StorageManager.setBooleanValue("version_notes_read", false); StorageManager.setBooleanValue("version_notes_read", false);
} }
this.updateModalVisible = !StorageManager.getBooleanValue( this.updateModalVisible =
"version_notes_read" this.hasReleaseNotes &&
); !StorageManager.getBooleanValue("version_notes_read");
} }
toggleUpdateModal() { toggleUpdateModal() {
@@ -153,12 +153,27 @@ export default class App extends Vue {
// CONTAINER // CONTAINER
.app_container { .app_container {
display: grid; // display: grid;
grid-template-rows: auto 1fr auto; // grid-template-rows: auto 1fr auto;
grid-template-columns: minmax(0, 1fr); // grid-template-columns: minmax(0, 1fr);
display: flex;
flex-flow: column;
min-width: 0; min-width: 0;
min-height: 100vh; min-height: 100vh;
header {
flex: 0 0 auto;
}
main {
flex: 1 1 auto;
}
footer {
flex: 0 1 0.2em;
}
} }
// HEADER // HEADER
@@ -166,41 +181,43 @@ export default class App extends Vue {
background: $primaryCol; background: $primaryCol;
padding: 0.15em; padding: 0.15em;
border-radius: 0 0 0.7em 0.7em; border-radius: 0 0 1em 1em;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.header_brand { .header {
width: 100%; &_brand {
font-size: 4.5em; width: 100%;
font-size: 4.5em;
text-align: center; text-align: center;
img { img {
width: 0.8em; width: 0.8em;
}
} }
}
.header_info { &_info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 1.35em; font-size: 1.35em;
margin: 0 0.3em; margin: 0 0.3em;
padding: 0.2em; padding: 0.2em;
} }
.header_links { &_links {
display: flex; display: flex;
justify-content: center; justify-content: center;
border-radius: 0.7em; border-radius: 0.7em;
font-size: 1.35em; font-size: 1.35em;
padding: 0.5em; padding: 0.5em;
}
} }
// COUNTER // COUNTER
@@ -219,7 +236,7 @@ export default class App extends Vue {
} }
// FOOTER // FOOTER
.app_footer { footer.app_footer {
font-size: calc(0.5rem + 0.5vw); font-size: calc(0.5rem + 0.5vw);
max-width: 100%; max-width: 100%;
padding: 0.3rem; padding: 0.3rem;
src/components/StationsView/FilterCard.vue
+1 -1
View File
@@ -148,7 +148,7 @@ export default class FilterCard extends Vue {
@import "../../styles/card"; @import "../../styles/card";
.card { .card {
font-size: 1.5em; font-size: 1.45em;
&-title { &-title {
font-size: 2em; font-size: 2em;
src/components/StationsView/StationTable.vue
-2
View File
@@ -288,8 +288,6 @@ section.station_table {
overflow-y: hidden; overflow-y: hidden;
font-size: calc(0.55rem + 0.35vw); font-size: calc(0.55rem + 0.35vw);
font-weight: 500; font-weight: 500;
font-size: 1.2em;
} }
.table_wrapper { .table_wrapper {
src/components/TrainsView/TrainSchedule.vue
+54 -31
View File
@@ -17,24 +17,34 @@
v-if=" v-if="
i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine i > 0 && followingStops[i - 1].departureLine != stop.arrivalLine
" "
>{{ stop.arrivalLine }}</div> >
{{ stop.arrivalLine }}
</div>
<span class="stop-info"> <span class="stop-info">
<div class="info-indicator"></div> <div class="info-indicator"></div>
<span class="info-distance">
{{ Math.floor(stop.stopDistance) }}
</span>
<span class="info-name" v-html="stop.stopName"></span> <span class="info-name" v-html="stop.stopName"></span>
<span class="info-date"> <span class="info-date">
<span <span
class="date-arrival" class="date-arrival"
v-if="!stop.beginsHere" v-if="!stop.beginsHere"
:class="{ :class="{
delayed: stop.arrivalDelay > 0, delayed: stop.arrivalDelay > 0 && stop.confirmed,
preponed: stop.arrivalDelay < 0, preponed: stop.arrivalDelay < 0 && stop.confirmed,
}" }"
> >
p. p.
{{ {{
stylizeTime(stop.arrivalRealTimeString, stop.arrivalDelay) stylizeTime(
stop.arrivalRealTimeString,
stop.arrivalDelay,
stop.confirmed
)
}} }}
</span> </span>
@@ -42,19 +52,24 @@
class="date-stop" class="date-stop"
v-if="stop.stopTime" v-if="stop.stopTime"
:class="stop.stopType.replace(', ', '-')" :class="stop.stopType.replace(', ', '-')"
>{{ stop.stopTime }} {{ stop.stopType }}</span> >{{ stop.stopTime }} {{ stop.stopType }}</span
>
<span <span
class="date-departure" class="date-departure"
v-if="!stop.terminatesHere && stop.stopTime != 0" v-if="!stop.terminatesHere && stop.stopTime != 0"
:class="{ :class="{
delayed: stop.departureDelay > 0, delayed: stop.departureDelay > 0 && stop.confirmed,
preponed: stop.departureDelay < 0, preponed: stop.departureDelay < 0 && stop.confirmed,
}" }"
> >
o. o.
{{ {{
stylizeTime(stop.departureRealTimeString, stop.departureDelay) stylizeTime(
stop.departureRealTimeString,
stop.departureDelay,
stop.confirmed
)
}} }}
</span> </span>
</span> </span>
@@ -77,10 +92,12 @@ export default class TrainSchedule extends Vue {
@Prop() readonly followingStops!: TrainStop[]; @Prop() readonly followingStops!: TrainStop[];
@Prop() readonly currentStationName!: string; @Prop() readonly currentStationName!: string;
stylizeTime(timeString: string, delay: number) { stylizeTime(timeString: string, delay: number, confirmed: boolean) {
return ( return (
timeString + timeString +
(delay != 0 ? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")" : "") (delay != 0 && confirmed
? " (" + (delay > 0 ? "+" : "") + delay.toString() + ")"
: "")
); );
} }
@@ -95,14 +112,8 @@ export default class TrainSchedule extends Vue {
.train-schedule { .train-schedule {
max-height: 600px; max-height: 600px;
overflow: auto; // overflow: auto;
margin-top: 1rem; margin-top: 2em;
font-size: 1em;
@include smallScreen() {
font-size: 0.8em;
}
} }
.schedule-bar, .schedule-bar,
@@ -129,8 +140,7 @@ export default class TrainSchedule extends Vue {
.schedule-wrapper { .schedule-wrapper {
position: relative; position: relative;
margin-top: 1rem; margin-left: 1.5em;
margin-left: 0.5rem;
} }
ul.schedule-list { ul.schedule-list {
@@ -146,19 +156,19 @@ ul.schedule-list > li.schedule-item {
padding: 0 0.5rem; padding: 0 0.5rem;
&.confirmed { &.confirmed {
& > .progress-bar, .progress-bar,
& > .stop-info > .info-indicator { .stop-info > .info-indicator {
background: lime; background: lime;
} }
} }
&.stopped { &.stopped {
& > .progress-bar { .progress-bar {
background: lime; background: lime;
height: 50%; height: 50%;
} }
& > .stop-info > .info-indicator { .stop-info > .info-indicator {
background: orangered; background: orangered;
} }
} }
@@ -169,13 +179,26 @@ li.schedule-item > .stop-info {
position: relative; position: relative;
& > .info-indicator { .info-distance {
position: absolute;
top: 50%;
left: -1.8rem;
transform: translate(-100%, -50%);
font-size: 0.8em;
color: #d6d6d6;
}
.info-indicator {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 50%; top: 50%;
left: -1.5rem; left: -1.5rem;
text-align: right;
transform: translateY(-50%); transform: translateY(-50%);
width: 15px; width: 15px;
@@ -184,21 +207,21 @@ li.schedule-item > .stop-info {
background: white; background: white;
} }
& > .info-name { .info-name {
background: rgb(0, 81, 187); background: rgb(0, 81, 187);
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
} }
& > .info-date { .info-date {
display: flex; display: flex;
align-items: center; align-items: center;
& > span { span {
background: #5c5c5c; background: #5c5c5c;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
} }
& > .date-stop { .date-stop {
&.ph, &.ph,
&.ph-pm { &.ph-pm {
background: #ce8d00; background: #ce8d00;
@@ -211,8 +234,8 @@ li.schedule-item > .stop-info {
} }
} }
& > .date-arrival, .date-arrival,
& > .date-departure { .date-departure {
&.delayed { &.delayed {
background: rgb(250, 0, 0); background: rgb(250, 0, 0);
} }
src/components/TrainsView/TrainStats.vue
+1 -2
View File
@@ -207,7 +207,7 @@ export default class TrainStats extends Vue {
} }
.train-stats { .train-stats {
font-size: 1.1em; font-size: 1.15em;
z-index: 10; z-index: 10;
margin-bottom: 0.5em; margin-bottom: 0.5em;
@@ -319,7 +319,6 @@ export default class TrainStats extends Vue {
.stats-body { .stats-body {
display: block; display: block;
font-size: 0.9em;
width: 100%; width: 100%;
src/components/TrainsView/TrainTable.vue
+3 -5
View File
@@ -249,7 +249,7 @@ export default class TrainTable extends Vue {
.no-trains { .no-trains {
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.35em;
padding: 1rem; padding: 1rem;
margin: 1rem 0; margin: 1rem 0;
@@ -259,8 +259,6 @@ export default class TrainTable extends Vue {
.train { .train {
&-list { &-list {
font-size: 1.05em;
@include smallScreen() { @include smallScreen() {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@@ -283,7 +281,7 @@ export default class TrainTable extends Vue {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: repeat(3, minmax(100px, 1fr)); grid-template-rows: repeat(3, minmax(100px, 1fr));
font-size: 1.1em; font-size: 1.25em;
gap: 0.4em 0; gap: 0.4em 0;
} }
@@ -348,7 +346,7 @@ export default class TrainTable extends Vue {
&-stops { &-stops {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 0.7em; font-size: 0.8em;
} }
&-online { &-online {
src/data/stationData.json
+2079 -99
View File
File diff suppressed because it is too large Load Diff
src/scripts/interfaces/TrainStop.ts
+1
View File
@@ -2,6 +2,7 @@ export default interface TrainStop {
stopName: string; stopName: string;
stopNameRAW: string; stopNameRAW: string;
stopType: string; stopType: string;
stopDistance: number;
mainStop: boolean; mainStop: boolean;
arrivalLine: string; arrivalLine: string;
src/store/store.ts
+2
View File
@@ -203,6 +203,8 @@ export default class Store extends VuexModule {
stopName: point.pointName, stopName: point.pointName,
stopNameRAW: point.pointNameRAW, stopNameRAW: point.pointNameRAW,
stopType: point.pointStopType, stopType: point.pointStopType,
stopDistance: point.pointDistance,
mainStop: point.pointName.includes('strong'), mainStop: point.pointName.includes('strong'),
arrivalLine: point.arrivalLine, arrivalLine: point.arrivalLine,
src/views/HistoryView.vue
+29 -27
View File
@@ -6,33 +6,35 @@
<p style="color: #ccc"> <p style="color: #ccc">
Pokazuje dyżurnych, którzy ostatnio byli aktywni na wybranej scenerii Pokazuje dyżurnych, którzy ostatnio byli aktywni na wybranej scenerii
</p> </p>
</div>
<div class="search-box"> <div class="search-box">
<div class="search-box_content"> <div class="search-box_content">
<label :class="{ disabled: dataLoading }"> <label :class="{ disabled: dataLoading }">
<select v-model="inputStationName" :disabled="dataLoading"> <select v-model="inputStationName" :disabled="dataLoading">
<option value disabled selected hidden> <option value disabled selected hidden>
{{ dataLoading ? "Pobieranie danych..." : "Wybierz scenerię" }} {{
</option> dataLoading ? "Pobieranie danych..." : "Wybierz scenerię"
<option }}
v-for="station in filteredStationList" </option>
:key="station" <option
:value="station" v-for="station in filteredStationList"
> :key="station"
{{ station }} :value="station"
</option> >
</select> {{ station }}
</label> </option>
</select>
</label>
</div>
</div> </div>
</div>
<div class="disclaimer"> <div class="disclaimer">
<h4>Ta funkcjonalność jest w testach beta!</h4> <h4>Ta funkcjonalność jest w testach beta!</h4>
<p> <p>
Informacje pokazywane na ekranie mogą znikać, a ich zawartość może być Informacje pokazywane na ekranie mogą znikać, a ich zawartość może
fałszywa! być fałszywa!
</p> </p>
</div>
</div> </div>
<div class="list"> <div class="list">
@@ -203,14 +205,14 @@ export default class HistoryView extends Vue {
.history { .history {
&_view { &_view {
font-size: 1.2em; font-size: 1.2em;
display: flex;
} }
&_wrapper { &_wrapper {
width: 100%; width: 100%;
height: 100%;
text-align: center; text-align: center;
margin-top: 1em; margin-top: 0.5em;
} }
} }
@@ -313,7 +315,7 @@ export default class HistoryView extends Vue {
} }
&_content { &_content {
max-height: 600px; max-height: 75vh;
overflow: auto; overflow: auto;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
src/views/StationsView.vue
+7 -4
View File
@@ -276,6 +276,13 @@ export default class StationsView extends Vue {
.bar_actions { .bar_actions {
display: flex; display: flex;
@include smallScreen() {
justify-content: center;
}
width: 100%;
font-size: 1.25em; font-size: 1.25em;
button { button {
@@ -355,10 +362,6 @@ export default class StationsView extends Vue {
&.open { &.open {
color: $accentCol; color: $accentCol;
} }
@include smallScreen() {
font-size: 1.2em;
}
} }
@keyframes blinkAnim { @keyframes blinkAnim {
src/views/TrainsView.vue
+1 -1
View File
@@ -151,7 +151,7 @@ export default class TrainsView extends Vue {
@include smallScreen { @include smallScreen {
.body-wrapper { .body-wrapper {
font-size: 0.8rem; // font-size: 0.8rem;
} }
.options-wrapper { .options-wrapper {