From 41a723eb70ca44530cd76b9776b4ae8fcf28b70d Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 22 Sep 2021 11:49:56 +0200
Subject: [PATCH] Client - back to previous dashboard layout w/ workout cards
 style update

---
 .../src/components/Common/StaticMap.vue       | 20 +++++++++-----
 .../Dashboard/Timeline/WorkoutCard.vue        | 22 +++++++++++-----
 .../components/Dashboard/UserMonthStats.vue   | 26 +++++++++----------
 .../Dashboard/UserRecords/RecordsCard.vue     |  7 ++---
 .../Dashboard/UserRecords/index.vue           |  4 ---
 fittrackee_client/src/views/DashBoard.vue     |  6 ++---
 6 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/fittrackee_client/src/components/Common/StaticMap.vue b/fittrackee_client/src/components/Common/StaticMap.vue
index 2f1eda4e..2c011321 100644
--- a/fittrackee_client/src/components/Common/StaticMap.vue
+++ b/fittrackee_client/src/components/Common/StaticMap.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="static-map">
-    <img
-      class="map-image"
-      :src="`${getApiUrl()}workouts/map/${workout.map}?${Date.now()}`"
-      alt="workout map"
+    <div
+      class="bg-map-image"
+      :style="{
+        backgroundImage: `url(${getApiUrl()}workouts/map/${
+          workout.map
+        }?${Date.now()})`,
+      }"
     />
     <div class="map-attribution">
       <span class="map-attribution-text">©</span>
@@ -46,9 +49,12 @@
     display: flex;
     position: relative;
 
-    .map-image {
-      height: 225px;
-      width: 400px;
+    .bg-map-image {
+      background-size: cover;
+      background-position: center;
+      opacity: 0.6;
+      height: 200px;
+      width: 100%;
     }
 
     .map-attribution {
diff --git a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
index c6829773..b317dd0c 100644
--- a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
@@ -13,7 +13,7 @@
             <div v-else class="no-picture">
               <i class="fa fa-user-circle-o" aria-hidden="true" />
             </div>
-            {{ user.username }}
+            <span class="workout-user-name">{{ user.username }}</span>
           </div>
           <div
             class="workout-date"
@@ -119,7 +119,6 @@
     margin-bottom: $default-margin * 2;
 
     ::v-deep(.card) {
-      max-width: 400px;
       .card-content {
         display: flex;
         flex-direction: column;
@@ -128,13 +127,22 @@
           display: flex;
           justify-content: space-between;
           padding: $default-padding * 0.5 $default-padding;
-          .profile-img {
-            border-radius: 50%;
-            height: 25px;
-            width: 25px;
+          .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;
+            }
           }
           .workout-date {
-            font-size: 0.75em;
+            font-size: 0.85em;
             font-style: italic;
           }
         }
diff --git a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
index 649a99b7..a0849af5 100644
--- a/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
+++ b/fittrackee_client/src/components/Dashboard/UserMonthStats.vue
@@ -139,26 +139,24 @@
   @import '~@/scss/base';
 
   .user-month-stats {
-    ::v-deep(.stat-chart) {
-      .chart {
-        .bar-chart {
-          height: 280px;
-        }
-        @media screen and (max-width: $small-limit) {
+    ::v-deep(.card-content) {
+      padding: $default-padding;
+      .stat-chart {
+        .chart {
           .bar-chart {
             height: 100%;
           }
         }
       }
-    }
-    .chart-radio {
-      display: flex;
-      justify-content: space-between;
-      padding: $default-padding;
+      .chart-radio {
+        display: flex;
+        justify-content: space-between;
+        padding: $default-padding;
 
-      label {
-        font-size: 0.9em;
-        font-weight: normal;
+        label {
+          font-size: 0.85em;
+          font-weight: normal;
+        }
       }
     }
   }
diff --git a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue b/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
index 13109474..3017ca11 100644
--- a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
+++ b/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
@@ -57,11 +57,8 @@
   @import '~@/scss/base';
 
   .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) {
       font-size: 0.9em;
diff --git a/fittrackee_client/src/components/Dashboard/UserRecords/index.vue b/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
index 9e9cf836..54de3a21 100644
--- a/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
+++ b/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
@@ -59,10 +59,6 @@
   @import '~@/scss/base';
 
   .user-records {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
     .no-records {
       padding: $default-padding;
     }
diff --git a/fittrackee_client/src/views/DashBoard.vue b/fittrackee_client/src/views/DashBoard.vue
index 8f56ec52..b8ecff43 100644
--- a/fittrackee_client/src/views/DashBoard.vue
+++ b/fittrackee_client/src/views/DashBoard.vue
@@ -5,11 +5,11 @@
     </div>
     <div class="container dashboard-container">
       <div class="left-container dashboard-sub-container">
-        <UserCalendar :user="authUser" />
         <UserMonthStats :user="authUser" />
         <UserRecords :user="authUser" />
       </div>
       <div class="right-container dashboard-sub-container">
+        <UserCalendar :user="authUser" />
         <Timeline :user="authUser" />
       </div>
     </div>
@@ -58,10 +58,10 @@
       flex-direction: column;
     }
     .left-container {
-      width: 65%;
+      width: 32%;
     }
     .right-container {
-      width: 35%;
+      width: 68%;
     }
   }
   @media screen and (max-width: $small-limit) {