Theming under construction

angular.json

@@ -59,6 +59,11 @@
                 "input": "src/themes/dspace/styles/theme.scss",
                 "inject": false,
                 "bundleName": "dspace-theme"
+              },
+              {
+                "input": "src/themes/cottagelabs/styles/theme.scss",
+                "inject": false,
+                "bundleName": "cottagelabs-theme"
               }
             ],
             "scripts": [],

config/config.yml

@@ -3,3 +3,6 @@ rest:
   host: demo.dspace.org
   port: 443
   nameSpace: /server
+
+themes:
+  - name: cottagelabs

src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.html

@@ -0,0 +1,3 @@
+<div [class.open]="!(isNavBarCollapsed | async)" id="header-navbar-wrapper">
+  <ds-themed-header></ds-themed-header>
+</div>

src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.scss

@@ -0,0 +1,7 @@
+:host {
+  // The header-navbar-wrapper should not have a z-index, otherwise it would cover the media viewer despite its higher z-index
+  position: relative;
+  div#header-navbar-wrapper {
+    border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid;
+  }
+}

src/themes/cottagelabs/app/header-nav-wrapper/header-navbar-wrapper.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderNavbarWrapperComponent as BaseComponent } from '../../../../app/header-nav-wrapper/header-navbar-wrapper.component';
+
+/**
+ * This component represents a wrapper for the horizontal navbar and the header
+ */
+@Component({
+  selector: 'ds-header-navbar-wrapper',
+  styleUrls: ['header-navbar-wrapper.component.scss'],
+  templateUrl: 'header-navbar-wrapper.component.html',
+})
+export class HeaderNavbarWrapperComponent extends BaseComponent {
+}

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

@@ -0,0 +1,26 @@
+<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">
+        <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
+      </a>
+    </div>
+
+    <div class="navbar-buttons d-flex flex-grow-1 ml-auto justify-content-end align-items-center gapx-1">
+      <!--<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>
+        </button>
+      </div>
+    </div>
+  </nav>
+  <ds-themed-navbar></ds-themed-navbar>
+
+</header>

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

@@ -0,0 +1,26 @@
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  nav.navbar {
+    display: none;
+  }
+  .header {
+    background-color: var(--ds-header-bg);
+  }
+}
+
+.navbar-brand img {
+  @media screen and (max-width: map-get($grid-breakpoints, md)) {
+    height: var(--ds-header-logo-height-xs);
+  }
+}
+.navbar-toggler .navbar-toggler-icon {
+  background-image: none !important;
+  line-height: 1.5;
+}
+
+.navbar-toggler {
+  color: var(--ds-header-icon-color);
+
+  &:hover, &:focus {
+    color: var(--ds-header-icon-color-hover);
+  }
+}

src/themes/cottagelabs/app/header/header.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { HeaderComponent as BaseComponent } from '../../../../app/header/header.component';
+
+/**
+ * Represents the header with the logo and simple navigation
+ */
+@Component({
+  selector: 'ds-header',
+  styleUrls: ['header.component.scss'],
+  templateUrl: 'header.component.html',
+})
+export class HeaderComponent extends BaseComponent {
+}

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

@@ -0,0 +1,40 @@
+<div class="background-image-container mt-ncs">
+  <div class="container">
+    <div class="jumbotron jumbotron-fluid">
+      <div class="d-flex flex-wrap">
+        <div style="padding-top: 3em;">
+          <h3 class="display-5">Comparing three institutional repository software platforms at OR2024</h3>
+          <h1 class="display-3" style="padding: 2rem;">DSpace 7.6.1</h1>
+          <!--<p class="lead">DSpace is the ! leading open source repository platform that enables
+            organisations to:</p>-->
+        </div>
+      </div>
+      <ol>
+        <li style="font-size: 2em;">
+          <h3>INGESTION</h3>
+        </li>
+        <li style="font-size: 2em;">
+          <h3>DISCOVERABILITY</h3>
+        </li>
+      </ol>
+      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
+      <!--<p>Join an international community of <a href="https://wiki.lyrasis.org/display/DSPACE/DSpace+Positioning" target="_blank">leading institutions using DSpace</a>.</p>
+      <p>The test user accounts below have their password set to the name of this
+        software in lowercase.</p>
+      <ul>
+        <li>Demo Site Administrator = [email protected]</li>
+        <li>Demo Community Administrator = [email protected]</li>
+        <li>Demo Collection Administrator = [email protected]</li>
+        <li>Demo Submitter = [email protected]</li>
+      </ul>-->
+    </div>
+  </div>
+
+  <picture class="background-image">
+    <!--<source type="image/webp" srcset="assets/dspace/images/banner.webp 2000w, assets/dspace/images/banner-half.webp 1200w, assets/dspace/images/banner-tall.webp 768w">
+    <source type="image/jpg" srcset="assets/dspace/images/banner.jpg 2000w, assets/dspace/images/banner-half.jpg 1200w, assets/dspace/images/banner-tall.jpg 768w">-->
+    <source type="image/jpg" srcset="assets/cottagelabs/images/Clarion_Hotel_Post_(Gamla_posthuset),_Göteborg.jpg">
+    <img alt="" [src]="'assets/cottagelabs/images/Clarion_Hotel_Post_2015_01.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
+  </picture>
+  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
+</div>

src/themes/cottagelabs/app/home-page/home-news/home-news.component.scss

