Better layout and positioning for fallingBalls with web demo:

4 years ago · daa2fcc082
6 changed files with 15 additions and 54 deletions
--- a/examples/falling_balls_with_web/build.gradle.kts
+++ b/examples/falling_balls_with_web/build.gradle.kts
@ -1,4 +1,4 @@
-import org.jetbrains.compose.compose
+import org.jetbrains.compose.compose
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat

 plugins {
--- a/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
+++ b/examples/falling_balls_with_web/src/commonMain/kotlin/fallingBalls/fallingBalls.kt
@ -20,10 +20,12 @@ import org.jetbrains.compose.common.ui.background
 import org.jetbrains.compose.common.foundation.border
 import org.jetbrains.compose.common.ui.size
 import org.jetbrains.compose.common.core.graphics.Color
+import org.jetbrains.compose.common.foundation.layout.fillMaxHeight
+import org.jetbrains.compose.common.foundation.layout.fillMaxWidth

@Composable
 fun fallingBalls(game: Game) {
-    Column() {
+    Column(Modifier.fillMaxWidth().fillMaxHeight(1f)) {
        Box() {
            Text(
                "Catch balls!${if (game.finished) " Game over!" else ""}",
@ -76,9 +78,8 @@ fun fallingBalls(game: Game) {
        if (game.started) {
            Box(
                Modifier
-//                    .fillMaxWidth()
-//                    .fillMaxHeight(0.5f)
-                    .background(Color(248, 248, 255))
+                    .fillMaxWidth()
+                    .fillMaxHeight(1f)
                    .size(game.width.dp, game.height.dp)
                    .onSizeChanged {
                        game.size = it
--- a/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
+++ b/examples/falling_balls_with_web/src/jsMain/kotlin/androidx/compose/web/with-web/App.kt
@ -26,8 +26,8 @@ fun main() {
        fallingBalls(
            remember {
                JsGame()?.apply {
-                    width = 600
-                    height = 400
+                    width = root.offsetWidth
+                    height = root.offsetHeight
                }
            }
        )
--- a/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
+++ b/examples/falling_balls_with_web/src/jsMain/kotlin/modifiers/position.kt
@ -14,7 +14,7 @@ import androidx.compose.web.css.Position
@Composable
 actual fun Modifier.position(width: Dp, height: Dp): Modifier  = castOrCreate().apply {
    add {
-        position(Position.Relative)
+        position(Position.Absolute)
        top(height.value.px)
        left(width.value.px)
    }
--- a/examples/falling_balls_with_web/src/jsMain/resources/index.html
+++ b/examples/falling_balls_with_web/src/jsMain/resources/index.html
@ -19,6 +19,7 @@
 <head>
    <meta charset="UTF-8">
    <title>compose-browser-with-web-demo</title>
+    <link type="text/css" rel="stylesheet" href="styles.css" />
 </head>
 <body>
    <div id="root"></div>
--- a/examples/falling_balls_with_web/src/jsMain/resources/styles.css
+++ b/examples/falling_balls_with_web/src/jsMain/resources/styles.css
@ -1,49 +1,8 @@
-/*
- * Copyright 2021 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#container {
-    display: flex;
-}
-
-#rootParent {
-    background: lemonchiffon;
-    flex: 1 1 0px;
-}
-
-#raw {
-    background: powderblue;
-    flex: 1 1 0px;
-}
-
-.row {
-    width: 150px;
-    height: 150px;
-    background: yellow;
-    display: flex;
-    align-items: end;
-}
-
-.box-a {
-    background: red;
-    width: 50px;
-    height: 50px;
+#root {
+    width: 100%;
+    height: 100vh;
 }

-.box-b {
-    background: blue;
-    width: 30px;
-    height: 30px;
+#root > .compose-web-column > div {
+    position: relative;
 }