Client - remove useless Cards
This commit is contained in:
Sam
parent
1ebced48c4
commit
9bc6422620
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-title" :class="{ 'without-title': withoutTitle }">
|
||||
<div class="card-title">
|
||||
<slot name="title"></slot>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
@ -13,12 +13,6 @@
|
||||
import { defineComponent } from 'vue'
|
||||
export default defineComponent({
|
||||
name: 'Card',
|
||||
props: {
|
||||
withoutTitle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -30,10 +24,6 @@
|
||||
border-radius: $border-radius;
|
||||
margin: $default-margin;
|
||||
|
||||
.without-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
border-bottom: solid 1px var(--card-border-color);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="no-workouts">
|
||||
<div class="no-workouts box">
|
||||
<div>
|
||||
{{ t('workouts.NO_WORKOUTS') }}
|
||||
<router-link to="/workouts/add">
|
||||
@ -27,9 +27,5 @@
|
||||
.no-workouts {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border: solid 1px var(--card-border-color);
|
||||
border-radius: $border-radius;
|
||||
padding: $default-padding;
|
||||
margin: $default-margin;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,79 +1,77 @@
|
||||
<template>
|
||||
<div class="timeline-workout">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="workout-user-date">
|
||||
<div class="workout-user">
|
||||
<img
|
||||
class="profile-img"
|
||||
v-if="userPictureUrl !== ''"
|
||||
:alt="t('user.USER_PICTURE')"
|
||||
:src="userPictureUrl"
|
||||
/>
|
||||
<div v-else class="no-picture">
|
||||
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||
</div>
|
||||
<span v-if="user.username" class="workout-user-name">
|
||||
{{ user.username }}
|
||||
</span>
|
||||
<div class="box">
|
||||
<div class="workout-user-date">
|
||||
<div class="workout-user">
|
||||
<img
|
||||
class="profile-img"
|
||||
v-if="userPictureUrl !== ''"
|
||||
:alt="t('user.USER_PICTURE')"
|
||||
:src="userPictureUrl"
|
||||
/>
|
||||
<div v-else class="no-picture">
|
||||
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||
</div>
|
||||
<div
|
||||
class="workout-date"
|
||||
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,
|
||||
<span v-if="user.username" class="workout-user-name">
|
||||
{{ user.username }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="workout-date"
|
||||
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,
|
||||
})
|
||||
}}
|
||||
</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
|
||||
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
|
||||
class="workout-data"
|
||||
@click="
|
||||
$router.push({ name: 'Workout', params: { workoutId: workout.id } })
|
||||
"
|
||||
>
|
||||
<div>
|
||||
<SportImage v-if="sport" :sport-label="sport.label" />
|
||||
</div>
|
||||
<div
|
||||
class="workout-data"
|
||||
@click="
|
||||
$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>
|
||||
<i class="fa fa-clock-o" aria-hidden="true" />
|
||||
<span v-if="workout">{{ workout.moving }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<div>
|
||||
<i class="fa fa-road" aria-hidden="true" />
|
||||
<span v-if="workout">{{ workout.distance }} km</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -82,7 +80,6 @@
|
||||
import { PropType, defineComponent, ComputedRef, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import SportImage from '@/components/Common/SportImage/index.vue'
|
||||
import StaticMap from '@/components/Common/StaticMap.vue'
|
||||
import { ROOT_STORE } from '@/store/constants'
|
||||
@ -96,7 +93,6 @@
|
||||
export default defineComponent({
|
||||
name: 'WorkoutCard',
|
||||
components: {
|
||||
Card,
|
||||
StaticMap,
|
||||
SportImage,
|
||||
},
|
||||
@ -145,71 +141,69 @@
|
||||
.timeline-workout {
|
||||
margin-bottom: $default-margin * 2;
|
||||
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
.box {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
.workout-user-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
.workout-user-date {
|
||||
justify-content: space-between;
|
||||
padding: $default-padding * 0.5 $default-padding;
|
||||
.workout-user {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $default-padding * 0.5 $default-padding;
|
||||
.workout-user {
|
||||
display: flex;
|
||||
.profile-img {
|
||||
border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
.fa-user-circle-o {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.workout-user-name {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.profile-img {
|
||||
border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
.workout-date {
|
||||
font-size: 0.85em;
|
||||
font-style: italic;
|
||||
.fa-user-circle-o {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.workout-user-name {
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
.workout-date {
|
||||
font-size: 0.85em;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.workout-map {
|
||||
background-color: var(--workout-no-map-bg-color);
|
||||
.workout-map {
|
||||
background-color: var(--workout-no-map-bg-color);
|
||||
height: 150px;
|
||||
.no-map {
|
||||
line-height: 150px;
|
||||
}
|
||||
::v-deep(.bg-map-image) {
|
||||
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;
|
||||
padding-top: $default-padding * 0.5;
|
||||
.sport-img {
|
||||
height: 28px;
|
||||
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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.workout-map,
|
||||
.workout-data {
|
||||
cursor: pointer;
|
||||
}
|
||||
.no-cursor {
|
||||
cursor: default;
|
||||
}
|
||||
.fa {
|
||||
padding-right: $default-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,25 +1,23 @@
|
||||
<template>
|
||||
<div id="user-calendar">
|
||||
<Card class="calendar-card" :without-title="true">
|
||||
<template #content>
|
||||
<CalendarHeader
|
||||
:day="day"
|
||||
locale-options="enGB"
|
||||
@displayNextMonth="displayNextMonth"
|
||||
@displayPreviousMonth="displayPreviousMonth"
|
||||
/>
|
||||
<CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
|
||||
<CalendarCells
|
||||
:currentDay="day"
|
||||
:end-date="calendarDates.end"
|
||||
:sports="sports"
|
||||
:start-date="calendarDates.start"
|
||||
:timezone="user.timezone"
|
||||
:workouts="calendarWorkouts"
|
||||
:weekStartingMonday="user.weekm"
|
||||
/>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="calendar-card box">
|
||||
<CalendarHeader
|
||||
:day="day"
|
||||
locale-options="enGB"
|
||||
@displayNextMonth="displayNextMonth"
|
||||
@displayPreviousMonth="displayPreviousMonth"
|
||||
/>
|
||||
<CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
|
||||
<CalendarCells
|
||||
:currentDay="day"
|
||||
:end-date="calendarDates.end"
|
||||
:sports="sports"
|
||||
:start-date="calendarDates.start"
|
||||
:timezone="user.timezone"
|
||||
:workouts="calendarWorkouts"
|
||||
:weekStartingMonday="user.weekm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -34,7 +32,6 @@
|
||||
onBeforeMount,
|
||||
} from 'vue'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import CalendarCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue'
|
||||
import CalendarDays from '@/components/Dashboard/UserCalendar/CalendarDays.vue'
|
||||
import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue'
|
||||
@ -51,7 +48,6 @@
|
||||
CalendarCells,
|
||||
CalendarDays,
|
||||
CalendarHeader,
|
||||
Card,
|
||||
},
|
||||
props: {
|
||||
sports: {
|
||||
|
||||
@ -1,30 +1,22 @@
|
||||
<template>
|
||||
<div class="user-stat-card">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon">
|
||||
<i class="fa" :class="`fa-${icon}`" />
|
||||
</div>
|
||||
<div class="stat-details">
|
||||
<div class="stat-huge">{{ value }}</div>
|
||||
<div class="stat">{{ text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="stat-content box">
|
||||
<div class="stat-icon">
|
||||
<i class="fa" :class="`fa-${icon}`" />
|
||||
</div>
|
||||
<div class="stat-details">
|
||||
<div class="stat-huge">{{ value }}</div>
|
||||
<div class="stat">{{ text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
export default defineComponent({
|
||||
name: 'UserStatCard',
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
@ -56,6 +48,7 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: $default-padding $default-padding * 2;
|
||||
|
||||
.stat-icon {
|
||||
width: 30%;
|
||||
|
||||
@ -1,136 +1,134 @@
|
||||
<template>
|
||||
<div class="workouts-filters">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="form">
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.FROM') }}: </label>
|
||||
<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 class="box">
|
||||
<div class="form">
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.FROM') }}: </label>
|
||||
<input name="from" type="date" @change="handleFilterChange" />
|
||||
</div>
|
||||
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<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 class="form-item">
|
||||
<label> {{ t('workouts.TO') }}: </label>
|
||||
<input name="to" type="date" @change="handleFilterChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.DISTANCE') }} (km): </label>
|
||||
<div class="form-inputs-group">
|
||||
<input
|
||||
name="distance_from"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
<span>{{ t('workouts.TO') }}</span>
|
||||
<input
|
||||
name="distance_to"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<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 class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.DURATION') }} (km): </label>
|
||||
<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 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 class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.DISTANCE') }} (km): </label>
|
||||
<div class="form-inputs-group">
|
||||
<input
|
||||
name="distance_from"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
<span>{{ t('workouts.TO') }}</span>
|
||||
<input
|
||||
name="distance_to"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-button">
|
||||
<button class="confirm" @click="onFilter">
|
||||
{{ t('buttons.FILTER') }}
|
||||
</button>
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
<label> {{ t('workouts.DURATION') }} (km): </label>
|
||||
<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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -138,15 +136,11 @@
|
||||
import { computed, ComputedRef, defineComponent, PropType } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import { ISport } from '@/types/sports'
|
||||
import { translateSports } from '@/utils/sports'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WorkoutsFilters',
|
||||
components: {
|
||||
Card,
|
||||
},
|
||||
props: {
|
||||
sports: {
|
||||
type: Object as PropType<ISport[]>,
|
||||
@ -181,126 +175,121 @@
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
.workouts-filters {
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
padding: $default-padding;
|
||||
.form {
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
|
||||
.form-items-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $default-padding * 0.5;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
|
||||
.form-items-group {
|
||||
.form-inputs-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $default-padding * 0.5;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
input {
|
||||
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;
|
||||
|
||||
.form-inputs-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 34%;
|
||||
}
|
||||
span {
|
||||
padding: $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
justify-content: normal;
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
select {
|
||||
height: 36px;
|
||||
padding: 0 $default-padding * 0.5;
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
button {
|
||||
margin: $default-padding * 2 $default-padding * 0.5 $default-padding
|
||||
$default-padding * 0.5;
|
||||
width: 100%;
|
||||
}
|
||||
.form-button {
|
||||
button {
|
||||
margin: $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 {
|
||||
flex-direction: row;
|
||||
padding-top: $default-padding * 0.5;
|
||||
.form-items-group {
|
||||
padding: $default-padding * 0.5;
|
||||
|
||||
.form-items-group {
|
||||
padding: 0 $default-padding * 0.5;
|
||||
height: 100%;
|
||||
.form-item {
|
||||
label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
label {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.form-inputs-group {
|
||||
flex-direction: column;
|
||||
justify-content: normal;
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $small-limit) {
|
||||
.form {
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-button {
|
||||
button {
|
||||
margin: $default-padding $default-padding * 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,98 +1,96 @@
|
||||
<template>
|
||||
<div class="workouts-list">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="workouts-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sport-col" />
|
||||
<th>{{ capitalize(t('workouts.WORKOUT', 1)) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DATE')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DISTANCE')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DURATION')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.AVE_SPEED')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.MAX_SPEED')) }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="workout in workouts" :key="workout.id">
|
||||
<td class="sport-col">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.SPORT', 1) }}
|
||||
</span>
|
||||
<SportImage
|
||||
:title="
|
||||
sports.filter((s) => s.id === workout.sport_id)[0]
|
||||
.translatedLabel
|
||||
"
|
||||
:sport-label="
|
||||
sports.filter((s) => s.id === workout.sport_id)[0].label
|
||||
"
|
||||
></SportImage>
|
||||
</td>
|
||||
<td class="workout-title">
|
||||
<span class="cell-heading">
|
||||
{{ capitalize(t('workouts.WORKOUT', 1)) }}
|
||||
</span>
|
||||
<router-link
|
||||
class="nav-item"
|
||||
:to="{ name: 'Workout', params: { workoutId: workout.id } }"
|
||||
>
|
||||
<i
|
||||
v-if="workout.with_gpx"
|
||||
class="fa fa-map-o"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ workout.title }}
|
||||
</router-link>
|
||||
<StaticMap
|
||||
<div class="box" :class="{ 'empty-table': workouts.length === 0 }">
|
||||
<div class="workouts-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="sport-col" />
|
||||
<th>{{ capitalize(t('workouts.WORKOUT', 1)) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DATE')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DISTANCE')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.DURATION')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.AVE_SPEED')) }}</th>
|
||||
<th>{{ capitalize(t('workouts.MAX_SPEED')) }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="workout in workouts" :key="workout.id">
|
||||
<td class="sport-col">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.SPORT', 1) }}
|
||||
</span>
|
||||
<SportImage
|
||||
:title="
|
||||
sports.filter((s) => s.id === workout.sport_id)[0]
|
||||
.translatedLabel
|
||||
"
|
||||
:sport-label="
|
||||
sports.filter((s) => s.id === workout.sport_id)[0].label
|
||||
"
|
||||
></SportImage>
|
||||
</td>
|
||||
<td class="workout-title">
|
||||
<span class="cell-heading">
|
||||
{{ capitalize(t('workouts.WORKOUT', 1)) }}
|
||||
</span>
|
||||
<router-link
|
||||
class="nav-item"
|
||||
:to="{ name: 'Workout', params: { workoutId: workout.id } }"
|
||||
>
|
||||
<i
|
||||
v-if="workout.with_gpx"
|
||||
:workout="workout"
|
||||
:display-hover="true"
|
||||
class="fa fa-map-o"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DATE') }}
|
||||
</span>
|
||||
{{
|
||||
format(
|
||||
getDateWithTZ(workout.workout_date, user.timezone),
|
||||
'dd/MM/yyyy HH:mm'
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DISTANCE') }}
|
||||
</span>
|
||||
{{ Number(workout.distance).toFixed(2) }} km
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DURATION') }}
|
||||
</span>
|
||||
{{ workout.moving }}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.AVE_SPEED') }}
|
||||
</span>
|
||||
{{ workout.ave_speed }} km/h
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.MAX_SPEED') }}
|
||||
</span>
|
||||
{{ workout.max_speed }} km/h
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
{{ workout.title }}
|
||||
</router-link>
|
||||
<StaticMap
|
||||
v-if="workout.with_gpx"
|
||||
:workout="workout"
|
||||
:display-hover="true"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DATE') }}
|
||||
</span>
|
||||
{{
|
||||
format(
|
||||
getDateWithTZ(workout.workout_date, user.timezone),
|
||||
'dd/MM/yyyy HH:mm'
|
||||
)
|
||||
}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DISTANCE') }}
|
||||
</span>
|
||||
{{ Number(workout.distance).toFixed(2) }} km
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.DURATION') }}
|
||||
</span>
|
||||
{{ workout.moving }}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.AVE_SPEED') }}
|
||||
</span>
|
||||
{{ workout.ave_speed }} km/h
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<span class="cell-heading">
|
||||
{{ t('workouts.MAX_SPEED') }}
|
||||
</span>
|
||||
{{ workout.max_speed }} km/h
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<NoWorkouts v-if="workouts.length === 0" />
|
||||
<div v-if="moreWorkoutsExist" class="more-workouts">
|
||||
<button @click="loadMoreWorkouts">
|
||||
@ -116,7 +114,6 @@
|
||||
} from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import NoWorkouts from '@/components/Common/NoWorkouts.vue'
|
||||
import SportImage from '@/components/Common/SportImage/index.vue'
|
||||
import StaticMap from '@/components/Common/StaticMap.vue'
|
||||
@ -131,7 +128,6 @@
|
||||
export default defineComponent({
|
||||
name: 'WorkoutsList',
|
||||
components: {
|
||||
Card,
|
||||
NoWorkouts,
|
||||
SportImage,
|
||||
StaticMap,
|
||||
@ -212,125 +208,127 @@
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
.box {
|
||||
@media screen and (max-width: $small-limit) {
|
||||
&.empty-table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.workouts-table {
|
||||
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 {
|
||||
/* responsive table, adapted from: */
|
||||
/* https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
|
||||
table {
|
||||
width: 100%;
|
||||
thead th {
|
||||
vertical-align: center;
|
||||
padding: $default-padding;
|
||||
font-size: 0.9em;
|
||||
border-collapse: collapse;
|
||||
border-bottom: 2px solid var(--card-border-color);
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: center;
|
||||
tbody {
|
||||
font-size: 0.95em;
|
||||
td {
|
||||
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 {
|
||||
font-size: 0.95em;
|
||||
td {
|
||||
padding: $default-padding;
|
||||
border-bottom: 1px solid var(--card-border-color);
|
||||
}
|
||||
tr:last-child td {
|
||||
border: none;
|
||||
border: 1px solid var(--card-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sport-img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
.workout-title {
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $x-small-limit) {
|
||||
table {
|
||||
td {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -86,6 +86,13 @@ button {
|
||||
|
||||
}
|
||||
|
||||
.box {
|
||||
border: solid 1px var(--card-border-color);
|
||||
border-radius: $border-radius;
|
||||
padding: $default-padding;
|
||||
margin: $default-margin;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
|
||||
@ -1,38 +1,36 @@
|
||||
<template>
|
||||
<div id="dashboard" v-if="authUser.username && sports.length > 0">
|
||||
<div class="container mobile-menu">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<button
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'chart' }"
|
||||
@click="updateDisplayColumn('chart')"
|
||||
>
|
||||
<i class="fa fa-bar-chart" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'calendar' }"
|
||||
@click="updateDisplayColumn('calendar')"
|
||||
>
|
||||
<i class="fa fa-calendar" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'timeline' }"
|
||||
@click="updateDisplayColumn('timeline')"
|
||||
>
|
||||
<i class="fa fa-map-o" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'records' }"
|
||||
@click="updateDisplayColumn('records')"
|
||||
>
|
||||
<i class="fa fa-trophy" aria-hidden="true" />
|
||||
</button>
|
||||
</template>
|
||||
</Card>
|
||||
<div class="box">
|
||||
<div
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'chart' }"
|
||||
@click="updateDisplayColumn('chart')"
|
||||
>
|
||||
<i class="fa fa-bar-chart" aria-hidden="true" />
|
||||
</div>
|
||||
<div
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'calendar' }"
|
||||
@click="updateDisplayColumn('calendar')"
|
||||
>
|
||||
<i class="fa fa-calendar" aria-hidden="true" />
|
||||
</div>
|
||||
<div
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'timeline' }"
|
||||
@click="updateDisplayColumn('timeline')"
|
||||
>
|
||||
<i class="fa fa-map-o" aria-hidden="true" />
|
||||
</div>
|
||||
<div
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'records' }"
|
||||
@click="updateDisplayColumn('records')"
|
||||
>
|
||||
<i class="fa fa-trophy" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<UserStatsCards :user="authUser" />
|
||||
@ -77,7 +75,6 @@
|
||||
onUnmounted,
|
||||
} from 'vue'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import Timeline from '@/components/Dashboard/Timeline/index.vue'
|
||||
import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
|
||||
import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
|
||||
@ -91,7 +88,6 @@
|
||||
export default defineComponent({
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
Card,
|
||||
Timeline,
|
||||
UserCalendar,
|
||||
UserMonthStats,
|
||||
@ -161,30 +157,31 @@
|
||||
}
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
::v-deep(.card) {
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
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 {
|
||||
color: var(--app-color);
|
||||
}
|
||||
&.is-selected {
|
||||
.fa-trophy {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user