chore: styling hotfixes and improvements

This commit is contained in:
2024-08-22 02:28:40 +02:00
parent b35bb03868
commit 5545616706
3 changed files with 22 additions and 26 deletions
@@ -15,7 +15,6 @@
<li
v-for="{ train, status } in stationTrains"
class="badge user"
tabindex="0"
:key="train.id"
:data-status="status"
>
@@ -98,38 +97,27 @@ ul {
}
.user {
cursor: pointer;
&_train {
color: black;
background-color: $no-timetable;
transition: background-color 200ms;
-ms-transition: background-color 200ms;
-webkit-transition: background-color 200ms;
}
&[data-status='no-timetable'] .user_train {
background-color: $no-timetable;
}
&[data-status='departed'] > &_train {
&[data-status='departed'] .user_train {
background-color: $departed;
}
&[data-status='stopped'] > &_train {
&[data-status='stopped'] .user_train {
background-color: $stopped;
}
&[data-status='online'] > &_train {
&[data-status='online'] .user_train {
background-color: $online;
}
&[data-status='terminated'] > &_train {
&[data-status='terminated'] .user_train {
background-color: $terminated;
}
&[data-status='disconnected'] > &_train {
&[data-status='disconnected'] .user_train {
background-color: $disconnected;
}
@@ -138,6 +126,16 @@ ul {
pointer-events: none;
}
}
.user_train {
color: black;
background-color: $no-timetable;
transition: background-color 200ms;
-ms-transition: background-color 200ms;
-webkit-transition: background-color 200ms;
}
.users-anim {
&-move,
&-enter-active,
+6 -8
View File
@@ -59,8 +59,7 @@
:key="station.name"
@click.right.prevent="openForumSite($event, station.generalInfo?.url)"
@keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
tabindex="0"
:to="getSceneryRoute(station.name)"
:to="getSceneryRoute(station)"
>
<td class="station-name" :class="station.generalInfo?.availability">
<b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -121,7 +120,7 @@
<span v-if="station.onlineInfo?.dispatcherName">
<b
v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
@click.stop="openDonationCard"
@click.prevent="openDonationCard"
data-tooltip-type="DonatorTooltip"
:data-tooltip-content="$t('donations.dispatcher-message')"
>
@@ -319,7 +318,7 @@ import dateMixin from '../../mixins/dateMixin';
import styleMixin from '../../mixins/styleMixin';
import { useApiStore } from '../../store/apiStore';
import { useMainStore } from '../../store/mainStore';
import { Status } from '../../typings/common';
import { Station, Status } from '../../typings/common';
import { useTooltipStore } from '../../store/tooltipStore';
import { getChangedFilters } from '../../managers/stationFilterManager';
import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
@@ -363,9 +362,7 @@ export default defineComponent({
},
methods: {
getSceneryRoute(name: string) {
const station = this.filteredStationList.find((station) => station.name === name);
getSceneryRoute(station: Station) {
// TODO: Hide tooltips when navigating away
return {
@@ -499,7 +496,8 @@ table {
}
}
tr, .a-row {
tr,
.a-row {
background-color: $rowCol;
&:nth-child(even) {
+1 -1
View File
@@ -7,7 +7,7 @@
<img src="/images/icon-back.svg" alt="train icon" />
<span>{{ $t('trains.driver-return-link') }}</span>
</router-link>
<router-link :to="`/journal/timetables?search-driver=`" class="a-button btn--image">
<router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`" class="a-button btn--image">
<img src="/images/icon-train.svg" alt="train icon" />
<span class="hidable">
{{ $t('trains.driver-journal-link') }}