Merge branch 'mobile-fallback' into 'master'

Mobile fallback

See merge request covid-19/frontend!116

src/app/app.component.html

@@ -2,16 +2,16 @@
   <nav class="navbar" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <img routerLink="/" src="assets/covex_logo.png" class="menu-icon is-hoverable navbar-item logo" alt="logo"/>
-      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
+      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" (click)="toggleMobileMenu()">
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
         <span aria-hidden="true"></span>
       </a>
     </div>
 
-    <div class="navbar-menu">
+    <div class="navbar-menu" [class.is-active]="mobileWindowExpanded">
       <div class="navbar-start">
-        <a routerLink="/" routerLinkActive="is-active" class="navbar-item is-hoverable">
+        <a routerLink="/" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="navbar-item is-hoverable">
           <span class="icon"><i class="fa fa-home"></i></span>
           <span>Home</span>
         </a>

src/app/app.component.ts

@@ -6,5 +6,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'covid19';
+  mobileWindowExpanded = false;
+
+  public toggleMobileMenu() {
+    this.mobileWindowExpanded = !this.mobileWindowExpanded;
+  }
 }

src/app/pages/about-page/about-page.component.html

@@ -31,6 +31,8 @@
             If you are interested to make your virus-human interactome data available via our platform, please contact us.
 
           </p>
+          <h2 class="subtitle">Tutorial Video</h2>
+          <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/PLxrYfuuu2o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
           <h2 class="subtitle">General workflow of the platform</h2>
           <ol>
             <li>Select the viral interaction dataset (SARS-CoV1-Pfefferle, SARS-CoV1-VirHostNet, SARS-CoV2-Gordon).</li>

src/app/pages/explorer-page/explorer-page.component.html

-<app-launch-analysis [(show)]="showAnalysisDialog"
-                     [target]="analysisDialogTarget"
-                     [dataset]="selectedDataset.backendId">
-</app-launch-analysis>
+<div class="is-hidden-mobile">
+  <app-launch-analysis [(show)]="showAnalysisDialog"
+                       [target]="analysisDialogTarget"
+                       [dataset]="selectedDataset.backendId">
+  </app-launch-analysis>
 
-<div class="covex explorer">
+  <div class="covex explorer">
 
   <div class="covex left-window">
     <div>
@@ -454,3 +455,10 @@
     </div>
   </div>
 </div>
+</div>
+
+<div class="is-hidden-tablet mobile-fallback">
+  Sorry, CoVex is not available for mobile phones.
+  To find information about CoVex, please check the <a routerLink="/about">About</a> page or visit this page
+  with another device with a larger screen.
+</div>

src/app/pages/explorer-page/explorer-page.component.scss

@@ -36,3 +36,8 @@
     margin-right: 5px;
   }
 }
+
+.mobile-fallback {
+  padding: 15px;
+  font-weight: bold;
+}