diff --git a/src/app/app.component.html b/src/app/app.component.html
index 77a029646b99af4c2db67dd808eecdc979d5f760..601fa7038540ca001574d53c5911ecd377f0df41 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 79847ed623d8ab3f30e5dbb914648628812a3e1f..cfef21dc45262261a5dcbd3e9c4bc81d3587ffda 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -1,4 +1,5 @@
-<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>
diff --git a/src/styles.css b/src/styles.css
deleted file mode 100644
index 74f71b077617db1e8499558e6adb26cc27c8f100..0000000000000000000000000000000000000000
--- a/src/styles.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Add application styles & imports to this file! */
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index cb26458e9f9ffa624ee3e9d1b066af42fe8d5e7a..86b886c927ba9148a0895f2cc3548090e7dc6454 100644
--- a/src/styles.scss
+++ b/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;
+}