fix(posts): make the website on PostCard more visible (#171)

mangocubed · Feb 1, 2025 · f9caf71 · f9caf71
1 parent 5e83097
commit f9caf71
Show file tree

Hide file tree

Showing 15 changed files with 83 additions and 60 deletions.
diff --git a/locales/leptos/en/shared.yaml b/locales/leptos/en/shared.yaml
@@ -32,6 +32,7 @@ my_account: My account
 new_password: New password
 new_website: New website
 no_results_found: No results found.
+on_subdomain: on {{subdomain}}
 one_comment: 1 comment
 one_day_ago: one day ago
 one_hour_ago: one hour ago

diff --git a/locales/leptos/es/shared.yaml b/locales/leptos/es/shared.yaml
@@ -32,6 +32,7 @@ my_account: Mi cuenta
 new_password: Contraseña nueva
 new_website: Nuevo website
 no_results_found: No se encontraron resultados.
+on_subdomain: en {{subdomain}}
 one_comment: 1 comentario
 one_day_ago: hace un día
 one_hour_ago: hace una hora

diff --git a/mango3-home/src/pages/index_page.rs b/mango3-home/src/pages/index_page.rs
@@ -14,8 +14,8 @@ pub fn IndexPage() -> impl IntoView {
 
     view! {
         <Page title=move || t_string!(i18n, shared.home)>
-            <div class="flex flex-wrap gap-6 justify-center w-full">
-                <section class="flex-1 sm:min-w-[480px] max-w-[640px] w-full">
+            <div class="flex flex-wrap gap-6 justify-center max-w-[1200px] mx-auto">
+                <section class="shrink-0 sm:min-w-[480px] max-w-[720px] w-full">
                     <h2 class="h2">{t!(i18n, home.recent_posts)}</h2>
 
                     <Suspense>
@@ -38,7 +38,7 @@ pub fn IndexPage() -> impl IntoView {
                     </a>
                 </section>
 
-                <section class="flex-1 sm:min-w-[480px] max-w-[640px] w-full">
+                <section class="flex-1 sm:min-w-[320px] max-w-[640px] w-full">
                     <h2 class="h2">{t!(i18n, home.recent_websites)}</h2>
 
                     <Suspense>

diff --git a/mango3-home/src/pages/posts_page.rs b/mango3-home/src/pages/posts_page.rs
@@ -21,7 +21,7 @@ pub fn PostsPage() -> impl IntoView {
         <Page title=title>
             <h2 class="h2">{title}</h2>
 
-            <section class="max-w-[640px] w-full ml-auto mr-auto">
+            <section class="max-w-[720px] w-full ml-auto mr-auto">
                 <InfiniteScroll controller=controller key=|post: &PostPreviewResp| post.id.clone() let:post>
                     <PostCard post=post show_host=true />
                 </InfiniteScroll>

diff --git a/mango3-home/src/pages/search_page.rs b/mango3-home/src/pages/search_page.rs
@@ -20,7 +20,7 @@ pub fn SearchPage() -> impl IntoView {
         <Page title=title>
             <h1 class="h2">{title}</h1>
 
-            <section class="max-w-[640px] w-full mx-auto">
+            <section class="max-w-[720px] w-full mx-auto">
                 <div role="tablist" class="tabs tabs-bordered mb-5">
                     <a
                         role="tab"

diff --git a/mango3-home/src/pages/show_hashtag_page.rs b/mango3-home/src/pages/show_hashtag_page.rs
@@ -34,7 +34,7 @@ pub fn ShowHashtagPage() -> impl IntoView {
                                 <Page title=title.clone()>
                                     <h1 class="h2">{title}</h1>
 
-                                    <section class="max-w-[640px] w-full mx-auto">
+                                    <section class="max-w-[720px] w-full mx-auto">
                                         <InfiniteScroll
                                             controller=controller
                                             key=|post: &PostPreviewResp| post.id.clone()

diff --git a/mango3-home/src/pages/show_user_page.rs b/mango3-home/src/pages/show_user_page.rs
@@ -66,7 +66,7 @@ pub fn ShowUserPage() -> impl IntoView {
                                             </div>
                                         </div>
 
-                                        <div class="shrink-0 max-w-[640px] w-full">
+                                        <div class="shrink-0 max-w-[720px] w-full">
                                             <InfiniteScroll
                                                 controller=controller
                                                 key=|post: &PostPreviewResp| post.id.clone()

diff --git a/mango3-leptos-utils/src/components/mod.rs b/mango3-leptos-utils/src/components/mod.rs
@@ -119,16 +119,31 @@ pub fn GoToMango3() -> impl IntoView {
     let i18n = use_i18n();
 
     view! {
-        <a class="btn btn-ghost btn-block px-2" href=basic_config.home_url.clone()>
-            {t!(i18n, shared.go_to_title, title = basic_config.title.clone())}
+        <a class="btn btn-ghost btn-block px-2 font-normal" href=basic_config.home_url.clone()>
+            {t!(
+                i18n,
+                shared.go_to_title,
+                title = {
+                    let icon_url = basic_config.asset_url("icon.svg");
+                    let title = basic_config.title.clone();
+                    move || view! {
+                        <img alt=title.clone() class="h-[16px]" src=icon_url.clone() />
+                        <span class="font-bold">{title.clone()}</span>
+                    }
+                }
+            )}
         </a>
     }
 }
 
 #[component]
-pub fn WebsiteIcon(#[prop(into)] website: WebsitePreviewResp, #[prop(default = 32)] size: u16) -> impl IntoView {
+pub fn WebsiteIcon(
+    #[prop(into, optional)] class: &'static str,
+    #[prop(into)] website: WebsitePreviewResp,
+    #[prop(default = 32)] size: u16,
+) -> impl IntoView {
     view! {
-        <div class="avatar">
+        <div class=format!("avatar {class}")>
             <div class="rounded" style:width=format!("{size}px") style:height=format!("{size}px")>
                 <img alt=website.initials.clone() src=website.icon_image_url(size) />
             </div>

diff --git a/mango3-leptos-utils/src/components/post_bottom_bar.rs b/mango3-leptos-utils/src/components/post_bottom_bar.rs
@@ -1,9 +1,17 @@
+use chrono::{DateTime, Utc};
 use leptos::prelude::*;
 
-use crate::i18n::{t_string, use_i18n};
+use crate::components::TimeAgo;
+use crate::i18n::{t, t_string, use_i18n};
 
 #[component]
-pub fn PostBottomBar(comments_count: i64, reactions_count: i64, views_count: i64) -> impl IntoView {
+pub fn PostBottomBar(
+    comments_count: i64,
+    reactions_count: i64,
+    views_count: i64,
+    created_at: DateTime<Utc>,
+    modified_at: Option<DateTime<Utc>>,
+) -> impl IntoView {
     let i18n = use_i18n();
 
     view! {
@@ -37,6 +45,22 @@ pub fn PostBottomBar(comments_count: i64, reactions_count: i64, views_count: i64
                     }
                 }}
             </div>
+
+            <div class="flex-1 text-right">
+                <TimeAgo value=created_at />
+
+                {move || {
+                    modified_at
+                        .map(|modified_at| {
+                            view! {
+                                " ("
+                                {t!(i18n, shared.edited)}
+                                <span class="hidden md:inline">" "<TimeAgo value=modified_at /></span>
+                                ")"
+                            }
+                        })
+                }}
+            </div>
         </div>
     }
 }
diff --git a/mango3-leptos-utils/src/components/post_card.rs b/mango3-leptos-utils/src/components/post_card.rs
@@ -1,10 +1,10 @@
 use leptos::prelude::*;
 
-use crate::components::Hashtags;
+use crate::components::{Hashtags, WebsiteIcon};
 use crate::i18n::{t, use_i18n};
 use crate::models::PostPreviewResp;
 
-use super::{PostBottomBar, TimeAgo, UserTagLink};
+use super::{PostBottomBar, UserTagLink};
 
 #[component]
 pub fn PostCard(
@@ -49,26 +49,23 @@ pub fn PostCard(
                 <div class="flex justify-between my-1">
                     <UserTagLink user=post.user />
 
-                    <div class="text-right opacity-70">
-                        <TimeAgo value=post.created_at />
-
-                        {move || {
-                            post.modified_at
-                                .map(|modified_at| {
-                                    view! {
-                                        " ("
-                                        {t!(i18n, shared.edited)}
-                                        " "
-                                        <TimeAgo value=modified_at />
-                                        ")"
+                    <Show when=move || show_host>
+                        <div class="text-right">
+                            {t!(
+                                i18n,
+                                shared.on_subdomain,
+                                subdomain = {
+                                    let website = post.website.clone();
+                                    move || view! {
+                                        <a class="font-bold ml-2" href=website.url.clone() title=website.name.clone()>
+                                            <WebsiteIcon class="align-middle mr-2" size=16 website=website.clone() />
+                                            {website.host.clone()}
+                                        </a>
                                     }
-                                })
-                        }}
-
-                        <Show when=move || show_host>
-                            <div class="text-right opacity-70">{post.website.host.clone()}</div>
-                        </Show>
-                    </div>
+                                }
+                            )}
+                        </div>
+                    </Show>
                 </div>
 
                 <a href=href class="card-text-preview">
@@ -88,6 +85,8 @@ pub fn PostCard(
                     comments_count=post.comments_count
                     reactions_count=post.reactions_count
                     views_count=post.views_count
+                    created_at=post.created_at
+                    modified_at=post.modified_at
                 />
 
                 {actions.map(|a| view! { <div class="card-actions justify-end">{a.run()}</div> })}

diff --git a/mango3-studio/src/pages/websites/posts_page.rs b/mango3-studio/src/pages/websites/posts_page.rs
@@ -49,7 +49,7 @@ pub fn PostsPage() -> impl IntoView {
 
         <h2 class="h2">{t!(i18n, shared.posts)}</h2>
 
-        <section class="flex justify-end max-w-[640px] w-full mb-5 mx-auto">
+        <section class="flex justify-end max-w-[720px] w-full mb-5 mx-auto">
             <a
                 class="btn btn-outline"
                 href=move || format!("/websites/{}/posts/new", param_website_id(params_map).unwrap_or_default())
@@ -59,7 +59,7 @@ pub fn PostsPage() -> impl IntoView {
             </a>
         </section>
 
-        <section class="max-w-[640px] w-full mx-auto">
+        <section class="max-w-[720px] w-full mx-auto">
             <InfiniteScroll
                 controller=controller
                 key=|post: &PostPreviewResp| post.id.clone()

diff --git a/mango3-websites/src/pages/index_page.rs b/mango3-websites/src/pages/index_page.rs
@@ -50,7 +50,7 @@ pub fn IndexPage() -> impl IntoView {
                                         </div>
                                     </div>
 
-                                    <div class="shrink-0 max-w-[640px] w-full">
+                                    <div class="shrink-0 max-w-[720px] w-full">
                                         <InfiniteScroll
                                             controller=controller
                                             key=|post: &PostPreviewResp| post.id.clone()

diff --git a/mango3-websites/src/pages/search_page.rs b/mango3-websites/src/pages/search_page.rs
@@ -36,7 +36,7 @@ pub fn SearchPage() -> impl IntoView {
                             <Page title=title>
                                 <h1 class="h2">{title}</h1>
 
-                                <section class="max-w-[640px] w-full mx-auto">
+                                <section class="max-w-[720px] w-full mx-auto">
                                     <InfiniteScroll
                                         controller=controller
                                         key=|post: &PostPreviewResp| post.id.clone()

diff --git a/mango3-websites/src/pages/show_hashtag_page.rs b/mango3-websites/src/pages/show_hashtag_page.rs
@@ -59,7 +59,7 @@ pub fn ShowHashtagPage() -> impl IntoView {
                                     <Page title=title.clone()>
                                         <h1 class="h2">{title}</h1>
 
-                                        <section class="max-w-[640px] w-full mx-auto">
+                                        <section class="max-w-[720px] w-full mx-auto">
                                             <InfiniteScroll
                                                 controller=controller
                                                 key=|post: &PostPreviewResp| post.id.clone()

diff --git a/mango3-websites/src/pages/show_post_page.rs b/mango3-websites/src/pages/show_post_page.rs
@@ -3,8 +3,7 @@ use leptos::prelude::*;
 use leptos_meta::Meta;
 use leptos_router::hooks::use_params_map;
 
-use mango3_leptos_utils::components::{Hashtags, LoadingSpinner, PostBottomBar, TimeAgo, UserTagLink};
-use mango3_leptos_utils::i18n::{t, use_i18n};
+use mango3_leptos_utils::components::{Hashtags, LoadingSpinner, PostBottomBar, UserTagLink};
 use mango3_leptos_utils::pages::NotFoundPage;
 use mango3_leptos_utils::pages::Page;
 
@@ -14,7 +13,6 @@ use crate::server_functions::get_post;
 
 #[component]
 pub fn ShowPostPage() -> impl IntoView {
-    let i18n = use_i18n();
     let params_map = use_params_map();
     let post_resource = Resource::new_blocking(move || param_slug(params_map), get_post);
 
@@ -74,25 +72,8 @@ pub fn ShowPostPage() -> impl IntoView {
                                         } <div class="card-body">
                                             <h1 class="card-title h1 mb-6">{post.title}</h1>
 
-                                            <div class="flex justify-between my-4">
+                                            <div class="my-4">
                                                 <UserTagLink user=post.user />
-
-                                                <div class="text-right opacity-70">
-                                                    <TimeAgo value=post.created_at />
-
-                                                    {move || {
-                                                        post.modified_at
-                                                            .map(|modified_ad| {
-                                                                view! {
-                                                                    " ("
-                                                                    {t!(i18n, shared.edited)}
-                                                                    " "
-                                                                    <TimeAgo value=modified_ad />
-                                                                    ")"
-                                                                }
-                                                            })
-                                                    }}
-                                                </div>
                                             </div>
 
                                             <div
@@ -108,6 +89,8 @@ pub fn ShowPostPage() -> impl IntoView {
                                                 comments_count=post.comments_count
                                                 reactions_count=post.reactions_count
                                                 views_count=post.views_count
+                                                created_at=post.created_at
+                                                modified_at=post.modified_at
                                             />
 
                                             <PostReactions post_id=post.id.clone() />