#51 - Arrumando visualização da descrição

fga-eps-mds · Nov 15, 2023 · 5113417 · 5113417
1 parent d7798c5
commit 5113417
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/src/app/pages/video-viewer/video-viewer.component.css b/src/app/pages/video-viewer/video-viewer.component.css
@@ -0,0 +1,7 @@
+.clamped-description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+
diff --git a/src/app/pages/video-viewer/video-viewer.component.html b/src/app/pages/video-viewer/video-viewer.component.html
@@ -14,24 +14,17 @@ <h4 class="font-custom font-bold" >
     </div>
     <div class="max-w-full justify-start max-h-full flex text-[12px] font-custom">
       <div>
-        <!-- Exibir descrição abreviada com botão 'Mostrar' -->
-        <span *ngIf="!mostrarCompleta && videoDescription.length > limiteCaracteres">
-          <span [innerHTML]="videoDescription | slice:0:limiteCaracteres"></span>...
-          <button class="font-bold" (click)="expandirDescricao()">Mostrar</button>
-        </span>
-
-        <!-- Exibir descrição completa com botão 'Mostrar menos' -->
-        <span *ngIf="mostrarCompleta">
-          <span [innerHTML]="videoDescription"></span>
+        <span *ngIf="!mostrarCompleta && videoDescription.length > limiteCaracteres" class="clamped-description" [innerHTML]="videoDescription"></span>
+        <button *ngIf="!mostrarCompleta && videoDescription.length > limiteCaracteres" class="font-bold" (click)="expandirDescricao()">Mostrar</button>
+
+        <span *ngIf="mostrarCompleta" [innerHTML]="videoDescription"></span>
+        <div *ngIf="mostrarCompleta">
           <button class="font-bold" (click)="expandirDescricao()">Mostrar menos</button>
-        </span>
-
-        <!-- Exibir descrição completa se ela for menor ou igual ao limite -->
-        <span *ngIf="videoDescription.length <= limiteCaracteres">
-          <span [innerHTML]="videoDescription"></span>
-        </span>
+        </div>
       </div>
     </div>
 
+
+
     </div>
 </div>