From dfb710455184c0eed47a38f678735543cd057bcc Mon Sep 17 00:00:00 2001
From: Julian Matschinske <ge93nar@mytum.de>
Date: Sat, 11 Apr 2020 20:02:59 +0200
Subject: [PATCH] Mobile fallback
---
src/app/app.component.html | 6 +++---
src/app/app.component.ts | 6 +++++-
.../pages/about-page/about-page.component.html | 2 ++
.../explorer-page/explorer-page.component.html | 18 +++++++++++++-----
.../explorer-page/explorer-page.component.scss | 5 +++++
5 files changed, 28 insertions(+), 9 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8219add6..1197c795 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 648b5fc5..28d44abe 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 a0998943..84be42ab 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 4d3a7efc..78343dc7 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 92874617..6042c453 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;
+}
--
GitLab