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

Client - remove useless Cards

Browse Source
This commit is contained in:
Sam 2021-10-05 19:02:08 +02:00
parent 1ebced48c4
commit 9bc6422620
9 changed files with 609 additions and 649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
fittrackee_client/src/components/Common/Card.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="card"> <div class="card">
<div class="card-title" :class="{ 'without-title': withoutTitle }"> <div class="card-title">
<slot name="title"></slot> <slot name="title"></slot>
</div> </div>
<div class="card-content"> <div class="card-content">
@ -13,12 +13,6 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
export default defineComponent({ export default defineComponent({
name: 'Card', name: 'Card',
props: {
withoutTitle: {
type: Boolean,
default: false,
},
},
}) })
</script> </script>
@ -30,10 +24,6 @@
border-radius: $border-radius; border-radius: $border-radius;
margin: $default-margin; margin: $default-margin;
.without-title {
display: none;
}
.card-title { .card-title {
font-weight: bold; font-weight: bold;
border-bottom: solid 1px var(--card-border-color); border-bottom: solid 1px var(--card-border-color);

6
fittrackee_client/src/components/Common/NoWorkouts.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="no-workouts"> <div class="no-workouts box">
<div> <div>
{{ t('workouts.NO_WORKOUTS') }} {{ t('workouts.NO_WORKOUTS') }}
<router-link to="/workouts/add"> <router-link to="/workouts/add">
@ -27,9 +27,5 @@
.no-workouts { .no-workouts {
display: flex; display: flex;
justify-content: center; justify-content: center;
border: solid 1px var(--card-border-color);
border-radius: $border-radius;
padding: $default-padding;
margin: $default-margin;
} }
</style> </style>

240
fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
View File

@ -1,79 +1,77 @@
<template> <template>
<div class="timeline-workout"> <div class="timeline-workout">
<Card :without-title="true"> <div class="box">
<template #content> <div class="workout-user-date">
<div class="workout-user-date"> <div class="workout-user">
<div class="workout-user"> <img
<img class="profile-img"
class="profile-img" v-if="userPictureUrl !== ''"
v-if="userPictureUrl !== ''" :alt="t('user.USER_PICTURE')"
:alt="t('user.USER_PICTURE')" :src="userPictureUrl"
:src="userPictureUrl" />
/> <div v-else class="no-picture">
<div v-else class="no-picture"> <i class="fa fa-user-circle-o" aria-hidden="true" />
<i class="fa fa-user-circle-o" aria-hidden="true" />
</div>
<span v-if="user.username" class="workout-user-name">
{{ user.username }}
</span>
</div> </div>
<div <span v-if="user.username" class="workout-user-name">
class="workout-date" {{ user.username }}
v-if="workout && user" </span>
:title=" </div>
format( <div
getDateWithTZ(workout.workout_date, user.timezone), class="workout-date"
'dd/MM/yyyy HH:mm' v-if="workout && user"
) :title="
" format(
> getDateWithTZ(workout.workout_date, user.timezone),
{{ 'dd/MM/yyyy HH:mm'
formatDistance(new Date(workout.workout_date), new Date(), { )
addSuffix: true, "
locale, >
{{
formatDistance(new Date(workout.workout_date), new Date(), {
addSuffix: true,
locale,
})
}}
</div>
</div>
<div
class="workout-map"
:class="{ 'no-cursor': !workout }"
@click="
workout
? $router.push({
name: 'Workout',
params: { workoutId: workout.id },
}) })
}} : null
"
>
<div v-if="workout">
<StaticMap v-if="workout.with_gpx" :workout="workout" />
<div v-else class="no-map">
{{ t('workouts.NO_MAP') }}
</div> </div>
</div> </div>
<div </div>
class="workout-map" <div
:class="{ 'no-cursor': !workout }" class="workout-data"
@click=" @click="
workout $router.push({ name: 'Workout', params: { workoutId: workout.id } })
? $router.push({ "
name: 'Workout', >
params: { workoutId: workout.id }, <div>
}) <SportImage v-if="sport" :sport-label="sport.label" />
: null
"
>
<div v-if="workout">
<StaticMap v-if="workout.with_gpx" :workout="workout" />
<div v-else class="no-map">
{{ t('workouts.NO_MAP') }}
</div>
</div>
</div> </div>
<div <div>
class="workout-data" <i class="fa fa-clock-o" aria-hidden="true" />
@click=" <span v-if="workout">{{ workout.moving }}</span>
$router.push({ name: 'Workout', params: { workoutId: workout.id } })
"
>
<div>
<SportImage v-if="sport" :sport-label="sport.label" />
</div>
<div>
<i class="fa fa-clock-o" aria-hidden="true" />
<span v-if="workout">{{ workout.moving }}</span>
</div>
<div>
<i class="fa fa-road" aria-hidden="true" />
<span v-if="workout">{{ workout.distance }} km</span>
</div>
</div> </div>
</template> <div>
</Card> <i class="fa fa-road" aria-hidden="true" />
<span v-if="workout">{{ workout.distance }} km</span>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -82,7 +80,6 @@
import { PropType, defineComponent, ComputedRef, computed } from 'vue' import { PropType, defineComponent, ComputedRef, computed } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Card from '@/components/Common/Card.vue'
import SportImage from '@/components/Common/SportImage/index.vue' import SportImage from '@/components/Common/SportImage/index.vue'
import StaticMap from '@/components/Common/StaticMap.vue' import StaticMap from '@/components/Common/StaticMap.vue'
import { ROOT_STORE } from '@/store/constants' import { ROOT_STORE } from '@/store/constants'
@ -96,7 +93,6 @@
export default defineComponent({ export default defineComponent({
name: 'WorkoutCard', name: 'WorkoutCard',
components: { components: {
Card,
StaticMap, StaticMap,
SportImage, SportImage,
}, },
@ -145,71 +141,69 @@
.timeline-workout { .timeline-workout {
margin-bottom: $default-margin * 2; margin-bottom: $default-margin * 2;
::v-deep(.card) { .box {
.card-content { flex-direction: column;
padding: 0;
.workout-user-date {
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
padding: 0; padding: $default-padding * 0.5 $default-padding;
.workout-user-date { .workout-user {
display: flex; display: flex;
justify-content: space-between; .profile-img {
padding: $default-padding * 0.5 $default-padding; border-radius: 50%;
.workout-user { height: 25px;
display: flex; width: 25px;
.profile-img {
border-radius: 50%;
height: 25px;
width: 25px;
}
.fa-user-circle-o {
font-size: 1.5em;
}
.workout-user-name {
padding-left: 5px;
}
} }
.workout-date { .fa-user-circle-o {
font-size: 0.85em; font-size: 1.5em;
font-style: italic; }
.workout-user-name {
padding-left: 5px;
} }
} }
.workout-date {
font-size: 0.85em;
font-style: italic;
}
}
.workout-map { .workout-map {
background-color: var(--workout-no-map-bg-color); background-color: var(--workout-no-map-bg-color);
height: 150px;
.no-map {
line-height: 150px;
}
::v-deep(.bg-map-image) {
height: 150px; height: 150px;
.no-map {
line-height: 150px;
}
.bg-map-image {
height: 150px;
}
} }
}
.workout-data { .workout-data {
display: flex;
padding-top: $default-padding * 0.5;
.sport-img {
height: 28px;
width: 28px;
}
div {
display: flex; display: flex;
padding-top: $default-padding * 0.5; justify-content: center;
.sport-img { align-items: center;
height: 28px; width: 33%;
width: 28px;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 33%;
}
}
.workout-map,
.workout-data {
cursor: pointer;
}
.no-cursor {
cursor: default;
}
.fa {
padding-right: $default-padding;
} }
} }
.workout-map,
.workout-data {
cursor: pointer;
}
.no-cursor {
cursor: default;
}
.fa {
padding-right: $default-padding;
}
} }
} }
</style> </style>

40
fittrackee_client/src/components/Dashboard/UserCalendar/index.vue
View File

@ -1,25 +1,23 @@
<template> <template>
<div id="user-calendar"> <div id="user-calendar">
<Card class="calendar-card" :without-title="true"> <div class="calendar-card box">
<template #content> <CalendarHeader
<CalendarHeader :day="day"
:day="day" locale-options="enGB"
locale-options="enGB" @displayNextMonth="displayNextMonth"
@displayNextMonth="displayNextMonth" @displayPreviousMonth="displayPreviousMonth"
@displayPreviousMonth="displayPreviousMonth" />
/> <CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
<CalendarDays :start-date="calendarDates.start" locale-options="enGB" /> <CalendarCells
<CalendarCells :currentDay="day"
:currentDay="day" :end-date="calendarDates.end"
:end-date="calendarDates.end" :sports="sports"
:sports="sports" :start-date="calendarDates.start"
:start-date="calendarDates.start" :timezone="user.timezone"
:timezone="user.timezone" :workouts="calendarWorkouts"
:workouts="calendarWorkouts" :weekStartingMonday="user.weekm"
:weekStartingMonday="user.weekm" />
/> </div>
</template>
</Card>
</div> </div>
</template> </template>
@ -34,7 +32,6 @@
onBeforeMount, onBeforeMount,
} from 'vue' } from 'vue'
import Card from '@/components/Common/Card.vue'
import CalendarCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue' import CalendarCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue'
import CalendarDays from '@/components/Dashboard/UserCalendar/CalendarDays.vue' import CalendarDays from '@/components/Dashboard/UserCalendar/CalendarDays.vue'
import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue' import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue'
@ -51,7 +48,6 @@
CalendarCells, CalendarCells,
CalendarDays, CalendarDays,
CalendarHeader, CalendarHeader,
Card,
}, },
props: { props: {
sports: { sports: {

27
fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue
View File

@ -1,30 +1,22 @@
<template> <template>
<div class="user-stat-card"> <div class="user-stat-card">
<Card :without-title="true"> <div class="stat-content box">
<template #content> <div class="stat-icon">
<div class="stat-content"> <i class="fa" :class="`fa-${icon}`" />
<div class="stat-icon"> </div>
<i class="fa" :class="`fa-${icon}`" /> <div class="stat-details">
</div> <div class="stat-huge">{{ value }}</div>
<div class="stat-details"> <div class="stat">{{ text }}</div>
<div class="stat-huge">{{ value }}</div> </div>
<div class="stat">{{ text }}</div> </div>
</div>
</div>
</template>
</Card>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import Card from '@/components/Common/Card.vue'
export default defineComponent({ export default defineComponent({
name: 'UserStatCard', name: 'UserStatCard',
components: {
Card,
},
props: { props: {
icon: { icon: {
type: String, type: String,
@ -56,6 +48,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding: $default-padding $default-padding * 2;
.stat-icon { .stat-icon {
width: 30%; width: 30%;

437
fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
View File

@ -1,136 +1,134 @@
<template> <template>
<div class="workouts-filters"> <div class="workouts-filters">
<Card :without-title="true"> <div class="box">
<template #content> <div class="form">
<div class="form"> <div class="form-items-group">
<div class="form-items-group"> <div class="form-item">
<div class="form-item"> <label> {{ t('workouts.FROM') }}: </label>
<label> {{ t('workouts.FROM') }}: </label> <input name="from" type="date" @change="handleFilterChange" />
<input name="from" type="date" @change="handleFilterChange" />
</div>
<div class="form-item">
<label> {{ t('workouts.TO') }}: </label>
<input name="to" type="date" @change="handleFilterChange" />
</div>
</div> </div>
<div class="form-item">
<div class="form-items-group"> <label> {{ t('workouts.TO') }}: </label>
<div class="form-item"> <input name="to" type="date" @change="handleFilterChange" />
<label> {{ t('workouts.SPORT', 1) }}:</label>
<select name="sport_id" @change="handleFilterChange">
<option value="" />
<option
v-for="sport in translatedSports"
:value="sport.id"
:key="sport.id"
>
{{ sport.label }}
</option>
</select>
</div>
</div> </div>
</div>
<div class="form-items-group"> <div class="form-items-group">
<div class="form-item"> <div class="form-item">
<label> {{ t('workouts.DISTANCE') }} (km): </label> <label> {{ t('workouts.SPORT', 1) }}:</label>
<div class="form-inputs-group"> <select name="sport_id" @change="handleFilterChange">
<input <option value="" />
name="distance_from" <option
type="number" v-for="sport in translatedSports"
min="0" :value="sport.id"
step="1" :key="sport.id"
@change="handleFilterChange" >
/> {{ sport.label }}
<span>{{ t('workouts.TO') }}</span> </option>
<input </select>
name="distance_to"
type="number"
min="0"
step="1"
@change="handleFilterChange"
/>
</div>
</div>
</div> </div>
</div>
<div class="form-items-group"> <div class="form-items-group">
<div class="form-item"> <div class="form-item">
<label> {{ t('workouts.DURATION') }} (km): </label> <label> {{ t('workouts.DISTANCE') }} (km): </label>
<div class="form-inputs-group"> <div class="form-inputs-group">
<input <input
name="duration_from" name="distance_from"
@change="handleFilterChange" type="number"
pattern="^([0-9]*[0-9]):([0-5][0-9])$" min="0"
placeholder="hh:mm" step="1"
type="text" @change="handleFilterChange"
/> />
<span>{{ t('workouts.TO') }}</span> <span>{{ t('workouts.TO') }}</span>
<input <input
name="duration_to" name="distance_to"
@change="handleFilterChange" type="number"
pattern="^([0-9]*[0-9]):([0-5][0-9])$" min="0"
placeholder="hh:mm" step="1"
type="text" @change="handleFilterChange"
/> />
</div>
</div>
</div>
<div class="form-items-group">
<div class="form-item">
<label> {{ t('workouts.AVE_SPEED') }} (km): </label>
<div class="form-inputs-group">
<input
min="0"
name="ave_speed_from"
@change="handleFilterChange"
step="1"
type="number"
/>
<span>{{ t('workouts.TO') }}</span>
<input
min="0"
name="ave_speed_to"
@change="handleFilterChange"
step="1"
type="number"
/>
</div>
</div>
</div>
<div class="form-items-group">
<div class="form-item">
<label> {{ t('workouts.MAX_SPEED') }} (km): </label>
<div class="form-inputs-group">
<input
min="0"
name="max_speed_from"
@change="handleFilterChange"
step="1"
type="number"
/>
<span>{{ t('workouts.TO') }}</span>
<input
min="0"
name="max_speed_to"
@change="handleFilterChange"
step="1"
type="number"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="form-button"> <div class="form-items-group">
<button class="confirm" @click="onFilter"> <div class="form-item">
{{ t('buttons.FILTER') }} <label> {{ t('workouts.DURATION') }} (km): </label>
</button> <div class="form-inputs-group">
<input
name="duration_from"
@change="handleFilterChange"
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
placeholder="hh:mm"
type="text"
/>
<span>{{ t('workouts.TO') }}</span>
<input
name="duration_to"
@change="handleFilterChange"
pattern="^([0-9]*[0-9]):([0-5][0-9])$"
placeholder="hh:mm"
type="text"
/>
</div>
</div>
</div> </div>
</template>
</Card> <div class="form-items-group">
<div class="form-item">
<label> {{ t('workouts.AVE_SPEED') }} (km): </label>
<div class="form-inputs-group">
<input
min="0"
name="ave_speed_from"
@change="handleFilterChange"
step="1"
type="number"
/>
<span>{{ t('workouts.TO') }}</span>
<input
min="0"
name="ave_speed_to"
@change="handleFilterChange"
step="1"
type="number"
/>
</div>
</div>
</div>
<div class="form-items-group">
<div class="form-item">
<label> {{ t('workouts.MAX_SPEED') }} (km): </label>
<div class="form-inputs-group">
<input
min="0"
name="max_speed_from"
@change="handleFilterChange"
step="1"
type="number"
/>
<span>{{ t('workouts.TO') }}</span>
<input
min="0"
name="max_speed_to"
@change="handleFilterChange"
step="1"
type="number"
/>
</div>
</div>
</div>
</div>
<div class="form-button">
<button class="confirm" @click="onFilter">
{{ t('buttons.FILTER') }}
</button>
</div>
</div>
</div> </div>
</template> </template>
@ -138,15 +136,11 @@
import { computed, ComputedRef, defineComponent, PropType } from 'vue' import { computed, ComputedRef, defineComponent, PropType } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Card from '@/components/Common/Card.vue'
import { ISport } from '@/types/sports' import { ISport } from '@/types/sports'
import { translateSports } from '@/utils/sports' import { translateSports } from '@/utils/sports'
export default defineComponent({ export default defineComponent({
name: 'WorkoutsFilters', name: 'WorkoutsFilters',
components: {
Card,
},
props: { props: {
sports: { sports: {
type: Object as PropType<ISport[]>, type: Object as PropType<ISport[]>,
@ -181,126 +175,121 @@
@import '~@/scss/base.scss'; @import '~@/scss/base.scss';
.workouts-filters { .workouts-filters {
::v-deep(.card) { .form {
.card-content { display: flex;
padding: $default-padding; flex-direction: column;
.form { padding-top: 0;
.form-items-group {
display: flex;
flex-direction: column;
padding: $default-padding * 0.5;
.form-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 0;
.form-items-group { .form-inputs-group {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
padding: $default-padding * 0.5; justify-content: space-around;
align-items: center;
.form-item { input {
display: flex; width: 34%;
}
span {
padding: $default-padding * 0.5;
}
}
input {
height: 16px;
}
select {
height: 36px;
padding: 0 $default-padding * 0.5;
}
}
}
}
.form-button {
display: flex;
justify-content: center;
button {
margin: $default-padding * 2 $default-padding * 0.5 $default-padding
$default-padding * 0.5;
width: 100%;
}
}
@media screen and (max-width: $medium-limit) {
.form {
flex-direction: row;
padding-top: $default-padding * 0.5;
.form-items-group {
padding: 0 $default-padding * 0.5;
height: 100%;
.form-item {
label {
font-size: 0.9em;
}
.form-inputs-group {
flex-direction: column; flex-direction: column;
justify-content: normal;
.form-inputs-group { padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
input {
width: 34%;
}
span {
padding: $default-padding * 0.5;
}
}
input { input {
height: 16px; width: 75%;
}
select {
height: 36px;
padding: 0 $default-padding * 0.5;
} }
} }
} }
} }
}
.form-button { .form-button {
display: flex; button {
justify-content: center; margin: $default-padding $default-padding * 0.5;
width: 100%;
button {
margin: $default-padding * 2 $default-padding * 0.5 $default-padding
$default-padding * 0.5;
width: 100%;
}
} }
}
}
@media screen and (max-width: $small-limit) {
.form {
flex-direction: column;
padding-top: 0;
@media screen and (max-width: $medium-limit) { .form-items-group {
.form { padding: $default-padding * 0.5;
flex-direction: row;
padding-top: $default-padding * 0.5;
.form-items-group { .form-item {
padding: 0 $default-padding * 0.5; label {
height: 100%; font-size: 1em;
}
.form-item { .form-inputs-group {
label { flex-direction: row;
font-size: 0.9em; justify-content: space-around;
} align-items: center;
input {
.form-inputs-group { width: 50%;
flex-direction: column; }
justify-content: normal; span {
padding: 0; padding: $default-padding * 0.5;
input {
width: 75%;
}
}
} }
} }
} }
.form-button {
button {
margin: $default-padding $default-padding * 0.5;
width: 100%;
}
}
} }
@media screen and (max-width: $small-limit) { }
.form { .form-button {
flex-direction: column; button {
padding-top: 0; margin: $default-padding $default-padding * 0.5;
.form-items-group {
padding: $default-padding * 0.5;
.form-item {
label {
font-size: 1em;
}
.form-inputs-group {
flex-direction: row;
justify-content: space-around;
align-items: center;
input {
width: 50%;
}
span {
padding: $default-padding * 0.5;
}
}
}
}
}
.form-button {
button {
margin: $default-padding $default-padding * 0.5;
}
}
} }
} }
} }

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

@ -1,98 +1,96 @@
<template> <template>
<div class="workouts-list"> <div class="workouts-list">
<Card :without-title="true"> <div class="box" :class="{ 'empty-table': workouts.length === 0 }">
<template #content> <div class="workouts-table">
<div class="workouts-table"> <table>
<table> <thead>
<thead> <tr>
<tr> <th class="sport-col" />
<th class="sport-col" /> <th>{{ capitalize(t('workouts.WORKOUT', 1)) }}</th>
<th>{{ capitalize(t('workouts.WORKOUT', 1)) }}</th> <th>{{ capitalize(t('workouts.DATE')) }}</th>
<th>{{ capitalize(t('workouts.DATE')) }}</th> <th>{{ capitalize(t('workouts.DISTANCE')) }}</th>
<th>{{ capitalize(t('workouts.DISTANCE')) }}</th> <th>{{ capitalize(t('workouts.DURATION')) }}</th>
<th>{{ capitalize(t('workouts.DURATION')) }}</th> <th>{{ capitalize(t('workouts.AVE_SPEED')) }}</th>
<th>{{ capitalize(t('workouts.AVE_SPEED')) }}</th> <th>{{ capitalize(t('workouts.MAX_SPEED')) }}</th>
<th>{{ capitalize(t('workouts.MAX_SPEED')) }}</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr v-for="workout in workouts" :key="workout.id">
<tr v-for="workout in workouts" :key="workout.id"> <td class="sport-col">
<td class="sport-col"> <span class="cell-heading">
<span class="cell-heading"> {{ t('workouts.SPORT', 1) }}
{{ t('workouts.SPORT', 1) }} </span>
</span> <SportImage
<SportImage :title="
:title=" sports.filter((s) => s.id === workout.sport_id)[0]
sports.filter((s) => s.id === workout.sport_id)[0] .translatedLabel
.translatedLabel "
" :sport-label="
:sport-label=" sports.filter((s) => s.id === workout.sport_id)[0].label
sports.filter((s) => s.id === workout.sport_id)[0].label "
" ></SportImage>
></SportImage> </td>
</td> <td class="workout-title">
<td class="workout-title"> <span class="cell-heading">
<span class="cell-heading"> {{ capitalize(t('workouts.WORKOUT', 1)) }}
{{ capitalize(t('workouts.WORKOUT', 1)) }} </span>
</span> <router-link
<router-link class="nav-item"
class="nav-item" :to="{ name: 'Workout', params: { workoutId: workout.id } }"
:to="{ name: 'Workout', params: { workoutId: workout.id } }" >
> <i
<i
v-if="workout.with_gpx"
class="fa fa-map-o"
aria-hidden="true"
/>
{{ workout.title }}
</router-link>
<StaticMap
v-if="workout.with_gpx" v-if="workout.with_gpx"
:workout="workout" class="fa fa-map-o"
:display-hover="true" aria-hidden="true"
/> />
</td> {{ workout.title }}
<td> </router-link>
<span class="cell-heading"> <StaticMap
{{ t('workouts.DATE') }} v-if="workout.with_gpx"
</span> :workout="workout"
{{ :display-hover="true"
format( />
getDateWithTZ(workout.workout_date, user.timezone), </td>
'dd/MM/yyyy HH:mm' <td>
) <span class="cell-heading">
}} {{ t('workouts.DATE') }}
</td> </span>
<td class="text-right"> {{
<span class="cell-heading"> format(
{{ t('workouts.DISTANCE') }} getDateWithTZ(workout.workout_date, user.timezone),
</span> 'dd/MM/yyyy HH:mm'
{{ Number(workout.distance).toFixed(2) }} km )
</td> }}
<td class="text-right"> </td>
<span class="cell-heading"> <td class="text-right">
{{ t('workouts.DURATION') }} <span class="cell-heading">
</span> {{ t('workouts.DISTANCE') }}
{{ workout.moving }} </span>
</td> {{ Number(workout.distance).toFixed(2) }} km
<td class="text-right"> </td>
<span class="cell-heading"> <td class="text-right">
{{ t('workouts.AVE_SPEED') }} <span class="cell-heading">
</span> {{ t('workouts.DURATION') }}
{{ workout.ave_speed }} km/h </span>
</td> {{ workout.moving }}
<td class="text-right"> </td>
<span class="cell-heading"> <td class="text-right">
{{ t('workouts.MAX_SPEED') }} <span class="cell-heading">
</span> {{ t('workouts.AVE_SPEED') }}
{{ workout.max_speed }} km/h </span>
</td> {{ workout.ave_speed }} km/h
</tr> </td>
</tbody> <td class="text-right">
</table> <span class="cell-heading">
</div> {{ t('workouts.MAX_SPEED') }}
</template> </span>
</Card> {{ workout.max_speed }} km/h
</td>
</tr>
</tbody>
</table>
</div>
</div>
<NoWorkouts v-if="workouts.length === 0" /> <NoWorkouts v-if="workouts.length === 0" />
<div v-if="moreWorkoutsExist" class="more-workouts"> <div v-if="moreWorkoutsExist" class="more-workouts">
<button @click="loadMoreWorkouts"> <button @click="loadMoreWorkouts">
@ -116,7 +114,6 @@
} from 'vue' } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Card from '@/components/Common/Card.vue'
import NoWorkouts from '@/components/Common/NoWorkouts.vue' import NoWorkouts from '@/components/Common/NoWorkouts.vue'
import SportImage from '@/components/Common/SportImage/index.vue' import SportImage from '@/components/Common/SportImage/index.vue'
import StaticMap from '@/components/Common/StaticMap.vue' import StaticMap from '@/components/Common/StaticMap.vue'
@ -131,7 +128,6 @@
export default defineComponent({ export default defineComponent({
name: 'WorkoutsList', name: 'WorkoutsList',
components: { components: {
Card,
NoWorkouts, NoWorkouts,
SportImage, SportImage,
StaticMap, StaticMap,
@ -212,125 +208,127 @@
margin-bottom: 50px; margin-bottom: 50px;
width: 100%; width: 100%;
::v-deep(.card) { .box {
.card-content { @media screen and (max-width: $small-limit) {
&.empty-table {
display: none;
}
}
.workouts-table {
margin-bottom: 15px; margin-bottom: 15px;
/* responsive table, adapted from: */
/* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
table {
width: 100%;
padding: $default-padding;
font-size: 0.9em;
border-collapse: collapse;
.workouts-table { thead th {
/* responsive table, adapted from: */ vertical-align: center;
/* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
table {
width: 100%;
padding: $default-padding; padding: $default-padding;
font-size: 0.9em; border-bottom: 2px solid var(--card-border-color);
border-collapse: collapse; }
thead th { tbody {
vertical-align: center; font-size: 0.95em;
td {
padding: $default-padding; padding: $default-padding;
border-bottom: 2px solid var(--card-border-color); border-bottom: 1px solid var(--card-border-color);
}
tr:last-child td {
border: none;
}
}
.sport-col {
padding-right: 0;
}
.workout-title {
max-width: 90px;
position: relative;
.fa-map-o {
font-size: 0.75em;
}
.static-map {
display: none;
}
}
.workout-title:hover .static-map {
display: block;
}
.cell-heading {
background: var(--cell-heading-bg-color);
color: var(--cell-heading-color);
display: none;
font-size: 10px;
font-weight: bold;
padding: 5px;
position: absolute;
text-transform: uppercase;
top: 0;
left: 0;
}
.sport-img {
height: 20px;
width: 20px;
}
}
@media screen and (max-width: $small-limit) {
table {
thead {
left: -9999px;
position: absolute;
visibility: hidden;
}
tr {
border-bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 40px;
}
td {
border: 1px solid var(--card-border-color);
margin: 0 -1px -1px 0;
padding-top: 25px !important;
position: relative;
text-align: center;
width: 45%;
} }
tbody { tbody {
font-size: 0.95em;
td {
padding: $default-padding;
border-bottom: 1px solid var(--card-border-color);
}
tr:last-child td { tr:last-child td {
border: none; border: 1px solid var(--card-border-color);
} }
} }
.sport-col { .sport-col {
padding-right: 0; display: flex;
justify-content: center;
padding: $default-padding;
} }
.workout-title {
max-width: 90px;
position: relative;
.fa-map-o {
font-size: 0.75em;
}
.static-map {
display: none;
}
}
.workout-title:hover .static-map {
display: block;
}
.cell-heading { .cell-heading {
background: var(--cell-heading-bg-color); display: flex;
color: var(--cell-heading-color);
display: none;
font-size: 10px;
font-weight: bold;
padding: 5px;
position: absolute;
text-transform: uppercase;
top: 0;
left: 0;
} }
.workout-title {
.sport-img { max-width: initial;
height: 20px;
width: 20px;
} }
} }
}
@media screen and (max-width: $small-limit) { @media screen and (max-width: $x-small-limit) {
table { table {
thead { td {
left: -9999px; width: 100%;
position: absolute;
visibility: hidden;
}
tr {
border-bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 40px;
}
td {
border: 1px solid var(--card-border-color);
margin: 0 -1px -1px 0;
padding-top: 25px !important;
position: relative;
text-align: center;
width: 45%;
}
tbody {
tr:last-child td {
border: 1px solid var(--card-border-color);
}
}
.sport-col {
display: flex;
justify-content: center;
padding: $default-padding;
}
.cell-heading {
display: flex;
}
.workout-title {
max-width: initial;
}
}
}
@media screen and (max-width: $x-small-limit) {
table {
td {
width: 100%;
}
} }
} }
} }

7
fittrackee_client/src/scss/base.scss
View File

@ -86,6 +86,13 @@ button {
} }
.box {
border: solid 1px var(--card-border-color);
border-radius: $border-radius;
padding: $default-padding;
margin: $default-margin;
}
.container { .container {
display: flex; display: flex;
margin-left: auto; margin-left: auto;

103
fittrackee_client/src/views/DashBoard.vue
View File

@ -1,38 +1,36 @@
<template> <template>
<div id="dashboard" v-if="authUser.username && sports.length > 0"> <div id="dashboard" v-if="authUser.username && sports.length > 0">
<div class="container mobile-menu"> <div class="container mobile-menu">
<Card :without-title="true"> <div class="box">
<template #content> <div
<button class="mobile-menu-item"
class="mobile-menu-item" :class="{ 'is-selected': isSelected === 'chart' }"
:class="{ 'is-selected': isSelected === 'chart' }" @click="updateDisplayColumn('chart')"
@click="updateDisplayColumn('chart')" >
> <i class="fa fa-bar-chart" aria-hidden="true" />
<i class="fa fa-bar-chart" aria-hidden="true" /> </div>
</button> <div
<button class="mobile-menu-item"
class="mobile-menu-item" :class="{ 'is-selected': isSelected === 'calendar' }"
:class="{ 'is-selected': isSelected === 'calendar' }" @click="updateDisplayColumn('calendar')"
@click="updateDisplayColumn('calendar')" >
> <i class="fa fa-calendar" aria-hidden="true" />
<i class="fa fa-calendar" aria-hidden="true" /> </div>
</button> <div
<button class="mobile-menu-item"
class="mobile-menu-item" :class="{ 'is-selected': isSelected === 'timeline' }"
:class="{ 'is-selected': isSelected === 'timeline' }" @click="updateDisplayColumn('timeline')"
@click="updateDisplayColumn('timeline')" >
> <i class="fa fa-map-o" aria-hidden="true" />
<i class="fa fa-map-o" aria-hidden="true" /> </div>
</button> <div
<button class="mobile-menu-item"
class="mobile-menu-item" :class="{ 'is-selected': isSelected === 'records' }"
:class="{ 'is-selected': isSelected === 'records' }" @click="updateDisplayColumn('records')"
@click="updateDisplayColumn('records')" >
> <i class="fa fa-trophy" aria-hidden="true" />
<i class="fa fa-trophy" aria-hidden="true" /> </div>
</button> </div>
</template>
</Card>
</div> </div>
<div class="container"> <div class="container">
<UserStatsCards :user="authUser" /> <UserStatsCards :user="authUser" />
@ -77,7 +75,6 @@
onUnmounted, onUnmounted,
} from 'vue' } from 'vue'
import Card from '@/components/Common/Card.vue'
import Timeline from '@/components/Dashboard/Timeline/index.vue' import Timeline from '@/components/Dashboard/Timeline/index.vue'
import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue' import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue' import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
@ -91,7 +88,6 @@
export default defineComponent({ export default defineComponent({
name: 'Dashboard', name: 'Dashboard',
components: { components: {
Card,
Timeline, Timeline,
UserCalendar, UserCalendar,
UserMonthStats, UserMonthStats,
@ -161,30 +157,31 @@
} }
.mobile-menu { .mobile-menu {
display: flex; display: flex;
::v-deep(.card) { .box {
display: flex;
justify-content: space-between;
padding: 0;
width: 100%; width: 100%;
.card-content {
display: flex;
justify-content: space-between;
padding: 0;
.mobile-menu-item {
display: flex;
justify-content: space-around;
border: none;
box-shadow: none;
padding: $default-padding;
width: 25%;
.mobile-menu-item {
display: flex;
justify-content: space-around;
border: none;
border-radius: $border-radius;
box-shadow: none;
font-size: 0.95em;
padding: $default-padding;
width: 25%;
.fa-trophy {
color: var(--app-color);
}
&.is-selected {
.fa-trophy { .fa-trophy {
color: var(--app-color);
}
&.is-selected {
.fa-trophy {
color: var(--mobile-menu-selected-color);
}
color: var(--mobile-menu-selected-color); color: var(--mobile-menu-selected-color);
background-color: var(--mobile-menu-selected-bgcolor);
} }
color: var(--mobile-menu-selected-color);
background-color: var(--mobile-menu-selected-bgcolor);
} }
} }
} }