diff --git a/src/app/app.component.html b/src/app/app.component.html index 8219add609491cfa94a47baa9f7b1680f7348fea..1197c795f5d8ff1ea8c4f7ce382b28f82354049b 100644 --- a/src/app/app.component.html +++ b/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> diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 648b5fc5125356fe1df1a3a6043e963669656697..28d44abeb9f69e64f6cbcbaa0d44da361bd7336e 100644 --- a/src/app/app.component.ts +++ b/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; + } } diff --git a/src/app/pages/about-page/about-page.component.html b/src/app/pages/about-page/about-page.component.html index a09989438c21c8f1d28ce38198848f8f56d698e9..84be42ab4b08673c04a696e0967b33db99ff1dd3 100644 --- a/src/app/pages/about-page/about-page.component.html +++ b/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> diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html index 4d3a7efc1b19bd58ec16ec057b572e7456686e96..78343dc734d24e0f2c037a0a221e871a53eecae8 100644 --- a/src/app/pages/explorer-page/explorer-page.component.html +++ b/src/app/pages/explorer-page/explorer-page.component.html @@ -1,9 +1,10 @@ -<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> diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss index 92874617b0bc7b3da85f3db2268524f2579ae69f..6042c453bfa10a433434621218fe022c7072fafb 100644 --- a/src/app/pages/explorer-page/explorer-page.component.scss +++ b/src/app/pages/explorer-page/explorer-page.component.scss @@ -36,3 +36,8 @@ margin-right: 5px; } } + +.mobile-fallback { + padding: 15px; + font-weight: bold; +}