Improving no-content component

	- Changed the no-content component to look like the
	Figma design
	- Fixed a bug where loading the gene overview page with
	an invalid gene id would lead to an error

src/app/core/core-routing.module.ts

@@ -15,6 +15,7 @@ export const routes: Routes = [
     { path: 'terms', component: TermsComponent },
     { path: 'teams-contributing', component: ContribTeamsPageComponent },
     { path: 'synapse-account', component: SynapseAccountComponent },
+    { path: 'no-content', component: NoContentComponent },
     { path: '**', component: NoContentComponent }
 ];
 

src/app/core/core.module.ts

@@ -49,6 +49,7 @@ import '../../styles/headings.scss';
         NavbarComponent,
         MenubarComponent,
         FooterComponent,
+        NoContentComponent,
         AboutComponent,
         HelpComponent,
         TermsComponent,

src/app/core/no-content/no-content.component.html

@@ -0,0 +1,6 @@
+<div class="row no-content">
+    <div class="col-md-12 col-sm-12 col-12">
+        <h1 class="no-content-heading">We're sorry!</h1>
+        <h1 class="no-content-message">Page not found.</h1>
+    </div>
+</div>

src/app/core/no-content/no-content.component.scss

@@ -0,0 +1,27 @@
+@import "../../../assets/css/helpers/variables";
+@import "../../../assets/css/helpers/mixins";
+
+.no-content {
+    // Navbar minus footer minus body bottom margin for footer
+    height: calc(100vh - #{$navbar-height} - #{$footer-height});
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-image: url('/assets/img/no-content.svg');
+    background-size: cover !important;
+
+    h1 {
+        text-align: center;
+        color: #FFFFFF;
+    }
+
+    .no-content-heading {
+        font-size: $font-size-xxx-large;
+    }
+
+    .no-content-message {
+        font-size: $font-size-x-large;
+    }
+}

src/app/core/no-content/no-content.component.spec.ts

@@ -0,0 +1,26 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoContentComponent } from './no-content.component';
+
+describe('Component: NoContent', () => {
+    let component: NoContentComponent;
+    let fixture: ComponentFixture<NoContentComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                NoContentComponent
+            ],
+            schemas: [NO_ERRORS_SCHEMA]
+        })
+        .compileComponents();
+
+        fixture = TestBed.createComponent(NoContentComponent);
+        component = fixture.componentInstance;
+    }));
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/core/no-content/no-content.component.ts

@@ -1,12 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
-  selector: 'no-content',
-  template: `
-    <div>
-      <h1>404: page missing</h1>
-    </div>
-  `
+    selector: 'no-content',
+    templateUrl: './no-content.component.html',
+    styleUrls: [ './no-content.component.scss' ],
+    encapsulation: ViewEncapsulation.None
 })
 export class NoContentComponent {
 

src/app/genes/gene-overview/gene-overview.component.ts

@@ -105,23 +105,25 @@ export class GeneOverviewComponent implements OnInit, OnDestroy, AfterContentChe
 
         this.routerSub =  this.navService.getRouter().events.subscribe((re: RouterEvent) => {
             if (re instanceof NavigationEnd) {
-                if (!re.url.includes('/genes/(genes-router:gene-details/' +
-                    this.geneService.getCurrentGene().ensembl_gene_id)) {
-                    if (this.routerSub) {
-                        this.routerSub.unsubscribe();
-                    }
-                    if (this.subscription) {
-                        this.subscription.unsubscribe();
-                    }
-                } else {
-                    if (this.disableMenu) {
-                        // Improve this part, 0.8 seconds to re-activate the menu items
-                        setTimeout(() => {
-                            this.items.forEach((i) => {
-                                i.disabled = false;
-                            });
-                            this.disableMenu = false;
-                        }, 800);
+                if (this.geneService.getCurrentGene()) {
+                    if (!re.url.includes('/genes/(genes-router:gene-details/' +
+                        this.geneService.getCurrentGene().ensembl_gene_id)) {
+                        if (this.routerSub) {
+                            this.routerSub.unsubscribe();
+                        }
+                        if (this.subscription) {
+                            this.subscription.unsubscribe();
+                        }
+                    } else {
+                        if (this.disableMenu) {
+                            // Improve this part, 0.8 seconds to re-activate the menu items
+                            setTimeout(() => {
+                                this.items.forEach((i) => {
+                                    i.disabled = false;
+                                });
+                                this.disableMenu = false;
+                            }, 800);
+                        }
                     }
                 }
             }

src/assets/css/helpers/_variables.scss

@@ -20,8 +20,9 @@ $font-size-xxxx-regular: 24px;
 $font-size-large: 28px;
 $font-size-x-large: 30px;
 $font-size-xx-large: 48px;
-$font-size-xxx-large: 64px;
-$font-size-xxxx-large: 96px;
+$font-size-xxx-large: 60px;
+$font-size-xxxx-large: 64px;
+$font-size-huge: 96px;
 
 $font-size-small-odd: 13px;
 $font-size-regular-odd: 17px;
@@ -32,8 +33,9 @@ $font-size-xxxx-regular-odd: 25px;
 $font-size-large-odd: 29px;
 $font-size-x-large-odd: 31px;
 $font-size-xx-large-odd: 49px;
-$font-size-xxx-large-odd: 65px;
-$font-size-xxxx-large-odd: 97px;
+$font-size-xxx-large-odd: 61px;
+$font-size-xxxx-large-odd: 65px;
+$font-size-huge-odd: 97px;
 
 $text-color-axis: #6D7078;
 $text-color-chart-label: #6D7078;

src/index.html

@@ -67,7 +67,7 @@
                     align-items: center;
                     height: 100vh;
 
-                    color: #3F5EAB;;
+                    color: #3F5EAB;
                     text-transform: uppercase;
                     font-family: Lato;
                     font-size: 2.5em;