From e545f19d0bc6b65cf5a0626004e179a614f590ec Mon Sep 17 00:00:00 2001
From: Julian Matschinske <julian.matschinske@wzw.tum.de>
Date: Sat, 11 Apr 2020 11:41:30 +0200
Subject: [PATCH] Fix margin and scrolling issues
...and probably introduce new ones...
---
.../explorer-page.component.html | 53 +++++++++----------
src/styles.scss | 15 +++---
2 files changed, 33 insertions(+), 35 deletions(-)
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 9b5bd24c..38139f44 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -7,7 +7,7 @@
<div class="covex left-window">
<div>
- <div class="covex bar-left">
+ <div class="covex sidebar bar-left">
<div class="card bar-large">
<header class="card-header">
@@ -182,8 +182,7 @@
</div>
</div>
- <div class="covex bar-right">
-
+ <div class="covex sidebar bar-right">
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
@@ -373,9 +372,9 @@
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
- <span class="icon">
- <i class="fas fa-filter" aria-hidden="true"></i>
- </span> Selection ({{analysis.getCount()}})
+ <span class="icon">
+ <i class="fas fa-filter" aria-hidden="true"></i>
+ </span> Selection ({{analysis.getCount()}})
</p>
<a (click)="collapseSelection = !collapseSelection" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
@@ -387,7 +386,7 @@
</header>
<div *ngIf="collapseSelection">
<div class="card-content overflow">
- <table class="table" *ngIf="analysis.getCount() > 0">
+ <table class="table selection-table" *ngIf="analysis.getCount() > 0">
<thead>
<tr>
<td>Type</td>
@@ -398,10 +397,10 @@
<tbody>
<tr *ngFor="let p of analysis.getSelection()">
<td>
- <span class="icon">
- <i class="fa fa-dna" *ngIf="p.type == 'host'"></i>
- <i class="fa fa-virus" *ngIf="p.type =='virus'"></i>
- </span>
+ <span class="icon">
+ <i class="fa fa-dna" *ngIf="p.type == 'host'"></i>
+ <i class="fa fa-virus" *ngIf="p.type =='virus'"></i>
+ </span>
</td>
<td *ngIf="p.type == 'virus'">{{p.data.effectName}}</td>
<td *ngIf="p.type == 'host'">{{p.data.name}}</td>
@@ -421,37 +420,35 @@
<footer class="card-footer">
<a (click)="analysis.addAllHostProteins(currentViewNodes, currentViewProteins)"
class="card-footer-item has-text-success" data-tooltip="Add all visible host proteins.">
- <span class="icon">
- <i class="fa fa-plus"></i>
- </span>
+ <span class="icon">
+ <i class="fa fa-plus"></i>
+ </span>
<span>
- Host Proteins
- </span>
+ Host Proteins
+ </span>
</a>
<a (click)="analysis.addAllViralProteins(currentViewNodes, currentViewEffects)"
class="card-footer-item has-text-success" data-tooltip="Add all visible viral proteins.">
- <span class="icon">
- <i class="fa fa-plus"></i>
- </span>
+ <span class="icon">
+ <i class="fa fa-plus"></i>
+ </span>
<span>
- Viral Proteins
- </span>
+ Viral Proteins
+ </span>
</a>
</footer>
<footer class="card-footer">
<a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger"
data-tooltip="Remove all entries of the selection.">
- <span class="icon">
- <i class="fa fa-refresh"></i>
- </span>
+ <span class="icon">
+ <i class="fa fa-refresh"></i>
+ </span>
<span>
- Reset
- </span>
+ Reset
+ </span>
</a>
</footer>
</div>
</div>
-
</div>
-
</div>
diff --git a/src/styles.scss b/src/styles.scss
index 1893f13a..8583fdb1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -74,18 +74,19 @@ input.checkbox {
margin-left: 15px;
}
+div.covex.sidebar {
+ height: calc(100vh - 70px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ width: 350px;
+}
+
div.covex.bar-left {
float: left;
- width: 350px;
- height: calc(100vh - 102px);
- overflow: auto;
}
div.covex.bar-right {
float: right;
- width: 350px;
- height: calc(100vh - 102px);
- overflow: auto;
}
div.card.bar-small {
@@ -107,7 +108,7 @@ div.card.bar-large {
div.card-content.overflow {
overflow: auto;
- max-height: 500px;
+ max-height: 350px;
}
div.covex.left-window {
--
GitLab