mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Dodano przycisk powrotu do listy scenerii w widoku scenerii
This commit is contained in:
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M32 5L8 20L32 35" stroke="white" stroke-width="4.64516"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 170 B |
@@ -10,7 +10,7 @@
|
|||||||
@keydown.space="toggleTimeline(i)"
|
@keydown.space="toggleTimeline(i)"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
{{ timeline.date }} <img :src="icons.descArrow" alt="" />
|
{{ timeline.date }} <img :src="timeline.showTimeline ? icons.ascArrow : icons.descArrow" alt="arrow" />
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<span v-if="timeline.showTimeline">
|
<span v-if="timeline.showTimeline">
|
||||||
|
|||||||
+31
-17
@@ -10,26 +10,29 @@
|
|||||||
|
|
||||||
<div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
|
<div class="scenery-wrapper" v-if="stationInfo" ref="card-wrapper">
|
||||||
<!-- <scenery-info-header :station="stationInfo" /> -->
|
<!-- <scenery-info-header :station="stationInfo" /> -->
|
||||||
|
<button v-if="!timetableOnly" class="back-btn btn btn--image" title="Powrót do scenerii" @click="navigateTo('/')">
|
||||||
|
<img :src="icons.back" alt="Back to scenery" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-if="!timetableOnly"
|
||||||
|
class="history-btn btn btn--image"
|
||||||
|
@click="setCardViewMode(viewMode == 'history' ? 'info' : 'history')"
|
||||||
|
:title="viewMode == 'history' ? 'Powrót do widoku scenerii' : 'Widok historii dyżurnych ruchu'"
|
||||||
|
>
|
||||||
|
<img :src="viewMode == 'history' ? icons.history : icons.user" alt="icon" />
|
||||||
|
</button>
|
||||||
|
|
||||||
<SceneryHeader :station="stationInfo" />
|
<SceneryHeader :station="stationInfo" />
|
||||||
|
|
||||||
|
|
||||||
<div v-if="viewMode == 'info'">
|
<div v-if="viewMode == 'info'">
|
||||||
<button v-if="!timetableOnly" class="history-btn btn btn--image" @click="setCardViewMode('history')" title="Widok historii dyżurnych ruchu">
|
|
||||||
<img :src="icons.history" alt="History icon" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
|
<SceneryInfo :station="stationInfo" :timetableOnly="timetableOnly" />
|
||||||
<SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
|
<SceneryTimetable :station="stationInfo" :timetableOnly="timetableOnly" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="viewMode == 'history'">
|
|
||||||
<button class="history-btn btn btn--image" @click="setCardViewMode('info')">
|
|
||||||
<img :src="icons.user" alt="History icon" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
<div v-else-if="viewMode == 'history'">
|
||||||
<SceneryHistory :name="stationInfo.name" />
|
<SceneryHistory :name="stationInfo.name" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -41,7 +44,7 @@ import { DataStatus } from '@/scripts/enums/DataStatus';
|
|||||||
import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
|
import SceneryInfo from '@/components/SceneryView/SceneryInfo.vue';
|
||||||
import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
|
import SceneryTimetable from '@/components/SceneryView/SceneryTimetable.vue';
|
||||||
import SceneryHistory from '@/components/SceneryView/SceneryHistory.vue';
|
import SceneryHistory from '@/components/SceneryView/SceneryHistory.vue';
|
||||||
import SceneryHeader from "@/components/SceneryView/SceneryHeader.vue";
|
import SceneryHeader from '@/components/SceneryView/SceneryHeader.vue';
|
||||||
|
|
||||||
import ActionButton from '@/components/Global/ActionButton.vue';
|
import ActionButton from '@/components/Global/ActionButton.vue';
|
||||||
|
|
||||||
@@ -57,6 +60,7 @@ export default defineComponent({
|
|||||||
icons: {
|
icons: {
|
||||||
history: require('@/assets/icon-history.svg'),
|
history: require('@/assets/icon-history.svg'),
|
||||||
user: require('@/assets/icon-user.svg'),
|
user: require('@/assets/icon-user.svg'),
|
||||||
|
back: require('@/assets/icon-back.svg'),
|
||||||
},
|
},
|
||||||
|
|
||||||
cardHeight: 0,
|
cardHeight: 0,
|
||||||
@@ -93,11 +97,15 @@ export default defineComponent({
|
|||||||
setCardViewMode(mode: string) {
|
setCardViewMode(mode: string) {
|
||||||
this.viewMode = mode;
|
this.viewMode = mode;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
navigateTo(path: string) {
|
||||||
|
this.$router.push(path);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.cardHeight = (this.$refs['card-wrapper'] as HTMLElement).getBoundingClientRect().height;
|
this.cardHeight = (this.$refs['card-wrapper'] as HTMLElement).getBoundingClientRect().height;
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -151,15 +159,21 @@ $sceneryBgCol: #333;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.history-btn {
|
button.btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.5em;
|
|
||||||
right: 0.5em;
|
|
||||||
|
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
|
|
||||||
|
top: 0.5em;
|
||||||
img {
|
img {
|
||||||
width: 2em;
|
width: 2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button.history-btn {
|
||||||
|
right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.back-btn {
|
||||||
|
left: 0.5em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user