Improved display for small screens (#288)

Co-authored-by: Antoine Robiez <[email protected]>
paug · Apr 19, 2024 · 6fad725 · 6fad725
1 parent 3a8bb6a
commit 6fad725
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 53 deletions.
diff --git a/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/common/navigation/AVALayout.kt b/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/common/navigation/AVALayout.kt
@@ -23,12 +23,12 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.MediumTopAppBar
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.rememberDrawerState
 import androidx.compose.runtime.Composable
@@ -83,15 +83,15 @@ fun AVALayout(
   val userFlow = remember { UserData().userRepository.user }
 
   val agendaFilterDrawerState = rememberDrawerState(DrawerValue.Closed)
-  val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
+  val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
 
   val user by userFlow.collectAsStateWithLifecycle()
 
   Scaffold(
       modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
       contentWindowInsets = WindowInsets(0, 0, 0, 0),
       topBar = {
-        MediumTopAppBar(
+        TopAppBar(
             scrollBehavior = scrollBehavior,
             colors = TopAppBarDefaults.topAppBarColors(
                 containerColor = MaterialTheme.colorScheme.background,
@@ -113,7 +113,7 @@ fun AVALayout(
 
                 Text(
                     text = stringResource(MR.strings.app_name),
-                    style = MaterialTheme.typography.headlineSmall,
+                    style = MaterialTheme.typography.titleSmall,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis
                 )

diff --git a/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/speakers/SpeakerDetailsScreen.kt b/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/speakers/SpeakerDetailsScreen.kt
@@ -3,11 +3,11 @@ package com.androidmakers.ui.speakers
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.rounded.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -84,6 +84,7 @@ fun SpeakerDetailsScreen(
   ) { innerPadding ->
     Column(
         modifier = Modifier
+          .verticalScroll(rememberScrollState())
             .padding(innerPadding)
             .padding(16.dp),
         verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically)

diff --git a/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/speakers/SpeakerListScreen.kt b/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/speakers/SpeakerListScreen.kt
@@ -4,15 +4,12 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
@@ -31,16 +28,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.semantics.isTraversalGroup
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.layout.onSizeChanged
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import com.androidmakers.ui.common.LoadingLayout
 import com.androidmakers.ui.model.Lce
 import com.seiko.imageloader.rememberImagePainter
@@ -70,50 +66,19 @@ fun SpeakerScreen(
       var active by rememberSaveable { mutableStateOf(false) }
       val content = (state as Lce.Content<SpeakersUiState>).content
 
+      var searchHeight by remember { mutableStateOf(56.dp) }
+
       Box(Modifier.fillMaxSize()) {
-        Box(Modifier
-            .semantics { isTraversalGroup = true }
-            .background(MaterialTheme.colorScheme.background)
-            .padding(bottom = 8.dp)
-            .zIndex(1f)
-            .fillMaxWidth()) {
-
-          SearchBar(
-              modifier = Modifier.align(Alignment.TopCenter),
-              query = text,
-              onQueryChange = { text = it },
-              onSearch = { active = false },
-              active = active,
-              colors = SearchBarDefaults.colors(
-                  containerColor = MaterialTheme.colorScheme.surface,
-                  dividerColor = MaterialTheme.colorScheme.primary,
-              ),
-              onActiveChange = {
-                active = it
-              },
-              windowInsets = WindowInsets(0, 0, 0, 0),
-              placeholder = { Text(stringResource(MR.strings.speaker_search_placeholder)) },
-              leadingIcon = { Icon(Icons.Rounded.Search, contentDescription = null) }
-          ) {
-            LazyColumn {
-              val speakers = content.speakers
-              items(speakers.filter { it.name?.contains(text, ignoreCase = true) == true }) { speaker ->
-                SpeakerItem(
-                    speaker = speaker,
-                    navigateToSpeakerDetails = navigateToSpeakerDetails,
-                )
-              }
-            }
-          }
-        }
+
+          val density = LocalDensity.current
 
         AnimatedVisibility(
             visible = !active,
             enter = fadeIn(),
             exit = fadeOut(),
         ) {
           LazyColumn(
-              contentPadding = PaddingValues(start = 0.dp, top = 72.dp, end = 0.dp, bottom = 16.dp),
+              contentPadding = PaddingValues(top = searchHeight + 16.dp),
               verticalArrangement = Arrangement.spacedBy(8.dp)
           ) {
             items(content.speakers.filter { it.name?.contains(text, ignoreCase = true) == true }) { speaker ->
@@ -124,6 +89,38 @@ fun SpeakerScreen(
             }
           }
         }
+
+
+        SearchBar(
+          windowInsets = WindowInsets(0.dp, 0.dp, 0.dp, 0.dp),
+          modifier = Modifier.align(Alignment.TopCenter)
+            .onSizeChanged {
+              searchHeight = with(density) { it.height.toDp() }
+            },
+          query = text,
+          onQueryChange = { text = it },
+          onSearch = { active = false },
+          active = active,
+          colors = SearchBarDefaults.colors(
+            containerColor = MaterialTheme.colorScheme.surface,
+            dividerColor = MaterialTheme.colorScheme.primary,
+          ),
+          onActiveChange = {
+            active = it
+          },
+          placeholder = { Text(stringResource(MR.strings.speaker_search_placeholder)) },
+          leadingIcon = { Icon(Icons.Rounded.Search, contentDescription = null) }
+        ) {
+          LazyColumn {
+            val speakers = content.speakers
+            items(speakers.filter { it.name?.contains(text, ignoreCase = true) == true }) { speaker ->
+              SpeakerItem(
+                speaker = speaker,
+                navigateToSpeakerDetails = navigateToSpeakerDetails,
+              )
+            }
+          }
+        }
       }
     }
 

diff --git a/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/theme/Typo.kt b/shared/ui/src/commonMain/kotlin/com/androidmakers/ui/theme/Typo.kt
@@ -51,8 +51,8 @@ fun androidMakersTypography() = Typography(
   ),
   titleSmall = TextStyle(
     fontFamily = montserratFamily(),
-    fontWeight = FontWeight.Bold,
-    fontSize = 16.sp,
+    fontWeight = FontWeight.SemiBold,
+    fontSize = 14.sp,
   ),
   labelLarge = TextStyle(
     fontFamily = montserratFamily(),
@@ -61,12 +61,11 @@ fun androidMakersTypography() = Typography(
   ),
   labelMedium = TextStyle(
     fontFamily = montserratFamily(),
-    fontWeight = FontWeight.SemiBold,
     fontSize = 12.sp,
   ),
   labelSmall = TextStyle(
     fontFamily = montserratFamily(),
-    fontSize = 12.sp,
+    fontSize = 11.sp,
   ),
   bodyLarge = TextStyle(
     fontFamily = montserratFamily(),