fix(ui): margins and dividers around cards

2025-02-09 15:28:42 +01:00 · 2023-09-26 08:09:17 +02:00 · 2023-09-26 08:09:17 +02:00 · d504664e8f
commit d504664e8f
parent e6a2e4666e
11 changed files with 73 additions and 34 deletions
--- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/communitydetail/CommunityDetailScreen.kt
+++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/communitydetail/CommunityDetailScreen.kt
@ -33,6 +33,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@ -59,6 +60,7 @@ import cafe.adriel.voyager.core.model.rememberScreenModel
 import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
 import com.github.diegoberaldin.racconforlemmy.core.utils.onClick
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
 import com.github.diegoberaldin.raccoonforlemmy.core.commonui.communityInfo.CommunityInfoScreen
@ -402,6 +404,11 @@ class CommunityDetailScreen(
                                    )
                                },
                            )
+                            if (uiState.postLayout != PostLayout.Card) {
+                                Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                            } else {
+                                Spacer(modifier = Modifier.height(Spacing.xs))
+                            }
                        }
                        item {
                            if (!uiState.loading && !uiState.refreshing && uiState.canFetchMore) {
--- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/InboxMentionCard.kt
+++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/InboxMentionCard.kt
@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@ -48,16 +47,10 @@ fun InboxMentionCard(
        Box(
            modifier = Modifier.let {
                if (postLayout == PostLayout.Card) {
-                    it.padding(bottom = Spacing.xs)
-                        .background(
-                            color = MaterialTheme.colorScheme.surfaceVariant,
-                            shape = RoundedCornerShape(CornerSize.l),
-                        ).padding(
-                            top = Spacing.s,
-                            bottom = Spacing.s,
-                            start = Spacing.s,
-                            end = Spacing.s,
-                        )
+                    it.background(
+                        color = MaterialTheme.colorScheme.surfaceVariant,
+                        shape = RoundedCornerShape(CornerSize.l),
+                    ).padding(Spacing.s)
                } else {
                    it.background(MaterialTheme.colorScheme.surface)
                }
@ -72,9 +65,15 @@ fun InboxMentionCard(
                    mention = mention,
                )
                PostCardBody(
+                    modifier = Modifier.padding(
+                        horizontal = Spacing.xs,
+                    ),
                    text = mention.comment.text,
                )
                InboxReplySubtitle(
+                    modifier = Modifier.padding(
+                        horizontal = Spacing.xs,
+                    ),
                    creator = mention.creator,
                    community = mention.community,
                    date = mention.publishDate,
@ -92,10 +91,6 @@ fun InboxMentionCard(
                        onDownVote?.invoke(mention.comment)
                    },
                )
-
-                if (postLayout != PostLayout.Card) {
-                    Divider(modifier = Modifier.padding(vertical = Spacing.s))
-                }
            }
        }
    }
--- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/InboxReplyHeader.kt
+++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/InboxReplyHeader.kt
@ -28,7 +28,7 @@ fun InboxReplyHeader(mention: PersonMentionModel) {
        }
    }
    Text(
-        modifier = Modifier.padding(vertical = Spacing.xs),
+        modifier = Modifier.padding(vertical = Spacing.xs, horizontal = Spacing.xs),
        text = header,
        style = MaterialTheme.typography.bodySmall,
        color = MaterialTheme.colorScheme.onBackground,
--- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/PostCard.kt
+++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/components/PostCard.kt
@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@ -63,16 +62,10 @@ fun PostCard(
        Box(
            modifier = modifier.let {
                if (postLayout == PostLayout.Card) {
-                    it.padding(bottom = Spacing.xs)
-                        .background(
-                            color = MaterialTheme.colorScheme.surfaceVariant,
-                            shape = RoundedCornerShape(CornerSize.l),
-                        ).padding(
-                            top = Spacing.s,
-                            bottom = Spacing.s,
-                            start = Spacing.s,
-                            end = Spacing.s,
-                        )
+                    it.background(
+                        color = MaterialTheme.colorScheme.surfaceVariant,
+                        shape = RoundedCornerShape(CornerSize.l),
+                    ).padding(Spacing.s)
                } else {
                    it
                }
@ -82,7 +75,6 @@ fun PostCard(
                ExtendedPost(
                    post = post,
                    hideAuthor = hideAuthor,
-                    withDivider = postLayout == PostLayout.Full,
                    backgroundColor = when (postLayout) {
                        PostLayout.Card -> MaterialTheme.colorScheme.surfaceVariant
                        else -> MaterialTheme.colorScheme.surface
@ -179,7 +171,6 @@ private fun CompactPost(
            options = options,
            onOptionSelected = onOptionSelected,
        )
-        Divider(modifier = Modifier.padding(vertical = Spacing.s))
    }
 }

@ -189,7 +180,6 @@ private fun ExtendedPost(
    post: PostModel,
    hideAuthor: Boolean = false,
    blurNsfw: Boolean,
-    withDivider: Boolean = false,
    withOverflowBlurred: Boolean = true,
    backgroundColor: Color = MaterialTheme.colorScheme.background,
    options: List<String> = emptyList(),
@ -279,9 +269,5 @@ private fun ExtendedPost(
            options = options,
            onOptionSelected = onOptionSelected,
        )
-
-        if (withDivider) {
-            Divider(modifier = Modifier.padding(vertical = Spacing.s))
-        }
    }
 }
--- a/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/userdetail/UserDetailScreen.kt
+++ b/core-commonui/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/core/commonui/userdetail/UserDetailScreen.kt
@ -31,6 +31,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@ -57,6 +58,7 @@ import cafe.adriel.voyager.core.model.rememberScreenModel
 import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
 import com.github.diegoberaldin.racconforlemmy.core.utils.onClick
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
 import com.github.diegoberaldin.raccoonforlemmy.core.commonui.chat.InboxChatScreen
@ -344,6 +346,11 @@ class UserDetailScreen(
                                        )
                                    },
                                )
+                                if (uiState.postLayout != PostLayout.Card) {
+                                    Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                                } else {
+                                    Spacer(modifier = Modifier.height(Spacing.xs))
+                                }
                            }
                        } else {
                            itemsIndexed(uiState.comments) { idx, comment ->
--- a/feature-home/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/home/postlist/PostListScreen.kt
+++ b/feature-home/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/home/postlist/PostListScreen.kt
@ -22,6 +22,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@ -44,6 +45,7 @@ import cafe.adriel.voyager.core.model.rememberScreenModel
 import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
 import com.github.diegoberaldin.racconforlemmy.core.utils.onClick
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
@ -289,6 +291,11 @@ class PostListScreen : Screen {
                                        )
                                    },
                                )
+                                if (uiState.postLayout != PostLayout.Card) {
+                                    Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                                } else {
+                                    Spacer(modifier = Modifier.height(Spacing.xs))
+                                }
                            }
                        }
                        item {
--- a/feature-inbox/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/inbox/mentions/InboxMentionsScreen.kt
+++ b/feature-inbox/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/inbox/mentions/InboxMentionsScreen.kt
@ -21,6 +21,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@ -34,6 +35,7 @@ import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.rememberScreenModel
 import cafe.adriel.voyager.navigator.tab.Tab
 import cafe.adriel.voyager.navigator.tab.TabOptions
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
 import com.github.diegoberaldin.raccoonforlemmy.core.commonui.communitydetail.CommunityDetailScreen
@ -152,6 +154,11 @@ class InboxMentionsScreen : Tab {
                            )
                        },
                    )
+                    if (uiState.postLayout != PostLayout.Card) {
+                        Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                    } else {
+                        Spacer(modifier = Modifier.height(Spacing.xs))
+                    }
                }
                item {
                    if (!uiState.loading && !uiState.refreshing && uiState.canFetchMore) {
--- a/feature-inbox/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/inbox/replies/InboxRepliesScreen.kt
+++ b/feature-inbox/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/inbox/replies/InboxRepliesScreen.kt
@ -23,6 +23,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@ -39,6 +40,7 @@ import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.model.rememberScreenModel
 import cafe.adriel.voyager.navigator.tab.Tab
 import cafe.adriel.voyager.navigator.tab.TabOptions
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
@ -181,6 +183,11 @@ class InboxRepliesScreen : Tab {
                                )
                            },
                        )
+                        if (uiState.postLayout != PostLayout.Card) {
+                            Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                        } else {
+                            Spacer(modifier = Modifier.height(Spacing.xs))
+                        }
                    }
                }
                item {
--- a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/ProfileLoggedScreen.kt
+++ b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/logged/ProfileLoggedScreen.kt
@ -17,6 +17,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
@ -31,6 +32,7 @@ import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
 import cafe.adriel.voyager.navigator.tab.Tab
 import cafe.adriel.voyager.navigator.tab.TabOptions
 import com.github.diegoberaldin.racconforlemmy.core.utils.onClick
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
 import com.github.diegoberaldin.raccoonforlemmy.core.commonui.communitydetail.CommunityDetailScreen
@ -181,6 +183,11 @@ internal object ProfileLoggedScreen : Tab {
                                        }
                                    }
                                )
