feat: responsive attribute card layout with fluid scaling (Closes #5) (#46)

This commit was merged in pull request #46.
This commit is contained in:
2026-03-13 13:09:44 +01:00
parent 14f0dab046
commit f0c0f5f80e

View File

@@ -3,6 +3,7 @@ package org.shahondin1624.lib.components.charactermodel.attributespage
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
@@ -10,12 +11,14 @@ import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.painterResource
import org.shahondin1624.lib.components.TestTags
@@ -37,28 +40,37 @@ fun Attribute(
val textColor = if (isInDarkMode) Color.Black else Color.White
Card(modifier = Modifier.testTag(TestTags.attributeCard(attribute.type.name))) {
Row(
verticalAlignment = androidx.compose.ui.Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Start,
modifier = Modifier.fillMaxWidth()
) {
Row(modifier = Modifier
.padding(horizontal = SMALL_PADDING)
.background(attribute.type.color, shape = androidx.compose.foundation.shape.RoundedCornerShape(4.dp))
.clip(androidx.compose.foundation.shape.RoundedCornerShape(4.dp)),
horizontalArrangement = Arrangement.SpaceBetween) {
Row(
modifier = Modifier
.weight(1f)
.padding(horizontal = SMALL_PADDING)
.background(attribute.type.color, shape = RoundedCornerShape(4.dp))
.clip(RoundedCornerShape(4.dp)),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = attribute.type.name,
modifier = Modifier
.width(90.dp)
.weight(1f)
.padding(start = SMALL_PADDING),
textAlign = TextAlign.Center,
color = textColor
color = textColor,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
Text(
text = attribute.value.toString(),
modifier = Modifier
.padding(end = SMALL_PADDING),
textAlign = TextAlign.Center,
color = textColor
color = textColor,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
IconButton(
@@ -81,4 +93,4 @@ fun Attribute(
}
}
}
}
}