Develop (#37)

* Refactor and improve auto-scrolling * Improve lesson text * WIP: Content * Ensure IDs uniqueness * WIP: Content * Finish lesson * Multiple choice question "Select all" UI fix * Fixes * Lesson fixes * Improve question * Improve Lesson card
Ivy-Apps · Jun 6, 2024 · 78ac972 · 78ac972
1 parent 1613993
commit 78ac972
Show file tree

Hide file tree

Showing 12 changed files with 424 additions and 75 deletions.
diff --git a/composeApp/src/commonMain/kotlin/ui/screen/course/composable/LessonCard.kt b/composeApp/src/commonMain/kotlin/ui/screen/course/composable/LessonCard.kt
@@ -46,7 +46,9 @@ fun LessonCard(
         ),
         onClick = onLessonClick
     ) {
-        Row {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
             var height by remember { mutableStateOf(132.dp) }
             LessonImage(
                 modifier = Modifier.height(height),

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonAutoScroll.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonAutoScroll.kt
@@ -0,0 +1,52 @@
+package ui.screen.lesson.composable
+
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import component.ScreenType.*
+import component.screenType
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.coroutines.delay
+import ui.screen.lesson.LessonItemViewState
+import ui.screen.lesson.OpenQuestionItemViewState
+import ui.screen.lesson.QuestionItemViewState
+
+@Composable
+fun AutoScrollEffect(
+    listState: LazyListState,
+    items: ImmutableList<LessonItemViewState>,
+) {
+    val itemsCount = items.size
+    LaunchedEffect(itemsCount) {
+        if (itemsCount >= 2 && !items[itemsCount - 2].isQuestion()) {
+            // ensure auto scrolls works for images that are loading
+            repeat(4) {
+                listState.animateScrollToItem(items.lastIndex)
+                delay(200)
+            }
+        }
+    }
+}
+
+fun LazyListScope.autoScrollEmptySpace() {
+    item("empty_space") {
+        Spacer(
+            Modifier.height(
+                when (screenType()) {
+                    Mobile, Tablet -> 32.dp
+                    Desktop -> 136.dp
+                }
+            )
+        )
+    }
+}
+
+private fun LessonItemViewState.isQuestion(): Boolean = when (this) {
+    is QuestionItemViewState, is OpenQuestionItemViewState -> true
+    else -> false
+}
diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonContent.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/LessonContent.kt
@@ -1,19 +1,20 @@
 package ui.screen.lesson.composable
 
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import component.BackButton
 import component.LearnScaffold
 import component.ScreenType.*
 import component.screenType
-import kotlinx.coroutines.delay
 import ui.screen.lesson.*
 import ui.screen.lesson.composable.item.*
 
@@ -74,16 +75,10 @@ private fun LessonItemsLazyColum(
     }
     val listState = rememberLazyListState()
 
-    val itemsCount = viewState.items.size
-    LaunchedEffect(itemsCount) {
-        if (itemsCount >= 2 && !viewState.items[itemsCount - 2].isQuestion()) {
-            // ensure auto scrolls works for images that are loading
-            repeat(4) {
-                listState.animateScrollToItem(viewState.items.lastIndex)
-                delay(200)
-            }
-        }
-    }
+    AutoScrollEffect(
+        listState = listState,
+        items = viewState.items,
+    )
 
     LazyColumn(
         modifier = modifier
@@ -162,20 +157,6 @@ private fun LessonItemsLazyColum(
                 )
             }
         }
-        item("empty_space") {
-            Spacer(
-                Modifier.height(
-                    when (screenType()) {
-                        Mobile, Tablet -> 32.dp
-                        Desktop -> 200.dp
-                    }
-                )
-            )
-        }
+        autoScrollEmptySpace()
     }
-}
-
-private fun LessonItemViewState.isQuestion(): Boolean = when (this) {
-    is QuestionItemViewState, is OpenQuestionItemViewState -> true
-    else -> false
 }
diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/ImageLessonItem.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/ImageLessonItem.kt
@@ -20,7 +20,7 @@ fun ImageLessonItem(
     KamelImage(
         modifier = modifier
             .padding(top = ItemSpacingMedium)
-            .size(264.dp)
+            .size(304.dp)
             .clip(RoundedCornerShape(16.dp)),
         resource = asyncPainterResource(viewState.imageUrl),
         contentDescription = null

diff --git a/...seApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/LottieAnimationLessonItem.kt b/...seApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/LottieAnimationLessonItem.kt
@@ -17,7 +17,7 @@ fun LottieAnimationLessonItem(
     RemoteLottieAnimation(
         modifier = modifier
             .padding(ItemSpacing)
-            .size(232.dp),
+            .size(304.dp),
         animationUrl = viewState.lottieUrl,
         repeat = true,
     )

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/QuestionLessonItem.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/composable/item/QuestionLessonItem.kt
@@ -8,6 +8,8 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import component.button.PrimaryButton
 import component.text.Body
@@ -81,6 +83,8 @@ private fun SelectAllThatApplyText(
     BodySmall(
         modifier = modifier,
         text = "Select all that apply:",
+        color = Color.Gray,
+        fontWeight = FontWeight.Bold,
     )
 }
 

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/lesson/mapper/LessonViewStateMapper.kt b/composeApp/src/commonMain/kotlin/ui/screen/lesson/mapper/LessonViewStateMapper.kt
@@ -153,8 +153,8 @@ class LessonViewStateMapper(
         style = when (style) {
             Heading -> TextStyleViewState.Heading
             Body -> TextStyleViewState.Body
-            BodyMediumSpacing -> TextStyleViewState.BodyMediumSpacing
-            BodyBigSpacing -> TextStyleViewState.BodyBigSpacing
+            BodySpacingMedium -> TextStyleViewState.BodyMediumSpacing
+            BodySpacingLarge -> TextStyleViewState.BodyBigSpacing
         }
     )
 

diff --git a/server/src/main/kotlin/ivy/learn/data/cms/course/programming/ProgrammingFundamentals.kt b/server/src/main/kotlin/ivy/learn/data/cms/course/programming/ProgrammingFundamentals.kt
@@ -9,8 +9,8 @@ object ProgrammingFundamentals : CourseDsl({
     imageUrl = "https://i.ibb.co/PTXn42F/fundamentals.webp"
     lesson(
         name = "Programming: Math in disguise",
-        tagline = "Mathematical functions and your calculator can do much more than you think." +
-                " Goal: learn to create and compose pure math functions.",
+        tagline = "Mathematical functions can do much more than you think." +
+                " Function Composition.",
         imageUrl = LessonImage
     )
 })