+                                if (uiState.postLayout != PostLayout.Card) {
+                                    Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                                } else {
+                                    Spacer(modifier = Modifier.height(Spacing.xs))
+                                }
                            }
                        } else {
                            items(uiState.comments) { comment ->
--- a/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/saved/ProfileSavedScreen.kt
+++ b/feature-profile/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/profile/content/saved/ProfileSavedScreen.kt
@ -4,8 +4,10 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+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.lazy.LazyColumn
@ -17,6 +19,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@ -37,6 +40,7 @@ import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
 import cafe.adriel.voyager.navigator.tab.Tab
 import cafe.adriel.voyager.navigator.tab.TabOptions
 import com.github.diegoberaldin.racconforlemmy.core.utils.onClick
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
 import com.github.diegoberaldin.raccoonforlemmy.core.commonui.communitydetail.CommunityDetailScreen
@ -214,6 +218,11 @@ internal class ProfileSavedScreen(
                                        )
                                    },
                                )
+                                if (uiState.postLayout != PostLayout.Card) {
+                                    Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                                } else {
+                                    Spacer(modifier = Modifier.height(Spacing.xs))
+                                }
                            }
                        } else {
                            itemsIndexed(uiState.comments) { idx, comment ->
--- a/feature-search/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/search/content/ExploreScreen.kt
+++ b/feature-search/src/commonMain/kotlin/com/github/diegoberaldin/raccoonforlemmy/feature/search/content/ExploreScreen.kt
@ -20,6 +20,7 @@ import androidx.compose.material.pullrefresh.PullRefreshIndicator
 import androidx.compose.material.pullrefresh.pullRefresh
 import androidx.compose.material.pullrefresh.rememberPullRefreshState
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@ -46,6 +47,7 @@ import cafe.adriel.voyager.core.model.rememberScreenModel
 import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.navigator.bottomSheet.LocalBottomSheetNavigator
 import com.github.diegoberaldin.racconforlemmy.core.utils.onClick
+import com.github.diegoberaldin.raccoonforlemmy.core.appearance.data.PostLayout
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.di.getThemeRepository
 import com.github.diegoberaldin.raccoonforlemmy.core.appearance.theme.Spacing
 import com.github.diegoberaldin.raccoonforlemmy.core.architecture.bindToLifecycle
@ -296,6 +298,11 @@ class ExploreScreen : Screen {
                                                )
                                            },
                                        )
+                                        if (uiState.postLayout != PostLayout.Card) {
+                                            Divider(modifier = Modifier.padding(vertical = Spacing.s))
+                                        } else {
+                                            Spacer(modifier = Modifier.height(Spacing.xs))
+                                        }
                                    }

                                    is CommentModel -> {