add:location detail

app/src/main/java/com/aiosman/riderpro/LocationDetail.kt

@@ -0,0 +1,332 @@
+package com.aiosman.riderpro
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.ScrollableDefaults
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
+import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
+import androidx.compose.foundation.lazy.staggeredgrid.items
+import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.filled.LocationOn
+import androidx.compose.material3.BottomSheetScaffold
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+data class OfficialGalleryItem(
+    val id: Int,
+    val resId: Int,
+)
+
+fun getOfficialGalleryItems(): List<OfficialGalleryItem> {
+    return listOf(
+        OfficialGalleryItem(1, R.drawable.default_moment_img),
+        OfficialGalleryItem(2, R.drawable.default_moment_img),
+        OfficialGalleryItem(3, R.drawable.default_moment_img),
+        OfficialGalleryItem(4, R.drawable.default_moment_img),
+        OfficialGalleryItem(5, R.drawable.default_moment_img),
+        OfficialGalleryItem(6, R.drawable.default_moment_img),
+        OfficialGalleryItem(7, R.drawable.default_moment_img),
+        OfficialGalleryItem(8, R.drawable.default_moment_img),
+        OfficialGalleryItem(9, R.drawable.default_moment_img),
+        OfficialGalleryItem(10, R.drawable.default_moment_img),
+        OfficialGalleryItem(11, R.drawable.default_moment_img),
+        OfficialGalleryItem(12, R.drawable.default_moment_img),
+        OfficialGalleryItem(13, R.drawable.default_moment_img),
+        OfficialGalleryItem(14, R.drawable.default_moment_img),
+        OfficialGalleryItem(15, R.drawable.default_moment_img),
+        OfficialGalleryItem(16, R.drawable.default_moment_img),
+        OfficialGalleryItem(17, R.drawable.default_moment_img),
+        OfficialGalleryItem(18, R.drawable.default_moment_img),
+        OfficialGalleryItem(19, R.drawable.default_moment_img),
+        OfficialGalleryItem(20, R.drawable.default_moment_img),
+    )
+}
+data class FeedItem(
+    val id: Int,
+    val resId: Int,
+)
+fun getFeedItems(): List<FeedItem> {
+    val image_pickups = listOf(
+        R.drawable.default_moment_img,
+        R.drawable.default_avatar,
+        R.drawable.rider_pro_moment_demo_1,
+        R.drawable.rider_pro_moment_demo_2,
+        R.drawable.rider_pro_moment_demo_3,
+    )
+    return (1..100).map {
+        FeedItem(it, image_pickups.random())
+    }
+}
+@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
+@Preview
+@Composable
+fun LocationDetail() {
+    val scope = rememberCoroutineScope()
+    val scaffoldState = rememberBottomSheetScaffoldState()
+    val configuration = LocalConfiguration.current
+    val officialGalleryItems = getOfficialGalleryItems()
+    val feedItems = getFeedItems()
+
+    // 2/3 height of the screen
+    fun getPeekHeight(): Dp {
+
+        val screenHeight = configuration.screenHeightDp
+        val peekHeight = (screenHeight * 2 / 3).dp
+        return peekHeight
+    }
+
+    fun getNoPeekHeight(): Dp {
+        val screenHeight = configuration.screenHeightDp
+        val peekHeight = (screenHeight * 1 / 3).dp
+        return peekHeight
+    }
+    Box(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(getNoPeekHeight() + 32.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.default_moment_img),
+                contentDescription = "Location Image",
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(getNoPeekHeight() + 32.dp),
+                contentScale = ContentScale.Crop
+            )
+        }
+        BottomSheetScaffold(
+            scaffoldState = scaffoldState,
+            sheetPeekHeight = getPeekHeight(),
+            sheetContainerColor = Color.White,
+            sheetContent = {
+                Column(
+                    Modifier
+                        .fillMaxWidth()
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .padding(horizontal = 16.dp)
+                    ) {
+                        Text("Location Name", fontSize = 24.sp, fontWeight = FontWeight.Bold)
+                        Spacer(modifier = Modifier.height(16.dp))
+                        FlowRow(
+                            horizontalArrangement = Arrangement.spacedBy(8.dp),
+                            verticalArrangement = Arrangement.spacedBy(8.dp)
+                        ) {
+                            repeat(10) {
+                                Box(
+                                    modifier = Modifier
+                                        .background(Color(0xFFF5F5F5))
+                                        .padding(horizontal = 8.dp, vertical = 4.dp)
+
+
+                                ) {
+                                    Text("Tag $it", color = Color(0xFFb2b2b2))
+                                }
+                            }
+                        }
+                        HorizontalDivider(
+                            modifier = Modifier.padding(vertical = 16.dp),
+                            color = Color(0xFFF5F5F5)
+                        )
+                        Row(
+                            modifier = Modifier.padding(vertical = 16.dp)
+                        ) {
+                            Column {
+                                Text(
+                                    "Location name",
+                                    fontSize = 16.sp,
+                                    fontWeight = FontWeight.Bold
+                                )
+                                Spacer(modifier = Modifier.height(8.dp))
+                                Text("距离46KM,骑行时间77分钟")
+                            }
+                            Spacer(modifier = Modifier.weight(1f))
+                            IconButton(
+                                onClick = { }
+                            ) {
+                                Icon(
+                                    Icons.Filled.LocationOn,
+                                    contentDescription = "Location"
+                                )
+                            }
+
+                        }
+                    }
+
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(8.dp)
+                            .background(Color(0xFFF5F5F5))
+                    )
+                    Column(
+                        modifier = Modifier
+                            .padding(horizontal = 16.dp)
+                            .padding(top = 16.dp)
+                    ) {
+                        Row {
+                            Text("官方摄影师作品", fontSize = 16.sp, fontWeight = FontWeight.Bold)
+                            Spacer(modifier = Modifier.weight(1f))
+                            Image(
+                                painter = painterResource(id = R.drawable.rider_pro_nav_next),
+                                contentDescription = "Next",
+                                modifier = Modifier.size(24.dp)
+                            )
+                        }
+
+                        Spacer(modifier = Modifier.height(16.dp))
+                        Row(
+                            modifier = Modifier.height(240.dp)
+                        ) {
+                            Box(
+                                modifier = Modifier.weight(1f)
+                            ) {
+                                Image(
+                                    painter = painterResource(id = R.drawable.default_avatar),
+                                    contentDescription = "Avatar",
+                                    modifier = Modifier.fillMaxSize()
+                                        .clip(MaterialTheme.shapes.medium),
+                                    contentScale = ContentScale.Crop
+                                )
+                            }
+                            Spacer(modifier = Modifier.width(16.dp))
+                            Box(
+                                modifier = Modifier.weight(1f)
+                            ) {
+                                Image(
+                                    painter = painterResource(id = R.drawable.default_avatar),
+                                    contentDescription = "Avatar",
+                                    modifier = Modifier
+                                        .fillMaxSize()
+                                        .clip(MaterialTheme.shapes.medium),
+                                    contentScale = ContentScale.Crop
+                                )
+                            }
+                        }
+                    }
+                    Spacer(modifier = Modifier.height(16.dp))
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(8.dp)
+                            .background(Color(0xFFF5F5F5))
+                    )
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(horizontal = 16.dp, vertical = 16.dp)
+                    ) {
+                        Text("车友动态", fontSize = 16.sp, fontWeight = FontWeight.Bold)
+                    }
+                    LazyVerticalStaggeredGrid(
+                        columns = StaggeredGridCells.Fixed(2), // Set to 2 columns
+                        modifier = Modifier.fillMaxSize(),
+                        state = rememberLazyStaggeredGridState(),
+                        contentPadding = PaddingValues(16.dp),
+                        horizontalArrangement = Arrangement.spacedBy(16.dp),
+                        flingBehavior = ScrollableDefaults.flingBehavior(),
+                    ) {
+                        items(feedItems) { item ->
+                            Column(
+                                modifier = Modifier
+                                    .fillMaxWidth()
+                                    .padding(bottom = 16.dp)
+                            ) {
+                                Image(
+                                    painter = painterResource(id = item.resId),
+                                    contentDescription = "Feed",
+                                    modifier = Modifier.fillMaxWidth()
+                                        .clip(MaterialTheme.shapes.medium),
+                                    contentScale = ContentScale.FillWidth
+                                )
+                                Spacer(modifier = Modifier.height(8.dp))
+                                Column(
+                                    modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp)
+                                ) {
+                                    Box(
+                                        modifier = Modifier.fillMaxWidth()
+                                    ) {
+                                        Text("Some text")
+
+                                    }
+                                    Spacer(modifier = Modifier.height(8.dp))
+                                    Row(
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Image(
+                                            painter = painterResource(id = R.drawable.default_avatar),
+                                            contentDescription = "Avatar",
+                                            modifier = Modifier.size(18.dp)
+                                                .clip(CircleShape),
+                                            contentScale = ContentScale.Crop
+                                        )
+                                        Spacer(modifier = Modifier.width(8.dp))
+                                        Text("Username", color = Color(0xFF666666), fontSize = 14.sp)
+                                        Spacer(modifier = Modifier.weight(1f))
+                                        Icon(
+                                            Icons.Filled.Favorite,
+                                            contentDescription = "Location"
+                                        )
+                                        Spacer(modifier = Modifier.width(4.dp))
+                                        Text("100K", fontSize = 14.sp)
+                                    }
+                                }
+
+                            }
+
+                        }
+
+                    }
+
+
+                }
+
+            }
+        ) { innerPadding ->
+
+        }
+    }
+
+
+}

