Client - refacto + display fix and improvements

fittrackee_client/src/components/Common/AlertMessage.vue

@@ -15,9 +15,7 @@
     },
     setup() {
       const { t } = useI18n()
-      return {
-        t,
-      }
+      return { t }
     },
   })
 </script>

fittrackee_client/src/components/Common/Card.vue

@@ -16,7 +16,7 @@
     props: {
       withoutTitle: {
         type: Boolean,
-        default: true,
+        default: false,
       },
     },
   })

fittrackee_client/src/components/Common/Dropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dropdown-wrapper">
-    <div class="dropdown-selected" @click="openDropdown">
+    <div class="dropdown-selected" @click="toggleDropdown">
       <slot></slot>
     </div>
     <ul class="dropdown-list" v-if="isOpen">
@@ -41,25 +41,19 @@
       let isOpen = ref(false)
       let dropdownOptions = props.options.map((option) => option)
 
-      function openDropdown() {
-        isOpen.value = true
+      function toggleDropdown() {
+        isOpen.value = !isOpen.value
       }
       function updateSelected(option: IDropdownOption) {
         emit('selected', option)
         isOpen.value = false
       }
-      function getSelectedLabel(selectedValue: string) {
-        return props.options.filter(
-          (option: IDropdownOption) => option.value === selectedValue
-        )[0].label
-      }
 
       return {
         dropdownOptions,
-        updateSelected,
-        getSelectedLabel,
         isOpen,
-        openDropdown,
+        toggleDropdown,
+        updateSelected,
       }
     },
   })

fittrackee_client/src/components/Common/Error.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="error404">
+  <div id="error">
     <div class="error-content">
       <h1>{{ title }}</h1>
       <p>{{ message }}</p>
@@ -37,7 +37,7 @@
 <style scoped lang="scss">
   @import '~@/scss/base';
 
-  #error404 {
+  #error {
     display: flex;
     align-items: center;
     justify-content: center;

fittrackee_client/src/components/Common/ErrorMessage.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="error-message">
     <ul v-if="Array.isArray(message)">
-      <li v-for="(submessage, index) in message" :key="index">
-        {{ t(submessage) }}
+      <li v-for="(subMessage, index) in message" :key="index">
+        {{ t(subMessage) }}
       </li>
     </ul>
     <div v-else>{{ t(message) }}</div>
@@ -20,9 +20,7 @@
     },
     setup() {
       const { t } = useI18n()
-      return {
-        t,
-      }
+      return { t }
     },
   })
 </script>

fittrackee_client/src/components/Common/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="modal">
     <div class="custom-modal">
-      <Card :without-title="false">
+      <Card>
         <template #title>
           {{ title }}
         </template>
@@ -79,6 +79,15 @@
       margin: 25% auto;
       z-index: 1250;
 
+      @media screen and (max-width: $medium-limit) {
+        margin: 15% auto;
+        width: 100%;
+      }
+      @media screen and (max-width: $small-limit) {
+        margin: 50% 0;
+        width: 100%;
+      }
+
       ::v-deep(.card) {
         border: 0;
         margin: 0;
@@ -102,12 +111,5 @@
         }
       }
     }
-
-    @media screen and (max-width: $small-limit) {
-      .custom-modal {
-        margin: 50% 0;
-        width: 100%;
-      }
-    }
   }
 </style>

fittrackee_client/src/components/Common/NotFound.vue

@@ -13,7 +13,7 @@
   import Error from '@/components/Common/Error.vue'
 
   export default defineComponent({
-    name: 'NotFoundView',
+    name: 'NotFound',
     components: {
       Error,
     },

fittrackee_client/src/components/Common/SportImage/index.vue

@@ -17,12 +17,12 @@
   import { defineComponent } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import CyclingSport from '@/components/Common/Sports/CyclingSport.vue'
-  import CyclingTransport from '@/components/Common/Sports/CyclingTransport.vue'
-  import Hiking from '@/components/Common/Sports/Hiking.vue'
-  import MountainBiking from '@/components/Common/Sports/MountainBiking.vue'
-  import Running from '@/components/Common/Sports/Running.vue'
-  import Walking from '@/components/Common/Sports/Walking.vue'
+  import CyclingSport from '@/components/Common/SportImage/CyclingSport.vue'
+  import CyclingTransport from '@/components/Common/SportImage/CyclingTransport.vue'
+  import Hiking from '@/components/Common/SportImage/Hiking.vue'
+  import MountainBiking from '@/components/Common/SportImage/MountainBiking.vue'
+  import Running from '@/components/Common/SportImage/Running.vue'
+  import Walking from '@/components/Common/SportImage/Walking.vue'
   import { sportColors } from '@/utils/sports'
 
   export default defineComponent({

fittrackee_client/src/components/Common/StaticMap.vue

@@ -10,7 +10,7 @@
       <span class="map-attribution-text">©</span>
       <a
         class="map-attribution-text"
-        href="http://www.openstreetmap.org/copyright"
+        href="https://www.openstreetmap.org/copyright"
         target="_blank"
         rel="noopener noreferrer"
       >

fittrackee_client/src/components/Common/StatsChart/Chart.vue

@@ -35,11 +35,11 @@
     },
     setup(props) {
       const { t } = useI18n()
-      // eslint-disable-next-line
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       function getNumber(value: any): number {
         return isNaN(value) ? 0 : +value
       }
-      // eslint-disable-next-line
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       function getSum(total: any, value: any): number {
         return getNumber(total) + getNumber(value)
       }