Fix muon monitor design
This commit is contained in:
parent
e01a688664
commit
d2553d5b40
@ -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 ->
|
||||||
|
@ -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)
|
||||||
|
@ -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>
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user