finally bringing the pedspace-custom theme up-to-speed with PCORnet-c…

…ustom

src/themes/pedspace-custom/app/collection-page/collection-page.component.html

@@ -0,0 +1,78 @@
+<div class="container">
+    <div class="collection-page"
+         *ngVar="(collectionRD$ | async) as collectionRD">
+              <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
+                      <div *ngIf="collectionRD?.payload as collection">
+              <ds-view-tracker [object]="collection"></ds-view-tracker>
+              <div class="d-flex flex-row border-bottom mb-4 pb-4">
+                <header class="comcol-header mr-auto">
+                  <!-- Collection Name -->
+                  <ds-comcol-page-header
+                          [name]="dsoNameService.getName(collection)">
+                  </ds-comcol-page-header>
+                  <!-- Collection logo -->
+                  <ds-comcol-page-logo *ngIf="logoRD$"
+                                   [logo]="(logoRD$ | async)?.payload"
+                                   [alternateText]="'Collection Logo'">
+                  </ds-comcol-page-logo>
+
+                  <!-- Handle -->
+                  <ds-themed-comcol-page-handle
+                          [content]="collection.handle"
+                          [title]="'collection.page.handle'" >
+                  </ds-themed-comcol-page-handle>
+                  <!-- Introductory text -->
+                  <ds-comcol-page-content
+                          [content]="collection.introductoryText"
+                          [hasInnerHtml]="true">
+                  </ds-comcol-page-content>
+                  <!-- News -->
+                  <ds-comcol-page-content
+                          [content]="collection.sidebarText"
+                          [hasInnerHtml]="true"
+                          [title]="'collection.page.news'">
+                  </ds-comcol-page-content>
+                </header>
+                <ds-dso-edit-menu></ds-dso-edit-menu>
+              </div>
+              <section class="comcol-page-browse-section">
+              <!-- Browse-By Links -->
+              <ds-themed-comcol-page-browse-by
+                      [id]="collection.id"
+                      [contentType]="collection.type">
+              </ds-themed-comcol-page-browse-by>
+
+            <ng-container *ngVar="(itemRD$ | async) as itemRD">
+                <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>
+                    <h3 class="sr-only">{{'collection.page.browse.recent.head' | translate}}</h3>
+                    <ds-viewable-collection
+                            [config]="paginationConfig"
+                            [sortConfig]="sortConfig"
+                            [objects]="itemRD"
+                            [hideGear]="true">
+                    </ds-viewable-collection>
+                </div>
+                <ds-error *ngIf="itemRD?.hasFailed"
+                          message="{{'error.recent-submissions' | translate}}"></ds-error>
+                <ds-themed-loading *ngIf="!itemRD || itemRD.isLoading"
+                            message="{{'loading.recent-submissions' | translate}}"></ds-themed-loading>
+                <div *ngIf="!itemRD?.isLoading && itemRD?.payload?.page.length === 0" class="alert alert-info w-100" role="alert">
+                        {{'collection.page.browse.recent.empty' | translate}}
+                </div>
+            </ng-container>
+            </section>
+            <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
+          <!-- Copyright -->
+          <ds-comcol-page-content
+                      [content]="collection.copyrightText"
+                      [hasInnerHtml]="true">
+          </ds-comcol-page-content>
+        </footer>
+      </div>
+    </div>
+        <ds-error *ngIf="collectionRD?.hasFailed"
+            message="{{'error.collection' | translate}}"></ds-error>
+        <ds-themed-loading *ngIf="collectionRD?.isLoading"
+            message="{{'loading.collection' | translate}}"></ds-themed-loading>
+  </div>
+</div>

src/themes/pedspace-custom/app/collection-page/collection-page.component.scss

@@ -0,0 +1,13 @@
+ds-comcol-page-header {
+  background-color: rgb(122, 191, 53);
+  padding: 20px;
+  margin-bottom: 20px;
+  display: block;
+  width: auto; /* Sets the width to 100% of the viewport width */
+  color: white;
+
+  h1 {
+    color: white; // Ensure text is white for better contrast
+    margin: 0; // Remove default margin
+  }
+}

