Merge branch 'video-and-must' into 'master'

Video and must (and legend)

See merge request covid-19/frontend!115

src/app/components/launch-analysis/launch-analysis.component.html

@@ -154,6 +154,7 @@
           The <a href="https://en.wikipedia.org/wiki/Steiner_tree_problem">Steiner tree</a>
           problem is a classical combinatorial optimization problem. It asks to find a sub-graph
           of minimum size connecting a given set of seed nodes.
+          This implementation behaves non-deterministically, so results can differ between multiple runs.
         </p>
         <div class="field">
           <label class="label" for="multisteiner-numtrees">Number of Steiner trees to return</label>

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

@@ -22,17 +22,13 @@
             approaches for the identification of new drug targets and new repurposable drugs.
             <br>
             <br>
-
             For detailed information please visit our blog: <a href="https://www.exbio.de/exbio-vs-covid-part-1/"> https://www.exbio.de/exbio-vs-covid-part-1/</a>
              <br>
              <br>
             We are constantly updating and integrating new data as it becomes available.
              <br>
             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/about-page/about-page.component.scss

@@ -7,3 +7,7 @@ div.scroll{
   height: calc(100vh - 70px);
 }
 
+iframe {
+  margin-bottom: 100px;
+  max-width: 100%;
+}

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

 <!--htmlhint inline-style-disabled:false -->
 <div class="content landing scroll">
   <div class="container has-text-centered">
-    <div class="column is-6 width100">
+    <div class="column">
+      <div class="logo-box is-hidden-mobile">
+        <img src="assets/covex_logo.png" style="height: 200px; width: 600px">
+      </div>
 
-      <img src="assets/covex_logo.png" style="height: 200px; width: 600px">
+      <div class="has-text-centered video-box">
+        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/H9pbYQFlt6U" frameborder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+        </iframe>
+      </div>
 
-      <h1 class="subtitle is-2">
-        <i>Explore the </i> <b> virus-host interactome</b>
-      </h1>
-      <h1 class="subtitle is-2">
-        <i>Find</i> <b> putative drug targets</b>
-      </h1>
-      <h1 class="subtitle is-2">
-        <i>Repurpose</i> <b> drugs </b>
-      </h1>
-      <h1 class="subtitle is-3">
-        <i>All in one </i><b>web-tool</b>
-      </h1>
+      <div class="button-box is-hidden-mobile">
+        <button class="button has-text-info is-large is-rounded">
+          <a routerLink="/explorer" routerLinkActive="is-active">
+            <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
+            <span>Start App</span>
+          </a>
+        </button>
+      </div>
 
-      <button class="button has-text-info is-large is-rounded ">
-        <a routerLink="/explorer" routerLinkActive="is-active">
-          <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
-          <span>Start now!</span>
-        </a>
-      </button>
+      <div class="button-box is-hidden-tablet">
+        <button class="button has-text-info is-large is-rounded">
+          <a routerLink="/explorer" routerLinkActive="is-active">
+            <span class="icon"><i class="fa fa-project-diagram has-text-info"></i></span>
+            <span>Open Desktop App</span>
+          </a>
+        </button>
+      </div>
 
+      <div class="text-box is-hidden-mobile">
+        <h1 class="subtitle is-3">
+          Explore the virus-host interactome
+        </h1>
+        <h1 class="subtitle is-3">
+          Find putative drug targets
+        </h1>
+        <h1 class="subtitle is-3">
+          Repurpose drugs
+        </h1>
+        <h1 class="subtitle is-3">
+          All in one web-tool
+        </h1>
+      </div>
     </div>
   </div>
 </div>
-

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

@@ -6,32 +6,33 @@ img {
   border-radius: 25px;
 }
 
-
-div.scroll{
+div.scroll {
   overflow: auto;
   height: calc(100vh - 60px);
 }
 
-h1.subtitle.is-2 {
-  color: #d0d0d0;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
+.logo-box {
+  maring-top: 20px;
+  maring-bottom: 20px;
 }
 
-h1.subtitle.is-3 {
-  color: #d0d0d0;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
+.text-box {
+  .subtitle {
+    color: #c8c8c8;
+  }
 }
 
-div.column.is-6.width100 {
+.video-box {
+  margin-top: 40px;
+  margin-bottom: 40px;
   width: 100%;
-}
 
-div.container.has-text-centered {
-  margin-top: 10%;
+  iframe {
+    max-width: 100%;
+  }
 }
 
-.centered {
-  position: fixed; /* or absolute */
-  top: 50%;
-  left: 50%;
+.button-box {
+  maring-top: 40px;
+  margin-bottom: 40px;
 }