Client - improve calendar display on mobile + fix

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

@@ -7,7 +7,7 @@
             <img
               class="profile-img"
               v-if="userPictureUrl !== ''"
-              alt="User picture"
+              :alt="t('user.USER_PICTURE')"
               :src="userPictureUrl"
             />
             <div v-else class="no-picture">

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

@@ -157,6 +157,13 @@
       }
       .calendar-cell:last-child {
         border-right: 0;
+        @media screen and (max-width: $small-limit) {
+          .calendar-workouts {
+            .more-workouts {
+              left: -45px;
+            }
+          }
+        }
       }
       .disabled-cell {
         color: var(--app-color-light);
@@ -168,5 +175,15 @@
         background: var(--calendar-today-color);
       }
     }
+    @media screen and (max-width: $small-limit) {
+      .calendar-row:last-child {
+        .calendar-workouts {
+          .more-workouts {
+            top: inherit;
+            bottom: 20px;
+          }
+        }
+      }
+    }
   }
 </style>

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

@@ -73,8 +73,9 @@
 
     @media screen and (max-width: $small-limit) {
       .sport-img {
-        width: 14px;
-        height: 14px;
+        padding: 3px;
+        width: 20px;
+        height: 20px;
       }
       sup {
         .custom-fa-small {

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

@@ -112,7 +112,7 @@
         left: 0;
         min-width: 60px;
         @media screen and (max-width: $small-limit) {
-          min-width: 40px;
+          min-width: 70px;
         }
 
         margin-bottom: 20px;

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -71,8 +71,8 @@
         font-size: 0.9em;
         .sport-img {
           padding-right: $default-padding;
-          height: 18px;
-          width: 18px;
+          height: 20px;
+          width: 20px;
         }
       }
       .card-content {
@@ -93,6 +93,16 @@
           }
         }
       }
+      @media screen and (max-width: $small-limit) {
+        font-size: 1em;
+        .card-title {
+          font-size: 1em;
+          .sport-img {
+            height: 22px;
+            width: 22px;
+          }
+        }
+      }
     }
   }
 </style>

fittrackee_client/src/components/NavBar.vue

@@ -40,7 +40,7 @@
               <img
                 v-if="authUserPictureUrl !== ''"
                 class="nav-profile-user-img"
-                alt="User picture"
+                :alt="t('user.USER_PICTURE')"
                 :src="authUserPictureUrl"
               />
               <div v-else class="no-picture">