[UXP-205] port glam styles

Author: FrancescoMolinaro

src/app/shared/explore/section-component/grid-section/grid-section.component.html

@@ -1,21 +1,31 @@
-<div class="grid-container">
-  <div style="grid-area: title" class="bg-light p-5 border border-dark position-relative">
-    <p class="mb-3 text-muted main-content-badge">{{maincontentBadge}}</p>
-    <h1 class="text-muted main-content-title">
-      {{maincontentTitle}}
-    </h1>
-    <h1 class="text-dark main-content-subtitle">
-      {{maincontentSubtitle}}
-    </h1>
-    <p class="mt-3 pl-0 text-muted col-8">
-      {{maincontentAbstract}}
-    </p>
-    <button type="button" (click)="goToMainContentLink()" class="btn btn-dark position-absolute m-5">{{'explore.grid-section.seeAll' | translate}}</button>
+<div class="grid-container py-5">
+  <div class="cris-section-element-background path-title">
+    <div class="inner-container d-flex flex-column justify-content-center gap-3 h-100">
+      <div class="main-content-badge mb-3">{{maincontentBadge | translate}}</div>
+      <h2>
+        <div class="main-content-title-1">
+          {{ maincontentTitle | translate }}
+        </div>
+        <div class="main-content-title-2">
+          {{ maincontentSubtitle | translate }}
+        </div>
+      </h2>
+      <p class="main-content-text text-muted">
+        {{ maincontentAbstract | translate }}
+      </p>
+      <div class="align-self-end">
+        <button type="button" class="btn btn-dark" (click)="goToMainContentLink()">
+          {{'explore.grid-section.seeAll' | translate}}
+        </button>
+      </div>
+    </div>
   </div>
-  <div class="bg-light text-center position-relative border border-dark d-flex flex-column
-              justify-content-between align-items-center"
+  <div class="cris-section-element-background text-center position-relative d-flex flex-column
+              justify-content-between align-items-center path-item"
        [dsBackgroundImage]="(itemToImageHrefMap$ | async).get(item.indexableObject?.uuid)"
        *ngFor="let item of searchResults | slice:0:8; index as i">
-    <h5 class="text-dark text-truncate position-absolute py-3 px-1">{{item.indexableObject?.firstMetadataValue('dc.title')}}</h5>
+    <a [routerLink]="[getItemPageRoute(item.indexableObject)]" class="mw-100 p-3">
+      <p class="text-center m-0 text-truncate">{{item.indexableObject?.firstMetadataValue('dc.title')}}</p>
+    </a>
   </div>
 </div>

src/app/shared/explore/section-component/grid-section/grid-section.component.scss