src/themes/pedspace-custom/app/collection-page/collection-page.component.ts

@@ -5,10 +5,10 @@ import { fadeIn, fadeInOut } from '../../../../app/shared/animations/fade';
 
 @Component({
   selector: 'ds-collection-page',
-  // templateUrl: './collection-page.component.html',
-  templateUrl: '../../../../app/collection-page/collection-page.component.html',
-  // styleUrls: ['./collection-page.component.scss']
-  styleUrls: ['../../../../app/collection-page/collection-page.component.scss'],
+  templateUrl: './collection-page.component.html',
+  // templateUrl: '../../../../app/collection-page/collection-page.component.html',
+  styleUrls: ['./collection-page.component.scss'],
+  // styleUrls: ['../../../../app/collection-page/collection-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
     fadeIn,

src/themes/pedspace-custom/app/community-page/community-page.component.html

@@ -0,0 +1,45 @@
+<div class="container" *ngVar="(communityRD$ | async) as communityRD">
+    <div class="community-page" *ngIf="communityRD?.hasSucceeded" @fadeInOut>
+      <div *ngIf="communityRD?.payload; let communityPayload">
+        <ds-view-tracker [object]="communityPayload"></ds-view-tracker>
+        <div class="d-flex flex-row border-bottom mb-4 pb-4">
+          <header class="comcol-header mr-auto">
+            <!-- Community name -->
+            <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
+            <!-- Community logo -->
+            <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
+            </ds-comcol-page-logo>
+            <!-- Handle -->
+            <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
+            </ds-themed-comcol-page-handle>
+            <!-- Introductory text -->
+            <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
+            </ds-comcol-page-content>
+            <!-- News -->
+            <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
+              [title]="'community.page.news'">
+            </ds-comcol-page-content>
+          </header>
+          <ds-dso-edit-menu></ds-dso-edit-menu>
+        </div>
+        <section class="comcol-page-browse-section">
+
+          <!-- Browse-By Links -->
+          <ds-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
+          </ds-themed-comcol-page-browse-by>
+
+          <ds-themed-community-page-sub-community-list [community]="communityPayload"></ds-themed-community-page-sub-community-list>
+          <ds-themed-community-page-sub-collection-list [community]="communityPayload"></ds-themed-community-page-sub-collection-list>
+        </section>
+        <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">
+          <!-- Copyright -->
+          <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
+          </ds-comcol-page-content>
+        </footer>
+      </div>
+    </div>
+
+    <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
+    <ds-themed-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-themed-loading>
+  </div>
+

src/themes/pedspace-custom/app/community-page/community-page.component.scss

@@ -0,0 +1,13 @@
+ds-comcol-page-header {
+  background-color: rgb(8, 176, 255); // Blue color for the banner
+  padding: 20px; // Adjust padding as needed
+  margin-bottom: 20px; // Space below the banner
+  display: block; // Ensure the element behaves like a block element
+  width: auto; // Adjust the width to counteract the negative margin
+  color: white; // Ensure text is white for better contrast
+
+  h1 {
+    color: white; // Ensure text is white for better contrast
+    margin: 0; // Remove default margin
+  }
+}

src/themes/pedspace-custom/app/community-page/community-page.component.ts

@@ -5,10 +5,10 @@ import { fadeInOut } from '../../../../app/shared/animations/fade';
 
 @Component({
   selector: 'ds-community-page',
-  // templateUrl: './community-page.component.html',
-  templateUrl: '../../../../app/community-page/community-page.component.html',
-  // styleUrls: ['./community-page.component.scss']
-  styleUrls: ['../../../../app/community-page/community-page.component.scss'],
+  templateUrl: './community-page.component.html',
+  // templateUrl: '../../../../app/community-page/community-page.component.html',
+  styleUrls: ['./community-page.component.scss'],
+  // styleUrls: ['../../../../app/community-page/community-page.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [fadeInOut]
 })

src/themes/pedspace-custom/app/footer/footer.component.html

@@ -0,0 +1,95 @@
+<footer class="text-lg-start">
+  <div *ngIf="showTopFooter" class="top-footer">
+    <!-- Grid container -->
+    <div class="container p-4">
+      <!--Grid row-->
+      <div class="row">
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Lorem ipsum</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Ut facilisis</a>
+            </li>
+            <li>
+              <a routerLink="./" class="">Aenean sit</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <ul class="list-unstyled mb-0">
+            <li>
+              <a routerLink="./" class="">Suspendisse potenti</a>
+            </li>
+          </ul>
+        </div>
+        <!--Grid column-->
+
+        <!--Grid column-->
+        <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
+          <h5 class="text-uppercase">Footer Content</h5>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
+            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
+            voluptatem veniam, est atque cumque eum delectus sint!
+          </p>
+        </div>
+        <!--Grid column-->
+      </div>
+      <!--Grid row-->
+    </div>
+  </div>
+  <!-- Grid container -->
+
+  <!-- Centered Blurb -->
+  <div class="p-4 text-center disclaimer">
+    <p>
+      PEDSnet® is a national network designed to enhance the nation's capacity for efficient patient-centered health research, particularly comparative clinical effectiveness research (CER). It provides a vast and diverse collection of health data, research expertise, and patient insights. PEDSnet® is committed to advancing healthcare knowledge and improving patient outcomes.
+    </p>
+    </p>
+  </div>  
+  <!-- Centered Blurb -->
+
+  <!-- Copyright -->
+  <div class="bottom-footer p-1 d-flex justify-content-center align-items-center text-white">
+    <div class="content-container">
+      <p class="m-0">
+        <a class="text-white"
+           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+        {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
+        <a class="text-white"
+           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+      </p>
+      <ul class="footer-info list-unstyled small d-flex justify-content-center mb-0">
+        <li>
+            <a class="text-white" href="javascript:void(0);"
+             (click)="showCookieSettings()">{{ 'footer.link.cookies' | translate}}</a>
+        </li>
+        <li *ngIf="showPrivacyPolicy">
+          <a class="text-white"
+             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+        </li>
+        <li *ngIf="showEndUserAgreement">
+          <a class="text-white"
+             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+        </li>
+        <li *ngIf="showSendFeedback$ | async">
+          <a class="text-white"
+             routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- Copyright -->
+</footer>

src/themes/pedspace-custom/app/footer/footer.component.scss

@@ -0,0 +1,59 @@
+:host {
+  footer {
+    background-color: var(--ds-footer-bg);
+    text-align: center;
+    z-index: var(--ds-footer-z-index);
+    border-top: var(--ds-footer-border);
+    padding: var(--ds-footer-padding);
+    color: white; // Ensure all text is white
+
+    p {
+      margin: 0;
+      color: white; // Ensure paragraph text is white
+    }
+
+    div > img {
+      height: var(--ds-footer-logo-height);
+    }
+
+    .top-footer {
+      background-color: var(--ds-top-footer-bg);
+      padding: var(--ds-footer-padding);
+      margin: calc(var(--ds-footer-padding) * -1);
+      color: white; // Ensure top footer text is white
+
+      p, a {
+        color: white; // Ensure all text and links in top footer are white
+      }
+    }
+
+    .bottom-footer {
+      ul {
+        li {
+          display: inline-flex;
+
+          a {
+            padding: 0 calc(var(--bs-spacer) / 2);
+            color: white; // Ensure links are white
+          }
+
+          &:not(:last-child) {
+            &:after {
+              content: '';
+              border-right: 1px var(--bs-secondary) solid;
+            }
+          }
+        }
+      }
+      color: white; // Ensure bottom footer text is white
+    }
+
+    .disclaimer {
+      font-size: 0.8rem; // Smaller font size
+      line-height: 1.2;  // Tighter line spacing
+      max-width: 800px;  // Limit width for better centering
+      margin: 0 auto;    // Center the disclaimer text
+      color: white;      // Ensure disclaimer text is white
+    }
+  }
+}