Commit 73610ff5 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski

[boostrap v4] some more work on graph explorer

parent 7b463fdd
...@@ -85,6 +85,10 @@ ...@@ -85,6 +85,10 @@
#graph-explorer { #graph-explorer {
padding-top: 0px; padding-top: 0px;
}
.graph-container {
position: absolute;
/* #toggle-container */ /* #toggle-container */
/* position: fixed */ /* position: fixed */
/* z-index: 999 // needs to appear above solid menu bar */ /* z-index: 999 // needs to appear above solid menu bar */
...@@ -94,46 +98,7 @@ ...@@ -94,46 +98,7 @@
/* .container-fluid */ /* .container-fluid */
/* padding-top: 90px */ /* padding-top: 90px */
} }
#graph-explorer #toolbar { .graph-container #sp-container {
display: flex;
flex-direction: column;
}
#graph-explorer #toolbar ul {
display: flex;
flex-direction: row;
margin: 0;
}
#graph-explorer #toolbar ul li {
display: flex;
max-width: 200px;
}
#graph-explorer #controls-container {
position: fixed;
z-index: 999;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.75);
overflow: auto;
left: 0;
right: 0;
top: 60px;
}
#graph-explorer .graph-tree {
position: absolute;
max-height: 600px;
top: 170px;
background-color: #fff;
z-index: 1;
}
#graph-explorer .lefthanded .graph-tree {
left: 80%;
}
#graph-explorer .righthanded .graph-tree {
left: 0%;
}
#graph-explorer #graph-view {
height: 95%;
}
#graph-explorer #sp-container {
position: absolute; position: absolute;
max-height: 600px; max-height: 600px;
top: 170px; top: 170px;
...@@ -142,25 +107,66 @@ ...@@ -142,25 +107,66 @@
width: 28%; width: 28%;
z-index: 15; z-index: 15;
} }
#graph-explorer #sp-container #myTab { .graph-container #sp-container #myTab {
marginBottom: 18px; marginBottom: 18px;
marginTop: 18px; marginTop: 18px;
} }
#graph-explorer #sp-container #myTabContent { .graph-container #sp-container #myTabContent {
borderBottom: 1px solid black; borderBottom: 1px solid black;
paddingBottom: 19px; paddingBottom: 19px;
} }
#graph-explorer #sp-container #horizontal-checkbox ul { .graph-container #sp-container #horizontal-checkbox ul {
display: inline; display: inline;
float: left; float: left;
} }
#graph-explorer .lefthanded #sp-container { .graph-container .lefthanded #sp-container {
left: 0%; left: 0%;
} }
#graph-explorer .righthanded #sp-container { .graph-container .righthanded #sp-container {
left: 70%; left: 70%;
} }
#graph-explorer #tree { .graph-container .graph-tree {
position: absolute;
max-height: 600px;
top: 170px;
background-color: #fff;
z-index: 1;
}
.graph-container .lefthanded .graph-tree {
left: 80%;
}
.graph-container .righthanded .graph-tree {
left: 0%;
}
.graph-container #controls-container {
position: fixed;
z-index: 999;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.75);
overflow: auto;
left: 0;
right: 0;
top: 60px;
}
.graph-container #controls-container #toolbar {
display: flex;
flex-direction: column;
}
.graph-container #controls-container #toolbar ul {
display: flex;
flex-direction: row;
margin: 0;
}
.graph-container #controls-container #toolbar ul li {
max-width: 200px;
}
.graph-container #graph-view {
display: block;
height: 500px;
position: relative;
width: 500px;
}
.graph-container #tree {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
......
{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;AAcA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAnBA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;;AAWN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAxCA;EACA;EAEA;EAuCE;EACA;;AACF;EACE;;AACF;EACE;;AAEF;EACE;;AAEF;EApDA;EACA;EAEA;EAmDE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACvFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"} {"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;;;AAEF;EACE;AAmCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAER;EACE;EAEA;EACA;EACA;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC7FJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1KF;EACE;;;AAGA;EACE;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AC/HR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
\ No newline at end of file \ No newline at end of file
...@@ -147,55 +147,55 @@ explorerCpt = R.hooksComponentWithModule thisModule "explorer" cpt ...@@ -147,55 +147,55 @@ explorerCpt = R.hooksComponentWithModule thisModule "explorer" cpt
snd controls.showSidePanel $ const GET.InitialClosed snd controls.showSidePanel $ const GET.InitialClosed
pure $ pure $
RH.div RH.div { className: "graph-meta-container" } [
{ id: "graph-explorer" RH.div { className: "fixed-top navbar navbar-expand-lg"
, className: "fixed-top navbar navbar-expand-lg" } , id: "graph-explorer" }
[ rowToggle [ rowToggle
[ col [ spaces [ Toggle.treeToggleButton controls.showTree ]] [ col [ spaces [ Toggle.treeToggleButton controls.showTree ]]
, col [ spaces [ Toggle.controlsToggleButton controls.showControls ]] , col [ spaces [ Toggle.controlsToggleButton controls.showControls ]]
, col [ spaces [ Toggle.sidebarToggleButton controls.showSidePanel ]] , col [ spaces [ Toggle.sidebarToggleButton controls.showSidePanel ]]
], R2.row ]
[ outer ]
[ inner handed , RH.div { className: "graph-container" } [
[ rowControls [ Controls.controls controls ] inner handed [
, R2.row $ mainLayout handed $ rowControls [ Controls.controls controls ]
tree { asyncTasksRef , R2.row $ mainLayout handed $
, backend tree { asyncTasksRef
, currentRoute , backend
, frontends , currentRoute
, handed , frontends
, reload: treeReload , handed
, sessions , reload: treeReload
, show: fst controls.showTree , sessions
, showLogin: snd showLogin , show: fst controls.showTree
, treeReloadRef , showLogin: snd showLogin
} , treeReloadRef
/\ }
RH.div { ref: graphRef, id: "graph-view", className: "col-md-12" } [] /\
/\ RH.div { ref: graphRef, id: "graph-view", className: "col-md-12" } []
graphView { controls /\
, elRef: graphRef graphView { controls
, graphId , elRef: graphRef
, graph , graphId
, hyperdataGraph , graph
, mMetaData , hyperdataGraph
, multiSelectEnabledRef , mMetaData
} , multiSelectEnabledRef
/\ }
mSidebar mMetaData { frontends /\
, graph mSidebar mMetaData { frontends
, graphId , graph
, graphVersion , graphId
, removedNodeIds : controls.removedNodeIds , graphVersion
, session , removedNodeIds : controls.removedNodeIds
, selectedNodeIds: controls.selectedNodeIds , session
, showSidePanel : controls.showSidePanel , selectedNodeIds: controls.selectedNodeIds
, treeReload , showSidePanel : controls.showSidePanel
} , treeReload
] }
]
] ]
] ]
]
mainLayout Types.RightHanded (tree' /\ gc /\ gv /\ sdb) = [tree', gc, gv, sdb] mainLayout Types.RightHanded (tree' /\ gc /\ gv /\ sdb) = [tree', gc, gv, sdb]
mainLayout Types.LeftHanded (tree' /\ gc /\ gv /\ sdb) = [sdb, gc, gv, tree'] mainLayout Types.LeftHanded (tree' /\ gc /\ gv /\ sdb) = [sdb, gc, gv, tree']
......
...@@ -141,38 +141,35 @@ controlsCpt = R.hooksComponentWithModule thisModule "controls" cpt ...@@ -141,38 +141,35 @@ controlsCpt = R.hooksComponentWithModule thisModule "controls" cpt
pure $ case getShowControls props of pure $ case getShowControls props of
false -> RH.div {} [] false -> RH.div {} []
true -> RH.div {} true -> R2.menu { id: "toolbar" } [
[ R2.menu { id: "toolbar" } RH.ul {} [ -- change type button (?)
[ RH.ul {} RH.li {} [ centerButton props.sigmaRef ]
[ -- change type button (?) , RH.li {} [ pauseForceAtlasButton {state: props.forceAtlasState} ]
RH.li {} [ centerButton props.sigmaRef ] , RH.li {} [ edgesToggleButton {state: props.showEdges} ]
, RH.li {} [ pauseForceAtlasButton {state: props.forceAtlasState} ] , RH.li {} [ louvainToggleButton props.showLouvain ]
, RH.li {} [ edgesToggleButton {state: props.showEdges} ] , RH.li {} [ edgeConfluenceControl edgeConfluenceRange props.edgeConfluence ]
, RH.li {} [ louvainToggleButton props.showLouvain ] , RH.li {} [ edgeWeightControl edgeWeightRange props.edgeWeight ]
, RH.li {} [ edgeConfluenceControl edgeConfluenceRange props.edgeConfluence ] -- change level
, RH.li {} [ edgeWeightControl edgeWeightRange props.edgeWeight ] -- file upload
-- change level -- run demo
-- file upload -- search button
-- run demo -- search topics
-- search button , RH.li {} [ labelSizeButton props.sigmaRef localControls.labelSize ] -- labels size: 1-4
-- search topics , RH.li {} [ nodeSizeControl nodeSizeRange props.nodeSize ]
, RH.li {} [ labelSizeButton props.sigmaRef localControls.labelSize ] -- labels size: 1-4 -- zoom: 0 -100 - calculate ratio
, RH.li {} [ nodeSizeControl nodeSizeRange props.nodeSize ] , RH.li {} [ multiSelectEnabledButton props.multiSelectEnabled ] -- toggle multi node selection
-- zoom: 0 -100 - calculate ratio -- save button
, RH.li {} [ multiSelectEnabledButton props.multiSelectEnabled ] -- toggle multi node selection , RH.li {} [ nodeSearchControl { graph: props.graph
-- save button , multiSelectEnabled: props.multiSelectEnabled
, RH.li {} [ nodeSearchControl { graph: props.graph , selectedNodeIds: props.selectedNodeIds } ]
, multiSelectEnabled: props.multiSelectEnabled , RH.li {} [ mouseSelectorSizeButton props.sigmaRef localControls.mouseSelectorSize ]
, selectedNodeIds: props.selectedNodeIds } ] , RH.li {} [ cameraButton { id: props.graphId
, RH.li {} [ mouseSelectorSizeButton props.sigmaRef localControls.mouseSelectorSize ] , hyperdataGraph: props.hyperdataGraph
, RH.li {} [ cameraButton { id: props.graphId , session: props.session
, hyperdataGraph: props.hyperdataGraph , sigmaRef: props.sigmaRef
, session: props.session , treeReload: props.treeReload } ]
, sigmaRef: props.sigmaRef
, treeReload: props.treeReload } ]
]
]
] ]
]
useGraphControls :: { forceAtlasS :: SigmaxT.ForceAtlasState useGraphControls :: { forceAtlasS :: SigmaxT.ForceAtlasState
, graph :: SigmaxT.SGraph , graph :: SigmaxT.SGraph
......
...@@ -53,10 +53,10 @@ type Props = ...@@ -53,10 +53,10 @@ type Props =
sidebar :: Record Props -> R.Element sidebar :: Record Props -> R.Element
sidebar props = R.createElement sidebarCpt props [] sidebar props = R.createElement sidebarCpt props []
sidebarCpt :: R.Component Props
sidebarCpt = R.hooksComponentWithModule thisModule "sidebar" cpt
where where
sidebarCpt :: R.Component Props
sidebarCpt = R.hooksComponentWithModule thisModule "sidebar" cpt
cpt {showSidePanel: (GET.Closed /\ _)} _children = do cpt {showSidePanel: (GET.Closed /\ _)} _children = do
pure $ RH.div {} [] pure $ RH.div {} []
cpt {showSidePanel: (GET.InitialClosed /\ _)} _children = do cpt {showSidePanel: (GET.InitialClosed /\ _)} _children = do
......
...@@ -8,48 +8,8 @@ ...@@ -8,48 +8,8 @@
#graph-explorer #graph-explorer
padding-top: 0px padding-top: 0px
#toolbar .graph-container
display: flex position: absolute
flex-direction: column
ul
display: flex
flex-direction: row
margin: 0
li
display: flex
max-width: 200px
/* #toggle-container
/* position: fixed
/* z-index: 999 // needs to appear above solid menu bar
/* right: 25%
/* top: 10px
/* width: 50%
/* .container-fluid
/* padding-top: 90px
#controls-container
position: fixed
z-index: 999 // needs to appear above graph elements
backdrop-filter: blur(4px)
background: rgba(255,255,255,75%)
overflow: auto
left: 0
right: 0
top: 60px
.graph-tree
@include sidePanelCommon
background-color: #fff
z-index: 1
.lefthanded .graph-tree
left: 80%
.righthanded .graph-tree
left: 0%
#graph-view
height: 95%
#sp-container #sp-container
@include sidePanelCommon @include sidePanelCommon
...@@ -75,6 +35,52 @@ ...@@ -75,6 +35,52 @@
.righthanded #sp-container .righthanded #sp-container
left: 70% left: 70%
.graph-tree
@include sidePanelCommon
background-color: #fff
z-index: 1
.lefthanded .graph-tree
left: 80%
.righthanded .graph-tree
left: 0%
/* #toggle-container
/* position: fixed
/* z-index: 999 // needs to appear above solid menu bar
/* right: 25%
/* top: 10px
/* width: 50%
/* .container-fluid
/* padding-top: 90px
#controls-container
position: fixed
z-index: 999 // needs to appear above graph elements
backdrop-filter: blur(4px)
background: rgba(255,255,255,75%)
overflow: auto
left: 0
right: 0
top: 60px
#toolbar
display: flex
flex-direction: column
ul
display: flex
flex-direction: row
margin: 0
li
max-width: 200px
#graph-view
display: block
//height: 95%
height: 500px
position: relative
width: 500px
#tree #tree
position: absolute position: absolute
z-index: 1 z-index: 1
......
Markdown is supported
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