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

feature: animacje list

Browse Source
This commit is contained in:
Spythere
2023-01-03 14:51:19 +01:00
parent aa7a6b220e
commit 25a248e95e
10 changed files with 64 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.scss
+5 -1
View File
@@ -46,7 +46,11 @@
font-size: 1rem;
@include smallScreen() {
font-size: calc(0.5rem + 1.3vw);
font-size: calc(0.5rem + 1.1vw);
}
@include screenLandscape() {
font-size: calc(0.45rem + 0.8vw);
}
}
src/components/JournalView/JournalDispatchersList.vue
+12 -20
View File
@@ -1,6 +1,5 @@
<template>
<ul class="journal-list">
<!-- <transition-group name="journal-list-anim"> -->
<transition-group class="journal-list" tag="ul" name="list-anim">
<li v-for="item in computedDispatcherHistory" :class="{ sticky: typeof item == 'string' }">
<div v-if="typeof item == 'string'" class="journal_day">
{{ item }}
@@ -9,6 +8,7 @@
<div
v-else
class="journal_item"
:key="item.timestampFrom + item.dispatcherId"
:class="{ online: item.isOnline }"
@click="navigateToScenery(item.stationName, item.isOnline)"
@keydown.enter="navigateToScenery(item.stationName, item.isOnline)"
@@ -44,8 +44,7 @@
</span>
</div>
</li>
<!-- </transition-group> -->
</ul>
</transition-group>
</template>
<script lang="ts">
@@ -95,6 +94,7 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/animations.scss';
@import '../../styles/responsive.scss';
@import '../../styles/JournalSection.scss';
@@ -117,9 +117,12 @@ li.sticky {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
text-align: left;
gap: 0.25em;
line-height: 1.7em;
padding: 0.75em;
&.online {
@@ -155,23 +158,12 @@ li.sticky {
.dispatcher-level {
display: inline-block;
text-align: center;
line-height: 150%;
width: 25px;
height: 25px;
line-height: 1.45em;
width: 1.45em;
height: 1.45em;
margin-right: 0.5em;
margin-right: 0.45em;
border-radius: 0.25em;
}
@include smallScreen() {
.journal_item {
flex-direction: column;
span {
margin-top: 0.25em;
text-align: center;
}
}
}
</style>
src/components/JournalView/JournalTimetablesList.vue
+5 -19
View File
@@ -1,9 +1,9 @@
<template>
<ul class="journal-list">
<transition-group class="journal-list" tag="ul" name="list-anim">
<li
v-for="{ timetable, sceneryList, ...item } in computedTimetableHistory"
class="journal_item"
:key="timetable.timetableId"
:key="timetable.id"
>
<div class="journal_item-info">
<div class="info-top">
@@ -17,7 +17,6 @@
<b>{{ timetable.trainNo }}</b>
| <span>{{ timetable.driverName }}</span> |
<span class="text--grayed">#{{ timetable.id }}</span>
<span v-if="timetable.driverLevel">
|
<b :style="calculateTextExpStyle(timetable.driverLevel)">
@@ -25,7 +24,6 @@
</b>
</span>
</span>
<span>
<b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
<b
@@ -46,26 +44,20 @@
</b>
</span>
</div>
<div class="info-route">
<b>{{ timetable.route.replace('|', ' - ') }}</b>
</div>
<hr />
<div class="scenery-list">
<span v-for="(scenery, i) in sceneryList" :key="scenery.name" :class="{ confirmed: scenery.confirmed }">
<span v-if="i > 0"> &gt;</span>
{{ scenery.name }}
<!-- Data odjazdu ze stacji początkowej -->
<span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
<!-- Data przyjazdu do stacji końcowej -->
<span v-if="i == sceneryList.length - 1" v-html="scenery.endDateHTML"> </span>
</span>
</div>
<!-- Status RJ -->
<div style="margin: 0.5em 0">
<span>
@@ -87,7 +79,6 @@
</b>
</span>
</div>
<!-- Nick dyżurnego -->
<div v-if="timetable.authorName">
<b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
@@ -95,7 +86,6 @@
<b>{{ timetable.authorName }}</b>
</router-link>
</div>
<button
v-if="timetable.stockString"
class="btn--option btn--show"
@@ -104,27 +94,22 @@
{{ $t('journal.stock-info') }}
<img :src="getIcon(`arrow-${item.showStock.value ? 'asc' : 'desc'}`)" alt="Arrow" />
</button>
<div class="info-extended" v-if="timetable.stockString && item.showStock.value">
<hr />
<div>
<span class="badge info-badge">
<span>{{ $t('journal.stock-max-speed') }}</span>
<span>{{ timetable.maxSpeed }}km/h</span>
</span>
<span class="badge info-badge">
<span>{{ $t('journal.stock-length') }}</span>
<span>{{ timetable.stockLength }}m</span>
</span>
<span class="badge info-badge">
<span>{{ $t('journal.stock-mass') }}</span>
<span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
</span>
</div>
<ul class="stock-list">
<li v-for="(car, i) in timetable.stockString.split(';')" :key="i">
<img
@@ -132,14 +117,13 @@
:src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
:alt="car"
/>
<div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</transition-group>
</template>
<script lang="ts">
@@ -219,11 +203,13 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import '../../styles/animations.scss';
@import '../../styles/variables.scss';
@import '../../styles/responsive.scss';
@import '../../styles/badge.scss';
@import '../../styles/JournalSection.scss';
hr {
margin: 0.25em 0;
}
src/components/SceneryView/SceneryTimetable.vue
+2 -32
View File
@@ -41,7 +41,7 @@
{{ $t('scenery.no-timetables') }}
</span>
<transition-group name="timetables-anim">
<transition-group name="list-anim">
<div
class="timetable-item"
v-for="(scheduledTrain, i) in computedScheduledTrains"
@@ -272,22 +272,7 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/variables.scss';
.timetables-anim-move,
.timetables-anim-enter-active,
.timetables-anim-leave-active {
transition: all 250ms ease;
}
.timetables-anim-enter-from,
.timetables-anim-leave-to {
opacity: 0;
transform: translateY(30px);
}
.timetables-anim-leave-active {
position: absolute;
}
@import '../../styles/animations.scss';
.scenery-timetable {
height: 100%;
@@ -486,21 +471,6 @@ export default defineComponent({
font-size: 0.85em;
}
.scenery-timetable-list-anim {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active {
transition: all 100ms ease-out;
}
&-leave-active {
transition: all 100ms ease-out 100ms;
}
}
@include smallScreen {
.timetable-item {
grid-template-columns: 1fr;
src/components/TrainsView/TrainTable.vue
+3 -3
View File
@@ -16,8 +16,7 @@
<b class="warning-timeout">?</b>
{{ $t('trains.timeout') }}
</div> -->
<ul class="train-list" v-else>
<transition-group name="list-anim" tag="ul" class="train-list" v-else>
<li
class="train-row"
v-for="train in currentTrains"
@@ -27,7 +26,7 @@
>
<TrainInfo :train="train" />
</li>
</ul>
</transition-group>
</div>
</transition>
</div>
@@ -98,6 +97,7 @@ export default defineComponent({
<style lang="scss" scoped>
@import '../../styles/responsive.scss';
@import '../../styles/animations.scss';
.anim {
&-enter-from,
src/mixins/styleMixin.ts
+1 -1
View File
@@ -8,7 +8,7 @@ export default defineComponent({
const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor};` : '';
return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow}`;
return `background-color: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
},
calculateTextExpStyle(exp: number): string {
src/styles/animations.scss
+15
View File
@@ -0,0 +1,15 @@
.list-anim-move,
.list-anim-enter-active,
.list-anim-leave-active {
transition: all 250ms ease;
}
.list-anim-enter-from,
.list-anim-leave-to {
opacity: 0;
transform: translateY(30px);
}
.list-anim-leave-active {
position: absolute;
}
src/styles/responsive.scss
+16 -11
View File
@@ -1,18 +1,23 @@
@mixin smallScreen() {
@media only screen and (max-width: 700px) {
@content;
}
@media only screen and (max-width: 700px) {
@content;
}
}
@mixin midScreen() {
@media only screen and (max-width: 1150px) {
@content;
}
@media only screen and (max-width: 1150px) {
@content;
}
}
@mixin screenLandscape() {
@media only screen and (orientation: landscape) and (max-device-height: 450px) {
@content;
}
}
@mixin bigScreen() {
@media only screen and (min-width: 2000px) {
@content;
}
}
@media only screen and (min-width: 2000px) {
@content;
}
}
src/types/Journal/JournalTimetablesTypes.ts
+1 -1
View File
@@ -13,6 +13,6 @@ export interface JournalTimetableFilter {
}
export interface JournalTimetableSorter {
id: 'beginDate' | 'distance' | 'total-stops';
id: 'timetableId' | 'beginDate' | 'distance' | 'total-stops';
dir: -1 | 1;
}
src/views/JournalTimetables.vue
+4 -4
View File
@@ -6,7 +6,7 @@
<JournalOptions
@on-search-confirm="fetchHistoryData"
@on-options-reset="resetOptions"
:sorter-option-ids="[ 'beginDate', 'distance', 'total-stops']"
:sorter-option-ids="['timetableId', 'beginDate', 'distance', 'total-stops']"
:filters="journalTimetableFilters"
:currentOptionsActive="currentOptionsActive"
:data-status="dataStatus"
@@ -111,7 +111,7 @@ export default defineComponent({
}),
setup() {
const sorterActive: JournalTimetableSorter = reactive({ id: 'beginDate', dir: 1 });
const sorterActive: JournalTimetableSorter = reactive({ id: 'timetableId', dir: 1 });
const journalFilterActive = ref(journalTimetableFilters[0]);
const searchersValues = reactive({
@@ -147,7 +147,7 @@ export default defineComponent({
watch: {
currentQueryArray(q: string[]) {
this.currentOptionsActive =
q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1] != 'beginDate');
q.length > 2 || q.some((qv) => qv.startsWith('sortBy=') && qv.split('=')[1]);
},
},
@@ -188,7 +188,7 @@ export default defineComponent({
this.setSearchers('', '', '', '');
this.journalFilterActive = this.journalTimetableFilters[0];
this.sorterActive.id = 'beginDate';
this.sorterActive.id = 'timetableId';
this.fetchHistoryData();
},