Client - back to previous dashboard layout w/ workout cards style update

This commit is contained in:
Sam 2021-09-22 11:49:56 +02:00
parent 39f33e78b7
commit 41a723eb70
6 changed files with 45 additions and 40 deletions

View File

@ -1,9 +1,12 @@
<template> <template>
<div class="static-map"> <div class="static-map">
<img <div
class="map-image" class="bg-map-image"
:src="`${getApiUrl()}workouts/map/${workout.map}?${Date.now()}`" :style="{
alt="workout map" backgroundImage: `url(${getApiUrl()}workouts/map/${
workout.map
}?${Date.now()})`,
}"
/> />
<div class="map-attribution"> <div class="map-attribution">
<span class="map-attribution-text">©</span> <span class="map-attribution-text">©</span>
@ -46,9 +49,12 @@
display: flex; display: flex;
position: relative; position: relative;
.map-image { .bg-map-image {
height: 225px; background-size: cover;
width: 400px; background-position: center;
opacity: 0.6;
height: 200px;
width: 100%;
} }
.map-attribution { .map-attribution {

View File

@ -13,7 +13,7 @@
<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> </div>
{{ user.username }} <span class="workout-user-name">{{ user.username }}</span>
</div> </div>
<div <div
class="workout-date" class="workout-date"
@ -119,7 +119,6 @@
margin-bottom: $default-margin * 2; margin-bottom: $default-margin * 2;
::v-deep(.card) { ::v-deep(.card) {
max-width: 400px;
.card-content { .card-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -128,13 +127,22 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: $default-padding * 0.5 $default-padding; padding: $default-padding * 0.5 $default-padding;
.workout-user {
display: flex;
.profile-img { .profile-img {
border-radius: 50%; border-radius: 50%;
height: 25px; height: 25px;
width: 25px; width: 25px;
} }
.fa-user-circle-o {
font-size: 1.5em;
}
.workout-user-name {
padding-left: 5px;
}
}
.workout-date { .workout-date {
font-size: 0.75em; font-size: 0.85em;
font-style: italic; font-style: italic;
} }
} }

View File

@ -139,27 +139,25 @@
@import '~@/scss/base'; @import '~@/scss/base';
.user-month-stats { .user-month-stats {
::v-deep(.stat-chart) { ::v-deep(.card-content) {
padding: $default-padding;
.stat-chart {
.chart { .chart {
.bar-chart {
height: 280px;
}
@media screen and (max-width: $small-limit) {
.bar-chart { .bar-chart {
height: 100%; height: 100%;
} }
} }
} }
}
.chart-radio { .chart-radio {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: $default-padding; padding: $default-padding;
label { label {
font-size: 0.9em; font-size: 0.85em;
font-weight: normal; font-weight: normal;
} }
} }
} }
}
</style> </style>

View File

@ -57,11 +57,8 @@
@import '~@/scss/base'; @import '~@/scss/base';
.records-card { .records-card {
padding: 0;
width: 50%;
@media screen and (max-width: $small-limit) {
width: 100%; width: 100%;
} padding-bottom: $default-padding * 0.3;
::v-deep(.card) { ::v-deep(.card) {
font-size: 0.9em; font-size: 0.9em;

View File

@ -59,10 +59,6 @@
@import '~@/scss/base'; @import '~@/scss/base';
.user-records { .user-records {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.no-records { .no-records {
padding: $default-padding; padding: $default-padding;
} }

View File

@ -5,11 +5,11 @@
</div> </div>
<div class="container dashboard-container"> <div class="container dashboard-container">
<div class="left-container dashboard-sub-container"> <div class="left-container dashboard-sub-container">
<UserCalendar :user="authUser" />
<UserMonthStats :user="authUser" /> <UserMonthStats :user="authUser" />
<UserRecords :user="authUser" /> <UserRecords :user="authUser" />
</div> </div>
<div class="right-container dashboard-sub-container"> <div class="right-container dashboard-sub-container">
<UserCalendar :user="authUser" />
<Timeline :user="authUser" /> <Timeline :user="authUser" />
</div> </div>
</div> </div>
@ -58,10 +58,10 @@
flex-direction: column; flex-direction: column;
} }
.left-container { .left-container {
width: 65%; width: 32%;
} }
.right-container { .right-container {
width: 35%; width: 68%;
} }
} }
@media screen and (max-width: $small-limit) { @media screen and (max-width: $small-limit) {