Skip to content
Snippets Groups Projects
Commit 3b454376 authored by Michael Hartung's avatar Michael Hartung
Browse files

analysis styling

parent 73a24d23
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 90 additions and 81 deletions
src/app/components/analysis-panel/analysis-panel.component.html
+ 15
− 12
View file @ 3b454376
......@@ -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>
......
src/app/components/analysis-panel/analysis-panel.component.scss
+ 21
− 24
View file @ 3b454376
@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;
}
......
src/app/components/network-legend/network-legend.component.scss
+ 1
− 0
View file @ 3b454376
......@@ -4,6 +4,7 @@
div.legend {
position: absolute;
bottom: 0;
left: 1rem;
&.right {
right: 0;
}
......
src/app/pages/explorer-page/explorer-page.component.html
+ 8
− 10
View file @ 3b454376
......@@ -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"
......
src/app/pages/explorer-page/explorer-page.component.scss
+ 12
− 29
View file @ 3b454376
@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;
//}
src/styles.scss
+ 20
− 5
View file @ 3b454376
......@@ -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;
}
src/variables.scss
+ 13
− 1
View file @ 3b454376
$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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment