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,7 +1,6 @@
|
||||
<template>
|
||||
<div class="timeline-workout">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="box">
|
||||
<div class="workout-user-date">
|
||||
<div class="workout-user">
|
||||
<img
|
||||
@ -72,8 +71,7 @@
|
||||
<span v-if="workout">{{ workout.distance }} km</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</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,9 +141,7 @@
|
||||
.timeline-workout {
|
||||
margin-bottom: $default-margin * 2;
|
||||
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
display: flex;
|
||||
.box {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
.workout-user-date {
|
||||
@ -180,7 +174,7 @@
|
||||
.no-map {
|
||||
line-height: 150px;
|
||||
}
|
||||
.bg-map-image {
|
||||
::v-deep(.bg-map-image) {
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
@ -199,6 +193,7 @@
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.workout-map,
|
||||
.workout-data {
|
||||
cursor: pointer;
|
||||
@ -211,5 +206,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div id="user-calendar">
|
||||
<Card class="calendar-card" :without-title="true">
|
||||
<template #content>
|
||||
<div class="calendar-card box">
|
||||
<CalendarHeader
|
||||
:day="day"
|
||||
locale-options="enGB"
|
||||
@ -18,8 +17,7 @@
|
||||
:workouts="calendarWorkouts"
|
||||
:weekStartingMonday="user.weekm"
|
||||
/>
|
||||
</template>
|
||||
</Card>
|
||||
</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,8 +1,6 @@
|
||||
<template>
|
||||
<div class="user-stat-card">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="stat-content">
|
||||
<div class="stat-content box">
|
||||
<div class="stat-icon">
|
||||
<i class="fa" :class="`fa-${icon}`" />
|
||||
</div>
|
||||
@ -11,20 +9,14 @@
|
||||
<div class="stat">{{ text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</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,7 +1,6 @@
|
||||
<template>
|
||||
<div class="workouts-filters">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="box">
|
||||
<div class="form">
|
||||
<div class="form-items-group">
|
||||
<div class="form-item">
|
||||
@ -129,8 +128,7 @@
|
||||
{{ t('buttons.FILTER') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</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,9 +175,6 @@
|
||||
@import '~@/scss/base.scss';
|
||||
|
||||
.workouts-filters {
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
padding: $default-padding;
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -303,6 +294,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="workouts-list">
|
||||
<Card :without-title="true">
|
||||
<template #content>
|
||||
<div class="box" :class="{ 'empty-table': workouts.length === 0 }">
|
||||
<div class="workouts-table">
|
||||
<table>
|
||||
<thead>
|
||||
@ -91,8 +90,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</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,11 +208,14 @@
|
||||
margin-bottom: 50px;
|
||||
width: 100%;
|
||||
|
||||
::v-deep(.card) {
|
||||
.card-content {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.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 {
|
||||
@ -335,7 +334,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-workouts {
|
||||
display: flex;
|
||||
|
||||
@ -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
|
||||
<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" />
|
||||
</button>
|
||||
<button
|
||||
</div>
|
||||
<div
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'calendar' }"
|
||||
@click="updateDisplayColumn('calendar')"
|
||||
>
|
||||
<i class="fa fa-calendar" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
</div>
|
||||
<div
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'timeline' }"
|
||||
@click="updateDisplayColumn('timeline')"
|
||||
>
|
||||
<i class="fa fa-map-o" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
</div>
|
||||
<div
|
||||
class="mobile-menu-item"
|
||||
:class="{ 'is-selected': isSelected === 'records' }"
|
||||
@click="updateDisplayColumn('records')"
|
||||
>
|
||||
<i class="fa fa-trophy" aria-hidden="true" />
|
||||
</button>
|
||||
</template>
|
||||
</Card>
|
||||
</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,17 +157,19 @@
|
||||
}
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
::v-deep(.card) {
|
||||
width: 100%;
|
||||
.card-content {
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.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%;
|
||||
|
||||
@ -188,7 +186,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user