fix: make normal space search card smaller

d1snin · Aug 10, 2023 · ac610a1 · ac610a1
1 parent 0c108ef
commit ac610a1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/NormalSpaceSearchCardContent.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/NormalSpaceSearchCardContent.kt
@@ -17,16 +17,24 @@
 package dev.d1s.beam.ui.component
 
 import dev.d1s.beam.ui.theme.currentTheme
+import dev.d1s.beam.ui.util.Size
 import dev.d1s.beam.ui.util.Texts
 import io.kvision.html.image
 import io.kvision.panel.SimplePanel
 import io.kvision.utils.perc
+import io.kvision.utils.px
+import io.kvision.utils.rem
 import org.koin.core.component.KoinComponent
 
 class NormalSpaceSearchCardContent : SpaceSearchCardContent, KoinComponent {
 
     override val mode = SpaceSearchCardComponent.Mode.NORMAL
 
+    override fun SimplePanel.configureContainer() {
+        maxWidth = Size.Md.px
+        fontSize = 0.8.rem
+    }
+
     override fun SimplePanel.image() {
         image(
             currentTheme.normalSpaceIcon,
@@ -38,6 +46,6 @@ class NormalSpaceSearchCardContent : SpaceSearchCardContent, KoinComponent {
     }
 
     override fun SimplePanel.text() {
-        spaceSearchCardText(Texts.Body.SpaceSearchCard.NormalMode.TEXT)
+        spaceSearchCardText(Texts.Body.SpaceSearchCard.NormalMode.TEXT, fontSize = 1.1.rem)
     }
 }
diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/SpaceSearchCardComponent.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/SpaceSearchCardComponent.kt
@@ -64,7 +64,9 @@ class SpaceSearchCardComponent : Component<SpaceSearchCardComponent.Config>(::Co
 
     override fun SimplePanel.render() {
         div(className = "container d-flex justify-content-center") {
-            maxWidth = Size.LgBreakpoint.px
+            maxWidth = Size.Lg.px
+
+            configureContainer()
 
             card(className = "d-flex flex-column justify-content-center w-100 p-5") {
                 image()
@@ -74,6 +76,12 @@ class SpaceSearchCardComponent : Component<SpaceSearchCardComponent.Config>(::Co
         }
     }
 
+    private fun SimplePanel.configureContainer() {
+        with(content) {
+            configureContainer()
+        }
+    }
+
     private fun SimplePanel.image() {
         with(content) {
             image()

diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/SpaceSearchCardContent.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/SpaceSearchCardContent.kt
@@ -16,6 +16,7 @@
 
 package dev.d1s.beam.ui.component
 
+import io.kvision.core.CssSize
 import io.kvision.html.p
 import io.kvision.panel.SimplePanel
 import io.kvision.utils.rem
@@ -24,13 +25,17 @@ interface SpaceSearchCardContent {
 
     val mode: SpaceSearchCardComponent.Mode
 
+    fun SimplePanel.configureContainer() {
+        // nop
+    }
+
     fun SimplePanel.image()
 
     fun SimplePanel.text()
 }
 
-fun SimplePanel.spaceSearchCardText(text: String) {
+fun SimplePanel.spaceSearchCardText(text: String, fontSize: CssSize = 1.6.rem) {
     p(text, className = "mb-3") {
-        fontSize = 1.6.rem
+        this.fontSize = fontSize
     }
 }
diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/state/CurrentSpaceContentChangeObservable.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/state/CurrentSpaceContentChangeObservable.kt
@@ -183,7 +183,9 @@ class CurrentSpaceContentChangeObservable : Observable<CurrentSpaceContentChange
 
     private inline fun Blocks?.modifyBlocks(modification: MutableList<Block>. () -> Unit): Blocks =
         this?.let {
-            this.toMutableList().apply(modification)
+            this.toMutableList().apply(modification).sortedBy {
+                it.index
+            }
         } ?: listOf()
 
     private fun setCurrentSpaceContentChange(change: CurrentSpaceContentChange) {