Skip to content

Commit d3ab7a5

Browse files
authored
improve scroll on the course outline screen (#25)
1 parent 4c7ef8d commit d3ab7a5

File tree

2 files changed

+72
-76
lines changed

2 files changed

+72
-76
lines changed

course/src/main/java/com/raccoongang/course/presentation/outline/CourseOutlineFragment.kt

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -204,28 +204,20 @@ internal fun CourseOutlineScreen(
204204
)
205205
}
206206

207-
val imageHeight by remember(key1 = windowSize) {
207+
val listBottomPadding by remember(key1 = windowSize) {
208208
mutableStateOf(
209209
windowSize.windowSizeValue(
210-
expanded = 300.dp,
211-
compact = 250.dp
210+
expanded = PaddingValues(bottom = 24.dp),
211+
compact = PaddingValues(bottom = 24.dp)
212212
)
213213
)
214214
}
215215

216216
val listPadding by remember(key1 = windowSize) {
217217
mutableStateOf(
218218
windowSize.windowSizeValue(
219-
expanded = PaddingValues(
220-
start = 6.dp,
221-
end = 6.dp,
222-
bottom = 24.dp
223-
),
224-
compact = PaddingValues(
225-
start = 24.dp,
226-
end = 24.dp,
227-
bottom = 24.dp
228-
)
219+
expanded = Modifier.padding(horizontal = 6.dp),
220+
compact = Modifier.padding(horizontal = 24.dp)
229221
)
230222
)
231223
}
@@ -277,26 +269,26 @@ internal fun CourseOutlineScreen(
277269
CircularProgressIndicator(color = MaterialTheme.appColors.primary)
278270
}
279271
}
272+
280273
is CourseOutlineUIState.CourseData -> {
281-
Column(
282-
Modifier
283-
.fillMaxSize()
274+
LazyColumn(
275+
modifier = Modifier.fillMaxSize(),
276+
contentPadding = listBottomPadding
284277
) {
285-
CourseImageHeader(
286-
modifier = Modifier
287-
.aspectRatio(1.86f)
288-
.padding(6.dp),
289-
courseImage = uiState.courseStructure.media?.image?.large
290-
?: "",
291-
courseCertificate = uiState.courseStructure.certificate
292-
)
293-
LazyColumn(
294-
modifier = Modifier.fillMaxWidth(),
295-
contentPadding = listPadding
296-
) {
297-
if (uiState.resumeBlock != null) {
298-
item {
299-
Spacer(Modifier.height(28.dp))
278+
item {
279+
CourseImageHeader(
280+
modifier = Modifier
281+
.aspectRatio(1.86f)
282+
.padding(6.dp),
283+
courseImage = uiState.courseStructure.media?.image?.large
284+
?: "",
285+
courseCertificate = uiState.courseStructure.certificate
286+
)
287+
}
288+
if (uiState.resumeBlock != null) {
289+
item {
290+
Spacer(Modifier.height(28.dp))
291+
Box(listPadding) {
300292
if (windowSize.isTablet) {
301293
ResumeCourseTablet(
302294
block = uiState.resumeBlock,
@@ -310,7 +302,9 @@ internal fun CourseOutlineScreen(
310302
}
311303
}
312304
}
313-
items(uiState.courseStructure.blockData) { block ->
305+
}
306+
items(uiState.courseStructure.blockData) { block ->
307+
Column(listPadding) {
314308
if (block.type == BlockType.CHAPTER) {
315309
Text(
316310
modifier = Modifier.padding(
@@ -423,7 +417,11 @@ private fun ResumeCourseTablet(
423417
modifier = Modifier.fillMaxWidth(),
424418
horizontalArrangement = Arrangement.SpaceBetween
425419
) {
426-
Column(Modifier.weight(1f).padding(end = 35.dp)) {
420+
Column(
421+
Modifier
422+
.weight(1f)
423+
.padding(end = 35.dp)
424+
) {
427425
Text(
428426
text = stringResource(id = com.raccoongang.course.R.string.course_continue_with),
429427
style = MaterialTheme.appTypography.labelMedium,

course/src/main/java/com/raccoongang/course/presentation/videos/CourseVideosFragment.kt

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -179,28 +179,20 @@ private fun CourseVideosScreen(
179179
)
180180
}
181181

182-
val imageHeight by remember(key1 = windowSize) {
182+
val listBottomPadding by remember(key1 = windowSize) {
183183
mutableStateOf(
184184
windowSize.windowSizeValue(
185-
expanded = 260.dp,
186-
compact = 200.dp
185+
expanded = PaddingValues(bottom = 24.dp),
186+
compact = PaddingValues(bottom = 24.dp)
187187
)
188188
)
189189
}
190190

191191
val listPadding by remember(key1 = windowSize) {
192192
mutableStateOf(
193193
windowSize.windowSizeValue(
194-
expanded = PaddingValues(
195-
start = 6.dp,
196-
end = 6.dp,
197-
bottom = 24.dp
198-
),
199-
compact = PaddingValues(
200-
start = 24.dp,
201-
end = 24.dp,
202-
bottom = 24.dp
203-
)
194+
expanded = Modifier.padding(horizontal = 6.dp),
195+
compact = Modifier.padding(horizontal = 24.dp)
204196
)
205197
)
206198
}
@@ -261,6 +253,7 @@ private fun CourseVideosScreen(
261253
)
262254
}
263255
}
256+
264257
is CourseVideosUIState.Loading -> {
265258
Box(
266259
modifier = Modifier.fillMaxSize(),
@@ -269,40 +262,45 @@ private fun CourseVideosScreen(
269262
CircularProgressIndicator(color = MaterialTheme.appColors.primary)
270263
}
271264
}
265+
272266
is CourseVideosUIState.CourseData -> {
273-
CourseImageHeader(
274-
modifier = Modifier
275-
.aspectRatio(1.86f)
276-
.padding(6.dp),
277-
courseImage = uiState.courseStructure.media?.image?.large
278-
?: "",
279-
courseCertificate = uiState.courseStructure.certificate
280-
)
281267
LazyColumn(
282-
modifier = Modifier.fillMaxWidth(),
283-
contentPadding = listPadding
268+
modifier = Modifier.fillMaxSize(),
269+
contentPadding = listBottomPadding
284270
) {
271+
item {
272+
CourseImageHeader(
273+
modifier = Modifier
274+
.aspectRatio(1.86f)
275+
.padding(6.dp),
276+
courseImage = uiState.courseStructure.media?.image?.large
277+
?: "",
278+
courseCertificate = uiState.courseStructure.certificate
279+
)
280+
}
285281
items(uiState.courseStructure.blockData) { block ->
286-
if (block.type == BlockType.CHAPTER) {
287-
Text(
288-
modifier = Modifier.padding(
289-
top = 36.dp,
290-
bottom = 8.dp
291-
),
292-
text = block.displayName,
293-
style = MaterialTheme.appTypography.titleMedium,
294-
color = MaterialTheme.appColors.textPrimaryVariant
295-
)
296-
} else {
297-
CourseSectionCard(
298-
block = block,
299-
downloadedState = uiState.downloadedState[block.id],
300-
onItemClick = { blockSelected ->
301-
onItemClick(blockSelected)
302-
},
303-
onDownloadClick = onDownloadClick
304-
)
305-
Divider()
282+
Column(listPadding) {
283+
if (block.type == BlockType.CHAPTER) {
284+
Text(
285+
modifier = Modifier.padding(
286+
top = 36.dp,
287+
bottom = 8.dp
288+
),
289+
text = block.displayName,
290+
style = MaterialTheme.appTypography.titleMedium,
291+
color = MaterialTheme.appColors.textPrimaryVariant
292+
)
293+
} else {
294+
CourseSectionCard(
295+
block = block,
296+
downloadedState = uiState.downloadedState[block.id],
297+
onItemClick = { blockSelected ->
298+
onItemClick(blockSelected)
299+
},
300+
onDownloadClick = onDownloadClick
301+
)
302+
Divider()
303+
}
306304
}
307305
}
308306
}

0 commit comments

Comments
 (0)