From b9868ba52ee4cf7e00a217b440952d745f1ac321 Mon Sep 17 00:00:00 2001 From: Spythere Date: Sun, 12 Feb 2023 16:12:48 +0100 Subject: [PATCH] dzienniki: stylistyka --- src/App.scss | 2 +- .../JournalView/JournalDispatchersList.vue | 2 + .../JournalView/JournalTimetablesList.vue | 2 +- .../SceneryView/SceneryDispatchersHistory.vue | 3 +- .../SceneryView/SceneryTimetablesHistory.vue | 82 +++++++++++++++---- src/components/TrainsView/TrainInfo.vue | 2 +- src/mixins/styleMixin.ts | 4 +- src/styles/global.scss | 4 + 8 files changed, 80 insertions(+), 21 deletions(-) diff --git a/src/App.scss b/src/App.scss index 4fb119d..1033d9d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -46,7 +46,7 @@ font-size: 1rem; @include smallScreen() { - font-size: calc(0.5rem + 1.1vw); + font-size: calc(0.55rem + 1.1vw); } @include screenLandscape() { diff --git a/src/components/JournalView/JournalDispatchersList.vue b/src/components/JournalView/JournalDispatchersList.vue index e72ce69..2b63c99 100644 --- a/src/components/JournalView/JournalDispatchersList.vue +++ b/src/components/JournalView/JournalDispatchersList.vue @@ -136,6 +136,8 @@ li.sticky { display: flex; align-items: center; gap: 0.25em; + flex-wrap: wrap; + .level-badge { margin-right: 0.25em; diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue index a14f89e..e4ad7cd 100644 --- a/src/components/JournalView/JournalTimetablesList.vue +++ b/src/components/JournalView/JournalTimetablesList.vue @@ -252,7 +252,7 @@ hr { align-items: center; flex-wrap: wrap; - gap: 0.25em; + gap: 0.5em; margin-bottom: 0.5em; } diff --git a/src/components/SceneryView/SceneryDispatchersHistory.vue b/src/components/SceneryView/SceneryDispatchersHistory.vue index 17b4c73..ca07009 100644 --- a/src/components/SceneryView/SceneryDispatchersHistory.vue +++ b/src/components/SceneryView/SceneryDispatchersHistory.vue @@ -62,7 +62,7 @@ export default defineComponent({ dataStatus: DataStatus.Loading, }; }, - mounted() { + activated() { this.fetchAPIData(); }, methods: { @@ -106,6 +106,7 @@ export default defineComponent({ .item-general { display: flex; align-items: center; + flex-wrap: wrap; gap: 0.25em; } diff --git a/src/components/SceneryView/SceneryTimetablesHistory.vue b/src/components/SceneryView/SceneryTimetablesHistory.vue index e59e311..7182fac 100644 --- a/src/components/SceneryView/SceneryTimetablesHistory.vue +++ b/src/components/SceneryView/SceneryTimetablesHistory.vue @@ -2,8 +2,46 @@
-
{{ $t('scenery.history-list-empty') }}
-
    + + + + + + + + + + + + + + + + + + + + +
    IDKat. nrRelacjaMaszynistaAutor RJData
    + #{{ historyItem.id }} + + {{ historyItem.trainCategoryCode }}
    + {{ historyItem.trainNo }} +     		{{ historyItem.route.replace('|', ' -> ') }}{{ historyItem.driverName }} + {{ historyItem.authorName }} + + {{ $t('scenery.timetable-author-unknown') }} + + {{ localeDay(historyItem.beginDate, $i18n.locale) }} + {{ localeTime(historyItem.beginDate, $i18n.locale) }} +
    + +
    {{ $t('scenery.history-list-empty') }}
    + +
    {{ $t('scenery.timetable-author-title') }}: {{ historyItem.authorName }} {{ $t('scenery.timetable-author-unknown') }}
    - -
+ -->
@@ -57,7 +93,7 @@ export default defineComponent({ dataStatus: DataStatus.Loading, }; }, - mounted() { + activated() { this.fetchAPIData(); }, methods: { @@ -72,6 +108,10 @@ export default defineComponent({ console.error(error); } }, + + test() { + console.log('test'); + }, }, components: { Loading }, }); @@ -91,17 +131,29 @@ export default defineComponent({ padding: 0 0.5em; } -.list-item { - display: grid; - grid-template-columns: 1fr 2fr 2fr 1fr; - gap: 1em; - align-items: center; +table { + width: 100%; + border-collapse: collapse; - background-color: #353535; - padding: 0.5em; - margin: 0.5em 0; + thead { + position: sticky; + top: 0; + background-color: #222222; + } - line-height: 1.5em; + th { + padding: 0.5em; + } + + tr { + background-color: #353535; + border: none; + } + + td { + padding: 0.75em; + border-bottom: solid 5px #111; + } } @include smallScreen { diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue index fd200bc..37be2b5 100644 --- a/src/components/TrainsView/TrainInfo.vue +++ b/src/components/TrainsView/TrainInfo.vue @@ -11,7 +11,7 @@ - {{ train.timetableData.category }}  + {{ train.timetableData.category }}  {{ train.trainNo }} • diff --git a/src/mixins/styleMixin.ts b/src/mixins/styleMixin.ts index cc4747b..0702eab 100644 --- a/src/mixins/styleMixin.ts +++ b/src/mixins/styleMixin.ts @@ -6,7 +6,7 @@ export default defineComponent({ const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100}, 85%, 50%)`) : '#666'; const fontColor = exp > 14 || exp == -1 ? 'white' : 'black'; - const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : ''; + const boxShadow = isSupporter ? `box-shadow: 0 0 6px 2px ${bgColor};` : ''; return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`; }, @@ -14,7 +14,7 @@ export default defineComponent({ calculateTextExpStyle(exp: number, isSupporter = false): string { const textColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100}, 75%, 50%)`) : '#666'; - return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 10px ' + textColor : ''};`; + return `color: ${textColor}; ${isSupporter ? 'text-shadow: 0 0 6px ' + textColor : ''};`; }, statusClasses(occupiedTo: string) { diff --git a/src/styles/global.scss b/src/styles/global.scss index 96f9129..033831a 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -29,6 +29,10 @@ &-thumb { background-color: #666; } + + &-corner { + background-color: #333; + } } html {