Change the layout of the landing page.

This commit is contained in:
Thomas Andres Gomez 2023-11-13 10:32:10 +01:00
parent 39249147fc
commit 2f113a14d6
3 changed files with 26 additions and 22 deletions

View file

@ -29,6 +29,7 @@ import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.PreviewParameter
@ -83,7 +84,7 @@ private fun LandingHorizontalItem(
Box( Box(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.height(64.dp) .height(height = 48.dp)
.clip(shape = RectangleShape), .clip(shape = RectangleShape),
) { ) {
Image( Image(
@ -106,27 +107,30 @@ private fun LandingHorizontalItem(
) )
} }
Row( Row(
modifier = Modifier.padding(paddingValues = padding), modifier = Modifier
.padding(paddingValues = padding)
.align(alignment = Alignment.CenterStart),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(space = 4.dp), horizontalArrangement = Arrangement.spacedBy(space = 4.dp),
) { ) {
item.title?.let { item.title?.let {
Text( Text(
modifier = Modifier.alignByBaseline(), modifier = Modifier.alignByBaseline(),
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.titleMedium,
fontWeight = FontWeight.Normal, fontWeight = FontWeight.Normal,
text = annotateWithDropCap( text = annotateWithDropCap(
text = it, text = it,
style = MaterialTheme.lexicon.typography.titleLargeDropCap, style = MaterialTheme.lexicon.typography.titleMediumDropCap,
) )
) )
} }
item.subTitle?.let { item.subTitle?.let {
Text( Text(
modifier = Modifier.alignByBaseline(), modifier = Modifier.alignByBaseline(),
style = MaterialTheme.typography.bodyMedium, style = MaterialTheme.typography.labelSmall,
fontWeight = FontWeight.Light, fontWeight = FontWeight.Light,
text = item.subTitle, fontStyle = FontStyle.Italic,
text = it,
) )
} }
} }

View file

@ -17,13 +17,13 @@ import androidx.compose.runtime.State
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.pixelized.rplexicon.R import com.pixelized.rplexicon.R
import com.pixelized.rplexicon.ui.theme.LexiconTheme import com.pixelized.rplexicon.ui.theme.LexiconTheme
import com.pixelized.rplexicon.utilitary.annotateWithDropCap
import com.pixelized.rplexicon.utilitary.extentions.lexicon
@Composable @Composable
fun LandingScreen() { fun LandingScreen() {
@ -44,11 +44,10 @@ private fun LandingContent(
items(count = 1) { items(count = 1) {
Text( Text(
modifier = Modifier.padding(horizontal = padding), modifier = Modifier.padding(horizontal = padding),
style = MaterialTheme.typography.titleLarge, style = MaterialTheme.typography.labelSmall,
text = annotateWithDropCap( fontStyle = FontStyle.Italic,
text = "Feuilles de personnages", fontWeight = FontWeight.Light,
style = MaterialTheme.lexicon.typography.titleLargeDropCap, text = "Feuilles de personnages",
),
) )
} }
items(items = items.value) { items(items = items.value) {
@ -64,19 +63,20 @@ private fun LandingContent(
} }
items(count = 1) { items(count = 1) {
Text( Text(
modifier = Modifier.padding(horizontal = padding), modifier = Modifier
style = MaterialTheme.typography.titleLarge, .padding(horizontal = padding)
text = annotateWithDropCap( .padding(top = padding),
text = "Lexique", style = MaterialTheme.typography.labelSmall,
MaterialTheme.lexicon.typography.titleLargeDropCap, fontStyle = FontStyle.Italic,
), fontWeight = FontWeight.Light,
text = "Encyclopédie",
) )
} }
items(count = 1) { items(count = 1) {
LandingItem( LandingItem(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
item = LandingItemUio( item = LandingItemUio(
title = "Personnages", title = "Lexique de personnages",
subTitle = null, subTitle = null,
icon = R.drawable.ic_visored_helm_24, icon = R.drawable.ic_visored_helm_24,
), ),
@ -100,7 +100,7 @@ private fun LandingContent(
LandingItem( LandingItem(
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
item = LandingItemUio( item = LandingItemUio(
title = "Cartes", title = "Cartes du monde",
subTitle = null, subTitle = null,
icon = R.drawable.ic_treasure_map_24, icon = R.drawable.ic_treasure_map_24,
), ),

View file

@ -35,7 +35,7 @@ data class LexiconTypography(
baselineShift = BaselineShift(-0.08f), baselineShift = BaselineShift(-0.08f),
), ),
val titleMediumDropCap: SpanStyle = base.titleMedium.toDropCapSpan( val titleMediumDropCap: SpanStyle = base.titleMedium.toDropCapSpan(
sizeRatio = 1.8f, sizeRatio = 1.7f,
antiLetterSpacing = 2.sp, antiLetterSpacing = 2.sp,
baselineShift = BaselineShift(-0.04f), baselineShift = BaselineShift(-0.04f),
), ),