anandbose/anand-bose.github.io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement scroll

Browse source
This commit is contained in:
Anand Bose 2024-12-31 11:48:39 +05:30
parent cc5d19a405
commit 00d8318818
Signed by: anandbose
GPG key ID: 69698042BA46B2B5
2 changed files with 90 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

171
composeApp/src/commonMain/kotlin/dev/anandbose/ui/app/App.kt
View file

@ -9,6 +9,7 @@ import anandbose.composeapp.generated.resources.social_medium
import anandbose.composeapp.generated.resources.social_twitter import anandbose.composeapp.generated.resources.social_twitter
import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
@ -19,6 +20,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.widthIn import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.grid.GridCells import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.GridItemSpan
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.lazy.items import androidx.compose.foundation.lazy.items
@ -58,98 +60,103 @@ fun App() {
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.TopCenter, contentAlignment = Alignment.TopCenter,
) { ) {
//val scrollState = rememberScrollState() val columns = when {
Column( maxWidth > 660.dp -> 3
maxWidth in 440.dp .. 660.dp -> 2
else -> 1
}
LazyVerticalGrid(
modifier = Modifier modifier = Modifier
.widthIn(max = 760.dp) .widthIn(max = 760.dp)
.padding(horizontal = 32.dp), .padding(horizontal = 32.dp),
//.verticalScroll(state = scrollState), columns = GridCells.Fixed(count = columns),
horizontalAlignment = Alignment.CenterHorizontally, horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp),
) { ) {
AsyncImage( item(span = { GridItemSpan(columns) }) {
model = "https://avatars.githubusercontent.com/u/64779880?v=4", Box(
modifier = Modifier
.padding(top = 32.dp)
.clip(CircleShape)
.size(size = 128.dp),
contentDescription = null
)
Text(
modifier = Modifier.padding(top = 16.dp),
text = "Anand Bose",
style = MaterialTheme.typography.titleLarge,
)
Text(
modifier = Modifier.padding(top = 8.dp),
text = "I'm passionate about building software with Kotlin and Compose.",
style = MaterialTheme.typography.labelLarge,
textAlign = TextAlign.Center,
)
if (this@BoxWithConstraints.maxWidth > 480.dp) {
LazyVerticalGrid(
modifier = Modifier.padding(top = 32.dp), modifier = Modifier.padding(top = 32.dp),
columns = GridCells.Adaptive(minSize = 200.dp), contentAlignment = Alignment.Center,
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) { ) {
items(items = Links) { AsyncImage(
UrlButtonLarge( model = "https://avatars.githubusercontent.com/u/64779880?v=4",
modifier = Modifier.fillMaxWidth(), modifier = Modifier
icon = painterResource(it.icon), .clip(CircleShape)
text = it.title, .size(size = 128.dp),
url = it.url, contentDescription = null
) )
}
}
} else {
LazyColumn(
modifier = Modifier.padding(top = 32.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
items(items = Links) {
UrlButtonSmall(
modifier = Modifier.fillMaxWidth(),
icon = painterResource(it.icon),
text = it.title,
url = it.url,
)
}
} }
} }
Text( item(span = { GridItemSpan(columns) }) {
modifier = Modifier.padding(vertical = 32.dp), Text(
text = buildAnnotatedString { text = "Anand Bose",
append("This website is built with ") style = MaterialTheme.typography.titleLarge,
styledLink( textAlign = TextAlign.Center,
url = "https://www.jetbrains.com/compose-multiplatform/", )
text = "Compose Multiplatform", }
item(span = { GridItemSpan(columns) }) {
Text(
modifier = Modifier.padding(bottom = 24.dp),
text = "I'm passionate about building software with Kotlin and Compose.",
style = MaterialTheme.typography.labelLarge,
textAlign = TextAlign.Center,
)
}
if (columns > 1) {
items(Links) {
UrlButtonLarge(
modifier = Modifier.fillMaxWidth(),
icon = painterResource(it.icon),
text = it.title,
url = it.url,
) )
append(" and ") }
styledLink( } else {
url = "https://kotlinlang.org/docs/wasm-overview.html", items(Links) {
text = "Kotlin/WASM", UrlButtonSmall(
modifier = Modifier.fillMaxWidth(),
icon = painterResource(it.icon),
text = it.title,
url = it.url,
) )
append(". The icons are sourced from ") }
styledLink( }
url = "https://icons8.com", item(span = { GridItemSpan(columns) }) {
text = "icons8.com", Text(
) modifier = Modifier.padding(vertical = 32.dp),
append(" and converted to Vector Drawable using ") text = buildAnnotatedString {
styledLink( append("This website is built with ")
url = "https://shapeshifter.design", styledLink(
text = "ShapeShifter", url = "https://www.jetbrains.com/compose-multiplatform/",
) text = "Compose Multiplatform",
append(". Source code is available on ") )
styledLink( append(" and ")
url = "https://github.com/anandbosedev/anandbosedev.github.io", styledLink(
text = "GitHub", url = "https://kotlinlang.org/docs/wasm-overview.html",
) text = "Kotlin/WASM",
append(".") )
}, append(". The icons are sourced from ")
textAlign = TextAlign.Center, styledLink(
style = MaterialTheme.typography.bodySmall, url = "https://icons8.com",
color = MaterialTheme.colorScheme.onSurfaceVariant, text = "icons8.com",
) )
append(" and converted to Vector Drawable using ")
styledLink(
url = "https://shapeshifter.design",
text = "ShapeShifter",
)
append(". Source code is available on ")
styledLink(
url = "https://github.com/anandbosedev/anandbosedev.github.io",
text = "GitHub",
)
append(".")
},
textAlign = TextAlign.Center,
style = MaterialTheme.typography.bodySmall,
color = MaterialTheme.colorScheme.onSurfaceVariant,
)
}
} }
} }
} }

2
composeApp/src/commonMain/kotlin/dev/anandbose/ui/widget/UrlButtonLarge.kt
View file

@ -24,7 +24,7 @@ fun UrlButtonLarge(
) { ) {
Button( Button(
modifier = modifier, modifier = modifier,
shape = MaterialTheme.shapes.small, shape = MaterialTheme.shapes.medium,
content = { content = {
Column( Column(
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,