cleaned code and fix css with grid
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
<ion-tab-button tab="social" routerLink="/social">
|
||||
<ion-icon name="people-outline"></ion-icon>
|
||||
</ion-tab-button>
|
||||
</ion-tab-bar>
|
||||
</ion-tabs>
|
||||
@@ -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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user