@@ -1,39 +1,102 @@
+.main-content {
+  &-title, &-subtitle {
+    font-weight: var(--ds-home-page-title-size);
+  }
+
+  &-text {
+    overflow: hidden; // TODO find better solution
+    font-size: 1.15rem;
+  }
+
+  &-badge {
+    font-size: 1.2rem;
+  }
+
+  &-title-1 {
+    color: var(--bs-headings-color)
+  }
+
+  &-title-2 {
+    color: var(--bs-body-color)
+  }
+
+  &-badge, &-title-1, &-title-2 {
+    font-weight: 900;
+  }
+
+}
+
 .grid-container {
   width: 100%;
   display: grid;
-  grid-gap: 1em;
-
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  grid-template-rows: repeat(6, 1fr);
-  grid-template-areas:
-    "title title"
-    "title title"
-    "item-0 item-1"
-    "item-2 item-3"
-    "item-4 item-5"
-    "item-6 item-7";
-
-  @include media-breakpoint-up(lg) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-areas:
-    "title title item-0 item-1"
-    "title title item-2 item-3"
-    "item-4 item-5 item-6 item-7";
+  grid-gap: 24px;
+
+  .path-title {
+    border: 1px solid var(--bs-link-hover-color) !important;
+    padding: 4rem;
+  }
+
+  @include media-breakpoint-up(xl) {
+    grid-template-columns: repeat(4, minmax(240px, 1fr));
+    .path-title, .path-item {
+      aspect-ratio: 1;
+    }
+    .path-title {
+      grid-row-end: span 2;
+      grid-column-end: span 2;
+    }
+  }
+
+  @include media-breakpoint-between(md, lg) {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    .path-title, .path-item {
+      aspect-ratio: 1;
+    }
+    .path-title {
+      grid-row-end: span 2;
+      grid-column-end: span 2;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    grid-template-columns: 1fr;
+    .path-title {
+      aspect-ratio: unset;
+    }
+    .path-item {
+      aspect-ratio: 1;
+    }
+  }
+
+  @media (min-width: 4000px) {
+    // when the screen is zoomed out to 25%
+    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+
+    .path-title {
+      aspect-ratio: 0;
+    }
+
+    .path-title {
+      grid-row-end: span 1;
+      grid-column-end: span 1;
+    }
   }
 }
 
-h5 {
+a {
+  position: absolute;
   bottom: 0.5em;
-  background-color: white;
   width: 90%;
+  background-color: rgba(255, 255, 255, .7);
+  padding: .6em;
+  border-radius: $border-radius;
+  z-index: 2;
 }
 
-.main-content-badge, .main-content-title, .main-content-subtitle {
+.main-content-badge, .main-content-title-1, .main-content-title-2 {
   font-weight: 900;
 }
 
-button {
-  bottom: 0;
-  right: 0;
+.main-content-title-1, .main-content-title-2 {
+  font-size: var(--ds-cris-path-section-title-font-size);
 }

src/app/shared/explore/section-component/grid-section/grid-section.component.spec.ts

@@ -43,7 +43,6 @@ describe('GridSectionComponent', () => {
   });
 
   const firstSearchResult = Object.assign(new SearchResult(), {
-    _embedded: {
       indexableObject: Object.assign(new DSpaceObject(), {
         id: 'd317835d-7b06-4219-91e2-1191900cb897',
         uuid: 'd317835d-7b06-4219-91e2-1191900cb897',
@@ -57,11 +56,9 @@ describe('GridSectionComponent', () => {
           return '';
         },
       })
-    }
   });
 
   const secondSearchResult = Object.assign(new SearchResult(), {
-    _embedded: {
       indexableObject: Object.assign(new DSpaceObject(), {
         id: '0c34d491-b5ed-4a78-8b29-83d0bad80e5a',
         uuid: '0c34d491-b5ed-4a78-8b29-83d0bad80e5a',
@@ -70,7 +67,6 @@ describe('GridSectionComponent', () => {
           return '';
         },
       })
-    }
   });
 
   beforeEach(waitForAsync(() => {

src/app/shared/explore/section-component/grid-section/grid-section.component.ts

@@ -22,6 +22,7 @@ import { Item } from 'src/app/core/shared/item.model';
 import { Bitstream } from 'src/app/core/shared/bitstream.model';
 import { BitstreamFormat } from 'src/app/core/shared/bitstream-format.model';
 import { hasValue } from 'src/app/shared/empty.util';
+import { getItemPageRoute } from 'src/app/item-page/item-page-routing-paths';
 
 /**
  * Component representing the Grid component section.
@@ -80,7 +81,7 @@ export class GridSectionComponent implements OnInit {
     this.paginatedSearchOptions = new PaginatedSearchOptions({
       configuration: this.gridSection.discoveryConfigurationName,
       pagination: pagination,
-      sort: new SortOptions('dc.title', SortDirection.ASC)
+      //sort: new SortOptions('dc.title', SortDirection.ASC)
     });
 
     this.getMainBoxResults();
@@ -159,6 +160,15 @@ export class GridSectionComponent implements OnInit {
   }
 
 
+  /**
+   * to get the route of the item
+   * @param item
+   * @returns route to the item as a string
+   */
+  getItemPageRoute(item: DSpaceObject) {
+    return getItemPageRoute(item as Item);
+  }
+
   goToMainContentLink() {
     this.router.navigateByUrl(this.maincontentLink);
   }