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

fittrackee_client/src/components/Common/StaticMap.vue

@@ -1,9 +1,12 @@
 <template>
   <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">
       <span class="map-attribution-text">©</span>
@@ -46,9 +49,12 @@
     display: flex;
     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 {

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;
+          .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;
           }
         }

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

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

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%;
-    }
+    padding-bottom: $default-padding * 0.3;
 
     ::v-deep(.card) {
       font-size: 0.9em;

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;
     }

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) {