From f91321e1ec1abc6ba1c001847fc4700a2bebff47 Mon Sep 17 00:00:00 2001 From: tapframe <85391825+tapframe@users.noreply.github.com> Date: Wed, 11 Mar 2026 21:20:12 +0530 Subject: [PATCH] adjusting cast section ui --- .../details/components/DetailCastSection.kt | 86 +++++++++++++++---- .../details/components/DetailSection.kt | 46 ++++++++++ 2 files changed, 116 insertions(+), 16 deletions(-) create mode 100644 composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailSection.kt diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailCastSection.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailCastSection.kt index b0ab71fd..77b0c5ea 100644 --- a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailCastSection.kt +++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailCastSection.kt @@ -3,8 +3,8 @@ package com.nuvio.app.features.details.components import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.size import androidx.compose.foundation.lazy.LazyRow @@ -18,7 +18,9 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp @Composable fun DetailCastSection( @@ -27,21 +29,22 @@ fun DetailCastSection( ) { if (cast.isEmpty()) return - Column( - modifier = modifier.fillMaxWidth(), - verticalArrangement = Arrangement.spacedBy(14.dp), + DetailSection( + title = "Cast", + modifier = modifier, ) { - Text( - text = "Cast", - style = MaterialTheme.typography.headlineLarge, - color = MaterialTheme.colorScheme.onBackground, - ) + BoxWithConstraints { + val sizing = castSectionSizing(maxWidth.value) - LazyRow( - horizontalArrangement = Arrangement.spacedBy(20.dp), - ) { - items(cast) { name -> - CastItem(name = name) + LazyRow( + horizontalArrangement = Arrangement.spacedBy(sizing.avatarGap), + ) { + items(cast) { name -> + CastItem( + name = name, + sizing = sizing, + ) + } } } } @@ -51,6 +54,8 @@ fun DetailCastSection( private fun CastItem( name: String, modifier: Modifier = Modifier, + subLabel: String? = null, + sizing: CastSectionSizing, ) { Column( modifier = modifier, @@ -59,7 +64,7 @@ private fun CastItem( ) { Box( modifier = Modifier - .size(64.dp) + .size(sizing.avatarSize) .background( color = MaterialTheme.colorScheme.surfaceVariant, shape = CircleShape, @@ -75,15 +80,64 @@ private fun CastItem( } Text( text = name, - style = MaterialTheme.typography.labelMedium, + style = MaterialTheme.typography.bodyMedium.copy( + fontSize = sizing.nameLabelSize, + ), color = MaterialTheme.colorScheme.onSurface, textAlign = TextAlign.Center, maxLines = 1, overflow = TextOverflow.Ellipsis, ) + if (!subLabel.isNullOrBlank()) { + Text( + text = subLabel, + style = MaterialTheme.typography.bodySmall.copy( + fontSize = sizing.subLabelSize, + ), + color = MaterialTheme.colorScheme.onSurfaceVariant, + textAlign = TextAlign.Center, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } } } +private data class CastSectionSizing( + val avatarSize: androidx.compose.ui.unit.Dp, + val avatarGap: androidx.compose.ui.unit.Dp, + val nameLabelSize: TextUnit, + val subLabelSize: TextUnit, +) + +private fun castSectionSizing(maxWidthDp: Float): CastSectionSizing = + when { + maxWidthDp >= 1200f -> CastSectionSizing( + avatarSize = 100.dp, + avatarGap = 20.dp, + nameLabelSize = 16.sp, + subLabelSize = 14.sp, + ) + maxWidthDp >= 840f -> CastSectionSizing( + avatarSize = 90.dp, + avatarGap = 18.dp, + nameLabelSize = 15.sp, + subLabelSize = 13.sp, + ) + maxWidthDp >= 600f -> CastSectionSizing( + avatarSize = 85.dp, + avatarGap = 16.dp, + nameLabelSize = 14.sp, + subLabelSize = 12.sp, + ) + else -> CastSectionSizing( + avatarSize = 80.dp, + avatarGap = 16.dp, + nameLabelSize = 14.sp, + subLabelSize = 12.sp, + ) + } + private fun String.initials(): String { val parts = trim().split(" ").filter { it.isNotBlank() } return when { diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailSection.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailSection.kt new file mode 100644 index 00000000..6021cde6 --- /dev/null +++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailSection.kt @@ -0,0 +1,46 @@ +package com.nuvio.app.features.details.components + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.BoxWithConstraints +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + +@Composable +fun DetailSection( + title: String, + modifier: Modifier = Modifier, + content: @Composable () -> Unit, +) { + Column( + modifier = modifier.fillMaxWidth(), + verticalArrangement = Arrangement.spacedBy(14.dp), + ) { + DetailSectionTitle(title = title) + content() + } +} + +@Composable +fun DetailSectionTitle( + title: String, + modifier: Modifier = Modifier, +) { + BoxWithConstraints(modifier = modifier.fillMaxWidth()) { + val titleSize = if (maxWidth >= 720.dp) 22.sp else 20.sp + Text( + text = title, + style = MaterialTheme.typography.titleLarge.copy( + fontSize = titleSize, + fontWeight = FontWeight.SemiBold, + ), + color = MaterialTheme.colorScheme.onBackground, + ) + } +} \ No newline at end of file