Merge branch 'about_page' into 'master'

about text

See merge request covid-19/frontend!76

src/app/app.component.html

@@ -9,7 +9,7 @@
       </a>
     </div>
 
-    <div class="navbar-menu is-active">
+    <div class="navbar-menu">
       <div class="navbar-start">
         <a routerLink="/" routerLinkActive="is-active" class="navbar-item is-hoverable">
           <span class="icon"><i class="fa fa-home"></i></span>

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

-<div class="content">
-Write information about the project and website here
+<div class="scroll">
+  <div class="content">
+    <section class="hero is-small is-primary">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title">About COVex</h1>
+        </div>
+      </div>
+    </section>
+
+    <div class="hero container">
+      <div class="column is-8 is-offset-2">
+        <div class="container has-text-centered">
+          <img src="assets/covex_logo.png">
+          <h2 class="subtitle is-3"> A Coronavirus Explorer </h2>
+        </div>
+        <div class="content">
+          <p>
+            <br>
+            COVex (Coronavirus Explorer) is a unique online network and systems medicine platform for data analysis that
+            integrates virus-human interactions for SARS-CoV-2 and SARS-CoV-1. It implements different network-based
+            approaches for the identification of new drug targets and new repurposable drugs.
+          </p>
+          <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>
+            <li>Select proteins of interest as seed proteins.</li>
+            <li>Perform network analysis (multi-Steiner, TrustRank, KeyPathwayMiner, closeness centrality).</li>
+            <li>Platform usage: basic and advanced options</li>
+            <li>Inspect the resulting subnetworks.</li>
+            <li>Find drugs associated with the subnetwork (TrustRank, closeness centrality).</li>
+            <li>Download your results.</li>
+          </ol>
+          <p>COVex also provides a quick analysis option to perform steps 3 to 5 (starting from the seed proteins) to
+            return
+            a list of drugs ranked by default using TrustRank.</p>
+          <h2>Help/Contact information</h2>
+          <ul>
+            <li>Systems and Network Medicine: Sepideh Sadegh (sadegh@zw.tum.de)</li>
+            <li>Web platform: Julian Matschinske (julian.matschinske@wzw.tum.de)</li>
+            <li>Project coordination: Prof. Dr. Jan Baumbach (jan.baumbach@wzw.tum.de)</li>
+            <li>Lab Website: http://www.exbio.de</li>
+          </ul>
+
+          <h2>License</h2>
+          <p>COVex is freely available for non-commercial use. The Software is provided "AS IS" without warranty
+            whatsoever.
+            COVex is publicly available and its source code is released under the GPLv3 license </p>
+          <div class="has-text-centered">
+            <h2>Impressum</h2>
+            <p>Prof. Dr. Jan Baumbach
+              Chair of Experimental Bioinformatics
+              <br>
+              <i class="fa fa-phone"></i> Phone: +49-8161-71-2136<br>
+              <i class="fa fa-phone"></i> Fax: +49-8161-71-2186<br>
+              <i class="fa fa-envelope"> </i> Email: exbio@wzw.tum.de<br>
+              <i class="fa fa-map-marker"></i> Address: ​​​Prof. Dr. Jan Baumbach
+              <br>
+              Chair of Experimental Bioinformatics
+              <br>
+              TUM School of Life Sciences Weihenstephan
+              <br>
+              Technical University of Munich<br>
+              Maximus-von-Imhof-Forum 3<br>
+              85354 Freising<br>
+              Germany </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
+
+

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

+i {
+  width: 30px;
+}
+
+div.scroll{
+
+  height: calc(100vh - 102px);
+  overflow: auto;
+}

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

-<section class="hero is-primary is-fullheight">
-  <div class="hero-body">
-    <div class="container has-text-centered">
-      <div class="column is-6 is-offset-3">
+<div class="content landing scroll">
+  <div class="container has-text-centered">
+    <div class="column is-6 width100">
 
-          <img src="assets/covex_logo.png">
+      <img src="assets/covex_logo.png">
 
-          <h1 class="subtitle is-2">
-            <i>Explore</i> the <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-2">
-            <i>All in one web-tool</i>
-          </h1>
+      <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>
 
-          <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>
+      <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>
     </div>
   </div>
+</div>
 
-</section>
-<script async type="text/javascript" src="../js/bulma.js"></script>

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

@@ -4,3 +4,32 @@ img {
   background-color: rgba(255, 255, 255, 0.7);
   border-radius: 25px;
 }
+
+div.scroll {
+  height: calc(100vh - 82.36px);
+  overflow: auto;
+}
+
+h1.subtitle.is-2 {
+  color: #d0d0d0;
+  font-family: "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+h1.subtitle.is-3 {
+  color: #d0d0d0;
+  font-family: "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+div.column.is-6.width100 {
+  width: 100%;
+}
+
+div.container.has-text-centered {
+  margin-top: 10%;
+}
+
+.centered {
+  position: fixed; /* or absolute */
+  top: 50%;
+  left: 50%;
+}

src/styles.scss

@@ -23,13 +23,12 @@ body {
   overflow: hidden;
 }
 
-.hero.is-primary {
+.landing {
   background-color: $primary;
-  background-image: url("assets/virus_background.png");
+  background-image: url("assets/virus_background.jpg");
   background-size: cover;
   background-repeat: no-repeat;
-  background-position: 80%;
-  padding: 50px;
+  height: calc(100vh - 82.36px);
 }
 
 div.navbar-menu {