Changes to FooterComponent (#32)

* Add consortium page from Semantic Kompakkt
* Automatically set the current year as the end of the copyright notice
* Restructure the CSS so the Github Icon is always centered
* Add Documentation link to the left
* Remove Github PNGs and move to SVG

src/app/app-routing.module.ts

@@ -2,17 +2,18 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import {
+  AboutComponent,
+  AdminPageComponent,
   AnnotateComponent,
   CollaborateComponent,
+  ConsortiumComponent,
+  ContactComponent,
   DetailPageComponent,
   ExploreComponent,
   HomeComponent,
-  ProfilePageComponent,
-  AdminPageComponent,
-  AboutComponent,
-  ContactComponent,
-  PrivacyComponent,
   NotFoundComponent,
+  PrivacyComponent,
+  ProfilePageComponent,
 } from './pages';
 
 import { AuthenticatedGuard } from './guards';
@@ -38,6 +39,13 @@ const routes: Routes = [
       title: 'Privacy Policy',
     },
   },
+  {
+    path: 'consortium',
+    component: ConsortiumComponent,
+    data: {
+      title: 'Consortium',
+    },
+  },
   {
     path: 'contact',
     component: ContactComponent,

src/app/app.module.ts

@@ -1,6 +1,6 @@
 // External dependencies
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { NgModule, Provider } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouteReuseStrategy } from '@angular/router';
@@ -42,39 +42,40 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 
 // Components
 import {
-  AuthDialogComponent,
-  EntityDetailComponent,
+  ActionbarComponent,
   AddressComponent,
+  AnimatedImageComponent,
+  AuthDialogComponent,
+  CompilationDetailComponent,
+  DetailEntityComponent,
+  DetailInstitutionComponent,
+  DetailPersonComponent,
   EntityComponent,
-  InstitutionComponent,
-  PersonComponent,
+  EntityDetailComponent,
   FooterComponent,
+  GridElementComponent,
+  InstitutionComponent,
   NavbarComponent,
+  PersonComponent,
   SidenavListComponent,
   UploadComponent,
-  ActionbarComponent,
-  AnimatedImageComponent,
-  CompilationDetailComponent,
-  GridElementComponent,
-  DetailEntityComponent,
-  DetailPersonComponent,
-  DetailInstitutionComponent,
 } from './components';
 
 // Pages
 import {
+  AboutComponent,
+  AdminPageComponent,
   AnnotateComponent,
   CollaborateComponent,
+  ConsortiumComponent,
+  ContactComponent,
   DetailPageComponent,
   ExploreComponent,
   HomeComponent,
+  NotFoundComponent,
+  PrivacyComponent,
   ProfilePageComponent,
   ProfilePageHelpComponent,
-  AdminPageComponent,
-  AboutComponent,
-  ContactComponent,
-  PrivacyComponent,
-  NotFoundComponent,
 } from './pages';
 
 // Wizards
@@ -90,15 +91,15 @@ import { FilesizePipe, SafePipe } from './pipes';
 // Dialogs
 import {
   ConfirmationDialogComponent,
-  RegisterDialogComponent,
-  EntitySettingsDialogComponent,
-  GroupMemberDialogComponent,
+  EditEntityDialogComponent,
   EntityRightsDialogComponent,
-  ExploreEntityDialogComponent,
-  UploadApplicationDialogComponent,
+  EntitySettingsDialogComponent,
   ExploreCompilationDialogComponent,
-  EditEntityDialogComponent,
+  ExploreEntityDialogComponent,
+  GroupMemberDialogComponent,
   PasswordProtectedDialogComponent,
+  RegisterDialogComponent,
+  UploadApplicationDialogComponent,
 } from './dialogs';
 import { ResetPasswordDialogComponent } from './dialogs/reset-password-dialog/reset-password-dialog.component';
 import { ForgotUsernameDialogComponent } from './dialogs/forgot-username-dialog/forgot-username-dialog.component';
