Commit b97be045 authored by Jérémy Destin's avatar Jérémy Destin
Browse files

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

parent 313ad090
......@@ -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,
......
<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>
@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;
}
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();
});
});
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() {
}
}
<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"/>
......
......@@ -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>
......@@ -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;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment