feat: make experience card layout responsive

Author: nsh07

composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/AppHomeScreen.kt

@@ -134,7 +134,8 @@ fun AppHomeScreen(
                     experiences,
                     projectState,
                     cardPadding,
-                    uriHandler
+                    uriHandler,
+                    wide = true
                 )
             }
         }
@@ -237,6 +238,7 @@ fun AppHomeScreen(
                     projectState,
                     cardPadding,
                     uriHandler,
+                    wide = false,
                     topPadding = 96.dp
                 )
             }

composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/ExperienceCard.kt

@@ -34,53 +34,71 @@ import kotlin.text.Typography.nbsp
 fun ExperienceCard(
     experience: Experience,
     cardPadding: Dp,
+    wide: Boolean,
     modifier: Modifier = Modifier
 ) {
-    val colorScheme = colorScheme
+    colorScheme
     val uriHandler = LocalUriHandler.current
 
     Box(
         modifier
             .clip(shapes.largeIncreased)
             .clickable { uriHandler.openUri(experience.companyUrl) }
     ) {
-        Row(Modifier.fillMaxWidth().padding(cardPadding)) {
-            Text(
-                remember {
-                    "${experience.start.replace(' ', nbsp)} $mdash ${
-                        experience.end.replace(
-                            ' ',
-                            nbsp
-                        )
-                    }".toUpperCase(Locale.current)
-                },
-                style = typography.labelMedium,
-                color = colorScheme.outline,
-                modifier = Modifier.padding(top = 4.dp, end = 16.dp).weight(1f)
-            )
-            Column(Modifier.weight(3f)) {
-                FlowRow(itemVerticalAlignment = Alignment.CenterVertically) {
-                    Text(experience.position, style = typography.bodyLarge, fontWeight = FontWeight.Medium)
-                    Text(" $bullet ", style = typography.bodyLarge, fontWeight = FontWeight.Medium)
-                    Text(experience.company, style = typography.bodyLarge, fontWeight = FontWeight.Medium)
-                    Icon(
-                        painterResource(Res.drawable.open_in_browser),
-                        null,
-                        modifier = Modifier.padding(start = 4.dp).size(16.dp)
-                    )
-                }
-                Text(
-                    experience.description,
-                    style = typography.bodyMedium,
-                    color = colorScheme.onSurfaceVariant,
-                    modifier = Modifier.padding(top = 8.dp)
-                )
-                if (experience.skills.isNotEmpty()) LabelRow(experience.skills, Modifier.padding(top = 16.dp))
+        if (wide) {
+            Row(Modifier.fillMaxWidth().padding(cardPadding)) {
+                ExperienceCardDurationText(experience, Modifier.weight(1f))
+                ExperienceCardMainContent(experience, Modifier.weight(3f))
+            }
+        } else {
+            Column(Modifier.fillMaxWidth().padding(cardPadding)) {
+                ExperienceCardDurationText(experience)
+                ExperienceCardMainContent(experience)
             }
         }
     }
 }
 
+@Composable
+fun ExperienceCardDurationText(experience: Experience, modifier: Modifier = Modifier) {
+    Text(
+        remember {
+            "${experience.start.replace(' ', nbsp)} $mdash ${
+                experience.end.replace(
+                    ' ',
+                    nbsp
+                )
+            }".toUpperCase(Locale.current)
+        },
+        style = typography.labelMedium,
+        color = colorScheme.outline,
+        modifier = Modifier.padding(top = 4.dp, bottom = 8.dp, end = 16.dp).then(modifier)
+    )
+}
+
+@Composable
+fun ExperienceCardMainContent(experience: Experience, modifier: Modifier = Modifier) {
+    Column(modifier) {
+        FlowRow(itemVerticalAlignment = Alignment.CenterVertically) {
+            Text(experience.position, style = typography.bodyLarge, fontWeight = FontWeight.Medium)
+            Text(" $bullet ", style = typography.bodyLarge, fontWeight = FontWeight.Medium)
+            Text(experience.company, style = typography.bodyLarge, fontWeight = FontWeight.Medium)
+            Icon(
+                painterResource(Res.drawable.open_in_browser),
+                null,
+                modifier = Modifier.padding(start = 4.dp).size(16.dp)
+            )
+        }
+        Text(
+            experience.description,
+            style = typography.bodyMedium,
+            color = colorScheme.onSurfaceVariant,
+            modifier = Modifier.padding(top = 8.dp)
+        )
+        if (experience.skills.isNotEmpty()) LabelRow(experience.skills, Modifier.padding(top = 16.dp))
+    }
+}
+
 @Composable
 fun LabelRow(list: List<String>, modifier: Modifier = Modifier) {
     FlowRow(

composeApp/src/wasmJsMain/kotlin/org/nsh07/nsh07/ui/homeScreen/HomeScreenContent.kt

@@ -89,6 +89,7 @@ fun LazyListScope.mainContent(
     projectState: ProjectsState,
     cardPadding: Dp,
     uriHandler: UriHandler,
+    wide: Boolean,
     topPadding: Dp = 0.dp
 ) {
     items(paragraphs, key = { it.substring(0, 16) }) {
@@ -102,7 +103,12 @@ fun LazyListScope.mainContent(
     }
     item("experience spacer") { Spacer(Modifier.height(112.dp)) }
     items(experiences, key = { it.start }) {
-        ExperienceCard(experience = it, cardPadding = cardPadding, modifier = Modifier.padding(bottom = 32.dp))
+        ExperienceCard(
+            experience = it,
+            cardPadding = cardPadding,
+            wide = wide,
+            modifier = Modifier.padding(bottom = 32.dp)
+        )
     }
     item("linkedin link text") {
         Row(