Initial commit

src/app/app.component.html

@@ -3,7 +3,7 @@
     <app-site-header></app-site-header>
   </header>
 
-  <main class="grow break-words p-5 text-lg">
+  <main class="grow break-words p-5 text-xl">
     <router-outlet />
     <app-show-session></app-show-session>
   </main>

src/app/portal/features/home-page/home-page.component.html

@@ -1,17 +1,59 @@
 <p>
   The GHGA Data Portal is a secure national infrastructure for human omics data
   available under controlled access. Access to the archived data can be requested from
-  the data controllers who are responsible for evaluating the data access request.<br />The
-  datasets within are annotated following the GHGA Metadata Model, which is compatible
-  with the metadata model of the EGA.<br />
-  For further documentation, please visit the GHGA User Documentation.
+  the data controllers who are responsible for evaluating the data access request.
 </p>
+<p>
+  The datasets within are annotated following the
+  <a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://docs.ghga.de/metadata/overview/"
+    >GHGA Metadata Model<mat-icon>open_in_new</mat-icon></a
+  >, which is compatible with the metadata model of the EGA.
+</p>
+<p>
+  For further documentation, please visit the
+  <a target="_blank" rel="noreferrer noopener" href="https://docs.ghga.de/"
+    >GHGA User Documentation<mat-icon>open_in_new</mat-icon></a
+  >.
+</p>
+<div class="mb-8 w-full text-center">
+  <a mat-raised-button routerLink="/browse">Browse data</a>
+</div>
 <p>
   GHGA is a national infrastructure to enable the FAIR and secure sharing of genetic and
   other human omics data. It is embedded in European activities such as the federated
-  European Genome-Phenome Archive (FEGA) and the European Genomic Data Infrastructure
-  (GDI).<br />GHGA is funded by the Deutsche Forschungsgemeinschaft (DFG, German
-  Research Foundation, Grant Number 441914366) as part of the National Research Data
-  Infrastructure initiative (NFDI) and by the contributing institutions.<br />More at
-  www.ghga.de.
+  European Genome-Phenome Archive (<a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://ega-archive.org/about/projects-and-funders/federated-ega/"
+    >FEGA<mat-icon>open_in_new</mat-icon></a
+  >) and the European Genomic Data Infrastructure (<a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://gdi.onemilliongenomes.eu/"
+    >GDI<mat-icon>open_in_new</mat-icon></a
+  >).
+</p>
+<p>
+  GHGA is funded by the Deutsche Forschungsgemeinschaft (DFG, German Research
+  Foundation, Grant Number
+  <a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://gepris.dfg.de/gepris/projekt/441914366?context=projekt&task=showDetail&id=441914366&"
+    >441914366<mat-icon>open_in_new</mat-icon></a
+  >) as part of the National Research Data Infrastructure initiative (<a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://www.nfdi.de/?lang=en"
+    >NFDI<mat-icon>open_in_new</mat-icon></a
+  >) and by the contributing institutions.
+</p>
+<p>
+  More at
+  <a target="_blank" rel="noreferrer noopener" href="https://www.ghga.de/"
+    >www.ghga.de<mat-icon>open_in_new</mat-icon></a
+  >.
 </p>

src/app/portal/features/home-page/home-page.component.scss

@@ -0,0 +1,22 @@
+@use '@angular/material' as mat;
+
+p {
+  margin-bottom: 0.5em;
+  text-align: justify;
+}
+
+p a {
+  color: var(--mat-sys-tertiary);
+  text-decoration: underline;
+}
+
+p a mat-icon {
+  scale: 0.6;
+  margin: 0 -5px 0 -3px;
+  transform: translateY(10px);
+}
+
+div a {
+  background-color: var(--mat-sys-tertiary);
+  color: var(--mat-sys-on-tertiary);
+}

src/app/portal/features/home-page/home-page.component.ts

@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
 
 /**
  * This is the home page component
  */
 @Component({
   selector: 'app-home-page',
-  imports: [],
+  imports: [MatIcon, MatButtonModule, RouterLink],
   templateUrl: './home-page.component.html',
+  styleUrl: './home-page.component.scss',
 })
 export class HomePageComponent {}

src/app/portal/features/site-footer/site-footer.component.html

@@ -1,54 +1,100 @@
 <nav class="mt-2 w-full" color="primary">
   <div class="flex flex-wrap justify-around divide-x pb-5 pt-2 no-underline">
-    <a routerLink="/" class="content-center px-24"
+    <a routerLink="/" class="grow content-center"
       ><div class="flex w-full justify-center">
         <img src="assets/images/GHGA_logo.png" alt="GHGA Logo" class="max-h-12" />
       </div>
-      <div class="mt-3 border-t pt-2 text-4xl uppercase">Data Portal</div></a
-    ><a href="https://ghga.de" class="grow content-start py-4 text-center"
+      <div class="mt-3 grow-0 border-t pt-2 text-center text-4xl uppercase">
+        Data Portal
+      </div></a
+    ><a
+      target="_blank"
+      rel="noreferrer noopener"
+      href="https://ghga.de"
+      class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">globe</mat-icon></span
-      >GHGA Website</a
+      >GHGA Website<mat-icon>open_in_new</mat-icon></a
     ><a routerLink="/browse" class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">database</mat-icon></span
       >Browse Data</a
