justinzeus/Wholphin
1
0
Fork 0
mirror of https://github.com/JustinZeus/Wholphin.git synced 2026-07-08 15:50:16 +02:00
Code Issues Projects Packages Wiki Activity Actions

Align typography and placement between Home, MovieDetails and SeriesDetails (#751)

Browse source 
## 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
<img width="1920" height="1080" alt="Screenshot_20260123_223116"
src="https://github.com/user-attachments/assets/ffd6a5c0-0ed1-4634-8c57-147f7783950f"
/>


Series Details
<img width="1920" height="1080" alt="Screenshot_20260123_223207"
src="https://github.com/user-attachments/assets/59c6be44-fcf4-4e28-8ad2-add304bd7650"
/>



### AI/LLM usage
LLM was only used to identify the current styling applied to the pages.
All code changes were made and reviewed manually
This commit is contained in:
YogiBear12 2026-02-04 09:55:05 +11:00 • committed by GitHub
parent 733213d6a2
commit b0b8ae3639
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 34 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/main/java/com/github/damontecres/wholphin/ui/cards/ChapterRow.kt
View file

@ -34,6 +34,7 @@ fun ChapterRow(
text = stringResource(R.string.chapters), text = stringResource(R.string.chapters),
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.onBackground, color = MaterialTheme.colorScheme.onBackground,
modifier = Modifier.padding(start = 8.dp),
) )
LazyRow( LazyRow(
state = rememberLazyListState(), state = rememberLazyListState(),
@ -41,7 +42,6 @@ fun ChapterRow(
contentPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp), contentPadding = PaddingValues(vertical = 8.dp, horizontal = 16.dp),
modifier = modifier =
Modifier Modifier
.padding(start = 16.dp)
.fillMaxWidth() .fillMaxWidth()
.focusRestorer(), .focusRestorer(),
) { ) {

2
app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemRow.kt
View file

@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.foundation.lazy.rememberLazyListState
@ -57,6 +58,7 @@ fun <T> ItemRow(
text = title, text = title,
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.onBackground, color = MaterialTheme.colorScheme.onBackground,
modifier = Modifier.padding(start = 8.dp),
) )
LazyRow( LazyRow(
state = state, state = state,

2
app/src/main/java/com/github/damontecres/wholphin/ui/cards/PersonRow.kt
View file

@ -46,6 +46,7 @@ fun PersonRow(
text = stringResource(title), text = stringResource(title),
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.onBackground, color = MaterialTheme.colorScheme.onBackground,
modifier = Modifier.padding(start = 8.dp),
) )
LazyRow( LazyRow(
state = rememberLazyListState(), state = rememberLazyListState(),
@ -53,7 +54,6 @@ fun PersonRow(
contentPadding = PaddingValues(8.dp), contentPadding = PaddingValues(8.dp),
modifier = modifier =
Modifier Modifier
.padding(start = 16.dp)
.fillMaxWidth() .fillMaxWidth()
.focusRestorer(firstFocus), .focusRestorer(firstFocus),
) { ) {

4
app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetails.kt
View file

@ -410,7 +410,7 @@ fun MovieDetailsContent(
Box(modifier = modifier) { Box(modifier = modifier) {
LazyColumn( LazyColumn(
verticalArrangement = Arrangement.spacedBy(16.dp), verticalArrangement = Arrangement.spacedBy(16.dp),
contentPadding = PaddingValues(horizontal = 32.dp, vertical = 8.dp), contentPadding = PaddingValues(horizontal = 24.dp, vertical = 8.dp),
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
) { ) {
item { item {
@ -430,7 +430,7 @@ fun MovieDetailsContent(
modifier = modifier =
Modifier Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(top = 32.dp, bottom = 16.dp), .padding(top = 40.dp, bottom = 16.dp),
) )
ExpandablePlayButtons( ExpandablePlayButtons(
resumePosition = resumePosition, resumePosition = resumePosition,

24
app/src/main/java/com/github/damontecres/wholphin/ui/detail/movie/MovieDetailsHeader.kt
View file

@ -46,46 +46,47 @@ fun MovieDetailsHeader(
val context = LocalContext.current val context = LocalContext.current
val scope = rememberCoroutineScope() val scope = rememberCoroutineScope()
Column( Column(
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(4.dp),
modifier = modifier, modifier = modifier,
) { ) {
// Title // Title
Text( Text(
text = movie.name ?: "", text = movie.name ?: "",
color = MaterialTheme.colorScheme.onSurface, color = MaterialTheme.colorScheme.onBackground,
style = MaterialTheme.typography.displaySmall, style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold),
fontWeight = FontWeight.SemiBold, maxLines = 1,
maxLines = 2,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
modifier = Modifier.fillMaxWidth(.75f), modifier =
Modifier
.fillMaxWidth(.75f)
.padding(start = 8.dp),
) )
Column( Column(
verticalArrangement = Arrangement.spacedBy(4.dp), verticalArrangement = Arrangement.spacedBy(4.dp),
modifier = Modifier.fillMaxWidth(.60f), modifier = Modifier.fillMaxWidth(.60f),
) { ) {
val padding = 4.dp
QuickDetails( QuickDetails(
movie.ui.quickDetails, movie.ui.quickDetails,
movie.timeRemainingOrRuntime, movie.timeRemainingOrRuntime,
Modifier.padding(bottom = padding), Modifier.padding(start = 8.dp),
) )
dto.genres?.letNotEmpty { dto.genres?.letNotEmpty {
GenreText(it, Modifier.padding(bottom = padding)) GenreText(it, Modifier.padding(start = 8.dp))
} }
VideoStreamDetails( VideoStreamDetails(
chosenStreams = chosenStreams, chosenStreams = chosenStreams,
numberOfVersions = movie.data.mediaSourceCount ?: 0, 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 -> dto.taglines?.firstOrNull()?.let { tagline ->
Text( Text(
text = tagline, text = tagline,
style = MaterialTheme.typography.bodyLarge, style = MaterialTheme.typography.bodyLarge,
fontStyle = FontStyle.Italic, fontStyle = FontStyle.Italic,
modifier = Modifier, modifier = Modifier.padding(start = 8.dp),
) )
} }
@ -120,6 +121,7 @@ fun MovieDetailsHeader(
text = stringResource(R.string.directed_by, it), text = stringResource(R.string.directed_by, it),
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurface, color = MaterialTheme.colorScheme.onSurface,
modifier = Modifier.padding(start = 8.dp),
) )
} }
} }

23
app/src/main/java/com/github/damontecres/wholphin/ui/detail/series/SeriesDetails.kt
View file

@ -31,6 +31,7 @@ import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
@ -332,12 +333,12 @@ fun SeriesDetailsContent(
Column( Column(
modifier = modifier =
Modifier Modifier
.padding(16.dp) .padding(horizontal = 24.dp, vertical = 16.dp)
.fillMaxSize(), .fillMaxSize(),
) { ) {
LazyColumn( LazyColumn(
contentPadding = PaddingValues(bottom = 80.dp), contentPadding = PaddingValues(bottom = 80.dp),
verticalArrangement = Arrangement.spacedBy(0.dp), verticalArrangement = Arrangement.spacedBy(16.dp),
modifier = Modifier, modifier = Modifier,
) { ) {
item { item {
@ -354,7 +355,7 @@ fun SeriesDetailsContent(
horizontalArrangement = Arrangement.spacedBy(16.dp), horizontalArrangement = Arrangement.spacedBy(16.dp),
modifier = modifier =
Modifier Modifier
.padding(start = 16.dp) .padding(start = 8.dp)
.focusRequester(focusRequesters[HEADER_ROW]) .focusRequester(focusRequesters[HEADER_ROW])
.focusRestorer(playFocusRequester) .focusRestorer(playFocusRequester)
.focusGroup() .focusGroup()
@ -599,23 +600,27 @@ fun SeriesDetailsHeader(
val scope = rememberCoroutineScope() val scope = rememberCoroutineScope()
val dto = series.data val dto = series.data
Column( Column(
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(4.dp),
modifier = modifier, modifier = modifier,
) { ) {
Text( Text(
text = series.name ?: stringResource(R.string.unknown), text = series.name ?: stringResource(R.string.unknown),
style = MaterialTheme.typography.displaySmall, color = MaterialTheme.colorScheme.onBackground,
maxLines = 2, style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.SemiBold),
maxLines = 1,
overflow = TextOverflow.Ellipsis, overflow = TextOverflow.Ellipsis,
modifier = Modifier.fillMaxWidth(.75f), modifier =
Modifier
.fillMaxWidth(.75f)
.padding(start = 8.dp),
) )
Column( Column(
verticalArrangement = Arrangement.spacedBy(4.dp), verticalArrangement = Arrangement.spacedBy(4.dp),
modifier = Modifier.fillMaxWidth(.60f), modifier = Modifier.fillMaxWidth(.60f),
) { ) {
QuickDetails(series.ui.quickDetails, null) QuickDetails(series.ui.quickDetails, null, Modifier.padding(start = 8.dp))
dto.genres?.letNotEmpty { dto.genres?.letNotEmpty {
GenreText(it) GenreText(it, Modifier.padding(start = 8.dp, bottom = 12.dp))
} }
dto.overview?.let { overview -> dto.overview?.let { overview ->
OverviewText( OverviewText(

2
app/src/main/java/com/github/damontecres/wholphin/ui/main/HomePage.kt
View file

@ -244,7 +244,7 @@ fun HomePageContent(
verticalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp),
contentPadding = contentPadding =
PaddingValues( PaddingValues(
start = 16.dp, start = 24.dp,
end = 16.dp, end = 16.dp,
top = 0.dp, top = 0.dp,
bottom = Cards.height2x3, bottom = Cards.height2x3,