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 io.ktor.client.request.get
import kotlinx.coroutines.GlobalScope import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
import kotlinx.css.height import kotlinx.css.*
import kotlinx.css.pct
import kotlinx.html.js.onClickFunction import kotlinx.html.js.onClickFunction
import react.RProps import react.RProps
import react.child import react.child
@ -57,30 +56,36 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
val root = props.model.root val root = props.model.root
div("row") {
h1("mx-auto") {
+"Muon monitor demo"
}
}
div("row") { div("row") {
styledDiv { styledDiv {
css { css {
+"col-lg-3" +"col-lg-3"
+"px-0" padding(0.px)
+"overflow-auto" overflowY = Overflow.auto
+"h-100" display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
} }
//tree //tree
card("Object tree") { card("Object tree") {
css {
flex(1.0, 1.0, FlexBasis.auto)
}
objectTree(root, selected, onSelect) objectTree(root, selected, onSelect)
} }
} }
styledDiv { styledDiv {
css { css {
+"col-lg-6" +"col-lg-6"
height = 100.pct display = Display.flex
flexDirection = FlexDirection.column
height = 100.vh
}
h1("mx-auto") {
+"Muon monitor demo"
} }
//canvas //canvas
child(ThreeCanvasComponent) { child(ThreeCanvasComponent) {
attrs { attrs {
this.context = props.context this.context = props.context
@ -95,8 +100,18 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
} }
} }
} }
div("col-lg-3") { styledDiv {
div("row") { 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 //settings
canvas?.let { canvas?.let {
card("Canvas configuration") { card("Canvas configuration") {
@ -125,8 +140,10 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
} }
} }
} }
div("row") { styledDiv{
div("container-fluid p-0") { css{
padding(0.px)
}
nav { nav {
attrs { attrs {
attributes["aria-label"] = "breadcrumb" attributes["aria-label"] = "breadcrumb"
@ -163,8 +180,10 @@ val MMApp = functionalComponent<MMAppProps>("Muon monitor") { props ->
} }
} }
} }
styledDiv{
css{
overflowY = Overflow.auto
} }
div("row") {
//properties //properties
card("Properties") { card("Properties") {
selected.let { selected -> 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 io.ktor.client.features.json.serializer.KotlinxSerializer
import kotlinx.browser.document import kotlinx.browser.document
import react.child import react.child
import react.dom.div
import react.dom.render import react.dom.render
private class MMDemoApp : Application { 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") val element = document.getElementById("app") ?: error("Element with id 'app' not found on page")
render(element) { render(element) {
div("container-fluid h-100") {
child(MMApp) { child(MMApp) {
attrs { attrs {
this.model = this@MMDemoApp.model this.model = this@MMDemoApp.model
@ -38,7 +36,6 @@ private class MMDemoApp : Application {
} }
} }
} }
}
fun main() { fun main() {
startApplication(::MMDemoApp) startApplication(::MMDemoApp)

View File

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

View File

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