fix: ListView arrow and navbar banner sticky

Author: tammy-a11y

src/app/_samples/mediaco/components/banner/banner.component.html

@@ -1,12 +1,12 @@
-<div style="margin-bottom: '2rem'">
-  <div class="background-image-style">
-    <div class="background-style content">
-      <div>
-        <h1 class="title" [innerHTML]="title"></h1>
-        <p class="message">{{ message }}</p>
-      </div>
+<div class="background-image-style">
+  <div class="background-style content">
+    <div>
+      <h1 class="title" [innerHTML]="title"></h1>
+      <p class="message">{{ message }}</p>
     </div>
   </div>
+</div>
+<div class="scrollable-content">
   <div
     [ngClass]="{
       'psdk-grid-filter-1 psdk-main-content-section': this.layout$ === 'two-column',

src/app/_samples/mediaco/components/banner/banner.component.scss

@@ -34,16 +34,16 @@
 }
 
 .background-image-style {
-  height: calc(20rem);
-  background-size: cover;
-  background-position: center center;
+  height: calc(18rem);
+  position: sticky;
+  top: var(--mat-toolbar-standard-height, 64px);
+  background: var(--mat-toolbar-container-background-color, var(--mat-sys-surface));
+  z-index: 10;
 }
 
 .background-style {
-  background-color: transparent;
   color: var(--app-inverse-form-color);
   width: 100%;
-  height: 100%;
   text-align: center;
 }
 

src/app/_samples/mediaco/components/list-view/list-view.component.html

@@ -7,6 +7,11 @@ <h3>{{ title }}</h3>
         <div class="active-line"></div>
       </div>
     </div>
+    <div *ngIf="referenceDataPage === 'D_AccountHistoryList'" class="arrow-icon">
+      <button mat-icon-button (click)="openShowAll()" class="tilt-icon">
+        <mat-icon>arrow_forward</mat-icon>
+      </button>
+    </div>
   </div>
   <div *ngIf="template === 'Table'">
     <div class="info-container">
@@ -41,6 +46,6 @@ <h3>{{ title }}</h3>
     </div>
   </div>
   <div class="carousel-footer">
-    <a mat-button color="primary" *ngIf="referenceDataPage !== 'D_TrendingItemsList'" (click)="openShowAll()">Show All</a>
+    <a mat-button color="primary" *ngIf="referenceDataPage !== 'D_TrendingItemsList' && template === 'Gallery'" (click)="openShowAll()">Show All</a>
   </div>
 </ng-template>

src/app/_samples/mediaco/components/list-view/list-view.component.scss

@@ -36,6 +36,7 @@ $primary-purple: #9c27b0;
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  margin-bottom: 28px;
 }
 
 .icon-wrapper {
@@ -170,7 +171,6 @@ $primary-purple: #9c27b0;
 
 .section-header {
   display: flex;
-  margin-bottom: 32px;
   padding: 0 4px;
 
   .title-group {
@@ -214,3 +214,8 @@ $primary-purple: #9c27b0;
   cursor: pointer;
   text-decoration: underline;
 }
+
+.tilt-icon:hover {
+  transform: rotate(15deg);
+  transition: transform 0.1s ease-in-out;
+}

src/app/_samples/mediaco/components/list-view/list-view.component.ts

@@ -4,6 +4,8 @@ import { Utils, ListViewComponent as OOTBListViewComponent } from '@pega/angular
 import { CarouselComponent } from '../carousel/carousel.component';
 import { GalleryGridComponent } from '../gallery-grid/gallery-grid.component';
 import { MatDialog } from '@angular/material/dialog';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
 
 interface ListViewProps {
   inheritedProps: any;
@@ -29,7 +31,7 @@ interface ListViewProps {
 
 @Component({
   selector: 'mediaco-list-view',
-  imports: [CommonModule, CarouselComponent, OOTBListViewComponent],
+  imports: [CommonModule, CarouselComponent, OOTBListViewComponent, MatIconButton, MatIcon],
   templateUrl: './list-view.component.html',
   styleUrl: './list-view.component.scss',
   providers: [Utils]

src/app/_samples/mediaco/components/wss-nav-bar/wss-nav-bar.component.html

@@ -34,7 +34,8 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <!-- Top Toolbar -->
-    <mat-toolbar style="position: relative; background: transparent">
+
+    <mat-toolbar style="position: sticky; top: 0; z-index: 10">
       <mat-toolbar-row mat-icon-button style="justify-content: space-between">
         <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
           <div>