From a791b32f69b93d68282e6343571066d9b9e629b2 Mon Sep 17 00:00:00 2001 From: styve Lioumba Date: Mon, 24 Nov 2025 22:33:35 +0100 Subject: [PATCH] fix bug #10 , responsive accueil et page de recherche --- .gitignore | 1 + package-lock.json | 46 ++++ package.json | 3 + src/app/app.component.html | 24 +- src/app/app.component.scss | 100 ++++++- .../components/footer/footer.component.html | 202 +++++++++------ .../components/footer/footer.component.ts | 4 +- .../components/nav-bar/nav-bar.component.html | 244 +++++++++--------- .../pagination/pagination.component.html | 36 +++ .../pagination/pagination.component.scss | 0 .../pagination/pagination.component.spec.ts | 22 ++ .../pagination/pagination.component.ts | 10 + tailwind.config.js | 74 +++++- 13 files changed, 544 insertions(+), 222 deletions(-) create mode 100644 src/app/shared/components/pagination/pagination.component.html create mode 100644 src/app/shared/components/pagination/pagination.component.scss create mode 100644 src/app/shared/components/pagination/pagination.component.spec.ts create mode 100644 src/app/shared/components/pagination/pagination.component.ts diff --git a/.gitignore b/.gitignore index e9241bf..62714e8 100644 --- a/.gitignore +++ b/.gitignore @@ -126,3 +126,4 @@ logs/* logs/*.log pb/data/* +src/environments/environment.development.ts diff --git a/package-lock.json b/package-lock.json index 91f4d73..9cd29df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,9 @@ "@angular-devkit/build-angular": "^17.0.1", "@angular/cli": "^17.0.1", "@angular/compiler-cli": "^17.0.0", + "@tailwindcss/aspect-ratio": "^0.4.2", + "@tailwindcss/forms": "^0.5.10", + "@tailwindcss/line-clamp": "^0.4.4", "@types/express": "^4.17.17", "@types/jest": "^30.0.0", "@types/node": "^18.18.0", @@ -6193,6 +6196,39 @@ "@sinonjs/commons": "^3.0.0" } }, + "node_modules/@tailwindcss/aspect-ratio": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz", + "integrity": "sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + } + }, + "node_modules/@tailwindcss/forms": { + "version": "0.5.10", + "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz", + "integrity": "sha512-utI1ONF6uf/pPNO68kmN1b8rEwNXv3czukalo8VtJH8ksIkZXr3Q3VYudZLkCsDd4Wku120uF02hYK25XGPorw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mini-svg-data-uri": "^1.2.3" + }, + "peerDependencies": { + "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1" + } + }, + "node_modules/@tailwindcss/line-clamp": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz", + "integrity": "sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -14947,6 +14983,16 @@ "webpack": "^5.0.0" } }, + "node_modules/mini-svg-data-uri": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", + "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", + "dev": true, + "license": "MIT", + "bin": { + "mini-svg-data-uri": "cli.js" + } + }, "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", diff --git a/package.json b/package.json index 26b5cf8..94d8ad0 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,9 @@ "@angular-devkit/build-angular": "^17.0.1", "@angular/cli": "^17.0.1", "@angular/compiler-cli": "^17.0.0", + "@tailwindcss/aspect-ratio": "^0.4.2", + "@tailwindcss/forms": "^0.5.10", + "@tailwindcss/line-clamp": "^0.4.4", "@types/express": "^4.17.17", "@types/jest": "^30.0.0", "@types/node": "^18.18.0", diff --git a/src/app/app.component.html b/src/app/app.component.html index 2396764..e185499 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,17 @@ -
- -
- -
- -
+
+ + + + +
+
+ +
+
+ + + +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index ac985b6..eeac3d1 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,21 +1,95 @@ +/* Container principal responsive */ +.app-container { + @apply antialiased; + min-height: 100vh; + min-height: 100dvh; /* Support pour les navigateurs modernes */ +} + +/* Wrapper de contenu avec contraintes responsive */ +.content-wrapper { + @apply w-full mx-auto; + max-width: 100%; +} + +/* Styles responsive pour les différents breakpoints */ +@media (min-width: 640px) { + .content-wrapper { + max-width: 100%; + } +} + +@media (min-width: 768px) { + .content-wrapper { + max-width: 100%; + } +} + +@media (min-width: 1024px) { + .content-wrapper { + max-width: 1280px; /* max-w-7xl */ + } +} + +@media (min-width: 1280px) { + .content-wrapper { + max-width: 1536px; /* max-w-screen-2xl */ + } +} + +/* Assure que le router-outlet s'affiche correctement */ +router-outlet + * { + @apply w-full; +} + +/* Espacement responsive pour éviter le chevauchement avec la navbar fixe */ main { - display: flex; - flex-direction: column; - min-height: 100vh; /* Minimum 100% de la hauteur de la fenêtre */ + padding-top: 4rem; /* 64px - hauteur navbar mobile */ } -.content { - flex: 1; /* Cette zone grandit pour remplir l'espace restant */ - padding: 20px; - display: flex; - align-items: center; - justify-content: center; +@media (min-width: 640px) { + main { + padding-top: 5rem; /* 80px - hauteur navbar desktop */ + } } -app-nav-bar { - flex-shrink: 0; /* Le header ne doit pas rétrécir */ +/* Smooth scroll pour toute l'application */ +html { + scroll-behavior: smooth; } -app-footer { - flex-shrink: 0; /* Le footer ne doit pas rétrécir */ +/* Amélioration de la lisibilité du texte */ +body { + @apply text-gray-900 dark:text-gray-100; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Container générique pour le contenu des pages */ +.page-container { + @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 lg:py-12; +} + +/* Section générique */ +.page-section { + @apply w-full mb-8 sm:mb-12 lg:mb-16; +} + +/* Titre de page responsive */ +.page-title { + @apply text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4 sm:mb-6; +} + +/* Sous-titre de page */ +.page-subtitle { + @apply text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-6 sm:mb-8; +} + +/* Card responsive */ +.card { + @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6 lg:p-8; +} + +/* Transition pour le changement de thème */ +* { + @apply transition-colors duration-200; } diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html index f4c1775..91d2e40 100644 --- a/src/app/shared/components/footer/footer.component.html +++ b/src/app/shared/components/footer/footer.component.html @@ -1,86 +1,128 @@ - diff --git a/src/app/shared/components/footer/footer.component.ts b/src/app/shared/components/footer/footer.component.ts index 5c09a53..7666104 100644 --- a/src/app/shared/components/footer/footer.component.ts +++ b/src/app/shared/components/footer/footer.component.ts @@ -8,4 +8,6 @@ import { RouterLink } from '@angular/router'; templateUrl: './footer.component.html', styleUrl: './footer.component.scss', }) -export class FooterComponent {} +export class FooterComponent { + readonly currentYear = new Date().getFullYear(); +} diff --git a/src/app/shared/components/nav-bar/nav-bar.component.html b/src/app/shared/components/nav-bar/nav-bar.component.html index 42cd3b4..edfe991 100644 --- a/src/app/shared/components/nav-bar/nav-bar.component.html +++ b/src/app/shared/components/nav-bar/nav-bar.component.html @@ -1,132 +1,136 @@ -
-
-
diff --git a/src/app/shared/components/pagination/pagination.component.html b/src/app/shared/components/pagination/pagination.component.html new file mode 100644 index 0000000..37d1375 --- /dev/null +++ b/src/app/shared/components/pagination/pagination.component.html @@ -0,0 +1,36 @@ + + diff --git a/src/app/shared/components/pagination/pagination.component.scss b/src/app/shared/components/pagination/pagination.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/components/pagination/pagination.component.spec.ts b/src/app/shared/components/pagination/pagination.component.spec.ts new file mode 100644 index 0000000..d478844 --- /dev/null +++ b/src/app/shared/components/pagination/pagination.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PaginationComponent } from './pagination.component'; + +describe('PaginationComponent', () => { + let component: PaginationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [PaginationComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(PaginationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/pagination/pagination.component.ts b/src/app/shared/components/pagination/pagination.component.ts new file mode 100644 index 0000000..f75e00d --- /dev/null +++ b/src/app/shared/components/pagination/pagination.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-pagination', + standalone: true, + imports: [], + templateUrl: './pagination.component.html', + styleUrl: './pagination.component.scss', +}) +export class PaginationComponent {} diff --git a/tailwind.config.js b/tailwind.config.js index d2f26e3..add51cd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,8 +18,80 @@ module.exports = { backgroundImage: { auth: 'url("./assets/images/bg.avif")', }, + // Conteneurs max-width + maxWidth: { + 'container': '1280px', + 'content': '896px', + }, + + // Espacements personnalisés + spacing: { + '18': '4.5rem', + '88': '22rem', + '128': '32rem', + }, + + // Couleurs de la marque + colors: { + primary: { + 50: '#eef2ff', + 100: '#e0e7ff', + 200: '#c7d2fe', + 300: '#a5b4fc', + 400: '#818cf8', + 500: '#6366f1', // Indigo principal + 600: '#4f46e5', + 700: '#4338ca', + 800: '#3730a3', + 900: '#312e81', + 950: '#1e1b4b', + }, + }, + + // Animations personnalisées + animation: { + 'fade-in': 'fadeIn 0.3s ease-in-out', + 'slide-up': 'slideUp 0.3s ease-out', + 'scale-in': 'scaleIn 0.2s ease-out', + }, + + keyframes: { + fadeIn: { + '0%': { opacity: '0' }, + '100%': { opacity: '1' }, + }, + slideUp: { + '0%': { transform: 'translateY(10px)', opacity: '0' }, + '100%': { transform: 'translateY(0)', opacity: '1' }, + }, + scaleIn: { + '0%': { transform: 'scale(0.95)', opacity: '0' }, + '100%': { transform: 'scale(1)', opacity: '1' }, + }, + }, + + // Typography + fontSize: { + 'xxs': ['0.625rem', { lineHeight: '0.875rem' }], + }, + + // Transitions + transitionProperty: { + 'height': 'height', + 'spacing': 'margin, padding', + }, }, }, - plugins: [], + plugins: [ + // Plugin pour line-clamp (limiter le nombre de lignes) + require('@tailwindcss/line-clamp'), + + // Plugin pour les formulaires + require('@tailwindcss/forms')({ + strategy: 'class', // Utilise la classe 'form-*' au lieu de styles globaux + }), + + // Plugin pour l'aspect ratio + require('@tailwindcss/aspect-ratio'),], }