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

chore: styling hotfixes and improvements

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