Change the layout of the landing page.
This commit is contained in:
parent
39249147fc
commit
2f113a14d6
3 changed files with 26 additions and 22 deletions
|
|
@ -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,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
),
|
),
|
||||||
|
|
|
||||||
|
|
@ -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),
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue