Fix css styling

src/app/app.component.html

@@ -11,15 +11,15 @@
 
     <div class="navbar-menu is-active">
       <div class="navbar-start">
-        <a routerLink="/" routerLinkActive="is-active" class="navbar-item">
+        <a routerLink="/" routerLinkActive="is-active" class="navbar-item is-hoverable">
           <span class="icon"><i class="fa fa-home"></i></span>
           <span>Home</span>
         </a>
-        <a routerLink="/explorer" routerLinkActive="is-active" class="navbar-item">
+        <a routerLink="/explorer" routerLinkActive="is-active" class="navbar-item is-hoverable">
           <span class="icon"><i class="fa fa-project-diagram"></i></span>
           <span>Explorer</span>
         </a>
-        <a routerLink="/about" routerLinkActive="is-active" class="navbar-item">
+        <a routerLink="/about" routerLinkActive="is-active" class="navbar-item is-hoverable">
           <span class="icon"><i class="fa fa-question"></i></span>
           <span>About</span>
         </a>

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

-<div class="content fullscreen">
+<div class="content explorer">
+
   <div class="modal" [class.is-active]="showModal">
     <div class="modal-background"></div>
     <div class="modal-card">
@@ -24,7 +25,7 @@
 
         <h2>Summary</h2>
         <figure class="image" (click)="openSummary('A4435')">
-          <img src="../assets/boxplot.png" alt="Boxplots">
+          <img src="assets/boxplot.png" alt="Boxplots">
         </figure>
       </section>
 
@@ -35,9 +36,9 @@
   </div>
 
 
-  <div class="content left-bar">
+  <div class="content bar">
 
-    <div class="card left-bar-item">
+    <div class="card bar">
       <header class="card-header">
         <p class="card-header-title">
           <span class="icon">
@@ -52,7 +53,7 @@
       </div>
     </div>
 
-    <div class="card left-bar-item">
+    <div class="card bar">
       <header class="card-header">
         <p class="card-header-title">
           <span class="icon">
@@ -71,12 +72,12 @@
       </div>
     </div>
 
-    <div class="card left-bar-item">
+    <div class="card bar">
       <header class="card-header">
         <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-filter" aria-hidden="true"></i>
-      </span> Filtering
+      </span> Filter Network
         </p>
       </header>
       <div class="card-content">
@@ -93,44 +94,44 @@
         </button>
       </footer>
     </div>
+
   </div>
 
-  <div class="card right-big" >
-    <header class="card-header">
-      <p class="card-header-title">
-        SARS-CoV-2 Protein-Protein Interaction Network
-      </p>
-      <a href="#" class="card-header-icon" aria-label="more options">
-      <span class="icon">
-        <i class="fas fa-sliders-h" aria-hidden="true"></i>
-      </span>
-      </a>
-    </header>
-    <div class="card-content">
-      <div class="card-image">
-        <figure class="image" (click)="openSummary('A4435')">
-          <img src="assets/graph_example.png" alt="PPI Network" class="network">
-        </figure>
-      </div>
-      <footer class="card-footer">
-        <button class="card-footer-item button is-primary">
+
+  <div class="content network">
+
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title">
+          SARS-CoV-2 Protein-Protein Interaction Network
+        </p>
+      </header>
+      <div class="card-content">
+        <div class="card-image">
+          <figure class="image" (click)="openSummary('A4435')">
+            <img src="assets/graph_example.png" alt="PPI Network" class="network">
+          </figure>
+        </div>
+        <footer class="card-footer">
+          <button class="card-footer-item button is-primary">
                 <span class="icon">
         <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
       </span>
-        </button>
-        <a class="card-footer-item">
+          </button>
+          <a class="card-footer-item">
         <span class="icon">
         <i class="fas fa-search-plus" aria-hidden="true"></i>
       </span>
-        </a>
-        <a href="#" class="card-footer-item">
+          </a>
+          <a href="#" class="card-footer-item">
          <span class="icon">
         <i class="fas fa-search-minus" aria-hidden="true"></i>
       </span>
-        </a>
-      </footer>
+          </a>
+        </footer>
+      </div>
     </div>
-  </div>
-</div>
 
+  </div>
 
+</div>

src/styles.css

-/* Add application styles & imports to this file! */
\ No newline at end of file

src/styles.scss

@@ -26,67 +26,55 @@ $family-sans-serif: "Varela Round", sans-serif;
   background-color: #06D6A0;
 }
 
-div.content {
-  margin: 30px;
-}
-
-div.content.fullscreen {
-  margin: 20px;
-  height: calc(100vh - 120px);
-  width: 100%;
-}
-
 div.navbar-menu {
   margin-left: 5px;
 }
 
-div.content.left-bar {
-  float: left;
-  width: 400px;
+span.icon {
+  margin-right: 5px;
 }
 
-div.card.left-bar-item {
-  margin-bottom: 30px;
+img {
+  margin: 10px;
 }
 
-div.card.right-big {
-  float: right;
-  width: calc(100% - 460px);
-  height: calc(100vh - 105px);
+img.inline {
+  height: 30px;
+  margin-left: 0px;
 }
 
 button.i {
   margin-left: 5px;
 }
 
-body {
-   height: 100%;
+input.checkbox {
+  margin-left: 15px;
 }
 
-img {
-  margin: 10px;
+div.content.bar {
+  float: left;
+  width: 15%;
+  height: calc(100vh - 30%);
 }
 
-span.icon {
-  margin-right: 5px;
-}
 
-img.inline {
-  height: 30px;
-  margin-left: 0px;
+div.card.bar {
+  margin-bottom: 21px;
 }
 
-img.network {
-  height: calc(100vh - 270px);
-}
 
-main {
-  height: calc(100vh - 500px);
+div.content.network {
+  float: right;
+  width: 84%;
+  height: calc(100vh - 90px);
 }
 
-input.checkbox {
-  margin-left: 15px;
+img.network {
+  height: calc(100vh - 250px);
+  margin: 10px;
 }
 
-
-
+div.content.explorer {
+  margin-left: 20px;
+  margin-right: 20px;
+}