From d1d71f4a57fab8918de29050f924086639f6cb73 Mon Sep 17 00:00:00 2001
From: Lea-drd <73934530+Lea-drd@users.noreply.github.com>
Date: Wed, 10 Apr 2024 20:26:58 +0200
Subject: [PATCH] Correction title size
---
src/app/app.module.ts | 2 +
.../resource-list/resource-list.component.css | 83 +++++++++++++++++--
.../resource-list.component.html | 9 +-
.../resource-list/resource-list.component.ts | 54 +-----------
.../shared/services/resource.service.ts | 3 -
src/app/shared/adjust-font-size.directive.ts | 65 +++++++++++++++
6 files changed, 152 insertions(+), 64 deletions(-)
create mode 100644 src/app/shared/adjust-font-size.directive.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 38ba0c9..6beebb7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,7 @@ import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';
+import { AdjustFontSizeDirective } from './shared/adjust-font-size.directive';
@NgModule({
declarations: [
@@ -33,6 +34,7 @@ import { LoginComponent } from './login/login.component';
NavbarComponent,
HomeComponent,
LoginComponent,
+ AdjustFontSizeDirective,
],
imports: [
BrowserModule,
diff --git a/src/app/resources/resource-list/resource-list.component.css b/src/app/resources/resource-list/resource-list.component.css
index feced88..10aedd4 100644
--- a/src/app/resources/resource-list/resource-list.component.css
+++ b/src/app/resources/resource-list/resource-list.component.css
@@ -7,10 +7,13 @@
padding: 5% 10%;
}
+.box-link {
+ text-decoration: none; /* Supprime le soulignement du lien */
+ color: inherit; /* Utilisez la couleur par défaut du texte */
+}
.box {
border-radius: 30px;
}
-
.wrapper-img {
margin-left: 10px;
margin-right: 10px;
@@ -234,6 +237,74 @@ p {
margin-right: 10%;
margin-left: 10%;
}
+
+ /* Styles spécifiques pour chaque boîte */
+
+ .one,
+ .two,
+ .three,
+ .four,
+ .five,
+ .six,
+ .seven,
+ .eight {
+ grid-column: span 1;
+ grid-row: span 1;
+ display: grid;
+ grid-template-rows: auto;
+ }
+
+ .one,
+ .three,
+ .five,
+ .seven {
+ grid-template-columns: 70% 30%;
+ }
+ .two,
+ .four,
+ .six,
+ .seven {
+ grid-template-columns: 30% 70%;
+ }
+ .one h2,
+ .three h2,
+ .five h2,
+ .seven h2 {
+ grid-row: 1;
+ grid-column: 1;
+ }
+ .two h2,
+ .four h2,
+ .six h2,
+ .eight h2 {
+ grid-row: 1;
+ grid-column: 2;
+ }
+ .one p,
+ .two p,
+ .three p,
+ .four p,
+ .five p,
+ .six p,
+ .seven p,
+ .eight p {
+ grid-row: 2;
+ grid-column: span 2;
+ }
+ .one img,
+ .three img,
+ .five img,
+ .seven img {
+ grid-row: 1;
+ grid-column: 2;
+ }
+ .two img,
+ .four img,
+ .six img,
+ .eight img {
+ grid-row: 1;
+ grid-column: 1;
+ }
}
/*
@@ -251,18 +322,18 @@ p {
p {
font-family: cursive;
text-align: justify;
- margin-left: 10%; /* Ajustez cette valeur selon vos besoins */
- margin-right: 10%; /* Ajustez cette valeur selon vos besoins */
+ margin-left: 10%;
+ margin-right: 10%;
margin-top: 2%;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 8;
-webkit-box-orient: vertical;
- line-height: 1.2em; /* Hauteur de ligne standard */
- max-height: 11em; /* 5 lignes de texte, plus une marge pour les points de suspension */
+ line-height: 1.2em;
+ max-height: 11em;
}
- /* Styles spécifiques pour chaque boîte */
+ /* Specific style for each box */
.one,
.two,
.three,
diff --git a/src/app/resources/resource-list/resource-list.component.html b/src/app/resources/resource-list/resource-list.component.html
index ce8407a..fdafc24 100644
--- a/src/app/resources/resource-list/resource-list.component.html
+++ b/src/app/resources/resource-list/resource-list.component.html
@@ -3,13 +3,14 @@ {{category|uppercase}}
\ No newline at end of file
diff --git a/src/app/resources/resource-list/resource-list.component.ts b/src/app/resources/resource-list/resource-list.component.ts
index d7cf8cd..2284fb7 100644
--- a/src/app/resources/resource-list/resource-list.component.ts
+++ b/src/app/resources/resource-list/resource-list.component.ts
@@ -1,17 +1,9 @@
-import {
- Component,
- OnInit,
- ViewChildren,
- QueryList,
- ElementRef,
- Inject,
-} from '@angular/core';
-import { DOCUMENT, Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
import { Resource } from '../shared/models/resource.models';
import { ResourceService } from '../shared/services/resource.service';
import { TagService } from '../shared/services/tag.service';
-import { map } from 'rxjs';
import { Tag } from '../shared/models/tag.models';
@Component({
@@ -37,10 +29,7 @@ export class ResourceListComponent implements OnInit {
{ value: 'eight' },
];
- @ViewChildren('title') titles!: QueryList;
-
constructor(
- @Inject(DOCUMENT) private document: Document,
private resourceService: ResourceService, // Inject ResourcesData here //ADD
private tagService: TagService,
private location: Location
@@ -48,7 +37,7 @@ export class ResourceListComponent implements OnInit {
async ngOnInit(): Promise {
await this.initCategory();
- this.selectResources();
+ await this.selectResources();
}
async initCategory(): Promise {
@@ -66,41 +55,4 @@ export class ResourceListComponent implements OnInit {
this.filterTags
);
}
-
- ngAfterViewInit() {
- this.titles.forEach((title) => this.adjustFontSize(title.nativeElement));
- }
-
- adjustFontSize(element: HTMLElement) {
- const defaultView = this.document.defaultView;
-
- if (defaultView) {
- const computedStyle = defaultView.getComputedStyle(element);
-
- if (computedStyle) {
- const lineHeight = parseFloat(computedStyle.lineHeight);
- const maxLines = 3;
-
- const textHeight = element.scrollHeight;
- const numberOfLines = Math.ceil(textHeight / lineHeight);
-
- if (numberOfLines > maxLines) {
- const fontSize = parseFloat(computedStyle.fontSize);
- const newFontSize = (fontSize * maxLines) / numberOfLines;
-
- element.style.fontSize = newFontSize + 'px';
- } else {
- var textLength = element.textContent?.length ?? 0;
- var fontSizeMax = 2.8;
- var fontSizeMin = 1.7;
- var fontSize = fontSizeMax - 0.04 * textLength;
- if (fontSize < fontSizeMin) {
- fontSize = fontSizeMin;
- }
- var fontSizeFinal = fontSize + 'rem';
- element.style.fontSize = fontSizeFinal;
- }
- }
- }
- }
}
diff --git a/src/app/resources/shared/services/resource.service.ts b/src/app/resources/shared/services/resource.service.ts
index 89865ee..1a67b34 100644
--- a/src/app/resources/shared/services/resource.service.ts
+++ b/src/app/resources/shared/services/resource.service.ts
@@ -3,13 +3,10 @@ import { Resource } from '../models/resource.models';
import {
AngularFirestore,
AngularFirestoreCollection,
- AngularFirestoreDocument,
} from '@angular/fire/compat/firestore';
import { HttpErrorResponse } from '@angular/common/http';
import { firstValueFrom, from, lastValueFrom, map, throwError } from 'rxjs';
-import { Tag } from '../models/tag.models';
import { TagService } from './tag.service';
-import { DocumentData, DocumentReference } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root',
diff --git a/src/app/shared/adjust-font-size.directive.ts b/src/app/shared/adjust-font-size.directive.ts
new file mode 100644
index 0000000..28dff88
--- /dev/null
+++ b/src/app/shared/adjust-font-size.directive.ts
@@ -0,0 +1,65 @@
+import { DOCUMENT } from '@angular/common';
+import {
+ Directive,
+ ElementRef,
+ Renderer2,
+ AfterViewInit,
+ Inject,
+} from '@angular/core';
+
+@Directive({
+ selector: '[appAdjustFontSize]',
+})
+export class AdjustFontSizeDirective implements AfterViewInit {
+ constructor(
+ @Inject(DOCUMENT) private document: Document,
+ private elementRef: ElementRef,
+ private renderer: Renderer2
+ ) {}
+
+ ngAfterViewInit(): void {
+ const title = this.elementRef.nativeElement as HTMLElement;
+ if (title) {
+ this.adjustFontSize(title);
+ } else {
+ console.log('Titles are not yet initialized');
+ }
+ }
+
+ adjustFontSize(element: HTMLElement) {
+ console.log('I am here !');
+ const defaultView = this.document.defaultView;
+
+ if (defaultView) {
+ const computedStyle = defaultView.getComputedStyle(element);
+
+ if (computedStyle) {
+ const lineHeight = parseFloat(computedStyle.lineHeight);
+ const maxLines = 3;
+
+ const textHeight = element.scrollHeight;
+ const numberOfLines = Math.ceil(textHeight / lineHeight);
+
+ if (numberOfLines > maxLines) {
+ const fontSize = parseFloat(computedStyle.fontSize);
+ const newFontSize = (fontSize * maxLines) / numberOfLines;
+
+ element.style.fontSize = newFontSize + 'px';
+ } else {
+ var textLength = element.textContent?.length ?? 0;
+ var fontSizeMax = 2.8;
+ var fontSizeMin = 1.5;
+ var fontSize = fontSizeMax;
+ if (textLength > 6) {
+ fontSize = fontSizeMax - 0.05 * textLength;
+ if (fontSize < fontSizeMin) {
+ fontSize = fontSizeMin;
+ }
+ }
+ var fontSizeFinal = fontSize + 'rem';
+ element.style.fontSize = fontSizeFinal;
+ }
+ }
+ }
+ }
+}