@@ -160,6 +161,7 @@ const INTERCEPTORS: Provider[] = [
         GridElementComponent,
         PasswordProtectedDialogComponent,
         NotFoundComponent,
+        ConsortiumComponent,
         DetailEntityComponent,
         DetailPersonComponent,
         DetailInstitutionComponent,

src/app/components/navigation/footer/footer.component.html

@@ -1,18 +1,23 @@
 <footer>
-  &copy; 2018-2022 <a href="https://kompakkt.de">Kompakkt</a>
-  <nav id="footerlinks">
-    <ul>
-      <li>
-        <a href="https://kompakkt.github.io/Info">
-          <img
-            class="footer-icon"
-            src="assets/icons/GitHub-Mark-32px.png"
-            alt="github.io Homepage"
-          />
-        </a>
-      </li>
-      <li><a routerLink="contact">Contact</a></li>
-      <li><a routerLink="privacy">Privacy Policy</a></li>
-    </ul>
-  </nav>
+  <div class="left">
+    <span>&copy; 2018-{{currentYear}} Kompakkt</span>
+    <a href="https://kompakkt.github.io/Documentation/" alt="User Documentation for Kompakkt on GitHub" target="_blank" rel="noopener noreferrer">
+      User Documentation
+    </a>
+  </div>
+
+  <a href="https://kompakkt.github.io/Info" target="_blank" rel="noopener noreferrer">
+    <img
+      class="footer-icon"
+      src="assets/icons/github-logo.svg"
+      alt="Kompakkt on Github - Landing Page"
+      height="18"
+    />
+  </a>
+
+  <div class="right">
+    <a routerLink="/contact">Contact</a>
+    <a routerLink="/privacy">Privacy Policy</a>
+    <a routerLink="/consortium">Consortium</a>
+  </div>
 </footer>

src/app/components/navigation/footer/footer.component.scss

@@ -1,33 +1,29 @@
 footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  justify-content: center;
+  align-items: center;
+
   background-color: #fff;
   font-size: 0.8rem;
   text-align: center;
 
   a {
     text-decoration: none;
     color: #00afe7;
-    padding: 5px;
   }
-}
-
-#footerlinks {
-  display: inline-block;
-  margin-left: 15px;
-}
-
-#footerlinks ul {
-  list-style-type: none;
-  margin: 5px 0;
-  padding: 0;
-}
 
-#footerlinks ul li {
-  display: inline-block;
-  margin-right: 10px;
-}
+  div.left, div.right {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+  }
 
-.footer-icon {
-  height: 18px;
-  margin-top: -2px;
-  vertical-align: middle;
+  div.left {
+    justify-content: flex-end;
+  }
+  div.right {
+    justify-content: flex-start;
+  }
 }

src/app/components/navigation/footer/footer.component.ts

@@ -5,4 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
 })
-export class FooterComponent {}
+export class FooterComponent {
+  public currentYear = new Date().getFullYear();
+}

src/app/pages/index.ts

@@ -10,3 +10,4 @@ export { AboutComponent } from './static-pages/about/about.component';
 export { ContactComponent } from './static-pages/contact/contact.component';
 export { PrivacyComponent } from './static-pages/privacy/privacy.component';
 export { NotFoundComponent } from './notfound/notfound.component';
+export { ConsortiumComponent } from './static-pages/consortium/consortium.component';

src/app/pages/static-pages/consortium/consortium.component.html

@@ -0,0 +1,45 @@
+<div class="content">
+  <h1>Kompakkt Developer Consortium</h1>
+
+  <p>
+  Kompakkt is an open source suite of annotation tools currently in 
+  development by a consortium of research institutions in Germany. 
+  The goal of the consortium is to optimise development through improved 
+  communication and coordination, so that new features are developed faster, 
+  avoiding redundancy and prioritising long-term sustainability and reusability. 
+  If you’re interested in joining the consortium, please contact: 
+  <a href="mailto:[email protected]">[email protected]</a>
+  </p>
+  <h2>
+  Members:
+  </h2>
+  <img
+    class="consortium-logo"
+    src="assets/images/csm_IDH_Logo_593d3538d3.png"
+    alt="Department of Digital Humanities Logo"
+  />
+  <p>
+    <a href="http://dh.uni-koeln.de">Department for Digital Humanities</a><br />
+    University of Cologne<br />
+    Albertus-Magnus-Platz<br />
+    50931 Köln<br /><br />
+    <a href="mailto:[email protected]">[email protected]</a>
+  </p>
+  <br>
+  <img
+    class="consortium-logo"
+    src="/assets/images/TIB_Logo_EN_RGB_100px.png"
+    alt="TIB Logo"
+  />
+  <p>
+    <a href="https://www.tib.eu/de/forschung-entwicklung/forschungsgruppen-und-labs/open-science">
+      Open Science Lab
+    </a>
+    <br />
+    TIB – Leibniz Information Centre for Science and Technology<br />
+    Lange Laube 28<br />
+    30159 Hannover<br /><br />
+  </p>
+
+  <p>For individual contacts, consult the <a routerLink="/contact">Contact</a> Page.</p>"
+</div>

src/app/pages/static-pages/consortium/consortium.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-consortium',
+  templateUrl: './consortium.component.html',
+  styleUrls: ['./consortium.component.scss'],
+})
+export class ConsortiumComponent implements OnInit {
+  constructor(private titleService: Title, private metaService: Meta) { }
+
+  ngOnInit() {
+    this.titleService.setTitle(`Kompakkt – Consortium`);
+    this.metaService.updateTag({
+      name: 'description',
+      content: 'Kompakkt Consortium Information.',
+    });
+  }
+}