From 4609398b59fb5aca101aca87aaea3f5453ef6380 Mon Sep 17 00:00:00 2001 From: tapframe <85391825+tapframe@users.noreply.github.com> Date: Sat, 18 Apr 2026 22:20:54 +0530 Subject: [PATCH] ref: adjust tablet hero height calculation --- .../app/features/details/MetaDetailsScreen.kt | 2 + .../features/details/components/DetailHero.kt | 14 +++---- .../home/components/HomeHeroSection.kt | 38 +++++++++++++++++-- 3 files changed, 43 insertions(+), 11 deletions(-) diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/MetaDetailsScreen.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/MetaDetailsScreen.kt index eae92a8d..d7e18a74 100644 --- a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/MetaDetailsScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/MetaDetailsScreen.kt @@ -580,6 +580,7 @@ fun MetaDetailsScreen( BoxWithConstraints(modifier = Modifier.fillMaxSize()) { val isTablet = maxWidth >= 720.dp + val viewportHeight = maxHeight val contentHorizontalPadding = if (isTablet) 32.dp else 18.dp val contentMaxWidth = detailTabletContentMaxWidth(maxWidth, isTablet) val cinematicEnabled = metaScreenSettingsUiState.cinematicBackground @@ -612,6 +613,7 @@ fun MetaDetailsScreen( DetailHero( meta = meta, isTablet = isTablet, + viewportHeight = viewportHeight, contentMaxWidth = contentMaxWidth, scrollOffset = scrollState.value, onHeightChanged = { heroHeightPx = it }, diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt index a091925f..b2a693e5 100644 --- a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt +++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/details/components/DetailHero.kt @@ -25,12 +25,14 @@ import androidx.compose.ui.unit.dp import androidx.compose.ui.graphics.graphicsLayer import coil3.compose.AsyncImage import com.nuvio.app.features.details.MetaDetails +import com.nuvio.app.features.home.components.homeHeroLayout @Composable fun DetailHero( meta: MetaDetails, isTablet: Boolean = false, scrollOffset: Int = 0, + viewportHeight: Dp? = null, contentMaxWidth: Dp = 560.dp, onHeightChanged: (Int) -> Unit = {}, modifier: Modifier = Modifier, @@ -38,7 +40,10 @@ fun DetailHero( BoxWithConstraints( modifier = modifier.fillMaxWidth(), ) { - val heroHeight = detailHeroHeight(maxWidth, isTablet) + val heroHeight = homeHeroLayout( + maxWidthDp = maxWidth.value, + viewportHeightDp = viewportHeight?.value, + ).heroHeight Box( modifier = Modifier @@ -134,10 +139,3 @@ fun DetailHero( } } } - -private fun detailHeroHeight(maxWidth: Dp, isTablet: Boolean): Dp = - if (!isTablet) { - (maxWidth * 1.33f).coerceIn(420.dp, 760.dp) - } else { - (maxWidth * 0.42f).coerceIn(300.dp, 420.dp) - } diff --git a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeHeroSection.kt b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeHeroSection.kt index 15f08ebb..12d24811 100644 --- a/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeHeroSection.kt +++ b/composeApp/src/commonMain/kotlin/com/nuvio/app/features/home/components/HomeHeroSection.kt @@ -66,6 +66,7 @@ private const val HERO_SWIPE_VELOCITY_THRESHOLD = 300f private const val MOBILE_HERO_VIEWPORT_RATIO = 0.78f private const val MOBILE_HERO_MIN_HEIGHT_DP = 360f private const val MOBILE_HERO_MAX_HEIGHT_DP = 760f +private const val TABLET_HERO_VIEWPORT_RATIO = 0.62f internal data class HomeHeroLayout( val isTablet: Boolean, @@ -426,7 +427,13 @@ internal fun homeHeroLayout( when { maxWidthDp >= 1200f -> HomeHeroLayout( isTablet = true, - heroHeight = (maxWidthDp * 0.42f).dp.coerceIn(360.dp, 440.dp), + heroHeight = tabletHeroHeight( + maxWidthDp = maxWidthDp, + viewportHeightDp = viewportHeightDp, + widthRatio = 0.42f, + minHeight = 500.dp, + maxHeight = 640.dp, + ), contentMaxWidth = 640.dp, contentWidthFraction = 0.56f, contentHorizontalPadding = 56.dp, @@ -436,7 +443,13 @@ internal fun homeHeroLayout( ) maxWidthDp >= 840f -> HomeHeroLayout( isTablet = true, - heroHeight = (maxWidthDp * 0.46f).dp.coerceIn(340.dp, 420.dp), + heroHeight = tabletHeroHeight( + maxWidthDp = maxWidthDp, + viewportHeightDp = viewportHeightDp, + widthRatio = 0.46f, + minHeight = 460.dp, + maxHeight = 580.dp, + ), contentMaxWidth = 560.dp, contentWidthFraction = 0.62f, contentHorizontalPadding = 40.dp, @@ -446,7 +459,13 @@ internal fun homeHeroLayout( ) maxWidthDp >= 600f -> HomeHeroLayout( isTablet = true, - heroHeight = (maxWidthDp * 0.58f).dp.coerceIn(320.dp, 380.dp), + heroHeight = tabletHeroHeight( + maxWidthDp = maxWidthDp, + viewportHeightDp = viewportHeightDp, + widthRatio = 0.58f, + minHeight = 420.dp, + maxHeight = 520.dp, + ), contentMaxWidth = 520.dp, contentWidthFraction = 0.72f, contentHorizontalPadding = 32.dp, @@ -489,6 +508,19 @@ private fun mobileHeroHeight( return cappedHeight.coerceIn(MOBILE_HERO_MIN_HEIGHT_DP.dp, MOBILE_HERO_MAX_HEIGHT_DP.dp) } +private fun tabletHeroHeight( + maxWidthDp: Float, + viewportHeightDp: Float?, + widthRatio: Float, + minHeight: Dp, + maxHeight: Dp, +): Dp { + val widthDrivenHeight = (maxWidthDp * widthRatio).dp + val viewportDrivenHeight = viewportHeightDp?.let { (it * TABLET_HERO_VIEWPORT_RATIO).dp } + val baseHeight = maxOf(widthDrivenHeight, viewportDrivenHeight ?: widthDrivenHeight) + return baseHeight.coerceIn(minHeight, maxHeight) +} + @Composable private fun HeroMetaDot() { Box(