app/src/main/java/com/aiosman/riderpro/MainActivity.kt

@@ -34,6 +34,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.core.view.WindowCompat
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
@@ -46,6 +47,8 @@ import com.google.accompanist.systemuicontroller.rememberSystemUiController
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+
         enableEdgeToEdge()
         setContent {
             Navigation()
@@ -86,6 +89,9 @@ fun NavigationController(navController: NavHostController) {
         composable(route = "ProfileTimeline") {
             GalleryPage()
         }
+        composable(route="LocationDetail") {
+            LocationDetail()
+        }
     }
 }
 
@@ -106,6 +112,7 @@ fun Navigation() {
         Scaffold(
             modifier = Modifier.statusBarsPadding(),
             topBar = {},
+
             bottomBar = {
                 NavigationBar(
                     modifier = Modifier.height(56.dp + navigationBarHeight),
@@ -162,9 +169,9 @@ fun Navigation() {
                     }
                 }
             }
-        ) { paddingValues ->
+        ) {  it
             Box(
-                modifier = Modifier.padding(paddingValues)
+                modifier = Modifier.padding(it.calculateTopPadding())
             ) {
                 NavigationController(navController = navController)
             }

app/src/main/java/com/aiosman/riderpro/Street.kt

@@ -1,6 +1,7 @@
 package com.aiosman.riderpro
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -14,6 +15,7 @@ import com.google.maps.android.compose.rememberCameraPositionState
 
 @Composable
 fun StreetPage(){
+    val navController = LocalNavController.current
     val cameraPositionState = rememberCameraPositionState {
         position = CameraPosition.fromLatLngZoom(
             LatLng(countries[1].lat, countries[1].lng),
@@ -26,6 +28,10 @@ fun StreetPage(){
         countries.forEach { position ->
             MarkerComposable(
                 state = MarkerState(position = LatLng(position.lat, position.lng)),
+                onClick = { it ->
+                    navController.navigate("LocationDetail")
+                    true
+                }
             ) {
                 Image(
                     painter = painterResource(id = R.drawable.rider_pro_map_mark),

app/src/main/res/drawable/rider_pro_eye.xml

@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M1.935,8.061C1.935,8.061 4.045,3.869 7.739,3.869C11.433,3.869 13.543,8.061 13.543,8.061C13.543,8.061 11.433,12.253 7.739,12.253C4.045,12.253 1.935,8.061 1.935,8.061Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.05532867"
+      android:fillColor="#00000000"
+      android:strokeColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M6.156,8.061a1.583,1.572 0,1 0,3.166 0a1.583,1.572 0,1 0,-3.166 0z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.05532867"
+      android:fillColor="#00000000"
+      android:strokeColor="#FFFFFF"
+      android:fillType="evenOdd"
+      android:strokeLineCap="round"/>
+</vector>

app/src/main/res/drawable/rider_pro_nav_next.xml

@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,6L9,6L13.5,12L9,18L12,18L16.5,12L12,6Z"
+      android:strokeWidth="1"
+      android:fillColor="#000000"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>