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

Poprawki tooltipów

Browse Source
This commit is contained in:
Spythere
2021-05-24 22:09:42 +02:00
parent 46d141b74f
commit eeb9236b65
4 changed files with 95 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SceneryView/SceneryTimetable.vue
+6 -3
View File
@@ -16,7 +16,7 @@
</a>
</h3>
<div class="select-box" v-if="stationInfo.checkpoints">
<!-- <div class="select-box" v-if="stationInfo.checkpoints">
<div class="option-container">
<div class="option-selected" @click="toggleOptionList">
<span>{{ selectedOption }}</span>
@@ -35,7 +35,9 @@
</li>
</ul>
</div>
</div>
</div> -->
<!-- <select-box></select-box> -->
<span class="timetable-item loading" v-if="dataStatus == 0">{{
$t("app.loading")
@@ -141,8 +143,9 @@ import { Component, Vue, Prop } from "vue-property-decorator";
import Station from "@/scripts/interfaces/Station";
import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
import SelectBox from "../Global/SelectBox.vue";
@Component
@Component({ components: { SelectBox } })
export default class SceneryTimetable extends Vue {
@Prop() readonly stationInfo!: Station;
@Prop() readonly timetableOnly!: boolean;
src/components/TrainsView/TrainTable.vue
+59 -72
View File
@@ -20,17 +20,13 @@
>
<div class="wrapper no-timetable" v-if="!train.timetableData">
<span class="info">
<div class="info-main">
<div class="info-top">
<div class="top-category">
<span>
{{ train.trainNo }} |
<span style="color: gold">
{{ $t("trains.no-timetable") }}
</span>
</span>
</div>
</div>
<div class="info-category">
<span>
{{ train.trainNo }} |
<span style="color: gold">
{{ $t("trains.no-timetable") }}
</span>
</span>
</div>
</span>
@@ -114,63 +110,58 @@
>
<span class="info">
<div class="info-main">
<div class="info-top">
<div class="top-category">
<span class="warning twr" v-if="train.timetableData.TWR">
TWR
<span class="info-general">
<span class="warning twr" v-if="train.timetableData.TWR">
TWR
</span>
<span class="warning skr" v-if="train.timetableData.SKR">
SKR
</span>
<span>
<strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} |
<span style="color: gold">
{{ train.timetableData.routeDistance }} km
</span>
</span>
</span>
<span class="warning skr" v-if="train.timetableData.SKR">
SKR
</span>
<span class="info-srjp g-tooltip">
<span class="activator">
SRJP
<span>
<strong>{{ train.timetableData.category }}</strong>
{{ train.trainNo }} |
<span style="color: gold">
{{ train.timetableData.routeDistance }} km
</span>
</span>
</div>
<div class="top-timetable-btn tooltip">
<img
:src="
showedSchedule === train.timetableData.timetableId
showedSchedule == train.timetableData.timetableId
? ascSVG
: descSVG
"
alt="asc-arrow"
alt="arrow-icon"
/>
<span>SRJP</span>
<span class="tooltip-text">
{{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
</span>
</div>
</div>
<div class="info-route">
<span class="info-route-text">
<strong>
{{ train.timetableData.route.replace("|", " - ") }}
</strong>
</span>
</div>
<div class="info-stops">
<span v-if="train.timetableData.followingStops.length > 2">
{{ $t("trains.via-title") }}
<span
v-html="
generateStopList(train.timetableData.followingStops)
"
></span>
<span class="content">
{{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
</span>
</div>
</span>
</div>
<div class="info-route">
<span class="info-route-text">
<strong>
{{ train.timetableData.route.replace("|", " - ") }}
</strong>
</span>
</div>
<div class="info-stops">
<span v-if="train.timetableData.followingStops.length > 2">
{{ $t("trains.via-title") }}
<span
v-html="generateStopList(train.timetableData.followingStops)"
></span>
</span>
</div>
</span>
@@ -263,9 +254,9 @@
import { Vue, Component, Prop } from "vue-property-decorator";
import Train from "@/scripts/interfaces/Train";
import TrainStop from "@/scripts/interfaces/TrainStop";
import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
import TrainStop from "@/scripts/interfaces/TrainStop";
import { DataStatus } from "@/scripts/enums/DataStatus";
@Component({
@@ -309,8 +300,6 @@ export default class TrainTable extends Vue {
this.$nextTick(() => {
const currentEl: HTMLElement = this.$refs[elementId][0];
console.log(currentEl);
currentEl.scrollIntoView({
behavior: "smooth",
block: "nearest",
@@ -370,7 +359,7 @@ export default class TrainTable extends Vue {
&-list {
@include smallScreen() {
width: 100%;
overflow: hidden;
// overflow-x: hidden;
}
}
@@ -386,7 +375,7 @@ export default class TrainTable extends Vue {
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
grid-template-rows: 1fr;
@include smallScreen() {
@@ -395,17 +384,18 @@ export default class TrainTable extends Vue {
}
.info {
display: flex;
flex-direction: column;
justify-content: space-between;
&-top {
&-main {
display: flex;
justify-content: space-between;
align-items: center;
div {
.info-srjp .activator {
display: flex;
align-items: center;
background-color: var(--clr-accent);
border-radius: 0.5em;
padding: 0.1em 0.35em;
}
}
@@ -422,10 +412,6 @@ export default class TrainTable extends Vue {
margin-bottom: 10px;
font-size: 0.7em;
@include smallScreen() {
font-size: 0.75em;
}
}
&-bottom {
@@ -454,10 +440,11 @@ export default class TrainTable extends Vue {
&-info {
margin-bottom: 1em;
text-align: center;
word-wrap: break-word;
}
&-name {
margin: 0 0.3em;
font-weight: bold;
}
src/styles/global.scss
+29 -34
View File
@@ -30,43 +30,29 @@ body {
}
.tooltip {
.g-tooltip {
position: relative;
background-color: var(--clr-accent);
padding: .1em .5em;
border-radius: 1em;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
& > &-text {
display: inline-block;
width: 150px;
font-size: 0.9em;
background-color: var(--clr-accent);
padding: .15em .5em;
border-radius: 1em;
display: inline-block;
max-width: 150px;
text-align: center;
color: #fff;
.content {
position: absolute;
z-index: 1;
left: 50%;
top: 0;
transform: translate(-50%, -120%);
z-index: 10;
visibility: hidden;
opacity: 0;
left: 50%;
transform: translate(-50%, calc(-100% - 1rem));
min-width: 150px;
background-color: var(--clr-accent);
text-align: center;
padding: 0.15em;
border-radius: .5em;
transition: opacity 0.3s;
@@ -80,12 +66,21 @@ body {
border-style: solid;
border-color: var(--clr-accent) transparent transparent transparent;
}
@include smallScreen() {
right: 0;
left: 0;
&::after {
left: 75%;
}
}
}
&:hover > &-text {
@include smallScreen() {
display: none;
}
&:hover > .content {
// @include smallScreen() {
// display: none;
// }
visibility: visible;
opacity: 1;
src/views/SceneryView.vue
+1 -1
View File
@@ -92,7 +92,7 @@ $sceneryBgCol: #333;
display: inline-block;
font-size: 2em;
font-size: 1.5em;
button {
margin: 1em auto;