From b0b8ae3639979f87758530fd4b8e49f8cee14822 Mon Sep 17 00:00:00 2001 From: YogiBear12 <139140546+YogiBear12@users.noreply.github.com> Date: Wed, 4 Feb 2026 09:55:05 +1100 Subject: [PATCH] Align typography and placement between Home, MovieDetails and SeriesDetails (#751) ## Description This PR addresses some quick changes to align the styling and placement of elements on the Home, Movie details and Series details pages, using Home as the reference point for the typography. ### Related issues Ongoing discussion [here](https://github.com/damontecres/Wholphin/discussions/704) ### Screenshots Movie Details Screenshot_20260123_223116 Series Details Screenshot_20260123_223207 ### AI/LLM usage LLM was only used to identify the current styling applied to the pages. All code changes were made and reviewed manually --- .../wholphin/ui/cards/ChapterRow.kt | 2 +- .../damontecres/wholphin/ui/cards/ItemRow.kt | 2 ++ .../wholphin/ui/cards/PersonRow.kt | 2 +- .../wholphin/ui/detail/movie/MovieDetails.kt | 4 ++-- .../ui/detail/movie/MovieDetailsHeader.kt | 24 ++++++++++--------- .../ui/detail/series/SeriesDetails.kt | 23 +++++++++++------- .../damontecres/wholphin/ui/main/HomePage.kt | 2 +- 7 files changed, 34 insertions(+), 25 deletions(-) diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ChapterRow.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ChapterRow.kt index cf799c54..b1e64a2a 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ChapterRow.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ChapterRow.kt @@ -34,6 +34,7 @@ fun ChapterRow( text = stringResource(R.string.chapters), style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, + modifier = Modifier.padding(start = 8.dp), ) LazyRow( state = rememberLazyListState(), @@ -41,7 +42,6 @@ fun ChapterRow( contentPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp), modifier = Modifier - .padding(start = 16.dp) .fillMaxWidth() .focusRestorer(), ) { diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemRow.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemRow.kt index 83166fa7..314a7e1a 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemRow.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemRow.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.rememberLazyListState @@ -57,6 +58,7 @@ fun ItemRow( text = title, style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, + modifier = Modifier.padding(start = 8.dp), ) LazyRow( state = state, diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/PersonRow.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/PersonRow.kt index 2895db83..140cc2fd 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/PersonRow.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/PersonRow.kt @@ -46,6 +46,7 @@ fun PersonRow( text = stringResource(title), style = MaterialTheme.typography.titleLarge, color = MaterialTheme.colorScheme.onBackground, + modifier = Modifier.padding(start = 8.dp), ) LazyRow( state = rememberLazyListState(), @@ -53,7 +54,6 @@ fun PersonRow( contentPadding = PaddingValues(8.dp), modifier = Modifier - .padding(start = 16.dp) .fillMaxWidth() .focusRestorer(firstFocus), ) { diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetails.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetails.kt index 58e7762d..b4c4584d 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetails.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetails.kt @@ -410,7 +410,7 @@ fun MovieDetailsContent( Box(modifier = modifier) { LazyColumn( verticalArrangement = Arrangement.spacedBy(16.dp), - contentPadding = PaddingValues(horizontal = 32.dp, vertical = 8.dp), + contentPadding = PaddingValues(horizontal = 24.dp, vertical = 8.dp), modifier = Modifier.fillMaxSize(), ) { item { @@ -430,7 +430,7 @@ fun MovieDetailsContent( modifier = Modifier .fillMaxWidth() - .padding(top = 32.dp, bottom = 16.dp), + .padding(top = 40.dp, bottom = 16.dp), ) ExpandablePlayButtons( resumePosition = resumePosition, diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetailsHeader.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetailsHeader.kt index 60451804..4d5f72d7 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetailsHeader.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetailsHeader.kt @@ -46,46 +46,47 @@ fun MovieDetailsHeader( val context = LocalContext.current val scope = rememberCoroutineScope() Column( - verticalArrangement = Arrangement.spacedBy(8.dp), + verticalArrangement = Arrangement.spacedBy(4.dp), modifier = modifier, ) { // Title Text( text = movie.name ?: "", - color = MaterialTheme.colorScheme.onSurface, - style = MaterialTheme.typography.displaySmall, - fontWeight = FontWeight.SemiBold, - maxLines = 2, + color = MaterialTheme.colorScheme.onBackground, + style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold), + maxLines = 1, overflow = TextOverflow.Ellipsis, - modifier = Modifier.fillMaxWidth(.75f), + modifier = + Modifier + .fillMaxWidth(.75f) + .padding(start = 8.dp), ) Column( verticalArrangement = Arrangement.spacedBy(4.dp), modifier = Modifier.fillMaxWidth(.60f), ) { - val padding = 4.dp QuickDetails( movie.ui.quickDetails, movie.timeRemainingOrRuntime, - Modifier.padding(bottom = padding), + Modifier.padding(start = 8.dp), ) dto.genres?.letNotEmpty { - GenreText(it, Modifier.padding(bottom = padding)) + GenreText(it, Modifier.padding(start = 8.dp)) } VideoStreamDetails( chosenStreams = chosenStreams, numberOfVersions = movie.data.mediaSourceCount ?: 0, - modifier = Modifier.padding(bottom = padding), + modifier = Modifier.padding(start = 8.dp, top = 4.dp, bottom = 16.dp), ) dto.taglines?.firstOrNull()?.let { tagline -> Text( text = tagline, style = MaterialTheme.typography.bodyLarge, fontStyle = FontStyle.Italic, - modifier = Modifier, + modifier = Modifier.padding(start = 8.dp), ) } @@ -120,6 +121,7 @@ fun MovieDetailsHeader( text = stringResource(R.string.directed_by, it), style = MaterialTheme.typography.bodyMedium, color = MaterialTheme.colorScheme.onSurface, + modifier = Modifier.padding(start = 8.dp), ) } } diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/detail/series/SeriesDetails.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/detail/series/SeriesDetails.kt index 305c6451..1db5bb61 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/detail/series/SeriesDetails.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/detail/series/SeriesDetails.kt @@ -31,6 +31,7 @@ import androidx.compose.ui.focus.onFocusChanged import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp @@ -332,12 +333,12 @@ fun SeriesDetailsContent( Column( modifier = Modifier - .padding(16.dp) + .padding(horizontal = 24.dp, vertical = 16.dp) .fillMaxSize(), ) { LazyColumn( contentPadding = PaddingValues(bottom = 80.dp), - verticalArrangement = Arrangement.spacedBy(0.dp), + verticalArrangement = Arrangement.spacedBy(16.dp), modifier = Modifier, ) { item { @@ -354,7 +355,7 @@ fun SeriesDetailsContent( horizontalArrangement = Arrangement.spacedBy(16.dp), modifier = Modifier - .padding(start = 16.dp) + .padding(start = 8.dp) .focusRequester(focusRequesters[HEADER_ROW]) .focusRestorer(playFocusRequester) .focusGroup() @@ -599,23 +600,27 @@ fun SeriesDetailsHeader( val scope = rememberCoroutineScope() val dto = series.data Column( - verticalArrangement = Arrangement.spacedBy(8.dp), + verticalArrangement = Arrangement.spacedBy(4.dp), modifier = modifier, ) { Text( text = series.name ?: stringResource(R.string.unknown), - style = MaterialTheme.typography.displaySmall, - maxLines = 2, + color = MaterialTheme.colorScheme.onBackground, + style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold), + maxLines = 1, overflow = TextOverflow.Ellipsis, - modifier = Modifier.fillMaxWidth(.75f), + modifier = + Modifier + .fillMaxWidth(.75f) + .padding(start = 8.dp), ) Column( verticalArrangement = Arrangement.spacedBy(4.dp), modifier = Modifier.fillMaxWidth(.60f), ) { - QuickDetails(series.ui.quickDetails, null) + QuickDetails(series.ui.quickDetails, null, Modifier.padding(start = 8.dp)) dto.genres?.letNotEmpty { - GenreText(it) + GenreText(it, Modifier.padding(start = 8.dp, bottom = 12.dp)) } dto.overview?.let { overview -> OverviewText( diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/main/HomePage.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/main/HomePage.kt index 4c58b00c..0e6e172b 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/main/HomePage.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/main/HomePage.kt @@ -244,7 +244,7 @@ fun HomePageContent( verticalArrangement = Arrangement.spacedBy(8.dp), contentPadding = PaddingValues( - start = 16.dp, + start = 24.dp, end = 16.dp, top = 0.dp, bottom = Cards.height2x3,