johanleroy/ENI-projet-piscine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): lockup logo via texte reel plutot qu'un raster recadre

Browse Source 
Recomposer icone+texte en une seule image bitmap (recadrage pixel de
l'asset source) donnait un rendu bruite et un espacement fige, impossible
a ajuster proprement (cause du "gros espace entre le texte et l'image"
remonte). Nouveau composant ev-brand : icone PNG nette + texte "EnerVision"
reel en police systeme, tailles liees en em pour que le lockup grossisse en
gardant le meme rapport, et un ecart controlable en CSS plutot que fige
dans un fichier image.
This commit is contained in:
Johan LEROY
2026-09-17 11:36:29 +02:00
parent cc7ca2d359
commit 517144f7e5
16 changed files with 81 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/app/features/auth/change-password/change-password.html
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="auth-page">
<form class="auth-card-wrapper" [formGroup]="form" (ngSubmit)="onSubmit()">
<ev-card>
<img src="/logo.png" alt="EnerVision" class="auth-logo" />
<ev-brand class="auth-brand" />
<h1>Nouveau mot de passe</h1>
<p class="auth-subtitle">Votre mot de passe est provisoire, vous devez le modifier avant de continuer</p>
apps/frontend/src/app/features/auth/change-password/change-password.scss
+5 -4
View File
@@ -5,10 +5,11 @@ ev-card {
0 8px 10px -6px rgba(0, 0, 0, 0.04);
}
.auth-logo {
display: block;
height: 96px;
margin: 0 auto 1.5rem;
.auth-brand {
justify-content: center;
width: 100%;
font-size: 2.1rem;
margin-bottom: 1.75rem;
}
h1 {
apps/frontend/src/app/features/auth/change-password/change-password.ts
+2 -1
View File
@@ -5,11 +5,12 @@ import { AuthService } from '../../../core/services/auth.service';
import { Button } from '../../../shared/components/ui/button/button';
import { Card } from '../../../shared/components/ui/card/card';
import { Alert } from '../../../shared/components/ui/alert/alert';
import { Brand } from '../../../shared/components/ui/brand/brand';
@Component({
selector: 'app-change-password',
standalone: true,
imports: [ReactiveFormsModule, Button, Card, Alert],
imports: [ReactiveFormsModule, Button, Card, Alert, Brand],
templateUrl: './change-password.html',
styleUrl: './change-password.scss',
})
apps/frontend/src/app/features/auth/login/login.html
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="auth-page">
<form class="auth-card-wrapper" [formGroup]="form" (ngSubmit)="onSubmit()">
<ev-card>
<img src="/logo.png" alt="EnerVision" class="auth-logo" />
<ev-brand class="auth-brand" />
<h1>Connexion</h1>
<p class="auth-subtitle">Accédez à votre espace EnerVision</p>
apps/frontend/src/app/features/auth/login/login.scss
+5 -4
View File
@@ -5,10 +5,11 @@ ev-card {
0 8px 10px -6px rgba(0, 0, 0, 0.04);
}
.auth-logo {
display: block;
height: 96px;
margin: 0 auto 1.5rem;
.auth-brand {
justify-content: center;
width: 100%;
font-size: 2.1rem;
margin-bottom: 1.75rem;
}
h1 {
apps/frontend/src/app/features/auth/login/login.ts
+2 -1
View File
@@ -6,11 +6,12 @@ import { AuthService } from '../../../core/services/auth.service';
import { Button } from '../../../shared/components/ui/button/button';
import { Card } from '../../../shared/components/ui/card/card';
import { Alert } from '../../../shared/components/ui/alert/alert';
import { Brand } from '../../../shared/components/ui/brand/brand';
@Component({
selector: 'app-login',
standalone: true,
imports: [ReactiveFormsModule, Button, Card, Alert],
imports: [ReactiveFormsModule, Button, Card, Alert, Brand],
templateUrl: './login.html',
styleUrl: './login.scss',
})
apps/frontend/src/app/features/dashboard/dashboard.html
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="dashboard">
<header class="dashboard__header">
<div class="dashboard__brand">
<img src="/logo.png" alt="EnerVision" class="dashboard__logo" />
<ev-brand class="dashboard__logo" />
<div>
<h1>Vue d'ensemble</h1>
<p class="dashboard__subtitle">Consommation instantanée du parc</p>
apps/frontend/src/app/features/dashboard/dashboard.scss
+1 -2
View File
@@ -26,8 +26,7 @@
}
.dashboard__logo {
height: 48px;
width: auto;
font-size: 1.3rem;
}
.dashboard__subtitle {
apps/frontend/src/app/features/dashboard/dashboard.ts
+2 -1
View File
@@ -13,6 +13,7 @@ import { Alert, AlertSeverity } from '../../shared/models/alert.model';
import { Card } from '../../shared/components/ui/card/card';
import { Alert as EvAlert } from '../../shared/components/ui/alert/alert';
import { Badge, BadgeTone } from '../../shared/components/ui/badge/badge';
import { Brand } from '../../shared/components/ui/brand/brand';
const REFRESH_INTERVAL_MS = 10000;
const UNAVAILABLE_MESSAGE =
@@ -28,7 +29,7 @@ const TON_PAR_SEVERITE: Record<AlertSeverity, BadgeTone> = {
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [DecimalPipe, ConsumptionGauge, SiteLoadChart, Card, EvAlert, Badge],
imports: [DecimalPipe, ConsumptionGauge, SiteLoadChart, Card, EvAlert, Badge, Brand],
templateUrl: './dashboard.html',
styleUrl: './dashboard.scss',
})
apps/frontend/src/app/shared/components/ui/brand/brand.html
+2
View File
@@ -0,0 +1,2 @@
<img src="/logo-icon.png" alt="" class="ev-brand__icon" />
<span class="ev-brand__name">EnerVision</span>
apps/frontend/src/app/shared/components/ui/brand/brand.scss
+19
View File
@@ -0,0 +1,19 @@
:host {
display: inline-flex;
align-items: center;
gap: 0.45em;
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
line-height: 1;
}
.ev-brand__icon {
height: 1.3em;
width: auto;
flex-shrink: 0;
}
.ev-brand__name {
white-space: nowrap;
}
apps/frontend/src/app/shared/components/ui/brand/brand.spec.ts
+14
View File
@@ -0,0 +1,14 @@
import { TestBed } from '@angular/core/testing';
import { Brand } from './brand';
describe('Brand', () => {
it("affiche l'icône et le nom EnerVision", async () => {
await TestBed.configureTestingModule({ imports: [Brand] }).compileComponents();
const fixture = TestBed.createComponent(Brand);
fixture.detectChanges();
const icon = fixture.nativeElement.querySelector('img.ev-brand__icon');
expect(icon).toBeTruthy();
expect(fixture.nativeElement.textContent).toContain('EnerVision');
});
});
apps/frontend/src/app/shared/components/ui/brand/brand.ts
+9
View File
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'ev-brand',
standalone: true,
templateUrl: './brand.html',
styleUrl: './brand.scss',
})
export class Brand {}