technostrea/trouvetonprofile
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

theme clair/sombre , petit defaut sur le footer (#1)

Browse Source 
Co-authored-by: styve Lioumba <styve.lioumba@jdc.fr>
This commit is contained in:
Styve Lioumba
2024-09-25 16:55:07 +02:00
committed by styve Lioumba
parent 1bf76c6c66
commit 4ed63411d3
10 changed files with 91 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
.github/workflows/main.yaml vendored Normal file
View File

@@ -0,0 +1,16 @@
name: Main Workflow
on:
push:
branches:
- main
pull_request:
branches:
- main
- dev
- feat/*
- fix/*
jobs:
run-tests:
uses: ./tests/docker-build.yaml

7
.github/workflows/tests/docker-build.yaml vendored
View File

@@ -2,12 +2,7 @@ name: Docker Build Check
# Déclencheur pour chaque pull request
on:
pull_request:
branches:
- main
- dev
- feat/*
- fix/*
workflow_call:
jobs:
build:

2
angular.json
View File

@@ -37,7 +37,7 @@
],
"scripts": [],
"server": "src/main.server.ts",
"prerender": true,
"prerender": false,
"ssr": {
"entry": "server.ts"
}

2
src/app/app.component.html
View File

@@ -1,4 +1,4 @@
<main class="bg-white dark:bg-gray-900">
<main class="bg-white dark:bg-gray-900" [ngClass]="themeService.darkModeSignal()">
<app-nav-bar/>
<section class="content bg-white dark:bg-gray-900">
<router-outlet></router-outlet>

8
src/app/app.component.ts
View File

@@ -1,8 +1,9 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import {Component, inject} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterOutlet} from '@angular/router';
import {NavBarComponent} from "@app/shared/components/nav-bar/nav-bar.component";
import {FooterComponent} from "@app/shared/components/footer/footer.component";
import {ThemeService} from '@app/core/services/theme/theme.service';
@Component({
selector: 'app-root',
@@ -13,4 +14,5 @@ import {FooterComponent} from "@app/shared/components/footer/footer.component";
})
export class AppComponent {
title = 'TrouveTonProfile';
themeService = inject(ThemeService);
}

16
src/app/core/services/theme/theme.service.spec.ts Normal file
View File

@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';
import { ThemeService } from './theme.service';
describe('ThemeService', () => {
let service: ThemeService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(ThemeService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});

14
src/app/core/services/theme/theme.service.ts Normal file
View File

@@ -0,0 +1,14 @@
import {Injectable, signal} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ThemeService {
darkModeSignal = signal<string>('null');
updateDarkMode() {
this.darkModeSignal.update((value) => (value === 'dark' ? 'null' : 'dark'));
}
}

25
src/app/shared/components/nav-bar/nav-bar.component.html
View File

@@ -1,4 +1,4 @@
<header class="bg-white dark:bg-gray-900">
<header class="w-screen bg-white dark:bg-gray-900">
<div class="w-full">
<nav
class="fixed w-full z-20 top-0 start-1/2 max-w-6xl -translate-x-1/2 bg-white dark:bg-gray-900">
@@ -11,8 +11,24 @@
</div>
</a>
<div class="flex md:order-2 space-x-1 items-center">
@if (themeService.darkModeSignal() === 'dark') {
<button
type="button"
(click)="toggleDarkMode()"
class="text-black dark:text-white font-medium rounded-lg text-sm px-4 py-2 text-center flex items-center justify-center gap-1">
<span class="inline-block h-4 w-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
</svg>
</span>
</button>
} @else {
<button
type="button"
(click)="toggleDarkMode()"
class="text-black dark:text-white font-medium rounded-lg text-sm px-4 py-2 text-center flex items-center justify-center gap-1">
<span class="inline-block h-4 w-4">
<svg
@@ -20,10 +36,11 @@
class="w-full h-full fill-current"
viewBox="0 -960 960 960">
<path
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/>
</svg>
</span>
</button>
}
<span class="text-black dark:text-white"> | </span>
<button
type="button"
@@ -34,7 +51,7 @@
class="w-full h-full fill-current"
viewBox="0 -960 960 960">
<path
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z" />
d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/>
</svg>
</span>
<span class="hidden sm:block text-black dark:text-white">Se connecter</span>
@@ -57,7 +74,7 @@
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 1h15M1 7h15M1 13h15" />
d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
</div>

7
src/app/shared/components/nav-bar/nav-bar.component.ts
View File

@@ -1,5 +1,6 @@
import { Component } from '@angular/core';
import {Component, inject} from '@angular/core';
import {RouterLink} from "@angular/router";
import {ThemeService} from "@app/core/services/theme/theme.service";
@Component({
selector: 'app-nav-bar',
@@ -11,5 +12,9 @@ import {RouterLink} from "@angular/router";
styleUrl: './nav-bar.component.scss'
})
export class NavBarComponent {
protected themeService: ThemeService = inject(ThemeService);
toggleDarkMode() {
this.themeService.updateDarkMode();
}
}

6
tailwind.config.js
View File

@@ -1,10 +1,14 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class', // or 'media' or 'class'
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
extend: {
backgroundColor: ['dark'],
textColor: ['dark'],
},
},
plugins: [],
}