From 9346bf9ee3d9b79dc644679cb172769f57aa1a7a Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Thu, 26 Mar 2026 19:16:08 +0100
Subject: [PATCH] cleaned code and fix css with grid

---
 src/app/app.routes.ts                         |   3 +-
 .../components/navbar/navbar.component.html   |  32 ++--
 src/app/pages/ranking/ranking.component.html  | 146 +++++-------------
 3 files changed, 55 insertions(+), 126 deletions(-)

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 3bb5d8f..59c98a1 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -10,7 +10,8 @@ export const routes: Routes = [
         children: [
             {
                 path: 'home',
-                loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)},
+                loadComponent: () => import('./pages/home/home.component').then(m => m.HomeComponent)
+            },
             {
                 path: 'groups',
                 loadComponent: () => import('./pages/groups/groups.component').then(m => m.GroupsComponent)
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 0b7ca7a..d117b3a 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,24 +1,24 @@
-    <ion-tabs>
-        <ion-tab-bar slot="bottom" style="
+<ion-tabs>
+    <ion-tab-bar slot="bottom" style="
         --background: #FFFFFF;
         --color: #C0C0C0;
         --color-selected: #000000;
       ">
 
-            <ion-tab-button tab="home" routerLink="/home">
-                <ion-icon name="home-outline"></ion-icon>
-            </ion-tab-button>
+        <ion-tab-button tab="home" routerLink="/home">
+            <ion-icon name="home-outline"></ion-icon>
+        </ion-tab-button>
 
-            <ion-tab-button tab="groups" routerLink="/groups">
-                <ion-icon name="chatbubbles-outline"></ion-icon>
-            </ion-tab-button>
+        <ion-tab-button tab="groups" routerLink="/groups">
+            <ion-icon name="chatbubbles-outline"></ion-icon>
+        </ion-tab-button>
 
-            <ion-tab-button tab="ranking" routerLink="/ranking">
-                <ion-icon name="stats-chart-outline"></ion-icon>
-            </ion-tab-button>
+        <ion-tab-button tab="ranking" routerLink="/ranking">
+            <ion-icon name="stats-chart-outline"></ion-icon>
+        </ion-tab-button>
 
-            <ion-tab-button tab="social" routerLink="/social">
-                <ion-icon name="people-outline"></ion-icon>
-            </ion-tab-button>
-        </ion-tab-bar>
-    </ion-tabs>
\ No newline at end of file
+        <ion-tab-button tab="social" routerLink="/social">
+            <ion-icon name="people-outline"></ion-icon>
+        </ion-tab-button>
+    </ion-tab-bar>
+</ion-tabs>
\ No newline at end of file
diff --git a/src/app/pages/ranking/ranking.component.html b/src/app/pages/ranking/ranking.component.html
index 84b0e6b..7373af9 100644
--- a/src/app/pages/ranking/ranking.component.html
+++ b/src/app/pages/ranking/ranking.component.html
@@ -1,111 +1,39 @@
-    <ion-header class="bg-white">
-        <p class="text-center font-bold">Classement général</p>
-    </ion-header>
-    <ion-content style="--background: #f7f6f2;">
-        <div class="rounded-3xl pl-5 m-3 relative bg-white h-full overflow-scroll">
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center rounded-full bg-yellow-400">1</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-300">2</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center rounded-full bg-amber-600">3</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">4</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">5</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">6</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">7</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">8</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">9</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">10</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">11</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">12</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
-            </div>
-            <div class="flex items-center gap-10">
-                <p class="w-8 h-8 flex items-center justify-center">13</p>
-                <div>
-                    <p class="mb-0 font-bold">Mathys</p>
-                    <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
-                </div>
-                <p class="absolute right-4 text-gray-400"><strong class="text-black">412</strong> pts</p>
+<ion-header class="bg-white">
+    <p class="text-center font-bold font-sans">Classement général</p>
+</ion-header>
+<ion-content style="--background: #f7f6f2;">
+    <div class="rounded-3xl px-5 m-3 bg-white overflow-auto font-mono">
+        <div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
+            <p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-yellow-300 m-0">1</p>
+            <div>
+                <p class="mb-0 font-bold">Mathys</p>
+                <p class="mt-0 text-xs text-gray-500">52 défis - 18 victoires</p>
             </div>
+            <p class="text-gray-400 m-0"><strong class="text-black">412</strong> pts</p>
         </div>
-    </ion-content>
\ No newline at end of file
+        <div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
+            <p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-gray-200 m-0">2</p>
+            <div>
+                <p class="mb-0 font-bold">Léa</p>
+                <p class="mt-0 text-xs text-gray-500">47 défis - 15 victoires</p>
+            </div>
+            <p class="text-gray-400 m-0"><strong class="text-black">389</strong> pts</p>
+        </div>
+        <div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
+            <p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-orange-300 m-0">3</p>
+            <div>
+                <p class="mb-0 font-bold">Noah</p>
+                <p class="mt-0 text-xs text-gray-500">41 défis - 12 victoires</p>
+            </div>
+            <p class="text-gray-400 m-0"><strong class="text-black">354</strong> pts</p>
+        </div>
+        <div class="grid grid-cols-[auto_1fr_auto] items-center gap-4 mt-0 mb-0">
+            <p class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 bg-gray-50 m-0 text-sm">4</p>
+            <div>
+                <p class="mb-0 font-bold">Camille</p>
+                <p class="mt-0 text-xs text-gray-500">38 défis - 10 victoires</p>
+            </div>
+            <p class="text-gray-400 m-0"><strong class="text-black">321</strong> pts</p>
+        </div>
+    </div>
+</ion-content>
\ No newline at end of file