Merge pull request #934 from geonetwork/fix-max-lines

[Datahub] Fix read more button
geonetwork · Jul 4, 2024 · 9121e5f · 9121e5f
2 parents fe59f17 + 51881b1
commit 9121e5f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
@@ -140,6 +140,16 @@ describe('dataset pages', () => {
             expect(text).not.to.equal('')
           })
       })
+      it('should display the read more button and expand description', () => {
+        cy.visit('/dataset/01491630-78ce-49f3-b479-4b30dabc4c69')
+        cy.get('datahub-record-metadata')
+          .find('[id="about"]')
+          .find('gn-ui-max-lines')
+          .as('maxLines')
+        cy.get('@maxLines').find('.ease-out').should('exist')
+        cy.get('[data-cy=readMoreButton]').click()
+        cy.get('@maxLines').find('.ease-in').should('exist')
+      })
       it('should display the thumbnail image and magnify', () => {
         cy.get('datahub-record-metadata')
           .find('[id="about"]')

diff --git a/apps/datahub/src/app/record/header-record/header-record.component.html b/apps/datahub/src/app/record/header-record/header-record.component.html
@@ -32,7 +32,7 @@
     </div>
     <div
       *ngIf="metadata"
-      class="font-title text-[28px] max-w-screen-sm line-clamp-4 ml-4"
+      class="font-title text-[28px] max-w-screen-sm line-clamp-3 ml-4"
       [style.color]="foregroundColor"
     >
       {{ metadata.title }}

diff --git a/libs/ui/elements/src/lib/ui-elements.module.ts b/libs/ui/elements/src/lib/ui-elements.module.ts
@@ -10,7 +10,7 @@ import { DownloadItemComponent } from './download-item/download-item.component'
 import { DownloadsListComponent } from './downloads-list/downloads-list.component'
 import { ApiCardComponent } from './api-card/api-card.component'
 import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
-import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
+import { MaxLinesComponent, UiLayoutModule } from '@geonetwork-ui/ui/layout'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
 import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
@@ -49,6 +49,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     ThumbnailComponent,
     TimeSincePipe,
     BadgeComponent,
+    MaxLinesComponent,
   ],
   declarations: [
     MetadataInfoComponent,

diff --git a/libs/ui/layout/src/lib/max-lines/max-lines.component.html b/libs/ui/layout/src/lib/max-lines/max-lines.component.html
@@ -14,6 +14,7 @@
   *ngIf="showToggleButton"
   (click)="toggleDisplay()"
   class="text-secondary cursor-pointer pt-2.5"
+  data-cy="readMoreButton"
 >
   {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
 </div>