LIBDRUM-867. Tweaks to "drum" theme to update for 7.6.2

Updates to "drum" theme components to keep them aligned as closely
as possible with changes for 7.6.2, while maintaining UMD
customizations.

https://umd-dit.atlassian.net/browse/LIBDRUM-867

src/themes/drum/app/community-list-page/community-list/community-list.component.ts

@@ -34,6 +34,7 @@ import { CommunityDataService } from '../../../../../app/core/data/community-dat
   selector: 'ds-cg-community-list',
   templateUrl: './community-list.component.html',
   providers: [CommunityListService, CommunityDataService, CommunityGroupDataService]
+  //styleUrls: ['./community-list.component.scss'],
 })
 // End UMD Customization
 

src/themes/drum/app/header/header.component.html

@@ -3,30 +3,43 @@
 <ds-umd-environment-banner></ds-umd-environment-banner>
 <ds-json-ld-website scriptId='json-ld-website'></ds-json-ld-website>
 <!-- End UMD Customization -->
-<header class="header">
-  <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="container navbar navbar-expand-md px-0">
-    <div class="d-flex flex-grow-1">
-      <a class="navbar-brand m-2" routerLink="/home">
+<header id="main-site-header">
+  <!-- UMD Customization -->
+  <!-- Setting to "flex-nowrap" as otherwise "header-right" div gets lost behind image at smaller browser widths -->
+  <div class="container h-100 d-flex flex-row flex-nowrap align-items-center justify-content-between gapx-3 gapy-2" id="main-site-header-container">
+  <!-- End UMD Customization -->
+    <!-- Logo and navbar wrapper -->
+    <div id="header-left"
+         [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
+         [attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
+         class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
+      <a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
         <!-- UMD Customization -->
-        <img src="assets/drum/images/drum-logo.svg" [attr.alt]="'menu.header.image.logo' | translate" />
+        <img id="header-logo" src="assets/drum/images/drum-logo.svg" [attr.alt]="'menu.header.image.logo' | translate" />
         <!-- End UMD Customization -->
+
       </a>
+      <nav *ngIf="!(isMobile$ | async)" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">
+        <ds-themed-navbar></ds-themed-navbar>
+      </nav>
     </div>
-    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">
+    <!-- Search bar and other menus -->
+    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ml-auto">
       <ds-themed-search-navbar></ds-themed-search-navbar>
-      <ds-themed-lang-switch></ds-themed-lang-switch>
-      <ds-context-help-toggle></ds-context-help-toggle>
-      <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
-      <ds-impersonate-navbar></ds-impersonate-navbar>
-      <div class="pl-2">
-        <button class="navbar-toggler" type="button" (click)="toggleNavbar()"
-                aria-controls="collapsingNav"
-                aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
-          <span class="navbar-toggler-icon fas fa-bars fa-fw" aria-hidden="true"></span>
+      <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
+        <ds-themed-lang-switch></ds-themed-lang-switch>
+        <ds-context-help-toggle></ds-context-help-toggle>
+        <ds-impersonate-navbar></ds-impersonate-navbar>
+        <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
+      </div>
+
+      <div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
+        <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
+                [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="!(isNavBarCollapsed$ | async)">
+          <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
         </button>
       </div>
-    </div>
-  </nav>
-  <ds-themed-navbar></ds-themed-navbar>
 
+    </div>
+  </div>
 </header>

src/themes/drum/app/home-page/home-news/home-news.component.html

@@ -1,4 +1,4 @@
-<div class="background-image-container">
+<div class="background-image-container mt-ncs">
   <div class="container">
     <div class="jumbotron jumbotron-fluid">
       <div class="d-flex flex-wrap">