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

Merge pull request #126 from Spythere/development

Browse Source 
v1.29.2
This commit is contained in:
Spythere
2025-04-15 01:15:42 +02:00
committed by GitHub
parent 9b6c6ee756 93e242c0f5
commit 16b3bb3683
76 changed files with 2710 additions and 2675 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-5
View File
@@ -22,11 +22,6 @@
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="fa/css/fontawesome.css" />
<link rel="stylesheet" href="fa/css/brands.css" />
<link rel="stylesheet" href="fa/css/regular.css" />
<link rel="stylesheet" href="fa/css/solid.css" />
<!-- Static OpenGraph meta -->
<meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
<meta property="og:url" content="https://stacjownik-td2.web.app/" />
package.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "stacjownik",
"version": "1.29.1",
"version": "1.29.2",
"private": true,
"type": "module",
"scripts": {
@@ -26,7 +26,7 @@
"vue-router": "^4.4.0"
},
"devDependencies": {
"@types/node": "^20.14.12",
"@types/node": "^22.13.13",
"@types/showdown": "^2.0.6",
"@vite-pwa/assets-generator": "^0.2.4",
"@vitejs/plugin-vue": "^5.1.0",
src/App.vue
+2 -21
View File
@@ -167,32 +167,13 @@ export default defineComponent({
</script>
<style lang="scss">
@import './styles/global';
@import './styles/animations';
.route {
margin: 0 0.2em;
&-active,
&[data-active='true'] {
color: $accentCol;
font-weight: bold;
}
}
@use './styles/animations';
// APP
#app {
color: white;
font-size: 1rem;
overflow-x: hidden;
@include smallScreen() {
font-size: calc(0.65rem + 0.85vw);
}
@include screenLandscape() {
font-size: calc(0.45rem + 0.8vw);
}
font-size: 1em;
}
// CONTAINER
src/components/App/AppFooter.vue
-2
View File
@@ -37,5 +37,3 @@ export default defineComponent({
}
});
</script>
<style scoped></style>
src/components/App/AppHeader.vue
+9 -9
View File
@@ -45,17 +45,17 @@
</span>
<span class="header_links">
<router-link class="route" active-class="route-active" to="/" exact>
<router-link class="route-link" active-class="route-link-active" to="/" exact>
{{ $t('app.sceneries') }}
</router-link>
/
<router-link class="route" active-class="route-active" to="/trains">{{
<router-link class="route-link" active-class="route-link-active" to="/trains">{{
$t('app.trains')
}}</router-link>
/
<router-link
class="route"
active-class="route-active"
class="route-link"
active-class="route-link-active"
:data-active="$route.path.startsWith('/journal')"
to="/journal"
>
@@ -116,9 +116,9 @@ export default defineComponent({
}
});
</script>
<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
@use '../../styles/responsive';
// HEADER
.app_header {
@@ -126,7 +126,7 @@ export default defineComponent({
justify-content: center;
position: relative;
background-color: $primaryCol;
background-color: #2c2c2c;
}
.header {
@@ -141,7 +141,7 @@ export default defineComponent({
border-radius: 0 0 1em 1em;
@include smallScreen {
@include responsive.smallScreen{
position: relative;
margin-top: 0.5em;
}
@@ -180,7 +180,7 @@ export default defineComponent({
padding: 0.5em;
@include smallScreen {
@include responsive.smallScreen{
transform: translateX(85%);
}
}
src/components/App/Clock.vue
+1 -5
View File
@@ -6,9 +6,7 @@
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
name: 'VueClock',
data: () => ({
timestamp: Date.now()
}),
data: () => ({ timestamp: Date.now() }),
setup() {
let timestamp = ref(Date.now());
@@ -28,8 +26,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.clock {
display: flex;
align-items: center;
src/components/App/StatusIndicator.vue
+3 -3
View File
@@ -310,7 +310,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@use '../../styles/responsive';
// INDICATOR TOOLTIP ANIMATION
.tooltip-anim {
@@ -379,7 +379,7 @@ export default defineComponent({
content: '';
}
@include midScreen() {
@include responsive.midScreen() {
left: auto;
right: 200%;
@@ -393,7 +393,7 @@ export default defineComponent({
}
}
@include smallScreen() {
@include responsive.smallScreen{
min-width: 8em;
}
}
src/components/App/UpdateCard.vue
+1 -3
View File
@@ -73,11 +73,9 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/variables';
::v-deep(h1) {
text-align: center;
color: $accentCol;
color: var(--clr-primary);
}
::v-deep(h2) {
src/components/Global/ActionButton.vue
+1 -2
View File
@@ -13,8 +13,7 @@ export default defineComponent({});
</script>
<style lang="scss">
@import '../../styles/variables';
@import '../../styles/responsive';
@use '../../styles/responsive';
.button_content {
display: flex;
src/components/Global/AddDataButton.vue
-2
View File
@@ -38,5 +38,3 @@ export default defineComponent({
}
});
</script>
<style scoped></style>
src/components/Global/Card.vue
+2 -2
View File
@@ -43,7 +43,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@use '../../styles/responsive';
.card {
position: fixed;
@@ -85,7 +85,7 @@ export default defineComponent({
overflow: auto;
}
@include smallScreen {
@include responsive.smallScreen{
.card {
align-items: flex-start;
}
src/components/Global/DonationCard.vue
+6 -12
View File
@@ -150,8 +150,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
.body {
display: grid;
grid-template-rows: 1fr auto;
@@ -200,30 +198,26 @@ a.discord {
.actions-container > .action {
&.paypal {
$btnColor: #254069;
background-color: $btnColor;
background-color: #254069;
&:hover {
background-color: lighten($btnColor, 5%);
background-color: #2f5185;
}
}
&.coffee {
$btnColor: #009255;
background-color: $btnColor;
background-color: #009255;
&:hover {
background-color: lighten($btnColor, 5%);
background-color: #00a35f;
}
}
&.exit {
$btnColor: #686868;
background-color: $btnColor;
background-color: #686868;
&:hover {
background-color: lighten($btnColor, 5%);
background-color: #8d8d8d;
}
}
}
src/components/Global/RegionDropdown.vue
+1 -3
View File
@@ -120,8 +120,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/variables.scss';
.region-dropdown {
display: flex;
align-items: center;
@@ -182,7 +180,7 @@ li.option {
background: none;
&:focus + span {
color: $accentCol;
color: var(--clr-primary);
font-weight: 800;
}
}
src/components/Global/SearchBox.vue
+13 -23
View File
@@ -7,7 +7,12 @@
@keypress="updateValue"
/>
<img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
<img
class="search-exit"
src="/images/icon-exit.svg"
alt="exit-icon"
@click="clearSearchValue"
/>
</div>
</template>
@@ -17,21 +22,10 @@ import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
emits: ['update:searchedValue', 'clearValue'],
props: {
searchedValue: {
type: String,
required: true
},
updateOnInput: {
type: Boolean,
default: true
},
titleToTranslate: {
type: String,
required: true
},
clearValue: {
type: Function
}
searchedValue: { type: String, required: true },
updateOnInput: { type: Boolean, default: true },
titleToTranslate: { type: String, required: true },
clearValue: { type: Function }
},
setup(props, { emit }) {
@@ -56,17 +50,13 @@ export default defineComponent({
emit('update:searchedValue', compSearchedValue.value);
};
return {
compSearchedValue,
updateValue,
clearSearchValue
};
return { compSearchedValue, updateValue, clearSearchValue };
}
});
</script>
<style lang="scss" scoped>
@import '../../styles/responsive';
@use '../../styles/responsive';
.search {
&-box {
@@ -78,7 +68,7 @@ export default defineComponent({
margin: 0.5em 0 0.5em 0.5em;
@include smallScreen() {
@include responsive.smallScreen{
width: 85%;
}
}
src/components/Global/StationStatusBadge.vue
+3 -9
View File
@@ -20,15 +20,9 @@ import { Status } from '../../typings/common';
export default defineComponent({
props: {
dispatcherStatus: {
type: Number as PropType<Status.ActiveDispatcher | number>
},
dispatcherTimestamp: {
type: Number as PropType<number | null>
},
isOnline: {
type: Boolean
}
dispatcherStatus: { type: Number as PropType<Status.ActiveDispatcher | number> },
dispatcherTimestamp: { type: Number as PropType<number | null> },
isOnline: { type: Boolean }
},
mixins: [dateMixin],
src/components/Global/StockList.vue
+3 -12
View File
@@ -22,20 +22,12 @@ export default defineComponent({
components: { VehicleThumbnail },
props: {
trainStockList: {
type: Array as PropType<string[]>,
required: true
},
tractionOnly: {
type: Boolean,
required: false
}
trainStockList: { type: Array as PropType<string[]>, required: true },
tractionOnly: { type: Boolean, required: false }
},
data() {
return {
apiStore: useApiStore()
};
return { apiStore: useApiStore() };
},
computed: {
@@ -151,7 +143,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.list-wrapper {
display: flex;
justify-content: center;
src/components/Global/VehicleThumbnail.vue
-1
View File
@@ -51,7 +51,6 @@ function onImageLoad() {
<style lang="scss" scoped>
.vehicle-thumbnail {
position: relative;
opacity: 0;
transition: opacity 100ms ease-in-out;
src/components/JournalView/JournalDailyStats.vue
+4 -4
View File
@@ -234,9 +234,9 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/JournalStats.scss';
@import '../../styles/badge.scss';
@use '../../styles/animations';
@use '../../styles/journal-stats';
@use '../../styles/responsive';
.daily-stats {
text-align: left;
@@ -265,7 +265,7 @@ ul.stats-list {
gap: 0.5em;
}
@include smallScreen {
@include responsive.smallScreen{
h3 {
text-align: center;
}
src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue
+6 -15
View File
@@ -121,14 +121,8 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';
export default defineComponent({
props: {
entry: {
type: Object as PropType<API.DispatcherHistory.Data>,
required: true
},
showExtraInfo: {
type: Boolean,
required: true
}
entry: { type: Object as PropType<API.DispatcherHistory.Data>, required: true },
showExtraInfo: { type: Boolean, required: true }
},
components: { StationStatusBadge },
@@ -136,10 +130,7 @@ export default defineComponent({
emits: ['toggleShowExtraInfo'],
data() {
return {
regions,
apiStore: useApiStore()
};
return { regions, apiStore: useApiStore() };
},
methods: {
@@ -151,8 +142,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/responsive.scss';
@import '../../../styles/badge.scss';
@use '../../../styles/responsive';
@use '../../../styles/badge';
.region-badge {
padding: 0 0.25em;
@@ -207,7 +198,7 @@ export default defineComponent({
border-radius: 1em;
}
@include smallScreen {
@include responsive.smallScreen{
.entry-info {
flex-direction: column;
justify-content: center;
src/components/JournalView/JournalDispatchers/JournalDispatcherStats.vue
+7 -7
View File
@@ -32,25 +32,25 @@
</span>
</div>
<hr class="section-separator" />
<hr class="section-separator" v-if="stats.issuedTimetables" />
<div class="info-stats">
<span class="badge stat-badge" v-if="stats.issuedTimetables">
<div class="info-stats" v-if="stats.issuedTimetables">
<span class="badge stat-badge">
<span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
<span>{{ stats.issuedTimetables.count }}</span>
</span>
<span class="badge stat-badge" v-if="stats.issuedTimetables">
<span class="badge stat-badge">
<span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
<span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
</span>
<span class="badge stat-badge" v-if="stats.issuedTimetables">
<span class="badge stat-badge">
<span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
<span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
</span>
<span class="badge stat-badge" v-if="stats.issuedTimetables">
<span class="badge stat-badge">
<span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
<span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
</span>
@@ -81,5 +81,5 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/JournalStats.scss';
@use '../../../styles/journal-stats';
</style>
src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue
+1 -2
View File
@@ -104,6 +104,5 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/variables.scss';
@import '../../../styles/JournalSection.scss';
@use '../../../styles/journal-section';
</style>
src/components/JournalView/JournalHeader.vue
+7 -6
View File
@@ -1,11 +1,16 @@
<template>
<section class="journal-header">
<div class="journal-type-options">
<router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
<router-link
class="route-link"
active-class="route-link-active"
to="/journal/timetables"
exact
>
{{ $t('journal.section-timetables') }}
</router-link>
&nbsp;&bull;&nbsp;
<router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
<router-link class="route-link" active-class="route-link-active" to="/journal/dispatchers">
{{ $t('journal.section-dispatchers') }}
</router-link>
</div>
@@ -39,8 +44,4 @@ export default defineComponent({});
display: flex;
justify-content: center;
}
.router-link.active {
color: gold;
}
</style>
src/components/JournalView/JournalOptions.vue
+3 -3
View File
@@ -51,7 +51,7 @@
:list="propName.toString()"
/>
<button class="search-exit" v-if="!propName.toString().startsWith('search-date')">
<button class="btn btn--action search-exit" v-if="!propName.toString().startsWith('search-date')">
<img
src="/images/icon-exit.svg"
alt="exit-icon"
@@ -300,6 +300,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/dropdown';
@import '../../styles/dropdown_filters';
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';
</style>
src/components/JournalView/JournalStats.vue
+2 -4
View File
@@ -79,14 +79,12 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/dropdown.scss';
@import '../../styles/dropdown_filters.scss';
@import '../../styles/variables.scss';
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';
.dropdown_wrapper.dropdown-align-right {
left: auto;
right: 0;
max-width: 700px;
// max-width: 100%;
}
</style>
src/components/JournalView/JournalTimetables/EntryDetails.vue
+5 -6
View File
@@ -225,9 +225,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/variables.scss';
@import '../../../styles/responsive.scss';
@import '../../../styles/badge.scss';
@use '../../../styles/responsive';
@use '../../../styles/badge';
.details-body {
margin-top: 0.5em;
@@ -250,7 +249,7 @@ export default defineComponent({
margin-top: 1em;
button[data-checked='true'] {
color: $accentCol;
color: var(--clr-primary);
}
}
@@ -272,7 +271,7 @@ export default defineComponent({
span:last-child {
color: black;
background-color: $accentCol;
background-color: var(--clr-primary);
border-radius: 0 0.25em 0.25em 0;
}
}
@@ -300,7 +299,7 @@ hr {
}
}
@include smallScreen() {
@include responsive.smallScreen{
.timetable-specs {
justify-content: center;
}
src/components/JournalView/JournalTimetables/EntryGeneral.vue
+3 -3
View File
@@ -130,8 +130,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/responsive';
@import '../../../styles/badge';
@use '../../../styles/responsive';
@use '../../../styles/badge';
.item-general {
display: flex;
@@ -191,7 +191,7 @@ export default defineComponent({
}
}
@include smallScreen {
@include responsive.smallScreen{
.item-general {
flex-direction: column;
justify-content: center;
src/components/JournalView/JournalTimetables/EntryStatus.vue
+2 -2
View File
@@ -59,7 +59,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/responsive.scss';
@use '../../../styles/responsive';
.entry-status {
display: flex;
@@ -67,7 +67,7 @@ export default defineComponent({
flex-wrap: wrap;
gap: 0.5em;
@include smallScreen() {
@include responsive.smallScreen{
justify-content: center;
}
}
src/components/JournalView/JournalTimetables/EntryStops.vue
+1 -1
View File
@@ -187,7 +187,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/badge.scss';
@use '../../../styles/badge';
.entry-stops {
word-wrap: break-word;
src/components/JournalView/JournalTimetables/JournalDriverStats.vue
+42 -9
View File
@@ -12,14 +12,6 @@
<hr class="header-separator" />
<div class="info-stats">
<span class="badge stat-badge">
<span>{{ $t('journal.driver-stats.timetables') }}</span>
<span
>{{ store.driverStatsData._count.fulfilled }} /
{{ store.driverStatsData._count._all }}</span
>
</span>
<span class="badge stat-badge">
<span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
<span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
@@ -29,12 +21,43 @@
<span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
<span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
</span>
</div>
<hr class="section-separator" />
<div class="info-stats">
<span class="badge stat-badge">
<span>{{ $t('journal.driver-stats.timetables') }}</span>
<span>
{{ store.driverStatsData._count.fulfilled }} /
{{ store.driverStatsData._count._all }}
<template v-if="store.driverStatsData._count._all > 0">
({{
(
(store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
100
).toFixed(2)
}}%)
</template>
</span>
</span>
<span class="badge stat-badge">
<span>{{ $t('journal.driver-stats.distance') }}</span>
<span>
{{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
{{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
<template v-if="store.driverStatsData._sum.routeDistance > 0">
({{
(
(store.driverStatsData._sum.currentDistance /
store.driverStatsData._sum.routeDistance) *
100
).toFixed(2)
}}%)
</template>
</span>
</span>
@@ -43,6 +66,16 @@
<span>
{{ store.driverStatsData._sum.confirmedStopsCount }} /
{{ store.driverStatsData._sum.allStopsCount }}
<template v-if="store.driverStatsData._sum.allStopsCount > 0">
({{
(
(store.driverStatsData._sum.confirmedStopsCount /
store.driverStatsData._sum.allStopsCount) *
100
).toFixed(2)
}}%)
</template>
</span>
</span>
</div>
@@ -68,5 +101,5 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/JournalStats.scss';
@use '../../../styles/journal-stats';
</style>
src/components/JournalView/JournalTimetables/JournalTimetableEntry.vue
+14 -9
View File
@@ -3,14 +3,14 @@
<!-- General -->
<EntryGeneral :timetable="timetableEntry" />
<!-- Route -->
<div class="entry-route">
<b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
</div>
<hr />
<div @click="toggleExtraInfo" style="cursor: pointer">
<!-- Route -->
<div class="entry-route">
<b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
</div>
<hr />
<!-- Status -->
<EntryStatus :timetable="timetableEntry" />
</div>
@@ -134,15 +134,20 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/responsive.scss';
@use '../../../styles/responsive';
.timetable-history-entry {
background-color: #1a1a1a;
padding: 1em;
}
@include smallScreen {
.entry-route {
display: flex;
}
@include responsive.smallScreen{
.entry-route {
justify-content: center;
text-align: center;
}
}
src/components/JournalView/JournalTimetables/JournalTimetablesList.vue
+4 -3
View File
@@ -107,10 +107,11 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/JournalSection.scss';
@import '../../../styles/animations.scss';
@use '../../../styles/animations';
@use '../../../styles/journal-section';
@use '../../../styles/responsive';
@include smallScreen {
@include responsive.smallScreen{
.journal_item-info {
text-align: center;
}
src/components/SceneryView/SceneryDispatchersHistory.vue
+3 -3
View File
@@ -148,8 +148,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/sceneryViewTables.scss';
@use '../../styles/responsive';
@use '../../styles/scenery-history-table';
.scenery-dispatchers-history {
height: 100%;
@@ -194,7 +194,7 @@ export default defineComponent({
color: springgreen;
}
@include smallScreen {
@include responsive.smallScreen{
.journal-list > div {
flex-direction: column;
justify-content: center;
src/components/SceneryView/SceneryHeader.vue
+1 -2
View File
@@ -35,8 +35,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
@use '../../styles/responsive';
.info-header {
margin-top: 1em;
src/components/SceneryView/SceneryInfo.vue
+2 -2
View File
@@ -59,8 +59,8 @@ export default defineComponent({
</script>
<style lang="scss">
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
@use '../../styles/responsive';
@use '../../styles/badge';
h3.section-header {
margin: 0.5em 0;
src/components/SceneryView/SceneryInfo/SceneryInfoAuthors.vue
-2
View File
@@ -28,5 +28,3 @@ export default defineComponent({
}
});
</script>
<style scoped></style>
src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue
+1 -1
View File
@@ -102,7 +102,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/icons.scss';
@use '../../../styles/icons';
.info-icons {
display: flex;
src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue
-2
View File
@@ -53,8 +53,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../../styles/variables.scss';
ul {
position: relative;
}
src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+1 -1
View File
@@ -18,7 +18,7 @@
:key="train.id"
:data-status="status"
>
<router-link :to="train.driverRouteLocation" class="a-block">
<router-link :to="train.driverRouteLocation">
<span class="user_train"> {{ train.trainNo }}</span>
<span class="user_name">
{{ train.driverName }}
src/components/SceneryView/SceneryTimetable.vue
+7 -8
View File
@@ -64,7 +64,7 @@
</div>
<router-link
class="timetable-item a-block"
class="timetable-item"
v-else
v-for="(row, i) in sceneryTimetables"
:key="row.train.id + i"
@@ -327,9 +327,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
@import '../../styles/animations.scss';
@use '../../styles/responsive';
@use '../../styles/animations';
.scenery-timetable {
height: 100%;
@@ -436,7 +435,7 @@ export default defineComponent({
&.current {
font-weight: bold;
color: $accentCol;
color: var(--clr-primary);
}
}
@@ -449,7 +448,7 @@ export default defineComponent({
flex-wrap: wrap;
.info-number {
color: $accentCol;
color: var(--clr-primary);
}
.info-route {
@@ -485,7 +484,7 @@ export default defineComponent({
align-self: center;
font-size: 0.9em;
color: $accentCol;
color: var(--clr-primary);
&::after {
content: '\027F6';
@@ -502,7 +501,7 @@ export default defineComponent({
font-size: 0.85em;
}
@include smallScreen {
@include responsive.smallScreen {
.timetable-item {
grid-template-columns: 1fr;
}
src/components/SceneryView/SceneryTimetablesHistory.vue
+2 -2
View File
@@ -188,8 +188,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/sceneryViewTables.scss';
@use '../../styles/responsive';
@use '../../styles/scenery-history-table';
.scenery-timetables-history {
height: 100%;
src/components/StationsView/FilterOption.vue
+1 -3
View File
@@ -66,8 +66,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/variables.scss';
label {
position: relative;
user-select: none;
@@ -98,7 +96,7 @@ label {
}
&:focus-visible + span {
outline: 1px solid $accentCol;
outline: 1px solid var(--clr-primary);
}
}
}
src/components/StationsView/StationFilterCard.vue
+14 -15
View File
@@ -379,10 +379,9 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive';
@import '../../styles/card';
@import '../../styles/animations';
@import '../../styles/variables';
@use '../../styles/responsive';
@use '../../styles/card';
@use '../../styles/animations';
h3.section-header {
text-align: center;
@@ -432,7 +431,7 @@ h3.section-header {
.card_title {
font-size: 2em;
font-weight: 700;
color: $accentCol;
color: var(--clr-primary);
text-align: center;
}
@@ -453,7 +452,7 @@ h3.section-header {
span {
min-width: 120px;
font-weight: bold;
color: $accentCol;
color: var(--clr-primary);
}
button {
@@ -527,7 +526,7 @@ h3.section-header {
}
&:focus-visible + span {
outline: 1px solid $accentCol;
outline: 1px solid var(--clr-primary);
}
}
}
@@ -575,7 +574,7 @@ h3.section-header {
margin-bottom: 1em;
&-value {
color: $accentCol;
color: var(--clr-primary);
padding: 0.1em 0.2em;
text-align: center;
}
@@ -604,14 +603,14 @@ h3.section-header {
border-radius: 50%;
background: white;
border: 3px solid $accentCol;
border: 3px solid var(--clr-primary);
background-color: #333;
@include smallScreen() {
@include responsive.smallScreen{
width: 15px;
height: 15px;
margin-top: -5px;
border: 3px solid $accentCol;
border: 3px solid var(--clr-primary);
}
}
@@ -622,14 +621,14 @@ h3.section-header {
border-radius: 50%;
background: white;
border: 4px solid $accentCol;
border: 4px solid var(--clr-primary);
cursor: pointer;
@include smallScreen() {
@include responsive.smallScreen{
width: 1em;
height: 1em;
border: 3px solid $accentCol;
border: 3px solid var(--clr-primary);
}
}
@@ -659,7 +658,7 @@ h3.section-header {
}
}
@include smallScreen {
@include responsive.smallScreen{
.slider {
display: flex;
flex-wrap: wrap;
src/components/StationsView/StationStats.vue
+112 -63
View File
@@ -8,58 +8,106 @@
<button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
<img src="/images/icon-stats.svg" alt="Open filters icon" />
<!-- {{ $t('train-stats.stats-button') }} -->
<span>STATYSTYKI</span>
{{ $t('station-stats.stats-button') }}
</button>
<transition name="dropdown-anim">
<div class="dropdown_wrapper" v-if="showDropdown">
<div>
<h1 class="text--primary">
<h1 class="stats-title text--primary">
<img src="/images/icon-stats.svg" alt="Open filters icon" />
{{ $t('train-stats.title') }}
{{ $t('station-stats.title') }}
</h1>
<hr style="margin: 0.5em 0" />
<ul class="stats-list">
<li>
<span>
{{ $t('station-stats.u-factor') }}
<a
href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
target="_blank"
:data-tooltip="$t('station-stats.u-factor-tooltip')"
>(?)</a
>:
</span>
<b class="u-factor" :style="calculateFactorStyle()">
{{ uFactor.toFixed(2) }}
</b>
</li>
<li>
{{ $t('station-stats.avg-timetable-count') }}
<b>{{ avgTimetableCount.toFixed(2) }}</b>
</li>
<li>
{{ $t('station-stats.single-track-count') }}
<b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
</li>
<li>
{{ $t('station-stats.double-track-count') }}
<b>{{ trackCount.twoWay }}</b>
(<b>{{ trackCount.twoWayElectric }} ⚡</b>)
</li>
<li>
{{ $t('station-stats.cross-sceneries') }}
<b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
</li>
<li>
{{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
<b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
<b>{{ spawnCount.all }}</b> - ALL
</li>
</ul>
<div v-if="uFactor > -1 || avgTimetableCount > -1 || trackCount.all > 0">
<div class="badges-container">
<div class="badge stat-badge">
<span>
{{ $t('station-stats.u-factor') }}
<a
href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
target="_blank"
:data-tooltip="$t('station-stats.u-factor-tooltip')"
>(?)</a
>:
</span>
<span>
<b class="u-factor" :style="calculateFactorStyle()">
{{ uFactor >= 0 ? uFactor.toFixed(2) : '---' }}
</b>
</span>
</div>
<div class="badge stat-badge">
<span>{{ $t('station-stats.avg-timetable-count') }}</span>
<span>
<b>{{ avgTimetableCount >= 0 ? avgTimetableCount.toFixed(2) : '---' }}</b>
</span>
</div>
</div>
<hr style="margin: 0.5em 0" />
<div class="badges-container">
<div class="badge stat-badge">
<span>{{ $t('station-stats.single-track-count') }}</span>
<span>
<b> {{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
</span>
</div>
<div class="badge stat-badge">
<span>{{ $t('station-stats.double-track-count') }}</span>
<span>
<b>{{ trackCount.twoWay }}</b> (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
</span>
</div>
<div class="badge stat-badge">
<span> {{ $t('station-stats.cross-sceneries') }}</span>
<span>
<b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
</span>
</div>
</div>
<hr style="margin: 0.5em 0" />
<div class="badges-container">
<div class="badge stat-badge">
<span> {{ $t('station-stats.open-spawns-all') }}</span>
<span>
<b>{{ spawnCount.all }}</b>
</span>
</div>
<div class="badge stat-badge">
<span> {{ $t('station-stats.open-spawns-pas') }}</span>
<span>
<b>{{ spawnCount.passenger }}</b>
</span>
</div>
<div class="badge stat-badge">
<span> {{ $t('station-stats.open-spawns-freight') }}</span>
<span>
<b>{{ spawnCount.freight }}</b>
</span>
</div>
<div class="badge stat-badge">
<span> {{ $t('station-stats.open-spawns-loco') }}</span>
<span>
<b>{{ spawnCount.loco }}</b>
</span>
</div>
</div>
</div>
<div class="no-data" v-else>{{ $t('station-stats.no-stats') }}</div>
</div>
<div tabindex="0" @focus="() => (showDropdown = false)"></div>
@@ -86,9 +134,9 @@ export default defineComponent({
},
calculateFactorStyle() {
if (this.uFactor == 0) return '';
if (this.uFactor <= 0) return '';
const norm = this.uFactor == 0 ? 1 : Math.max(Math.min(this.uFactor / 2, 1), 0);
const norm = Math.max(Math.min(this.uFactor / 2, 1), 0);
const lerp = 120 * norm;
return `color: hsl(${lerp}, 100%, 60%)`;
@@ -105,7 +153,7 @@ export default defineComponent({
(train) => train.region == this.mainStore.region.id
);
return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : -1;
},
avgTimetableCount() {
@@ -118,7 +166,7 @@ export default defineComponent({
return acc;
}, 0);
if (regionSceneries.length == 0) return 0;
if (regionSceneries.length == 0) return -1;
return timetableCountSum / regionSceneries.length;
},
@@ -135,6 +183,8 @@ export default defineComponent({
(acc, st) => {
const { routes } = st.generalInfo!;
acc.all++;
if (
routes.single.filter((r) => !r.isInternal).length > 0 &&
routes.double.filter((r) => !r.isInternal).length > 0
@@ -163,7 +213,8 @@ export default defineComponent({
twoWay: 0,
twoWayElectric: 0,
crossTrack: 0,
crossTrackElectric: 0
crossTrackElectric: 0,
all: 0
}
);
},
@@ -190,15 +241,18 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/dropdown.scss';
@import '../../styles/badge.scss';
@use '../../styles/dropdown';
@use '../../styles/badge';
@use '../../styles/responsive';
h1 img {
h1.stats-title img {
vertical-align: text-bottom;
}
h3 {
margin: 0.5em 0;
.badges-container {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
.u-factor {
@@ -219,19 +273,14 @@ h3 {
}
}
ul.stats-list {
list-style: disc;
padding-left: 1em;
margin-top: 1em;
& > li {
margin: 0.25em 0;
}
.no-data {
font-size: 1.1em;
color: #ccc;
}
@include smallScreen {
.filter-button span {
display: none;
@include responsive.smallScreen {
h1.stats-title {
text-align: center;
}
}
</style>
src/components/StationsView/StationTable.vue
+10 -9
View File
@@ -400,9 +400,10 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
@import '../../styles/icons.scss';
@use '../../styles/responsive';
@use '../../styles/icons';
@use 'sass:color';
$rowCol: #424242;
@@ -435,7 +436,7 @@ table {
}
thead tr {
background-color: $bgCol;
background-color: var(--clr-bg3);
}
thead th {
@@ -477,7 +478,7 @@ table {
}
padding: 0.5em 0.25em;
background-color: $bgCol;
background-color: var(--clr-bg3);
white-space: pre-wrap;
cursor: pointer;
@@ -504,13 +505,13 @@ tr,
vertical-align: middle;
&:nth-child(even) {
background-color: lighten($rowCol, 5);
background-color: color.adjust($rowCol, $lightness: 5%);
color: white;
}
&:hover,
&:focus {
background-color: lighten($rowCol, 20);
background-color: color.adjust($rowCol, $lightness: 15%);
}
td {
@@ -524,7 +525,7 @@ tr,
opacity: 0.2;
}
@include smallScreen() {
@include responsive.smallScreen{
margin: 0;
padding: 0.3em 0.5em;
font-size: 1em;
@@ -537,7 +538,7 @@ tr,
max-width: 200px;
&.default {
color: $accentCol;
color: var(--clr-primary);
}
&.nonPublic {
src/components/TrainsView/TrainInfo.vue
+2 -1
View File
@@ -264,7 +264,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/badge.scss';
@use '../../styles/badge';
.image-warning {
height: 1em;
@@ -297,6 +297,7 @@ export default defineComponent({
.train-info {
display: flex;
flex-direction: column;
font-size: 1em;
gap: 0.25em;
background-color: #1a1a1a;
src/components/TrainsView/TrainOptions.vue
+29 -22
View File
@@ -24,31 +24,26 @@
@blur="preventKeyDown = false"
:placeholder="$t(`options.search-train`)"
/>
<button class="search-exit">
<img
src="/images/icon-exit.svg"
alt="Trains search clear icon"
@click="onInputClear('train')"
/>
<button class="btn btn--action search-exit" @click="onInputClear('train')">
<img src="/images/icon-exit.svg" alt="Trains search clear icon" />
</button>
</div>
<div class="search-box">
<input
v-model="searchedDriver"
<select
class="search-input"
id="driver-search"
name="driver-search"
@focus="preventKeyDown = true"
@blur="preventKeyDown = false"
:placeholder="$t(`options.search-driver`)"
/>
<button class="search-exit">
<img
src="/images/icon-exit.svg"
alt="Driver search clear icon"
@click="onInputClear('driver')"
/>
name="active-trains"
id="active-trains"
v-model="searchedDriver"
>
<option value="">{{ $t('options.search-driver') }}</option>
<option v-for="driverName in activeDriverNames" :value="driverName">
{{ driverName }}
</option>
</select>
<button class="btn btn--action search-exit" @click="onInputClear('driver')">
<img src="/images/icon-exit.svg" alt="Trains search clear icon" />
</button>
</div>
</div>
@@ -101,6 +96,7 @@
import { defineComponent, inject, PropType } from 'vue';
import keyMixin from '../../mixins/keyMixin';
import { TrainFilter, TrainFilterSection } from './typings';
import { useMainStore } from '../../store/mainStore';
export default defineComponent({
mixins: [keyMixin],
@@ -120,6 +116,7 @@ export default defineComponent({
data() {
return {
showOptions: false,
store: useMainStore(),
lastSelectedFilter: null as TrainFilter | null,
TrainFilterSection
};
@@ -141,6 +138,16 @@ export default defineComponent({
id,
value: this.$t(`options.sort-${id}`)
}));
},
activeDriverNames() {
const driverNameSet = new Set<string>();
this.store.trainList.forEach((train) => {
driverNameSet.add(train.driverName);
});
return [...driverNameSet].sort((a, b) => a.localeCompare(b));
}
},
@@ -195,8 +202,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/dropdown.scss';
@import '../../styles/dropdown_filters.scss';
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';
.search_content > div {
margin: 0.5em auto;
src/components/TrainsView/TrainSchedule.vue
+1 -1
View File
@@ -367,7 +367,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@use '../../styles/responsive';
$barClr: #b1b1b1;
$confirmedClr: #4ae24a;
src/components/TrainsView/TrainStats.vue
+9 -5
View File
@@ -80,7 +80,11 @@
<h3>{{ $t('train-stats.top-units') }}</h3>
<transition-group tag="ul" name="stats-anim">
<li class="badge stat-badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
<li
class="badge stat-badge"
v-for="top in stats.topUnits.slice(0, 7)"
:key="top.name"
>
<span>{{ top.name }}</span>
<span>{{ top.count }}</span>
</li>
@@ -221,9 +225,9 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/dropdown.scss';
@import '../../styles/badge.scss';
@import '../../styles/responsive.scss';
@use '../../styles/dropdown';
@use '../../styles/badge';
@use '../../styles/responsive';
h1 img {
vertical-align: text-bottom;
@@ -248,7 +252,7 @@ h3 {
max-width: 600px;
}
@include smallScreen {
@include responsive.smallScreen{
.no-data {
text-align: center;
}
src/components/TrainsView/TrainTable.vue
+7 -3
View File
@@ -19,7 +19,7 @@
>)
</div>
<transition-group name="list-anim" tag="ul">
<transition-group name="list-anim" tag="div" class="list_wrapper">
<TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
</transition-group>
</div>
@@ -93,8 +93,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/animations.scss';
@use '../../styles/responsive';
@use '../../styles/animations';
.train-table {
height: calc(100vh - 11em);
@@ -105,6 +105,10 @@ export default defineComponent({
overflow-x: hidden;
}
.list_wrapper {
padding: 2px; // ensures focused items outline visibility
}
.table-warning {
text-align: center;
src/components/TrainsView/TrainTableItem.vue
+19 -20
View File
@@ -1,29 +1,27 @@
<template>
<li class="train-item">
<router-link class="a-block" :to="train.driverRouteLocation">
<div class="item-wrapper">
<TrainInfo :train="train" />
<router-link :to="train.driverRouteLocation" class="train-item">
<div class="item-wrapper">
<TrainInfo :train="train" />
<div class="train-stats">
<StockList :trainStockList="train.stockList" :tractionOnly="true" />
<div class="train-stats">
<StockList :trainStockList="train.stockList" :tractionOnly="true" />
<div>
<span>{{ train.speed }}km/h</span>
<div>
<span>{{ train.speed }}km/h</span>
<div>
<span> {{ train.length }}m</span>
<span> {{ train.length }}m</span>
&bull;
<span> {{ (train.mass / 1000).toFixed(1) }}t</span>
<span v-if="train.stockList.length > 1">
&bull;
<span> {{ (train.mass / 1000).toFixed(1) }}t</span>
<span v-if="train.stockList.length > 1">
&bull;
{{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
</span>
</div>
{{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
</span>
</div>
</div>
</div>
</router-link>
</li>
</div>
</router-link>
</template>
<script setup lang="ts">
@@ -41,9 +39,10 @@ defineProps({
</script>
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@use '../../styles/responsive';
.train-item {
display: block;
background-color: #1a1a1a;
margin-bottom: 1em;
width: 100%;
@@ -67,7 +66,7 @@ defineProps({
line-height: 1.5em;
}
@include smallScreen() {
@include responsive.smallScreen {
.item-wrapper {
grid-template-columns: 1fr;
gap: 1em 0;
src/locales/en.json
+12 -7
View File
@@ -157,9 +157,8 @@
"sort-title": "SORT BY:",
"filter-title": "FILTER BY:",
"search-title": "SEARCH:",
"search-train-no": "Train no. / #",
"search-train": "Train no.",
"search-driver": "Driver name",
"search-train": "Train no. / #",
"search-driver": "Choose a driver...",
"search-dispatcher": "Dispatcher name",
"search-station": "Scenery name / #",
"search-author": "Timetable author name",
@@ -332,13 +331,19 @@
"active-filters": "Attention! You got active filters!"
},
"station-stats": {
"title": "ONLINE SCENERIES STATS",
"stats-button": "STATISTICS",
"u-factor": "U-factor",
"u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
"avg-timetable-count": "Average count of scenery timetables:",
"avg-timetable-count": "TT average:",
"single-track-count": "Single track routes:",
"double-track-count": "Double track routes:",
"cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
"open-spawns": "Open spawns:"
"cross-sceneries": "Cross-track sceneries",
"open-spawns-all": "Spawns (ALL):",
"open-spawns-pas": "Spawns (PAS):",
"open-spawns-freight": "Spawns (TOW):",
"open-spawns-loco": "Spawns (LOK):",
"no-stats": "No statistics available for the current region!"
},
"trains": {
"no-trains": "No trains to show here!",
@@ -394,7 +399,7 @@
},
"train-stats": {
"stats-button": "STATISTICS",
"title": "STATISTICS ONLINE",
"title": "ONLINE TRAINS STATS",
"timetable-count": "ACTIVE TIMETABLES",
"avg-speed": "AVG SPEED",
"avg-timetable": "AVG TIMETABLE",
src/locales/pl.json
+11 -6
View File
@@ -154,9 +154,8 @@
"sort-title": "SORTUJ WG:",
"filter-title": "FILTRUJ WG:",
"search-title": "SZUKAJ:",
"search-train-no": "Nr pociągu",
"search-train": "Nr pociągu / #",
"search-driver": "Nick maszynisty",
"search-driver": "Wybierz maszynistę...",
"search-dispatcher": "Nick dyżurnego",
"search-station": "Nazwa scenerii / #",
"search-author": "Nick autora rozkładu jazdy",
@@ -328,13 +327,19 @@
"active-filters": "Uwaga! Masz obecnie aktywne filtry!"
},
"station-stats": {
"title": "STATYSTYKI AKTYWNYCH SCENERII",
"stats-button": "STATYSTYKI",
"u-factor": "Współczynnik Ugla",
"u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
"avg-timetable-count": "Średnia liczba rozkładów jazdy na sceneriach:",
"avg-timetable-count": "Średnia RJ:",
"single-track-count": "Szlaki jednotorowe:",
"double-track-count": "Szlaki dwutorowe:",
"cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
"open-spawns": "Otwarte spawny:"
"cross-sceneries": "Scenerie przejściowe:",
"open-spawns-all": "Spawny (ALL):",
"open-spawns-pas": "Spawny (PAS):",
"open-spawns-freight": "Spawny (TOW):",
"open-spawns-loco": "Spawny (LOK):",
"no-stats": "Brak statystyk online dla wybranego serwera!"
},
"trains": {
"no-trains": "Brak pociągów do wyświetlenia!",
@@ -381,7 +386,7 @@
},
"train-stats": {
"stats-button": "STATYSTYKI",
"title": "STATYSTYKI ONLINE",
"title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
"timetable-count": "AKTYWNE RJ",
"avg-speed": "ŚREDNIA PRĘDKOŚĆ",
"avg-timetable": "ŚREDNI RJ",
src/store/apiStore.ts
-2
View File
@@ -53,8 +53,6 @@ export const useApiStore = defineStore('apiStore', {
},
updateTick(t: number) {
if (this.dataStatuses.connection == Status.Data.Offline) return;
// Static data refresh
if (t >= this.nextDataCheckTime) {
this.fetchDonatorsData();
src/styles/animations.scss → src/styles/_animations.scss
View File
src/styles/badge.scss → src/styles/_badge.scss
+4 -5
View File
@@ -1,5 +1,4 @@
@import 'variables.scss';
@import 'responsive.scss';
@use 'responsive';
.badge {
font-weight: 600;
@@ -9,7 +8,7 @@
margin: 0.25em;
span {
& > span {
display: inline-block;
background: #585858;
padding: 0.2em 0.4em;
@@ -23,7 +22,7 @@
text-align: center;
@include smallScreen() {
@include responsive.smallScreen{
font-size: 1em;
}
}
@@ -131,7 +130,7 @@
color: white;
& > span:first-child {
background-color: $accentCol;
background-color: var(--clr-primary);
color: black;
}
}
src/styles/card.scss → src/styles/_card.scss
+2 -3
View File
@@ -1,5 +1,4 @@
@import './variables.scss';
@import './responsive.scss';
@use 'responsive';
.card-dimmer {
position: fixed;
@@ -46,7 +45,7 @@
}
}
@include smallScreen {
@include responsive.smallScreen{
.card {
max-height: 85vh;
}
src/styles/dropdown_filters.scss → src/styles/_dropdown-filters.scss
+4 -14
View File
@@ -1,6 +1,5 @@
@import 'search_box.scss';
@import 'responsive.scss';
@import 'variables.scss';
@use 'search-box';
@use 'responsive';
.actions-bar {
display: flex;
@@ -51,7 +50,7 @@ h1.option-title {
}
.sort-option[data-selected='true'] {
color: $accentCol;
color: var(--clr-primary);
font-weight: bold;
}
@@ -73,15 +72,6 @@ h1.option-title {
.search {
margin: 0.5em auto;
}
.search-box {
.search-exit {
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 0;
}
}
}
.options_actions {
@@ -95,7 +85,7 @@ h1.option-title {
}
}
@include smallScreen() {
@include responsive.smallScreen{
h1 {
text-align: center;
src/styles/dropdown.scss → src/styles/_dropdown.scss
+4 -5
View File
@@ -1,5 +1,4 @@
@import 'responsive.scss';
@import 'variables.scss';
@use 'responsive';
.dropdown-anim {
&-enter-from,
@@ -29,9 +28,9 @@
left: 0;
top: calc(100% + 0.5em);
background-color: $bgCol;
background-color: var(--clr-bg3);
// box-shadow: 0 5px 10px 2px #0f0f0f;
box-shadow: 0 0 5px 1px $accentCol;
box-shadow: 0 0 5px 1px var(--clr-primary);
width: 100%;
max-width: 550px;
@@ -40,7 +39,7 @@
z-index: 100;
}
@include smallScreen {
@include responsive.smallScreen{
.dropdown_wrapper {
font-size: 1.1em;
max-width: 100%;
src/styles/fonts.scss → src/styles/_fonts.scss
View File
src/styles/global.scss → src/styles/_global.scss
+38 -25
View File
@@ -1,6 +1,5 @@
@import 'fonts';
@import 'variables';
@import 'responsive';
@use 'fonts';
@use 'responsive';
:root {
--clr-primary: #ffc014;
@@ -8,6 +7,7 @@
--clr-bg: #4d4d4d;
--clr-bg2: #1b1b1b;
--clr-bg3: #1d1d1d;
--clr-accent: #1085b3;
--clr-accent2: #ff3d5d;
@@ -18,7 +18,7 @@
--clr-pn: #ffd000;
--clr-error: #fa3636;
--clr-warning: #c59429;
--clr-warning: #ffe15b;
--clr-donator: #f7a4ff;
@@ -60,11 +60,21 @@ body {
overflow-x: hidden;
position: relative;
font-size: 16px;
@include responsive.smallScreen {
font-size: calc(0.65rem + 0.85vw);
}
@include responsive.screenLandscape {
font-size: calc(0.45rem + 0.8vw);
}
&.no-scroll {
overflow-y: hidden;
padding-right: var(--no-scroll-padding);
@include smallScreen() {
@include responsive.smallScreen {
padding: 0;
}
}
@@ -108,11 +118,11 @@ input {
}
*:focus-visible {
outline: 1px solid $accentCol;
outline: 1px solid var(--clr-primary);
}
.title {
color: $accentCol;
color: var(--clr-primary);
font-weight: 600;
padding: 0.35em 0;
@@ -130,26 +140,29 @@ a {
color: inherit;
}
a:not(.a-block):not(.a-button):not(.a-row) {
display: inline-block;
transition: color 0.3s;
&:hover,
&:focus {
color: $accentCol;
border: none;
}
}
a.a-block {
display: block;
}
a.a-row {
display: table-row;
}
a:focus-visible {
outline: 1px solid var(--clr-primary);
}
.route-link {
margin: 0 0.2em;
transition: color 100ms;
&-active,
&[data-active='true'] {
color: var(--clr-primary);
font-weight: bold;
}
&:hover {
color: var(--clr-primary);
}
}
ul {
padding: 0;
list-style: none;
@@ -292,7 +305,7 @@ a.a-button {
width: 1.3em;
}
@include smallScreen() {
@include responsive.smallScreen {
bottom: 1em;
right: 0;
left: 50%;
@@ -330,7 +343,7 @@ a.a-button {
cursor: help;
}
@include smallScreen {
@include responsive.smallScreen {
::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
src/styles/icons.scss → src/styles/_icons.scss
View File
src/styles/JournalSection.scss → src/styles/_journal-section.scss
+4 -4
View File
@@ -1,5 +1,5 @@
@import 'responsive.scss';
@import 'animations.scss';
@use 'responsive';
@use 'animations';
.journal-list {
display: flex;
@@ -12,7 +12,7 @@
.list_wrapper {
overflow-y: auto;
height: calc(100vh - 12.5em);
min-height: 500px;
min-height: 650px;
margin-top: 0.5em;
position: relative;
@@ -68,7 +68,7 @@
font-size: 1.2em;
}
@include smallScreen() {
@include responsive.smallScreen{
.journal_top-bar {
justify-content: center;
flex-wrap: wrap;
src/styles/JournalStats.scss → src/styles/_journal-stats.scss
+4 -5
View File
@@ -1,6 +1,5 @@
@import 'variables.scss';
@import 'responsive.scss';
@import 'badge.scss';
@use 'responsive';
@use 'badge';
.stats-tab {
position: absolute;
@@ -11,7 +10,7 @@
width: 100%;
background-color: #1a1a1a;
box-shadow: 0 0 5px 1px $accentCol;
box-shadow: 0 0 5px 1px var(--clr-primary);
padding: 1em;
display: flex;
@@ -33,7 +32,7 @@ hr.section-separator {
gap: 0.5em;
}
@include smallScreen {
@include responsive.smallScreen{
.journal-stats {
text-align: center;
}
src/styles/option.scss → src/styles/_option.scss
View File
src/styles/responsive.scss → src/styles/_responsive.scss
View File
src/styles/sceneryViewTables.scss → src/styles/_scenery-history-table.scss
View File
src/styles/search_box.scss → src/styles/_search-box.scss
+19 -3
View File
@@ -1,4 +1,4 @@
@import 'responsive.scss';
@use 'responsive';
.search {
label {
@@ -11,8 +11,9 @@
position: relative;
display: flex;
align-items: center;
gap: 0.25em;
border-radius: 0.5em;
min-width: 200px;
margin-right: 0.25em;
}
@@ -20,6 +21,8 @@
&-input {
border: none;
background-color: #424242;
color: white;
border-radius: 0.5em;
padding: 0.35em 0.5em;
width: 100%;
@@ -27,6 +30,7 @@
&-exit {
background-color: #424242;
border-radius: 0.5em;
img {
vertical-align: middle;
@@ -39,7 +43,7 @@
max-width: 300px;
}
@include smallScreen {
@include responsive.smallScreen {
&-box,
&-button {
margin: 0.5em 0 0 0;
@@ -50,3 +54,15 @@
}
}
}
.search-box > i {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
padding-right: 0.5em;
}
select.search-input {
}
src/styles/variables.scss
-11
View File
@@ -1,11 +0,0 @@
$primaryCol: #2c2c2c;
$secondaryCol: #01e733;
$bgCol: #1d1d1d;
$bgLigtherCol: #5b5b5b;
$errorCol: #ff1919;
$warningCol: #ffe15b;
$accentCol: #ffc014;
$accent2Col: #ff3d5d;
src/views/DriverView.vue
+4 -3
View File
@@ -147,7 +147,8 @@ function copyStockToClipboard() {
</script>
<style lang="scss" scoped>
@import '../styles/responsive';
@use '../styles/responsive';
@use 'sass:color';
$viewBgCol: #1a1a1a;
@@ -176,7 +177,7 @@ $viewBgCol: #1a1a1a;
border-radius: 0.5em 0.5em 0 0;
&:hover {
background-color: lighten($viewBgCol, 10);
background-color: color.adjust($viewBgCol, $lightness: 10%);
}
}
@@ -209,7 +210,7 @@ $viewBgCol: #1a1a1a;
gap: 0.5em;
}
@include smallScreen {
@include responsive.smallScreen{
span.hidable {
display: none;
}
src/views/JournalDispatchers.vue
+1 -1
View File
@@ -332,5 +332,5 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/JournalSection.scss';
@use '../styles/journal-section';
</style>
src/views/JournalTimetables.vue
+1 -1
View File
@@ -482,5 +482,5 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/JournalSection.scss';
@use '../styles/journal-section';
</style>
src/views/SceneryView.vue
+5 -6
View File
@@ -173,8 +173,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/responsive.scss';
@import '../styles/variables.scss';
@use '../styles/responsive';
button.back-btn {
img {
@@ -193,7 +192,7 @@ button.back-btn {
text-align: center;
padding: 2em 1em;
color: $warningCol;
color: var(--clr-warning);
display: inline-block;
@@ -275,7 +274,7 @@ button.back-btn {
.checkpoint_item {
&.current {
font-weight: bold;
color: $accentCol;
color: var(--clr-primary);
}
&:not(:last-child)::after {
@@ -286,7 +285,7 @@ button.back-btn {
}
}
@include midScreen {
@include responsive.midScreen {
.scenery-wrapper {
grid-template-columns: 1fr;
gap: 0;
@@ -304,7 +303,7 @@ button.back-btn {
}
}
@include smallScreen {
@include responsive.smallScreen{
.scenery-left {
max-height: 100vh;
}
src/views/StationsView.vue
+5 -8
View File
@@ -4,7 +4,7 @@
<div class="stations-options">
<StationFilterCard
:showCard="filterCardOpen"
:exit="(filterCardOpen = false)"
:exit="filterCardOpen = false"
ref="filterCardRef"
/>
@@ -78,8 +78,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/variables.scss';
@import '../styles/responsive.scss';
@use '../styles/responsive';
.stations-view {
position: relative;
@@ -107,15 +106,13 @@ export default defineComponent({
button.btn-donation {
margin-left: auto;
$btnColor: #254069;
background-color: $btnColor;
background-color: #254069;
&:hover {
background-color: lighten($btnColor, 5%);
background-color: #2e4f81;
}
@include smallScreen {
@include responsive.smallScreen {
span {
display: none;
}
src/views/TrainsView.vue
+2 -2
View File
@@ -114,7 +114,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../styles/responsive.scss';
@use '../styles/responsive';
.trains-view {
position: relative;
@@ -134,7 +134,7 @@ export default defineComponent({
margin-bottom: 0.5em;
}
@include smallScreen {
@include responsive.smallScreen {
.trains_topbar {
justify-content: space-between;
}
vite.config.ts
+17 -17
View File
@@ -1,17 +1,22 @@
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';
import path from 'path';
export default defineConfig({
server: {
port: 5001,
open: true
},
preview: {
port: 4001,
open: true
},
server: { port: 5123, open: true },
preview: { port: 4001, open: true },
publicDir: 'public',
css: {
preprocessorOptions: {
scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] }
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
plugins: [
vue(),
VitePWA({
@@ -26,20 +31,15 @@ export default defineConfig({
{
urlPattern:
/^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
handler: 'StaleWhileRevalidate',
handler: 'NetworkFirst',
options: {
cacheName: 'stacjownik-api-cache',
cacheableResponse: {
statuses: [0, 200]
}
cacheableResponse: { statuses: [0, 200] }
}
},
}
]
},
devOptions: {
enabled: true,
suppressWarnings: true
}
devOptions: { enabled: true, suppressWarnings: true }
})
],
build: {
yarn.lock
+2201 -2189
View File
File diff suppressed because it is too large Load Diff