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