@@ -0,0 +1,73 @@
+:host {
+  display: block;
+
+  div.background-image-container {
+    color: white;
+    position: relative;
+
+    .background-image > img {
+      background-color: var(--bs-info);
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: top;
+    }
+
+    .container {
+      position: relative;
+      text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+
+      &:before, &:after {
+        content: '';
+        display: block;
+        width: var(--ds-banner-background-gradient-width);
+        height: 100%;
+        top: 0;
+        position: absolute;
+      }
+
+      &:before {
+        background: linear-gradient(to left, var(--ds-banner-text-background), transparent);
+        left: calc(-1 * var(--ds-banner-background-gradient-width));
+
+      }
+
+      &:after {
+        background: linear-gradient(to right, var(--ds-banner-text-background), transparent);
+        right: calc(-1 * var(--ds-banner-background-gradient-width));
+      }
+
+      background-color: var(--ds-banner-text-background);
+    }
+
+
+    small.credits {
+      a {
+        color: inherit;
+      }
+
+      opacity: 0.3;
+      position: absolute;
+      right: var(--bs-spacer);
+      bottom: 0;
+    }
+  }
+
+  .jumbotron {
+    background-color: transparent;
+  }
+
+  a {
+    color: var(--ds-home-news-link-color);
+
+    @include hover {
+      color: var(--ds-home-news-link-hover-color);
+    }
+  }
+}
+
+

src/themes/cottagelabs/app/home-page/home-news/home-news.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { HomeNewsComponent as BaseComponent } from '../../../../../app/home-page/home-news/home-news.component';
+
+@Component({
+  selector: 'ds-home-news',
+  styleUrls: ['./home-news.component.scss'],
+  templateUrl: './home-news.component.html'
+})
+
+/**
+ * Component to render the news section on the home page
+ */
+export class HomeNewsComponent extends BaseComponent {}
+

src/themes/cottagelabs/app/navbar/navbar.component.html

@@ -0,0 +1,31 @@
+<nav [ngClass]="{'open': !(menuCollapsed | async)}" [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+  class="navbar navbar-expand-md navbar-light p-0 navbar-container" role="navigation" [attr.aria-label]="'nav.main.description' | translate">
+  <div class="navbar-inner-container w-100 h-100" [class.container]="!(isXsOrSm$ | async)">
+    <a class="navbar-brand my-2" routerLink="/home">
+      <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate" />
+    </a>
+
+    <a class="navbar-brand my-2" routerLink="https://or2024.openrepositories.org/">
+      <img src="assets/cottagelabs/images/open_repositories.webp"/>
+    </a>
+
+
+    <div id="collapsingNav" class="w-100 h-100">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 h-100">
+        <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
+            <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
+        </li>
+        <li *ngFor="let section of (sections | async)">
+          <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
+        </li>
+      </ul>
+    </div>
+    <div class="navbar-buttons d-flex align-items-center gapx-1">
+      <ds-themed-search-navbar class="navbar-collapsed"></ds-themed-search-navbar>
+      <ds-themed-lang-switch class="navbar-collapsed"></ds-themed-lang-switch>
+      <ds-context-help-toggle class="navbar-collapsed"></ds-context-help-toggle>
+      <ds-themed-auth-nav-menu class="navbar-collapsed"></ds-themed-auth-nav-menu>
+      <ds-impersonate-navbar class="navbar-collapsed"></ds-impersonate-navbar>
+    </div>
+  </div>
+</nav>

src/themes/cottagelabs/app/navbar/navbar.component.scss

@@ -0,0 +1,65 @@
+nav.navbar {
+  align-items: baseline;
+
+  .navbar-inner-container {
+    border-top: 1px var(--ds-header-navbar-border-top-color) solid;
+  }
+}
+
+.navbar-nav {
+  background-color: var(--ds-navbar-bg);
+}
+
+/** Mobile menu styling **/
+@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+  .navbar {
+    width: 100vw;
+    background-color: var(--bs-white);
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    z-index: var(--ds-nav-z-index);
+    &.open {
+      height: 100vh; //doesn't matter because wrapper is sticky
+      border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
+    }
+  }
+}
+
+@media screen and (min-width: map-get($grid-breakpoints, md)) {
+  .reset-padding-md {
+    margin-left: calc(var(--bs-spacer) / -2);
+    margin-right: calc(var(--bs-spacer) / -2);
+  }
+}
+
+/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
+.navbar-expand-md.navbar-container {
+  @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
+    > .navbar-inner-container {
+      padding: 0 var(--bs-spacer);
+      a.navbar-brand {
+        display: none;
+      }
+      .navbar-collapsed {
+        display: none;
+      }
+    }
+    padding: 0;
+  }
+  height: 80px;
+}
+
+a.navbar-brand img {
+  max-height: var(--ds-header-logo-height);
+}
+
+.navbar-nav {
+  ::ng-deep a.nav-link {
+    color: var(--ds-navbar-link-color);
+
+    &:hover, &:focus {
+      color: var(--ds-navbar-link-color-hover);
+    }
+  }
+}

src/themes/cottagelabs/app/navbar/navbar.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component';
+import { slideMobileNav } from '../../../../app/shared/animations/slide';
+
+/**
+ * Component representing the public navbar
+ */
+@Component({
+  selector: 'ds-navbar',
+  styleUrls: ['./navbar.component.scss'],
+  templateUrl: './navbar.component.html',
+  animations: [slideMobileNav]
+})
+export class NavbarComponent extends BaseComponent {
+}

src/themes/cottagelabs/assets/images/favicons/manifest.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "DSpace",
+    "short_name": "DSpace",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#091119",
+    "background_color": "#091119",
+    "display": "standalone"
+}