Fix muon monitor design

This commit is contained in:
Alexander Nozik 2020-11-19 20:49:42 +03:00
parent e01a688664
commit d2553d5b40
4 changed files with 66 additions and 52 deletions

View File

@ -19,8 +19,7 @@ import io.ktor.client.HttpClient
import io.ktor.client.request.get
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import kotlinx.css.height
import kotlinx.css.pct
import kotlinx.css.*
import kotlinx.html.js.onClickFunction
import react.RProps
import react.child
@ -57,30 +56,36 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
val root = props.model.root
div("row") {
h1("mx-auto") {
+"Muon monitor demo"
}
}
div("row") {
styledDiv {
css {
+"col-lg-3"
+"px-0"
+"overflow-auto"
+"h-100"
padding(0.px)
overflowY = Overflow.auto
display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
}
//tree
card("Object tree") {
css {
flex(1.0, 1.0, FlexBasis.auto)
}
objectTree(root, selected, onSelect)
}
}
styledDiv {
css {
+"col-lg-6"
height = 100.pct
display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
}
h1("mx-auto") {
+"Muon monitor demo"
}
//canvas
child(ThreeCanvasComponent) {
attrs {
this.context = props.context
@ -95,8 +100,18 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
}
}
}
div("col-lg-3") {
div("row") {
styledDiv {
css {
+"col-lg-3"
padding(0.px)
display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
}
styledDiv {
css{
flex(0.0,1.0, FlexBasis.zero)
}
//settings
canvas?.let {
card("Canvas configuration") {
@ -125,8 +140,10 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
}
}
}
div("row") {
div("container-fluid p-0") {
styledDiv{
css{
padding(0.px)
}
nav {
attrs {
attributes["aria-label"] = "breadcrumb"
@ -163,8 +180,10 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
}
}
}
styledDiv{
css{
overflowY = Overflow.auto
}
div("row") {
//properties
card("Properties") {
selected.let { selected ->

View File

@ -8,7 +8,6 @@ import io.ktor.client.features.json.JsonFeature
import io.ktor.client.features.json.serializer.KotlinxSerializer
import kotlinx.browser.document
import react.child
import react.dom.div
import react.dom.render
private class MMDemoApp : Application {
@ -27,7 +26,6 @@ private class MMDemoApp : Application {
val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
render(element) {
div("container-fluid h-100") {
child(MMApp) {
attrs {
this.model = this@MMDemoApp.model
@ -38,7 +36,6 @@ private class MMDemoApp : Application {
}
}
}
}
fun main() {
startApplication(::MMDemoApp)

View File

@ -11,6 +11,6 @@
<script type="text/javascript" src ="js/bootstrap.bundle.min.js"></script>
</head>
<body class="application">
<div class="container-fluid" id = "app"> </div>
<div class="container-fluid min-vh-100" id = "app"> </div>
</body>
</html>

View File

@ -58,8 +58,6 @@ public val ThreeCanvasComponent: FunctionalComponent<ThreeCanvasProps> = functio
styledDiv {
css {
minWidth = 500.px
minHeight = 500.px
display = Display.inherit
width = 100.pct
height = 100.pct