Skip to content
Snippets Groups Projects
Commit 43991823 authored by Maiykol's avatar Maiykol
Browse files

layout fixed and working loading nodes and running analysis; still bug with... 

layout fixed and working loading nodes and running analysis; still bug with displaying analysis result
parent 44b603b2
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 176 additions and 122 deletions
app-test/legend_image.html
+ 1
− 1
View file @ 43991823
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
"nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle"} }, "nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle"} },
"edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}}, "edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}},
"legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png" "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
}' onload="init1()" style="height: 100vh"></network-expander> }' style="height: 100vh"></network-expander>
</div> </div>
......
netex-build/netex.js
+ 1
− 1
View file @ 43991823
Source diff could not be displayed: it is too large. Options to address this: view the blob.
netex-build/styles.css
+ 1
− 1
View file @ 43991823
Source diff could not be displayed: it is too large. Options to address this: view the blob.
src/app/config.ts
+ 2
− 0
View file @ 43991823
...@@ -29,6 +29,7 @@ export interface IConfig { ...@@ -29,6 +29,7 @@ export interface IConfig {
legendPos: 'left' | 'right'; legendPos: 'left' | 'right';
taskName: string; taskName: string;
showLeftSidebar: boolean; showLeftSidebar: boolean;
showRightSidebar: boolean;
showOverview: boolean; showOverview: boolean;
showQuery: boolean; showQuery: boolean;
showItemSelector: boolean; showItemSelector: boolean;
...@@ -54,6 +55,7 @@ export const defaultConfig: IConfig = { ...@@ -54,6 +55,7 @@ export const defaultConfig: IConfig = {
showLegendNodes: true, showLegendNodes: true,
showLegendEdges: true, showLegendEdges: true,
showLeftSidebar: true, showLeftSidebar: true,
showRightSidebar: true,
showOverview: true, showOverview: true,
showQuery: true, showQuery: true,
showItemSelector: true, showItemSelector: true,
......
src/app/dialogs/launch-analysis/launch-analysis.component.ts
+ 3
− 1
View file @ 43991823
...@@ -10,6 +10,7 @@ import { ...@@ -10,6 +10,7 @@ import {
QuickAlgorithmType, QuickAlgorithmType,
TRUSTRANK TRUSTRANK
} from '../../services/analysis/analysis.service'; } from '../../services/analysis/analysis.service';
import {Wrapper} from '../../interfaces';
@Component({ @Component({
selector: 'app-launch-analysis', selector: 'app-launch-analysis',
...@@ -98,8 +99,9 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges { ...@@ -98,8 +99,9 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
} }
public async startTask() { public async startTask() {
console.log(this.analysis.getSelection());
const parameters: any = { const parameters: any = {
seeds: this.analysis.getSelection().map((item) => item.id), seeds: this.analysis.getSelection().map((item) => item.data.netexId),
}; };
parameters.target_or_drugs = this.target === 'drug' ? 'PPDr' : 'PPI'; parameters.target_or_drugs = this.target === 'drug' ? 'PPDr' : 'PPI';
......
src/app/pages/explorer-page/explorer-page.component.html
+ 67
− 74
View file @ 43991823
<div class="is-hidden-mobile" [style.color]="textColor"> <div class="is-hidden-mobile fullheight" [style.color]="textColor">
<app-launch-analysis [(show)]="showAnalysisDialog" <app-launch-analysis [(show)]="showAnalysisDialog"
...@@ -17,12 +17,8 @@ ...@@ -17,12 +17,8 @@
<!-- Start explorer --> <!-- Start explorer -->
<div class="covex explorer"> <div class="covex explorer">
<!-- Start left window -->
<div class="covex left-window">
<div>
<!-- Start left sidebar --> <!-- Start left sidebar -->
<div class="covex sidebar bar-left"> <div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
<div *ngIf="myConfig.showOverview" class="card bar-large"> <div *ngIf="myConfig.showOverview" class="card bar-large">
<header class="card-header"> <header class="card-header">
...@@ -97,7 +93,7 @@ ...@@ -97,7 +93,7 @@
</div> </div>
<!-- Start network block --> <!-- Start network block -->
<div class="covex network"> <div class="covex network" id="main-column">
<div class="card network"> <div class="card network">
<div *ngIf="myConfig.showLegend"> <div *ngIf="myConfig.showLegend">
...@@ -110,17 +106,17 @@ ...@@ -110,17 +106,17 @@
Protein-Protein Interaction Network Protein-Protein Interaction Network
</p> </p>
</header> </header>
<div class="card-content"> <div class="card-content fullheight">
<div class="card-image" id="canvas-content"> <div class="card-image" id="canvas-content">
<div class="parent"> <div class="parent fullheight">
<div class="network center image1" #network> <div class="center image1 fullheight" #network>
<button class="button is-loading center" alt="loading...">Loading</button> <button class="button is-loading center" alt="loading...">Loading</button>
</div> </div>
</div> </div>
</div> </div>
<footer *ngIf="myConfig.showFooter" class="card-footer toolbar"> <footer *ngIf="myConfig.showFooter" class="card-footer toolbar explorer-footer">
<button (click)="toCanvas()" class="button is-primary is-rounded has-tooltip" <button (click)="toCanvas()" class="button is-primary is-rounded has-tooltip"
data-tooltip="Take a screenshot of the current network."> data-tooltip="Take a screenshot of the current network.">
<span class="icon"> <span class="icon">
...@@ -169,11 +165,6 @@ ...@@ -169,11 +165,6 @@
</footer> </footer>
</div> </div>
</div> </div>
</div>
<!-- End network block -->
</div>
<div class="analysis-view" *ngIf="selectedAnalysisToken"> <div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-panel [(token)]="selectedAnalysisToken" <app-analysis-panel [(token)]="selectedAnalysisToken"
(showDetailsChange)="selectedWrapper = $event" (showDetailsChange)="selectedWrapper = $event"
...@@ -181,7 +172,9 @@ ...@@ -181,7 +172,9 @@
</div> </div>
</div> </div>
<div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-right"> <!-- End network block -->
<div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right">
<div *ngIf="myConfig.showItemSelector" class="card bar-large"> <div *ngIf="myConfig.showItemSelector" class="card bar-large">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 22
− 8
View file @ 43991823
...@@ -50,13 +50,31 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -50,13 +50,31 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.myConfig[key] = {...this.myConfig[key], ...configObj[key]}; this.myConfig[key] = {...this.myConfig[key], ...configObj[key]};
continue; continue;
} }
if (key === 'interactions') { else if (key === 'interactions') {
this.getInteractions(); this.getInteractions();
continue; continue;
} }
if (key === 'colorPrimary') { else if (key === 'showLeftSidebar') {
this.setColorPrimary(configObj[key]); if (configObj[key]) {
// shrink main column
document.getElementById('main-column').classList.remove('leftgone')
} else {
// extend main column
document.getElementById('main-column').classList.add('leftgone')
}
}
else if (key === 'showRightSidebar') {
if (configObj[key]) {
// shrink main column
document.getElementById('main-column').classList.remove('rightgone')
} else {
// extend main column
document.getElementById('main-column').classList.add('rightgone')
} }
}
this.myConfig[key] = configObj[key]; this.myConfig[key] = configObj[key];
} }
} }
...@@ -173,11 +191,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -173,11 +191,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
} }
} }
private setColorPrimary(color: string) {
document.documentElement.style.setProperty('$primary', color);
}
async getInteractions() { async getInteractions() {
const names = this.nodeData.nodes.map( (node) => node.label); const names = this.nodeData.nodes.map( (node) => node.label);
const nameToNetworkId = {}; const nameToNetworkId = {};
...@@ -356,6 +369,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -356,6 +369,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
node.x = customNode.x; node.x = customNode.x;
node.y = customNode.y; node.y = customNode.y;
node.uniprotAc = customNode.uniprotAc node.uniprotAc = customNode.uniprotAc
node.netexId = customNode.netexId
console.log(node) console.log(node)
return node; return node;
} }
......
src/index.html
+ 30
− 11
View file @ 43991823
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script> <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/3ad4fe992f.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="netex-build/styles.css">--> <!-- <link rel="stylesheet" href="netex-build/styles.css">-->
<!-- <script type="text/javascript" src="netex-build/netex.js"></script>--> <!-- <script type="text/javascript" src="netex-build/netex.js"></script>-->
...@@ -18,7 +17,8 @@ ...@@ -18,7 +17,8 @@
<input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br> <input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br>
<input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br> <input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br>
<input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show sidebar<br> <input type="checkbox" onclick=changeConfigStr('{"showLeftSidebar":'+this.checked+'}') checked /> Show left sidebar<br>
<input type="checkbox" onclick=changeConfigStr('{"showRightSidebar":'+this.checked+'}') checked /> Show right sidebar<br>
<input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br> <input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br>
<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show SimpleAnalysis<br> <input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show SimpleAnalysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br> <input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br>
...@@ -38,19 +38,38 @@ ...@@ -38,19 +38,38 @@
<button onclick="setNetwork('netexp1')">Add nodes</button> <button onclick="setNetwork('netexp1')">Add nodes</button>
<div> <div style="height: 700px; width: 1300px;">
<network-expander id="netexp1" <network-expander id="netexp1"
config='{ config='{
"showQuery": false, "nodeGroups": {"0.5": {"type": "gene", "color": "rgb(204, 255, 51)", "name": "0.5", "shape": "circle"}, "1.5": {"type": "gene", "color": "rgb(102, 255, 51)", "name": "1.5", "shape": "circle"}, "2.0": {"type": "gene", "color": "rgb(51, 204, 51)", "name": "2.0", "shape": "circle"}, "-2.0": {"type": "gene", "color": "rgb(255, 0, 0)", "name": "-2.0", "shape": "circle"}},
"legendPos": "right", "edgeGroups": {"custom": {"color": "black", "name": "Custom Group"}}, "idientifier": "hugo",
"nodeGroups": {"genes": {"type": "gene", "color": "blue", "name": "Genes", "shape": "circle"} }, "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
"edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"} },
"lookupInteractions": true,
"colorPrimary": "#0000ff"
}' }'
style="height: 100vh"></network-expander> network= '{"nodes": [{"Name": "SFTPD", "d": 2.1770573418095793, "color": "rgb(51, 204, 51)", "type": "square", "label": "SFTPD", "x": -0.31956085006193347, "y": -0.7406466643934345, "size": 10, "id": "SFTPD", "group": 1.5, "name": "SFTPD"}, {"Name": "FGG", "d": 3.0919984753400342, "color": "rgb(51, 204, 51)", "type": "square", "label": "FGG", "x": 0.07173702374771213, "y": -0.5272230319152038, "size": 10, "id": "FGG", "group": 1.5, "name": "FGG"}, {"Name": "FGB", "d": 1.7586794205006901, "color": "rgb(51, 204, 51)", "type": "square", "label": "FGB", "x": 0.1862980578421022, "y": -0.5379861465902673, "size": 10, "id": "FGB", "group": 1.5, "name": "FGB"}, {"Name": "CFI", "d": 1.6225326254583097, "color": "rgb(51, 204, 51)", "type": "square", "label": "CFI", "x": 0.6812917849238023, "y": -0.2648075564231581, "size": 10, "id": "CFI", "group": 1.5, "name": "CFI"}, {"Name": "C5", "d": 1.9059032485708656, "color": "rgb(51, 204, 51)", "type": "square", "label": "C5", "x": 0.20310846566736865, "y": -0.14000473240635625, "size": 10, "id": "C5", "group": 1.5, "name": "C5"}, {"Name": "C3", "d": 1.2907638114922122, "color": "rgb(102, 255, 51)", "type": "square", "label": "C3", "x": 0.41046161409628396, "y": -0.22972594268593455, "size": 10, "id": "C3", "group": 1.5, "name": "C3"}, {"Name": "C4BPA", "d": 2.8208380551350274, "color": "rgb(51, 204, 51)", "type": "square", "label": "C4BPA", "x": 0.32691273713760793, "y": -0.44002575152714773, "size": 10, "id": "C4BPA", "group": 1.5, "name": "C4BPA"}, {"Name": "CPB2", "d": 1.7868069138182534, "color": "rgb(51, 204, 51)", "type": "square", "label": "CPB2", "x": 0.005918725090868364, "y": -0.21370077890922853, "size": 10, "id": "CPB2", "group": 1.5, "name": "CPB2"}, {"Name": "FN1", "d": 0.5457280631776094, "color": "rgb(153, 255, 51)", "type": "square", "label": "FN1", "x": 0.10773970106896563, "y": -0.26910493560594656, "size": 10, "id": "FN1", "group": 0.5, "name": "FN1"}, {"Name": "DCN", "d": 0.07523726540508413, "color": "rgb(204, 255, 51)", "type": "square", "label": "DCN", "x": -0.1449109959561148, "y": -0.5406452007869201, "size": 10, "id": "DCN", "group": 0.5, "name": "DCN"}, {"Name": "KRT13", "d": -5.884559807904592, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT13", "x": -0.5462663294859071, "y": 0.2179240739679362, "size": 10, "id": "KRT13", "group": 2.0, "name": "KRT13"}, {"Name": "KRT14", "d": -5.979503966095012, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT14", "x": 0.20723970121617027, "y": 0.3335529310573068, "size": 10, "id": "KRT14", "group": 2.0, "name": "KRT14"}, {"Name": "KRT5", "d": -7.3912122103291935, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT5", "x": 0.001680558082502895, "y": 0.1554556904769493, "size": 10, "id": "KRT5", "group": 2.0, "name": "KRT5"}, {"Name": "KRT6A", "d": -7.364973261442935, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT6A", "x": -0.3511002998605662, "y": 0.3925879058088128, "size": 10, "id": "KRT6A", "group": 2.0, "name": "KRT6A"}, {"Name": "CSTA", "d": -3.8792306737039226, "color": "rgb(255, 0, 0)", "type": "circle", "label": "CSTA", "x": -0.010849204611034656, "y": 0.7467591168222204, "size": 10, "id": "CSTA", "group": 2.0, "name": "CSTA"}, {"Name": "DSP", "d": -1.7563342206781023, "color": "rgb(255, 153, 51)", "type": "circle", "label": "DSP", "x": -0.0678748213735474, "y": 0.39925246533037617, "size": 10, "id": "DSP", "group": -2.0, "name": "DSP"}, {"Name": "PI3", "d": -4.265528188882317, "color": "rgb(255, 0, 0)", "type": "circle", "label": "PI3", "x": 0.031056762567423294, "y": 1.0, "size": 10, "id": "PI3", "group": 2.0, "name": "PI3"}, {"Name": "KRT16", "d": -4.794121223753202, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT16", "x": 0.03152510498669397, "y": 0.06575226291390532, "size": 10, "id": "KRT16", "group": 2.0, "name": "KRT16"}, {"Name": "KRT15", "d": -4.518290478769958, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT15", "x": -0.2895261348950512, "y": 0.2654866500427342, "size": 10, "id": "KRT15", "group": 2.0, "name": "KRT15"}, {"Name": "KRT6B", "d": -5.5864948168835005, "color": "rgb(255, 0, 0)", "type": "circle", "label": "KRT6B", "x": -0.5348816001833466, "y": 0.32709964482335674, "size": 10, "id": "KRT6B", "group": 2.0, "name": "KRT6B"}], "edges": [{"from": "SFTPD", "to": "DCN", "group": "custom"}, {"from": "FGG", "to": "FGB", "group": "custom"}, {"from": "FGG", "to": "FN1", "group": "custom"}, {"from": "FGB", "to": "FN1", "group": "custom"}, {"from": "CFI", "to": "C3", "group": "custom"}, {"from": "C5", "to": "CPB2", "group": "custom"}, {"from": "C5", "to": "C3", "group": "custom"}, {"from": "C3", "to": "FN1", "group": "custom"}, {"from": "C4BPA", "to": "FN1", "group": "custom"}, {"from": "CPB2", "to": "FN1", "group": "custom"}, {"from": "FN1", "to": "KRT5", "group": "custom"}, {"from": "FN1", "to": "KRT16", "group": "custom"}, {"from": "FN1", "to": "DCN", "group": "custom"}, {"from": "KRT13", "to": "KRT6B", "group": "custom"}, {"from": "KRT13", "to": "KRT6A", "group": "custom"}, {"from": "KRT14", "to": "KRT5", "group": "custom"}, {"from": "KRT5", "to": "KRT15", "group": "custom"}, {"from": "KRT5", "to": "KRT16", "group": "custom"}, {"from": "KRT5", "to": "DSP", "group": "custom"}, {"from": "KRT6A", "to": "KRT15", "group": "custom"}, {"from": "KRT6A", "to": "DSP", "group": "custom"}, {"from": "CSTA", "to": "DSP", "group": "custom"}, {"from": "CSTA", "to": "PI3", "group": "custom"}, {"from": "DSP", "to": "KRT16", "group": "custom"}, {"from": "KRT15", "to": "KRT6B", "group": "custom"}]}'
style="height: 100%; display: block;"></network-expander>
</div> </div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script> <script>
......
src/styles.scss
+ 42
− 21
View file @ 43991823
...@@ -18,6 +18,19 @@ $info: $primary; ...@@ -18,6 +18,19 @@ $info: $primary;
@import "variables"; @import "variables";
.fullheight {
height: 100%;
}
#canvas-content {
height: calc(100% - #{$network-footer-height});
}
.explorer-footer{
position: absolute;
bottom: 0;
}
nav.navbar { nav.navbar {
height: 60px; height: 60px;
} }
...@@ -39,7 +52,6 @@ span.icon { ...@@ -39,7 +52,6 @@ span.icon {
img.inline { img.inline {
height: 30px; height: 30px;
align: middle; align: middle;
} }
button.i { button.i {
...@@ -51,18 +63,30 @@ input.checkbox { ...@@ -51,18 +63,30 @@ input.checkbox {
} }
div.covex.sidebar { div.covex.sidebar {
height: calc(#{$height} - 70px); height: $height;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
width: 340px;
} }
div.covex.bar-left { div.covex.bar-left {
float: left; float: left;
width: $sidebar-left-width;
height: 100%;
} }
div.covex.bar-right { div.covex.bar-right {
float: right; float: left;
width: $sidebar-right-width;
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
} }
div.card.bar-small { div.card.bar-small {
...@@ -87,27 +111,24 @@ div.card-content.overflow { ...@@ -87,27 +111,24 @@ div.card-content.overflow {
max-height: 350px; max-height: 350px;
} }
div.covex.left-window { div.covex.network {
float: left; width: $main-width;
width: calc(100vw - 350px - 2 * 20px);
height: 100%; height: 100%;
float: left;
&.leftgone{
width: calc(#{$main-width} + #{$sidebar-left-width});
}
&.rightgone{
width: calc(#{$main-width} + #{$sidebar-right-width});
}
&.rightgone.leftgone{
width: calc(#{$main-width} + #{$sidebar-left-width} + #{$sidebar-right-width});
} }
div.covex.network {
width: calc(100% - 350px - 40px);
height: calc(100% - 100px);
margin-left: 20px;
margin-right: 20px;
float: right;
} }
div.card.network { div.card.network {
width: 100%; width: 100%;
height: calc(100% - #{$network-footer-height}); height: $height;
}
div.network {
height: calc(#{$height} - #{$network-footer-height} - #{$navbar-height} - 48px);
} }
div.parent { div.parent {
...@@ -126,7 +147,7 @@ div.center { ...@@ -126,7 +147,7 @@ div.center {
div.covex.explorer { div.covex.explorer {
height: calc(#{$height} - #{$navbar-height}); height: #{$height};
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
......
src/variables.scss
+ 7
− 4
View file @ 43991823
$sidebar-width: 38vw;
$sidebar-width-max: 665px;
$navbar-height: 80px;
$row-data-selector-height: auto; $row-data-selector-height: auto;
$network-footer-height: 75px; $network-footer-height: 75px;
...@@ -12,4 +9,10 @@ $legend-edge-width: 20px; ...@@ -12,4 +9,10 @@ $legend-edge-width: 20px;
$legend-edge-height: 3px; $legend-edge-height: 3px;
$legend-star-color: #FC0; $legend-star-color: #FC0;
$height: 1000px; $height: 100%;
$sidebar-right-width: 25%;
$sidebar-left-width: 18%;
$main-width: calc(100% - #{$sidebar-left-width} - #{$sidebar-right-width});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment