refactor: Add footer on result page and fix nav bar to the top. Issue #18

frontend/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { CardTableComponent } from './card-table/card-table.component';
 import { MomentModule } from 'ngx-moment';
 import { XrefsComponent } from './xrefs/xrefs.component';
 import { CoordinatesModule } from 'angular-coordinates';
+import { FooterComponent } from './footer/footer.component';
 
 
 @NgModule({
@@ -46,7 +47,8 @@ import { CoordinatesModule } from 'angular-coordinates';
         CardSectionComponent,
         LoadingSpinnerComponent,
         CardTableComponent,
-        XrefsComponent
+        XrefsComponent,
+        FooterComponent
     ],
     imports: [
         BrowserModule,

frontend/src/app/footer/footer.component.html

+<div class="row footer mt-4" xmlns="http://www.w3.org/1999/html">
+  <div class="col-3 outer-div">
+    <div class=" circleDiv centered">
+      <a href="https://elixir-europe.org/platforms/interoperability" target="_blank">
+        <img src="assets/elixir-logo.png" alt="Logo Elixir" height="45px" class="ml-2"/>
+      </a>
+    </div>
+  </div>
+  <div class="col-9">
+    <div class="mt-1">
+      <a href="https://elixir-europe.org/platforms/interoperability" target="_blank">
+        <span class="font-weight-bold text-secondary" style="font-size: small">FAIR Data finder for Agro Research is part of the ELIXIR infrastructure</span><br>
+        <span class="text-muted" style="font-size: x-small">Faidare is part of the ELIXIR infrastructure</span>
+      </a>
+    </div>
+  </div>
+</div>
+
+

frontend/src/app/footer/footer.component.scss

+@import "theme";
+
+.footer {
+  background-color: $theme-footer-bg-color;
+  height: 55px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1100;
+}
+
+
+a {
+  color: black;
+  text-decoration: none;
+}
+
+span {
+  font-size: large;
+}
+
+
+.circleDiv {
+  border-radius: 50%;
+  width: 70px;
+  height: 50px;
+  background-image: radial-gradient(#767c82, #8e959b, #c0c7cd);
+}
+
+.centered {
+  margin: 0 auto;
+}
+
+.outer-div {
+  padding: 3px;
+}
+

frontend/src/app/footer/footer.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+    let component: FooterComponent;
+    let fixture: ComponentFixture<FooterComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [FooterComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(FooterComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

frontend/src/app/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'gpds-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}

frontend/src/app/navbar/navbar.component.html

-<nav class="navbar navbar-expand-md navbar-dark py-0 mb-4">
+<nav class="navbar fixed-top navbar-expand-md navbar-dark py-0 mb-4">
   <div class="container px-0">
     <a class="navbar-brand d-flex align-items-center mr-0 px-2" routerLink="/">
       <img src="{{ navbar.logo }}" alt="{{ navbar.name }} logo" title="{{ navbar.title }}" height="60px"/>

frontend/src/app/result-page/result-page.component.html

@@ -82,7 +82,7 @@
 
       <!-- Pagination -->
       <!--Bottom page navigator-->
-      <div class="d-flex justify-content-center mt-5" *ngIf="pagination.totalPages > 1">
+      <div class="d-flex justify-content-center mt-5 mb-5" *ngIf="pagination.totalPages > 1">
         <!-- we add 1 to the page because ngb-pagination is 1 based -->
         <ngb-pagination [page]="pagination.currentPage + 1"
                         (pageChange)="changePage($event)"
@@ -105,3 +105,4 @@
     </div>
   </div>
 </div>
+<gpds-footer></gpds-footer>

frontend/src/assets/faidare/theme.scss

@@ -77,3 +77,8 @@ $theme-navbar-bg-color: $_theme-light-gray;
 $theme-navbar-hover-color: $white;
 $theme-navbar-hover-bg-color: $_theme-gray;
 
+// custom footer
+$theme-footer-height: 3rem;
+$theme-footer-color: $black;
+$theme-footer-bg-color: $_theme-light-gray;
+