Correction title size

2pates · Apr 10, 2024 · d1d71f4 · d1d71f4
1 parent 455fbaa
commit d1d71f4
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 64 deletions.
diff --git 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
@@ -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
@@ -3,13 +3,14 @@ <h2 style="text-align: center;">{{category|uppercase}}</h2>
 </div>
 
 <div class="wrapper">
-      <div *ngFor="let resource of resources; let i = index" class="box" [ngClass]="boxes[i % boxes.length]?.value">
+      <a *ngFor="let resource of resources; let i = index" class="box box-link"
+            [ngClass]="boxes[i % boxes.length]?.value" href="{{resource.link}}" target="_blank">
 
-            <h2 [routerLink]="['/resources', resource.id, 'edit']" #title>{{resource.title}}</h2>
+            <h2 [routerLink]="['/resources', resource.id, 'edit']" appAdjustFontSize>{{resource.title}}</h2>
             <p>{{resource.body}}</p>
-            <a class="wrapper-img" href="{{resource.link}}" target="_blank">
+            <a class="wrapper-img">
                   <img class="resource-img" src="{{resource.imageUrl}}" alt="Image Un">
             </a>
 
-      </div>
+      </a>
 </div>
diff --git 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,18 +29,15 @@ export class ResourceListComponent implements OnInit {
     { value: 'eight' },
   ];
 
-  @ViewChildren('title') titles!: QueryList<ElementRef>;
-
   constructor(
-    @Inject(DOCUMENT) private document: Document,
     private resourceService: ResourceService, // Inject ResourcesData here //ADD
     private tagService: TagService,
     private location: Location
   ) {}
 
   async ngOnInit(): Promise<void> {
     await this.initCategory();
-    this.selectResources();
+    await this.selectResources();
   }
 
   async initCategory(): Promise<void> {
@@ -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
@@ -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
@@ -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;
+        }
+      }
+    }
+  }
+}