Client - back to previous dashboard layout w/ workout cards style update
This commit is contained in:
parent
39f33e78b7
commit
41a723eb70
@ -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 {
|
||||||
|
@ -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;
|
||||||
.profile-img {
|
.workout-user {
|
||||||
border-radius: 50%;
|
display: flex;
|
||||||
height: 25px;
|
.profile-img {
|
||||||
width: 25px;
|
border-radius: 50%;
|
||||||
|
height: 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -139,26 +139,24 @@
|
|||||||
@import '~@/scss/base';
|
@import '~@/scss/base';
|
||||||
|
|
||||||
.user-month-stats {
|
.user-month-stats {
|
||||||
::v-deep(.stat-chart) {
|
::v-deep(.card-content) {
|
||||||
.chart {
|
padding: $default-padding;
|
||||||
.bar-chart {
|
.stat-chart {
|
||||||
height: 280px;
|
.chart {
|
||||||
}
|
|
||||||
@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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -57,11 +57,8 @@
|
|||||||
@import '~@/scss/base';
|
@import '~@/scss/base';
|
||||||
|
|
||||||
.records-card {
|
.records-card {
|
||||||
padding: 0;
|
width: 100%;
|
||||||
width: 50%;
|
padding-bottom: $default-padding * 0.3;
|
||||||
@media screen and (max-width: $small-limit) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep(.card) {
|
::v-deep(.card) {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user