Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - fix workouts list display w/ german

Browse Source
This commit is contained in:
Sam 2022-07-02 10:08:15 +02:00
parent f7f5ba2e68
commit 2ad8678734
1 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
fittrackee_client/src/components/Workouts/WorkoutsList.vue
View File

@ -25,7 +25,7 @@
:query="query" :query="query"
/> />
<table> <table>
<thead> <thead :class="{ smaller: 'de' === currentLanguage }">
<tr> <tr>
<th class="sport-col" /> <th class="sport-col" />
<th>{{ capitalize($t('workouts.WORKOUT', 1)) }}</th> <th>{{ capitalize($t('workouts.WORKOUT', 1)) }}</th>
@ -79,7 +79,7 @@
:display-hover="true" :display-hover="true"
/> />
</td> </td>
<td> <td class="workout-date">
<span class="cell-heading"> <span class="cell-heading">
{{ $t('workouts.DATE') }} {{ $t('workouts.DATE') }}
</span> </span>
@ -179,7 +179,7 @@
import Pagination from '@/components/Common/Pagination.vue' import Pagination from '@/components/Common/Pagination.vue'
import StaticMap from '@/components/Common/StaticMap.vue' import StaticMap from '@/components/Common/StaticMap.vue'
import NoWorkouts from '@/components/Workouts/NoWorkouts.vue' import NoWorkouts from '@/components/Workouts/NoWorkouts.vue'
import { WORKOUTS_STORE } from '@/store/constants' import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
import { IPagination } from '@/types/api' import { IPagination } from '@/types/api'
import { ITranslatedSport } from '@/types/sports' import { ITranslatedSport } from '@/types/sports'
import { IAuthUserProfile } from '@/types/user' import { IAuthUserProfile } from '@/types/user'
@ -214,6 +214,9 @@
const pagination: ComputedRef<IPagination> = computed( const pagination: ComputedRef<IPagination> = computed(
() => store.getters[WORKOUTS_STORE.GETTERS.WORKOUTS_PAGINATION] () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUTS_PAGINATION]
) )
const currentLanguage: ComputedRef<string> = computed(
() => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
)
let query: TWorkoutsPayload = getWorkoutsQuery(route.query) let query: TWorkoutsPayload = getWorkoutsQuery(route.query)
const hoverWorkoutId: Ref<string | null> = ref(null) const hoverWorkoutId: Ref<string | null> = ref(null)
@ -238,9 +241,14 @@
} }
function getWorkoutsQuery(newQuery: LocationQuery): TWorkoutsPayload { function getWorkoutsQuery(newQuery: LocationQuery): TWorkoutsPayload {
const workoutQuery = getQuery(newQuery, orderByList, defaultOrder.order_by, { const workoutQuery = getQuery(
defaultSort: defaultOrder.order, newQuery,
}) orderByList,
defaultOrder.order_by,
{
defaultSort: defaultOrder.order,
}
)
Object.keys(newQuery) Object.keys(newQuery)
.filter((k) => workoutsPayloadKeys.includes(k)) .filter((k) => workoutsPayloadKeys.includes(k))
.map((k) => { .map((k) => {
@ -287,7 +295,7 @@
width: 100%; width: 100%;
.box { .box {
padding: $default-padding $default-padding * 2; padding: $default-padding $default-padding * 1.5;
@media screen and (max-width: $small-limit) { @media screen and (max-width: $small-limit) {
&.empty-table { &.empty-table {
display: none; display: none;
@ -318,11 +326,22 @@
} }
.workouts-table { .workouts-table {
.smaller {
th {
font-size: 0.95em;
padding: $default-padding 0;
max-width: 100px;
}
}
td {
text-align: right;
}
.sport-col { .sport-col {
padding-right: 0; padding: 0;
} }
.workout-title { .workout-title {
max-width: 90px; text-align: left;
width: 100px;
position: relative; position: relative;
.fa-map-o { .fa-map-o {
font-size: 0.75em; font-size: 0.75em;
@ -347,14 +366,27 @@
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
.workout-date {
max-width: 60px;
text-align: left;
}
@media screen and (max-width: $small-limit) { @media screen and (max-width: $small-limit) {
td,
.workout-date,
.workout-title {
text-align: center;
}
.sport-col { .sport-col {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: $default-padding; padding: $default-padding;
} }
.workout-date {
max-width: initial;
}
.workout-title { .workout-title {
max-width: initial; max-width: initial;
width: 100%;
} }
.workout-title:hover .static-map { .workout-title:hover .static-map {
display: none; display: none;