Fix: 5503, applying fixes for mobile/tablet screens

postcss.config.js

@@ -1,6 +1,10 @@
 module.exports = {
   plugins: [
     require('postcss-import')(),
-    require('postcss-preset-env')()
+    require('postcss-preset-env')({
+      features: {
+        'has-pseudo-class': false
+      }
+    })
   ]
 };

src/app/footer/footer.component.scss

@@ -22,6 +22,8 @@
     }
 
     .bottom-footer {
+      flex-wrap: wrap;
+
       .notify-enabled {
         position: relative;
         margin-top: 4px;
@@ -36,7 +38,7 @@
           margin-bottom: 8.5px;
         }
 
-        @media screen and (min-width: map-get($grid-breakpoints, md))  {
+        @media screen and (min-width: map-get($grid-breakpoints, xl))  {
           position: absolute;
           bottom: 4px;
           right: 0;
@@ -70,6 +72,24 @@
           }
         }
       }
+
+      @include media-breakpoint-down(md) {
+        ul {
+          flex-wrap: wrap;
+          column-gap: calc(var(--bs-spacer) / 2);
+          row-gap: calc(var(--bs-spacer) / 2);
+
+          li {
+            &::after {
+              display: none;
+            }
+
+            a, .btn-link {
+              white-space: nowrap;
+            }
+          }
+        }
+      }
     }
 
     .btn {

src/app/header/header.component.scss

@@ -1,6 +1,7 @@
 :host {
   header {
     background-color: var(--ds-header-bg);
+    position: relative;
   }
 
   .navbar-brand img {

src/app/search-navbar/search-navbar.component.html

@@ -1,7 +1,7 @@
 <div (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
-    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" class="d-flex">
-      <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" [class.search-expanded]="searchExpanded || collapsing" class="d-flex">
+      <input #searchInput [@toggleAnimation]="isExpanded" (@toggleAnimation.done)="onAnimationDone()" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
              autocomplete="off"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-end p1"

src/app/search-navbar/search-navbar.component.scss

@@ -22,10 +22,27 @@ input[type="text"] {
 }
 
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
-  .query:focus {
-    max-width: 250px !important;
-    width: 40vw !important;
+  .d-inline-block.position-relative {
+    position: static !important;
   }
 
+  form.search-expanded {
+    input[type="text"] {
+      position: absolute !important;
+      top: calc(65% + var(--ds-header-navbar-border-bottom-height, 0px));
+      right: calc(var(--bs-gutter-x, 1.5rem) / 2);
+      left: auto;
+      width: 220px !important;
+      max-width: 220px;
+      margin-top: 0;
+      padding: 0.375rem 0.75rem;
+      border: 1px solid var(--ds-header-icon-color);
+      border-radius: 4px;
+      background-color: #fff !important;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      opacity: 1;
+      z-index: 1001;
+    }
+  }
 }
 

src/app/search-navbar/search-navbar.component.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectorRef,
   Component,
   ElementRef,
   ViewChild,
@@ -42,8 +43,15 @@ export class SearchNavbarComponent {
 
   // Search input field
   @ViewChild('searchInput') searchField: ElementRef;
+  // Whether the collapse animation is still running, keeps the dropdown visible until it finishes
+  collapsing = false;
 
-  constructor(private formBuilder: UntypedFormBuilder, private router: Router, private searchService: SearchService) {
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private router: Router,
+    private searchService: SearchService,
+    private cdr: ChangeDetectorRef,
+  ) {
     this.searchForm = this.formBuilder.group(({
       query: '',
     }));
@@ -62,9 +70,28 @@ export class SearchNavbarComponent {
    * Collapses & blurs search bar by angular animation, see expandSearchInput
    */
   collapse() {
+    if (!this.searchExpanded) {
+      return;
+    }
     this.searchField.nativeElement.blur();
     this.searchExpanded = false;
     this.isExpanded = 'collapsed';
+    this.collapsing = true;
+  }
+
+  /**
+   * Called when the expand/collapse animation finishes
+   */
+  onAnimationDone(): void {
+    // The animation's "done" event can fire synchronously while Angular is still
+    // running change detection (e.g. in tests). Deferring the state change avoids
+    // ExpressionChangedAfterItHasBeenCheckedError. The component's OnPush ancestors
+    // are not notified when the flag is reset outside an event handler, so the view
+    // has to be marked for check explicitly.
+    setTimeout(() => {
+      this.collapsing = false;
+      this.cdr.markForCheck();
+    });
   }
 
   /**

src/app/shared/animations/slide.ts

@@ -58,6 +58,10 @@ export const expandSearchInput = trigger('toggleAnimation', [
     width: '250px',
     opacity: '1',
   })),
+  transition('void => collapsed', style({
+    width: '0',
+    opacity: '0',
+  })),
   transition('* => collapsed', group([
     animate('300ms ease-in-out', style({
       width: '30px',

src/app/shared/sidebar/page-with-sidebar.component.scss

@@ -20,6 +20,7 @@
 
   @include media-breakpoint-down(md) {
     position: relative;
+    left: 0 !important;
 
     &.row-offcanvas {
       position: relative;
@@ -39,7 +40,18 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      background-color: var(--bs-body-bg)
+      background-color: var(--bs-body-bg);
+
+      &.active {
+        position: relative;
+        left: 0;
+        height: auto;
+        overflow: visible;
+      }
+    }
+
+    .sidebar-content.active ~ .col-12:not(.sidebar-content) {
+      display: none;
     }
   }
 }

src/themes/dspace/app/header/header.component.scss

@@ -10,6 +10,7 @@
 
     &-container {
       min-height: var(--ds-header-height);
+      position: relative;
     }
   }
 

src/themes/dspace/styles/_global-styles.scss

@@ -3,6 +3,12 @@
 // imports the base global style
 @import '../../../styles/_global-styles.scss';
 
+@media screen and (max-width: map-get($grid-breakpoints, md)) {
+  #main-site-header-container:has(form.search-expanded) {
+    margin-bottom: 25px;
+  }
+}
+
 .facet-filter, .setting-option, .advanced-search {
   background-color: var(--bs-light);
   border-radius: var(--bs-border-radius);