Client - remove useless Cards

fittrackee_client/src/components/Common/Card.vue

@@ -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);

fittrackee_client/src/components/Common/NoWorkouts.vue

@@ -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>

fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="timeline-workout">
-    <Card :without-title="true">
+    <div class="box">
-      <template #content>
       <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>
+    </div>
-    </Card>
   </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) {
+    .box {
-      .card-content {
-        display: flex;
       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>

fittrackee_client/src/components/Dashboard/UserCalendar/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="user-calendar">
-    <Card class="calendar-card" :without-title="true">
+    <div class="calendar-card box">
-      <template #content>
       <CalendarHeader
         :day="day"
         locale-options="enGB"
@@ -18,8 +17,7 @@
         :workouts="calendarWorkouts"
         :weekStartingMonday="user.weekm"
       />
-      </template>
+    </div>
-    </Card>
   </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: {

fittrackee_client/src/components/Dashboard/UserStatsCards/UserStatCard.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="user-stat-card">
-    <Card :without-title="true">
+    <div class="stat-content box">
-      <template #content>
-        <div class="stat-content">
       <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%;

fittrackee_client/src/components/Workouts/WorkoutsFilters.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="workouts-filters">
-    <Card :without-title="true">
+    <div class="box">
-      <template #content>
       <div class="form">
         <div class="form-items-group">
           <div class="form-item">
@@ -129,8 +128,7 @@
           {{ t('buttons.FILTER') }}
         </button>
       </div>
-      </template>
+    </div>
-    </Card>
   </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>

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="workouts-list">
-    <Card :without-title="true">
+    <div class="box" :class="{ 'empty-table': workouts.length === 0 }">
-      <template #content>
       <div class="workouts-table">
         <table>
           <thead>
@@ -91,8 +90,7 @@
           </tbody>
         </table>
       </div>
-      </template>
+    </div>
-    </Card>
     <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) {
+    .box {
-      .card-content {
+      @media screen and (max-width: $small-limit) {
-        margin-bottom: 15px;
+        &.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;

fittrackee_client/src/scss/base.scss

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

fittrackee_client/src/views/DashBoard.vue

@@ -1,38 +1,36 @@
 <template>
   <div id="dashboard" v-if="authUser.username && sports.length > 0">
     <div class="container mobile-menu">
-      <Card :without-title="true">
+      <div class="box">
-        <template #content>
+        <div
-          <button
           class="mobile-menu-item"
           :class="{ 'is-selected': isSelected === 'chart' }"
           @click="updateDisplayColumn('chart')"
         >
           <i class="fa fa-bar-chart" aria-hidden="true" />
-          </button>
+        </div>
-          <button
+        <div
           class="mobile-menu-item"
           :class="{ 'is-selected': isSelected === 'calendar' }"
           @click="updateDisplayColumn('calendar')"
         >
           <i class="fa fa-calendar" aria-hidden="true" />
-          </button>
+        </div>
-          <button
+        <div
           class="mobile-menu-item"
           :class="{ 'is-selected': isSelected === 'timeline' }"
           @click="updateDisplayColumn('timeline')"
         >
           <i class="fa fa-map-o" aria-hidden="true" />
-          </button>
+        </div>
-          <button
+        <div
           class="mobile-menu-item"
           :class="{ 'is-selected': isSelected === 'records' }"
           @click="updateDisplayColumn('records')"
         >
           <i class="fa fa-trophy" aria-hidden="true" />
-          </button>
+        </div>
-        </template>
+      </div>
-      </Card>
     </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) {
+        .box {
-          width: 100%;
-          .card-content {
           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;
       }