From 3b454376128a94bacf92e4fb49d7b61c282a1345 Mon Sep 17 00:00:00 2001
From: Michael Hartung <michi@Michaels-MacBook-Pro.local>
Date: Thu, 22 Jul 2021 15:07:07 +0200
Subject: [PATCH] analysis styling
---
.../analysis-panel.component.html | 27 ++++++-----
.../analysis-panel.component.scss | 45 +++++++++----------
.../network-legend.component.scss | 1 +
.../explorer-page.component.html | 18 ++++----
.../explorer-page.component.scss | 41 +++++------------
src/styles.scss | 25 ++++++++---
src/variables.scss | 14 +++++-
7 files changed, 90 insertions(+), 81 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.html b/src/app/components/analysis-panel/analysis-panel.component.html
index b476baa0..9818ea9a 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.html
+++ b/src/app/components/analysis-panel/analysis-panel.component.html
@@ -13,8 +13,8 @@
</span>
</a>
</header>
- <div class="card-content fullheight">
- <div class="tabs is-centered">
+ <div class="card-content" [class.network-view-settings]="tab === 'network'">
+ <div class="tabs is-centered tabs-header">
<ul>
<li [class.is-active]="tab === 'table'"><a (click)="tab = 'table'">Table</a></li>
<li [class.is-active]="tab === 'network'"><a (click)="tab = 'network'">Network</a></li>
@@ -124,19 +124,23 @@
</div>
</div>
</div>
+
<div class="tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'">
<div class="card-image canvas-content" #networkWithLegend>
<div *ngIf="myConfig.showLegend">
<app-network-legend [config]="myConfig" [context]="legendContext"></app-network-legend>
</div>
- <div class="fullheight center image1" #network>
- <button class="button is-loading center">Loading</button>
+ <div class="parent fullheight">
+ <div class="center image1 fullheight" #network>
+ <button class="button is-loading center" alt="loading...">Loading</button>
+ </div>
</div>
</div>
- <footer class="card-footer toolbar explorer-footer" *ngIf="myConfig.showFooter">
- <div class="field">
- <p class="control footer-buttons">
- <button class="button is-primary is-rounded has-tooltip"
+
+ <footer *ngIf="myConfig.showFooter" class="card-footer toolbar network-footer-toolbar">
+
+ <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
+ <button class="button is-primary is-rounded has-tooltip"
pTooltip="Take a screenshot of the current network." tooltipPosition="top" (click)="toImage()">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
@@ -145,8 +149,7 @@
Screenshot
</span>
</button>
- </p>
- </div>
+ </ng-container>
<div class="field">
<p class="control footer-buttons">
@@ -232,7 +235,7 @@
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
</footer>
</div>
- <div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
+ <div class="content tab-content scrollable table-tab" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
<div class="field has-addons" *ngIf="tableHasScores && task.info.algorithm !== 'proximity'">
<p class="control">
<button class="button is-rounded has-tooltip" pTooltip="Normalize the scores" tooltipPosition="top"
@@ -270,7 +273,7 @@
<span class="icon"><i class="fa fa-dna"></i></span>
<span>Proteins</span>
</h4>
- <a [href]="downloadLink('proteins')" class="button is-primary is-outlined is-pulled-right is-small">
+ <a [href]="downloadLink('prot-+ins')" class="button is-primary is-outlined is-pulled-right is-small">
<span class="icon"><i class="fa fa-download"></i></span>
<span>Download</span>
</a>
diff --git a/src/app/components/analysis-panel/analysis-panel.component.scss b/src/app/components/analysis-panel/analysis-panel.component.scss
index 629ae8c5..e4cf77d3 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.scss
+++ b/src/app/components/analysis-panel/analysis-panel.component.scss
@@ -1,3 +1,4 @@
+@import "../../../variables";
.analysis {
position: absolute;
@@ -5,16 +6,27 @@
width: 100%;
}
-div.network {
- height: calc(100vh - 210px - 52px);
+.network-view-settings {
+ // remove margin from tab header when network is displayed, so that network
+ // does not disappear in empty border
+ padding-left: 0;
+ padding-right: 0;
+ .tabs {
+ margin: 0;
+ }
+ .tab-content {
+ width: 100%;
+ height: calc(100% - #{$network-header-height} - #{$analysis-tab-header-height} - #{$analysis-tab-header-padding});
+ }
+}
+
+.tabs-header {
+ height: $analysis-tab-header-height;
}
.tab-content {
visibility: hidden;
position: absolute;
- width: calc(100% - 50px);
- height: calc(100% - 41px - 67px - 48px);
-
&.is-visible {
visibility: visible;
}
@@ -23,6 +35,10 @@ div.network {
overflow-y: auto;
padding-right: 10px;
}
+ &.table-tab {
+ // 100% - #{$network-header-height} - #{$analysis-tab-header-height} - normalization-button
+ height: calc(100% - 9rem);
+ }
h4 {
margin-top: 60px;
@@ -53,25 +69,6 @@ div.network {
width: 10px;
}
-.text-small {
- font-size: 11px;
-}
-
-.text-normal{
- font-size:12px;
-}
-
-.b-text-small{
- font-size:14px
-}
-
-.b-text-smaller{
- font-size:12px
-}
-
-.button-small{
- padding: 3px 10px 3px 10px;
-}
.scroll-y{
overflow-y: auto;
}
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network-legend/network-legend.component.scss
index ede8ee23..c627ce78 100644
--- a/src/app/components/network-legend/network-legend.component.scss
+++ b/src/app/components/network-legend/network-legend.component.scss
@@ -4,6 +4,7 @@
div.legend {
position: absolute;
bottom: 0;
+ left: 1rem;
&.right {
right: 0;
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 48d85dfe..46587469 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -115,27 +115,25 @@
<div class="card network">
- <header class="card-header">
+ <header class="card-header network-header">
<p class="card-header-title">
{{myConfig.title}}
</p>
</header>
- <div class="card-content fullheight">
+ <div class="card-content explorer-network-view-settings">
<div class="card-image canvas-content" #networkWithLegend>
<div *ngIf="myConfig.showLegend">
<app-network-legend [config]="myConfig" [context]="legendContext"></app-network-legend>
</div>
- <div class="parent fullheight">
- <div class="center image1 fullheight" #network>
- <button class="button is-loading center" alt="loading...">Loading</button>
- </div>
+ <div class="center image1 fullheight" #network>
+ <button class="button is-loading center" alt="loading...">Loading</button>
</div>
</div>
- <footer *ngIf="myConfig.showFooter" class="card-footer toolbar explorer-footer">
+ <footer *ngIf="myConfig.showFooter" class="card-footer toolbar network-footer-toolbar">
<ng-container *ngIf="myConfig.showFooterButtonScreenshot">
- <button (click)="toImage()" class="button is-primary is-rounded has-tooltip explorer-footer-element"
+ <button (click)="toImage()" class="button is-primary is-rounded has-tooltip network-footer-toolbar-element"
pTooltip="Take a screenshot of the current network." tooltipPosition="top">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
@@ -145,7 +143,7 @@
</ng-container>
<ng-container *ngIf="myConfig.showFooterButtonExpression">
- <div class="footer-buttons dropdown is-up explorer-footer-element" [class.is-active]="expressionExpanded">
+ <div class="footer-buttons dropdown is-up network-footer-toolbar-element" [class.is-active]="expressionExpanded">
<div class="dropdown-trigger">
<button (click)="expressionExpanded=!expressionExpanded"
@@ -189,7 +187,7 @@
[smallStyle]="smallStyle"
[value]="adjacentDrugs" (valueChange)="updateAdjacentDrugs($event)"></app-toggle>
- <app-toggle class="footer-buttons explorer-footer-element" textOn="Animation On" textOff="Off"
+ <app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Animation On" textOff="Off"
tooltipOn="Enable the network animation."
tooltipOff="Disable the network animation and freeze nodes."
[smallStyle]="smallStyle"
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index 1b646893..ee75dcc8 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -1,3 +1,4 @@
+@import "../../../variables";
.quick-find {
.notification {
@@ -22,6 +23,13 @@
}
}
+.explorer-network-view-settings {
+ // remove margin from tab header when network is displayed, so that network
+ // does not disappear in empty border
+ padding: 0;
+ height: calc(100% - #{$network-header-height});
+}
+
.align-vmiddle {
display: table-cell;
vertical-align: middle;
@@ -43,43 +51,18 @@
font-weight: bold;
}
+.network-header {
+ height: $network-header-height;
+}
+
.card-footer {
font-size: 12px;
a {
padding: 3px;
}
}
-.text-small {
- font-size: 11px;
-}
-
-.text-normal{
- font-size:12px;
-}
-
-.b-text-small{
- font-size:14px
-}
-
-.b-text-smaller{
- font-size:12px
-}
-
-.button-small{
- padding: 3px 10px 3px 10px;
-}
.scroll-x{
overflow-x: auto;
}
-
-
-//
-//.p-tooltip .p-tooltip-text {
-// background-color: rgba(74,74,74,.9);
-// color: #fff;
-//}
-//.p-tooltip-arrow {
-// background-color: rgba(74,74,74,.9) !important;
-//}
diff --git a/src/styles.scss b/src/styles.scss
index 330eb5c0..4bb9efc0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -17,13 +17,13 @@
height: calc(100% - #{$network-footer-height});
}
-.explorer-footer {
+.network-footer-toolbar {
position: absolute;
- overflow: auto;
+ overflow-x: auto;
+ overflow-y: hidden;
width: 100%;
- margin-left: -24px;
bottom: 0;
-
+ height: $network-footer-height;
&-element {
position: relative;
}
@@ -236,6 +236,21 @@ html, #appWindow {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
-
+// classes for different screen sizes
+.text-small {
+ font-size: $text-small-font-size;
+}
+.text-normal{
+ font-size: $text-normal-font-size;
+}
+.b-text-small{
+ font-size: $b-text-small-font-size;
+}
+.b-text-smaller{
+ font-size: $b-text-smaller-font-size;
+}
+.button-small{
+ padding: $button-small-padding;
+}
diff --git a/src/variables.scss b/src/variables.scss
index 9a5f2a01..bf25cef9 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -1,5 +1,9 @@
$row-data-selector-height: auto;
-$network-footer-height: 90px;
+$network-header-height: 3rem;
+$network-footer-height: 4rem;
+
+$analysis-tab-header-height: 2.5rem;
+$analysis-tab-header-padding: 1.5rem;
// Settings Legend
$legend-default-background-color: #143d1f;
@@ -24,3 +28,11 @@ $sidebar-left-width: 18%;
$sidebar-left-min-width: 200px;
$main-width: calc(100% - (max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width})));
+
+// settings for different screen sizes
+$b-text-small-font-size: 14px;
+$b-text-smaller-font-size: 12px;
+$text-normal-font-size: 12px;
+$text-small-font-size: 11px;
+
+$button-small-padding: 3px 10px 3px 10px;
\ No newline at end of file
--
GitLab