refactor: use padding instead of margin for grid spacing

d1snin · Aug 19, 2023 · 9cc9e12 · 9cc9e12
1 parent 2a88ca5
commit 9cc9e12
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 24 deletions.
diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockComponent.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockComponent.kt
@@ -21,24 +21,40 @@ import dev.d1s.beam.commons.MetadataKeys
 import dev.d1s.beam.ui.contententity.renderEntities
 import dev.d1s.beam.ui.util.Size.sizeOf
 import dev.d1s.exkt.kvision.component.Component
+import io.kvision.html.div
 import io.kvision.panel.SimplePanel
+import io.kvision.utils.minus
 import io.kvision.utils.px
+import kotlinx.atomicfu.atomic
 import org.koin.core.component.KoinComponent
 
 class BlockComponent : Component<BlockComponent.Config>(::Config), KoinComponent {
 
     override fun SimplePanel.render() {
-        val block = config.block
-
-        requireNotNull(block) {
+        val block = requireNotNull(config.block.value) {
             "Block isn't set"
         }
 
-        card("p-4 d-flex flex-column justify-content-start mb-${config.marginBottom} me-${config.marginEnd}") {
-            setOptionalBlockId(block)
+        div {
+            val blockSize = sizeOf(block.size).px
+            width = blockSize
+
+            val applyPaddingEnd = config.applyPaddingEnd.value
+
+            if (applyPaddingEnd) {
+                paddingRight = cardPadding
+            }
+
+            if (config.applyPaddingBottom.value) {
+                paddingBottom = cardPadding
+            }
 
-            maxWidth = sizeOf(block.size).px
-            renderEntities(block.entities)
+            card("p-4 d-flex flex-column justify-content-start") {
+                width = if (applyPaddingEnd) blockSize.minus(cardPadding.first) else blockSize
+
+                setOptionalBlockId(block)
+                renderEntities(block.entities)
+            }
         }
     }
 
@@ -54,9 +70,14 @@ class BlockComponent : Component<BlockComponent.Config>(::Config), KoinComponent
 
     class Config {
 
-        var block: Block? = null
+        val block = atomic<Block?>(null)
+
+        val applyPaddingEnd = atomic(true)
+        val applyPaddingBottom = atomic(true)
+    }
+
+    private companion object {
 
-        var marginBottom = 4
-        var marginEnd = 4
+        private val cardPadding = 20.px
     }
 }
diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockContainerComponent.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/component/BlockContainerComponent.kt
@@ -52,14 +52,13 @@ class BlockContainerComponent : Component<Unit>(), KoinComponent {
             vPanel(justify = JustifyContent.CENTER, alignItems = AlignItems.CENTER) {
                 val batches = blocks.splitIntoBatches()
 
-                batches.forEachIndexed { index, blockBatch ->
-                    val lastBatch = index == batches.lastIndex
-
+                batches.forEachIndexed { batchIndex, blockBatch ->
                     hPanel {
-                        blockBatch.forEachIndexed { index, block ->
-                            val lastBlock = index == blockBatch.lastIndex
+                        blockBatch.forEachIndexed { blockIndex, block ->
+                            val lastBlock = blockIndex == blockBatch.lastIndex
+                            val lastBatch = batchIndex == batches.lastIndex
 
-                            renderBlock(block, lastBatch, lastBlock)
+                            renderBlock(block, lastBlock, lastBatch)
                         }
                     }
                 }
@@ -99,18 +98,18 @@ class BlockContainerComponent : Component<Unit>(), KoinComponent {
         return batches
     }
 
-    private fun SimplePanel.renderBlock(block: Block, lastBatch: Boolean, lastBlock: Boolean) {
+    private fun SimplePanel.renderBlock(block: Block, lastBlock: Boolean, lastBatch: Boolean) {
         val blockComponent = get<Component<BlockComponent.Config>>(Qualifier.BlockComponent)
 
         render(blockComponent) {
-            this.block = block
+            this.block.value = block
 
-            if (lastBatch) {
-                this.marginBottom = 0
+            if (lastBlock) {
+                this.applyPaddingEnd.value = false
             }
 
-            if (lastBlock) {
-                this.marginEnd = 0
+            if (lastBatch) {
+                this.applyPaddingBottom.value = false
             }
         }
     }

diff --git a/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/util/Size.kt b/beam-ui/src/jsMain/kotlin/dev/d1s/beam/ui/util/Size.kt
@@ -20,8 +20,8 @@ import dev.d1s.beam.commons.BlockSize
 
 object Size {
 
-    private const val STEP = 225
-    private const val WHITESPACE = 45
+    private const val STEP = 250
+    private const val WHITESPACE = 40
 
     private val LgBreakpoint = breakpointOf(BlockSize.LARGE)
     private val XlBreakpoint = breakpointOf(BlockSize.EXTRA_LARGE)