fix many pb : responsive in home/countries/about + fix badge size pb …

…in profile page
icepick4 · Jul 17, 2023 · 043cb04 · 043cb04
1 parent ca370c2
commit 043cb04
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -17,7 +17,6 @@
         content="Capitalympics is a web application that helps you learn the flags and capitals of countries around the world." />
     <meta name="twitter:image" content="/logo.png" />
     <meta name="twitter:card" content="summary_large_image" />
-    <link rel="manifest" href="/manifest.webmanifest">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

diff --git a/src/components/Badge.vue b/src/components/Badge.vue
@@ -28,7 +28,7 @@ const onSmallScreen = () => window.innerWidth < 640;
 
 onBeforeMount(() => {
     window.addEventListener('resize', () => {
-        if (onSmallScreen() && props.selected) {
+        if (onSmallScreen()) {
             size.value = 'lg';
         } else {
             size.value = props.size ?? 'md';
@@ -42,7 +42,8 @@ onUnmounted(() => {
 
 const size = ref(props.size ?? 'md');
 
-if (onSmallScreen() && props.selected) {
+if (onSmallScreen()) {
+    console.log('small screen and selected');
     size.value = 'lg';
 }
 

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -46,7 +46,7 @@ onUnmounted(() => {
 <template>
     <div class="flex items-center justify-center w-full">
         <div
-            class="header flex flex-row w-full sm:w-full md:w-3/4 2xl:w-7/12 justify-between h-auto relative p-7"
+            class="header flex flex-row w-full md:w-3/4 2xl:w-7/12 justify-between h-auto relative p-7"
         >
             <RouterLink
                 to="/"
@@ -57,7 +57,6 @@ onUnmounted(() => {
                     alt="logo"
                     class="w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 xl:w-22 xl:h-22"
                 />
-                <!-- <h1 class="text-4xl font-bold">Capitalympics</h1> -->
             </RouterLink>
 
             <div class="header flex flex-row justify-center items-center gap-7">
@@ -198,13 +197,6 @@ onUnmounted(() => {
                     >
                         {{ $t('countries') }}
                     </RouterLink>
-                    <RouterLink
-                        v-if="!isAuthenticated"
-                        to="/learn"
-                        class="block px-4 py-2 text-black no-underline text-lg transition-all duration-75 ease-in-out hover:text-gray-500"
-                    >
-                        {{ $t('learn') }}
-                    </RouterLink>
                     <RouterLink
                         to="/about"
                         class="block px-4 py-2 text-black no-underline text-lg transition-all duration-75 ease-in-out hover:text-gray-500"

diff --git a/src/components/User/UserInfo.vue b/src/components/User/UserInfo.vue
@@ -5,7 +5,14 @@ import { useStore } from '@/store';
 import { CountryDetails, LearningType, Region, Sort } from '@/types/common';
 import ApiClient from '@/utils/ApiClient';
 import { getLevelName } from '@/utils/common';
-import { IconArrowsSort, IconMinus, IconPlus, IconSortAscending, IconSortDescending, IconX } from '@tabler/icons-vue';
+import {
+    IconArrowsSort,
+    IconMinus,
+    IconPlus,
+    IconSortAscending,
+    IconSortDescending,
+    IconX
+} from '@tabler/icons-vue';
 import { storeToRefs } from 'pinia';
 import { Ref, computed, onMounted, ref } from 'vue';
 import { RouterLink } from 'vue-router';
@@ -188,7 +195,9 @@ const scoreValues: number[] = [-1, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
     <div
         class="w-full h-full flex flex-col items-center justify-start mt-10 mb-10"
     >
-        <div class="w-full sm:w-full md:w-5/6 2xl:w-7/12 mx-auto p-4 sm:p-8">
+        <div
+            class="w-full sm:w-full md:w-5/6 xl:3/4 2xl:w-2/3 mx-auto p-4 sm:p-8"
+        >
             <!-- Informations de l'utilisateur -->
             <div class="bg-gradient rounded-lg shadow-lg p-3 sm:p-6 mb-10">
                 <div
@@ -297,7 +306,10 @@ const scoreValues: number[] = [-1, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
                         class="peer hover:scale-110 focus:scale-110"
                         @click="decreaseMax"
                     />
-                    <span class="text-center text-sm peer-disabled:opacity-50">{{ $t('less') }}</span>
+                    <span
+                        class="text-center text-sm peer-disabled:opacity-50"
+                        >{{ $t('less') }}</span
+                    >
                 </div>
                 <div class="flex flex-col gap-2 justify-center items-center">
                     <input
@@ -338,7 +350,11 @@ const scoreValues: number[] = [-1, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
                 </div>
                 <div class="flex flex-col gap-2 justify-center items-center">
                     <ActionIcon
-                        :icon="currentSort === 'ASC' ? IconSortAscending : IconSortDescending"
+                        :icon="
+                            currentSort === 'ASC'
+                                ? IconSortAscending
+                                : IconSortDescending
+                        "
                         :label="$t('sort')"
                         :disabled="countriesLength !== countries.length"
                         rounded

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -133,6 +133,7 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
     const store = useStore();
     if (store.isAuthenticated && !store.isCurrentUserLoaded) {
+        console.log('loading current user');
         await store.loadCurrentUser();
     }
 

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -32,6 +32,7 @@ export const useStore = defineStore('app', () => {
         }
 
         const response = await ApiClient.get<SuccessResponse<User>>('/me');
+        console.log(response);
         if (!response.success) {
             throw new Error('Failed to load current user');
         }

diff --git a/src/views/About.vue b/src/views/About.vue
@@ -100,10 +100,10 @@ const handleScroll = () => {
         <div
             class="flex flex-col justify-center items-center lg:flex-row lg:gap-8 bg-gradient"
         >
-            <h1 class="text-3xl">
+            <h1 class="text-3xl m-8 text-center">
                 {{ $t('aboutTitle') }}
             </h1>
-            <p class="m-10 text-lg lg:w-1/4">
+            <p class="m-8 text-lg lg:w-1/4">
                 {{ $t('aboutText') }}
             </p>
         </div>
@@ -159,8 +159,8 @@ const handleScroll = () => {
                 class="section-fade-in"
             />
         </div>
-        <div class="w-full h-52 flex justify-center items-center bg-gradient">
-            <h1 class="text-3xl text-center lg:w-1/2">
+        <div class="w-full h-auto flex justify-center items-center bg-gradient">
+            <h1 class="text-3xl text-center lg:w-1/2 m-8">
                 {{ $t('aboutFooter') }}
             </h1>
         </div>

diff --git a/src/views/Countries.vue b/src/views/Countries.vue
@@ -99,16 +99,20 @@ onBeforeMount(async () => {
             "
         />
     </BlurContainer>
-    <div
-        v-else
-        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-16 p-10"
-    >
-        <div v-for="country in filteredCountries()" :key="country.alpha3Code">
-            <CountryLink
-                :countryName="country.name"
-                :countryCode="country.alpha3Code"
-                :countryFlag="country.flag"
-            />
+    <div v-else class="w-full flex justify-center items-center">
+        <div
+            class="w-full md:w-3/4 2xl:w-7/12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-16 p-10"
+        >
+            <div
+                v-for="country in filteredCountries()"
+                :key="country.alpha3Code"
+            >
+                <CountryLink
+                    :countryName="country.name"
+                    :countryCode="country.alpha3Code"
+                    :countryFlag="country.flag"
+                />
+            </div>
         </div>
     </div>
 </template>
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -265,7 +265,7 @@ const handleScroll = () => {
         </div>
         <h1 class="text-center text-5xl">{{ $t('ready?') }}</h1>
         <div
-            class="w-4/5 lg:w-3/4 flex flex-col lg:flex-row lg:[bg-gradient] rounded-lg gap-10"
+            class="w-11/12 lg:w-3/4 flex flex-col lg:flex-row lg:[bg-gradient] rounded-lg gap-10"
         >
             <div
                 class="w-full lg:w-1/2 flex flex-row justify-center items-center lg:p-10 gap-3 sm:gap-10"