Skip to content

Commit

Permalink
Make the About screen look a little better
Browse files Browse the repository at this point in the history
  • Loading branch information
@cristan
cristan committed Aug 29, 2024
1 parent 4f7397e commit b9e93a7
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 62 deletions.
13 changes: 13 additions & 0 deletions app/src/main/java/com/ovfietsbeschikbaarheid/ui/components/OvCard.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.ovfietsbeschikbaarheid.ui.theme.OVFietsBeschikbaarheidTheme

@Composable
fun OvCard(
Expand All @@ -32,4 +35,14 @@ fun OvCard(
) {
Column(Modifier.padding(contentPadding), content = content)
}
}

@Preview
@Composable
fun OvCardPreview() {
OVFietsBeschikbaarheidTheme {
OvCard {
Text(text = "Test")
}
}
}
113 changes: 51 additions & 62 deletions app/src/main/java/com/ovfietsbeschikbaarheid/ui/screen/AboutScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.ovfietsbeschikbaarheid.ui.screen

import android.content.res.Configuration
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
Expand All @@ -16,16 +17,10 @@ import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextLinkStyles
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withLink
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.ovfietsbeschikbaarheid.ext.withStyledLink
import com.ovfietsbeschikbaarheid.ui.components.OvCard
import com.ovfietsbeschikbaarheid.ui.theme.OVFietsBeschikbaarheidTheme
import com.ovfietsbeschikbaarheid.ui.theme.Yellow50

Expand Down Expand Up @@ -67,76 +62,70 @@ private fun AboutView(
modifier = Modifier
.padding(innerPadding)
.verticalScroll(rememberScrollState())
.padding(start = 20.dp, end = 20.dp, bottom = 20.dp, top = 4.dp)
.padding(20.dp)
) {
OvCard {
Text(
text = "Over de OV Fiets",
style = MaterialTheme.typography.headlineMedium,
)
val annotatedString = buildAnnotatedString {
Text(
text = "Over de OV-fiets",
style = MaterialTheme.typography.headlineLarge,
)

Text(
modifier = Modifier.padding(top = 4.dp),
text = buildAnnotatedString {
append("Met je OV-chipkaart kun je een OV-fiets huren. Je hebt hiervoor een abonnement nodig dat je gratis online kunt afsluiten. Meer informatie vind je op ")
withStyledLink(text = "ns.nl/ov-fiets", url = "https://ns.nl/ov-fiets")
append(".")
}
)

Text(
modifier = Modifier.padding(top = 4.dp),
text = annotatedString
)
}
OvCard {
Text(
text = "Over deze app",
style = MaterialTheme.typography.headlineMedium,
)
Text(
modifier = Modifier.padding(top = 4.dp),
text = "Deze app is ontwikkeld op eigen initiatief en is dan ook niet gelieerd aan de Nederlandse Spoorwegen (de exploitant van de OV fiets)."
)
}
OvCard {
Text(
text = "Bij niet-kloppende data",
style = MaterialTheme.typography.headlineMedium,
)
Text(
modifier = Modifier.padding(top = 4.dp),
text = "De data van deze app komt van OpenOV, maar de bron hiervan is de NS. Als er iets mis is met data als het aantal beschikbare OV fietsen, de openingstijden of het adres, neem dan op met de NS klantenservice."
)
}
OvCard {
Text(
text = "Credits",
style = MaterialTheme.typography.headlineMedium,
)
val annotatedString = buildAnnotatedString {
append("Kaart icoon gemaakt door ")
withLink(
LinkAnnotation.Url(
url = "https://www.freepik.com/free-vector/map-white-background_4485469.htm", styles = TextLinkStyles(
style = SpanStyle(
color = MaterialTheme.colorScheme.primary,
textDecoration = TextDecoration.Underline
)
)
)
) {
append("brgfx op Freepik")
}
Text(
text = "Over deze app",
style = MaterialTheme.typography.headlineLarge,
modifier = Modifier.padding(top = 20.dp)
)
Text(
modifier = Modifier.padding(top = 4.dp),
text = buildAnnotatedString {
append("Deze app is open source! Bekijk de broncode op ")
withStyledLink(text = "github.com/cristan/OvFietsBeschikbaarheidApp", url = "https://github.com/cristan/OvFietsBeschikbaarheidApp")
append(". De app is niet gelieerd aan de NS (de exploitant van de OV-fiets).")
}
)
Text(
text = "Credits",
style = MaterialTheme.typography.headlineLarge,
modifier = Modifier.padding(top = 20.dp)
)
Text(
modifier = Modifier.padding(top = 4.dp),
text = "De data wordt geleverd door OpenOV, met de NS als uiteindelijke bron."
)
Text(
modifier = Modifier.padding(top = 4.dp),
text = buildAnnotatedString {
append("Het totale aantal fietsen per locatie komt van ")
withStyledLink(text = "ovfietsbeschikbaar.nl", url = "https://ovfietsbeschikbaar.nl")
append(".")
}
)
Text(
modifier = Modifier.padding(top = 4.dp),
text = buildAnnotatedString {
append("Het kaarticoon is gemaakt door ")
withStyledLink(
text = "brgfx op Freepik",
url = "https://www.freepik.com/free-vector/map-white-background_4485469.htm"
)
append(".")
}
Text(
modifier = Modifier.padding(top = 4.dp),
text = annotatedString
)
}
)
}
}
}
}

@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark mode")
@Composable
fun AboutPreview() {
AboutView(
Expand Down

0 comments on commit b9e93a7

Please sign in to comment.