shahondin1624/ShadowrunCharSheet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add responsive spacing and padding system (Closes #3)

Browse Source
This commit was merged in pull request #42.
This commit is contained in:
shahondin1624
2026-03-13 12:57:44 +01:00
parent 27756f4dde
commit c4fea755d0
4 changed files with 110 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
sharedUI/src/commonMain/kotlin/org/shahondin1624/App.kt
View File

@@ -122,6 +122,9 @@ private fun AppContent(
)
}
) { paddingValues ->
val windowSizeClass = LocalWindowSizeClass.current
val contentPadding = UiConstants.Spacing.large(windowSizeClass)
Box(
modifier = Modifier
.fillMaxSize()
@@ -133,7 +136,7 @@ private fun AppContent(
modifier = Modifier
.widthIn(max = UiConstants.MAX_CONTENT_WIDTH)
.fillMaxWidth()
.padding(16.dp),
.padding(contentPadding),
horizontalAlignment = Alignment.CenterHorizontally
) {
AttributesPage(character)

36
sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/UiConstants.kt
View File

@@ -1,10 +1,46 @@
package org.shahondin1624.lib.components
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import org.shahondin1624.theme.LocalWindowSizeClass
import org.shahondin1624.theme.WindowSizeClass
object UiConstants {
val SMALL_PADDING = 6.dp
/** Maximum width for the main content area to prevent uncomfortable stretching on ultra-wide displays. */
val MAX_CONTENT_WIDTH = 1200.dp
/**
* Responsive spacing tokens that scale with [WindowSizeClass].
*
* | Token | Compact | Medium | Expanded |
* |---------|---------|--------|----------|
* | small | 8 dp | 12 dp | 16 dp |
* | medium | 12 dp | 16 dp | 20 dp |
* | large | 12 dp | 16 dp | 24 dp |
*/
object Spacing {
/** Small spacing/gap (grid spacing, minor gaps). */
fun small(sizeClass: WindowSizeClass): Dp = when (sizeClass) {
WindowSizeClass.Compact -> 8.dp
WindowSizeClass.Medium -> 12.dp
WindowSizeClass.Expanded -> 16.dp
}
/** Medium spacing (content padding, section gaps). */
fun medium(sizeClass: WindowSizeClass): Dp = when (sizeClass) {
WindowSizeClass.Compact -> 12.dp
WindowSizeClass.Medium -> 16.dp
WindowSizeClass.Expanded -> 20.dp
}
/** Large spacing (outer page padding, major section dividers). */
fun large(sizeClass: WindowSizeClass): Dp = when (sizeClass) {
WindowSizeClass.Compact -> 12.dp
WindowSizeClass.Medium -> 16.dp
WindowSizeClass.Expanded -> 24.dp
}
}
}

14
sharedUI/src/commonMain/kotlin/org/shahondin1624/lib/components/charactermodel/attributespage/AttributesPage.kt
View File

@@ -15,19 +15,25 @@ import androidx.compose.material3.HorizontalDivider
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import org.shahondin1624.lib.components.UiConstants
import org.shahondin1624.model.charactermodel.ShadowrunCharacter
import org.shahondin1624.theme.LocalWindowSizeClass
@Composable
fun ColumnScope.AttributesPage(character: ShadowrunCharacter) {
Box(modifier = Modifier.fillMaxWidth().weight(1f)) {
val gridState = rememberLazyGridState()
val windowSizeClass = LocalWindowSizeClass.current
val gridSpacing = UiConstants.Spacing.small(windowSizeClass)
val gridPadding = UiConstants.Spacing.medium(windowSizeClass)
val dividerPadding = UiConstants.Spacing.medium(windowSizeClass)
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 75.dp),
state = gridState,
modifier = Modifier.fillMaxSize().padding(16.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
modifier = Modifier.fillMaxSize().padding(gridPadding),
horizontalArrangement = Arrangement.spacedBy(gridSpacing),
verticalArrangement = Arrangement.spacedBy(gridSpacing)
) {
items(
items = character.attributes.getAllAttributes(),
@@ -39,7 +45,7 @@ fun ColumnScope.AttributesPage(character: ShadowrunCharacter) {
item(span = { GridItemSpan(maxLineSpan) }) {
HorizontalDivider(
modifier = Modifier.padding(vertical = 16.dp),
modifier = Modifier.padding(vertical = dividerPadding),
thickness = 2.dp
)
}