-    ><a href="https://docs.ghga.de/faq/" class="grow content-start py-4 text-center"
+    ><a
+      target="_blank"
+      rel="noreferrer noopener"
+      href="https://docs.ghga.de/faq/"
+      class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">help</mat-icon></span
-      >FAQ</a
-    ><a href="https://docs.ghga.de/" class="grow content-start py-4 text-center"
+      >FAQ<mat-icon>open_in_new</mat-icon></a
+    ><a
+      target="_blank"
+      rel="noreferrer noopener"
+      href="https://docs.ghga.de/"
+      class="grow content-start py-4 text-center"
       ><span><mat-icon inline="true">docs</mat-icon></span
-      >GHGA User<br />Documentation</a
+      >GHGA User<br />Documentation<mat-icon>open_in_new</mat-icon></a
     >
   </div>
   <div class="swirl"></div>
 </nav>
 <div
   class="icons-div mb-2 flex w-full flex-wrap justify-center text-center text-4xl no-underline"
 >
-  <a href="https://genomic.social/@ghga"
+  <a target="_blank" rel="noreferrer noopener" href="https://genomic.social/@ghga"
     ><mat-icon inline="true" fontSet="fab" fontIcon="fa-mastodon"></mat-icon
   ></a>
-  <a href="https://www.linkedin.com/company/the-german-human-genome-phenome-archive/"
+  <a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://www.linkedin.com/company/the-german-human-genome-phenome-archive/"
     ><mat-icon inline="true" fontSet="fab" fontIcon="fa-linkedin"></mat-icon
   ></a>
-  <a href="https://bsky.app/profile/ghga.bsky.social">
+  <a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://bsky.app/profile/ghga.bsky.social"
+  >
     <mat-icon inline="true" fontSet="fab" fontIcon="fa-bluesky"></mat-icon
   ></a>
-  <a href="https://github.com/ghga-de"
+  <a target="_blank" rel="noreferrer noopener" href="https://github.com/ghga-de"
     ><mat-icon inline="true" fontSet="fab" fontIcon="fa-github"></mat-icon
   ></a>
-  <a href="https://www.youtube.com/channel/UC7Yqi4gBl86drcUxwwEe6EA"
+  <a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://www.youtube.com/channel/UC7Yqi4gBl86drcUxwwEe6EA"
     ><mat-icon inline="true" fontSet="fab" fontIcon="fa-youtube"></mat-icon
   ></a>
-  <a href="https://www.ghga.de/about-us/contact"
+  <a
+    target="_blank"
+    rel="noreferrer noopener"
+    href="https://www.ghga.de/about-us/contact"
     ><mat-icon inline="true">email</mat-icon></a
   >
 </div>
 <div class="w-full pb-4 text-sm">
   <p class="text-center">©{{ year }} GHGA. All Rights Reserved.</p>
   <p class="text-center">
-    <a href="https://www.ghga.de/imprint" class="underline">Imprint</a> |
-    <a href="https://www.ghga.de/data-protection" class="underline">Data Protection</a>
+    <a
+      target="_blank"
+      rel="noreferrer noopener"
+      href="https://www.ghga.de/imprint"
+      class="underline"
+      >Imprint</a
+    >
     |
-    <a href="https://zenodo.org/records/11146387" class="underline">Terms of Use</a>
+    <a
+      target="_blank"
+      rel="noreferrer noopener"
+      href="https://www.ghga.de/data-protection"
+      class="underline"
+      >Data Protection</a
+    >
+    |
+    <a
+      target="_blank"
+      rel="noreferrer noopener"
+      href="https://zenodo.org/records/11146387"
+      class="underline"
+      >Terms of Use</a
+    >
   </p>
 </div>

src/app/portal/features/site-footer/site-footer.component.scss

@@ -35,3 +35,9 @@ nav a:active {
 nav a:focus {
   background-color: color-mix(in srgb, var(--mat-sys-primary) 100%, #fff 12%);
 }
+
+nav a > mat-icon {
+  scale: 0.6;
+  transform: translateY(10px);
+  margin: 0 -10px 0 -2px;
+}

src/app/portal/features/site-header/site-header.component.html

@@ -27,7 +27,13 @@
         mat-flat-button
         routerLink="/browse"
         class="mx-1"
-        >Browse</a
+        >Browse Data</a
+      >
+      <a mat-flat-button href="https://docs.ghga.de/faq/" class="mx-1 flex-row-reverse"
+        >FAQ<mat-icon class="float-right">open_in_new</mat-icon></a
+      >
+      <a mat-flat-button href="https://docs.ghga.de/" class="mx-1 flex-row-reverse"
+        >Docs<mat-icon class="float-right">open_in_new</mat-icon></a
       ></mat-nav-list
     >
     <div class="basis-1/4 text-right">

src/app/portal/features/site-header/site-header.component.scss

@@ -19,10 +19,10 @@ a#activePage {
 }
 
 button {
-  --mat-sys-on-surface-variant: #fff;
   @include mat.icon-button-overrides(
     (
       icon-color: var(--mat-sys-on-primary),
+      state-layer-color: var(--mat-sys-on-primary),
     )
   );
 }
@@ -35,3 +35,12 @@ mat-toolbar-row div a:active {
 mat-toolbar-row div a:focus {
   background-color: color-mix(in srgb, var(--mat-sys-primary) 100%, #fff 12%);
 }
+
+mat-nav-list a {
+  font-size: medium;
+}
+
+mat-nav-list a mat-icon {
+  scale: 0.8;
+  margin: 0 -5px 0 0;
+}