Improving title wrapping on UserPost items (minmatarfleet#816)

* Improving title wrapping on UserPost items * Set post title as except when not present. Fix leaking 0 when no labels
beautifulmim · Oct 14, 2024 · c250876 · c250876
1 parent 2b6e803
commit c250876
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 48 deletions.
diff --git a/frontend/app/src/components/blocks/UserPosts.astro b/frontend/app/src/components/blocks/UserPosts.astro
@@ -22,6 +22,7 @@ const USER_POST_LIST_PARTIAL_URL = translatePath('/partials/user_post_list_compo
 import Flexblock from '@components/compositions/Flexblock.astro';
 import BlockList from '@components/compositions/BlockList.astro';
 import FlexInline from '@components/compositions/FlexInline.astro';
+import FluidFixed from '@components/compositions/FluidFixed.astro';
 
 import Button from '@components/blocks/Button.astro';
 import ComponentBlock from '@components/blocks/ComponentBlock.astro';
@@ -33,56 +34,60 @@ import TextGroup from '@components/blocks/TextGroup.astro';
         {posts.map(post =>
             <ComponentBlock x-show="show_item($el)" width='narrow'>
                 <Flexblock gap='var(--space-m)'>
-                    <FlexInline gap='var(--space-l)' justification='space-between'>
+                    <FluidFixed class="[ !items-center ]" width={post.state === 'draft' ? '100px' : '155px'} gap='var(--space-l)'>
                         <h3>{post.title}</h3>
                         {(post.state !== 'trash' && post.state === 'draft') ?
-                            <Button
-                                type="button"
-                                size='sm'
-                                color='green'
-                                x-data={`{
-                                    show_publish_post_confirm() {
-                                        show_confirm_dialog({
-                                            title: '${t('publish_post_dialog_title')}',
-                                            content: '${t('publish_post_dialog_text')}',
-                                            hx: {
-                                                method: 'patch',
-                                                url: '${USER_POST_LIST_PARTIAL_URL}?id=${post.post_id}&new_state=published',
-                                                target: '#user-post-list',
-                                                swap: 'outerHTML transition:true'
-                                            }
-                                        })
-                                    }
-                                }`}
-                                x-on:click="show_publish_post_confirm"
-                            >
-                                {t('publish')}
-                            </Button>
+                            <div class="[ text-right ]">
+                                <Button
+                                    type="button"
+                                    size='sm'
+                                    color='green'
+                                    x-data={`{
+                                        show_publish_post_confirm() {
+                                            show_confirm_dialog({
+                                                title: '${t('publish_post_dialog_title')}',
+                                                content: '${t('publish_post_dialog_text')}',
+                                                hx: {
+                                                    method: 'patch',
+                                                    url: '${USER_POST_LIST_PARTIAL_URL}?id=${post.post_id}&new_state=published',
+                                                    target: '#user-post-list',
+                                                    swap: 'outerHTML transition:true'
+                                                }
+                                            })
+                                        }
+                                    }`}
+                                    x-on:click="show_publish_post_confirm"
+                                >
+                                    {t('publish')}
+                                </Button>
+                            </div>
                             :
                             post.state !== 'trash' &&
-                            <Button
-                                type="button"
-                                size='sm'
-                                x-data={`{
-                                    show_unpublish_post_confirm() {
-                                        show_confirm_dialog({
-                                            title: '${t('unpublish_post_dialog_title')}',
-                                            content: '${t('unpublish_post_dialog_text')}',
-                                            hx: {
-                                                method: 'patch',
-                                                url: '${USER_POST_LIST_PARTIAL_URL}?id=${post.post_id}&new_state=draft',
-                                                target: '#user-post-list',
-                                                swap: 'outerHTML transition:true'
-                                            }
-                                        })
-                                    }
-                                }`}
-                                x-on:click="show_unpublish_post_confirm"
-                            >
-                                {t('switch_to_draft')}
-                            </Button>
+                            <div class="[ text-right ]">
+                                <Button
+                                    type="button"
+                                    size='sm'
+                                    x-data={`{
+                                        show_unpublish_post_confirm() {
+                                            show_confirm_dialog({
+                                                title: '${t('unpublish_post_dialog_title')}',
+                                                content: '${t('unpublish_post_dialog_text')}',
+                                                hx: {
+                                                    method: 'patch',
+                                                    url: '${USER_POST_LIST_PARTIAL_URL}?id=${post.post_id}&new_state=draft',
+                                                    target: '#user-post-list',
+                                                    swap: 'outerHTML transition:true'
+                                                }
+                                            })
+                                        }
+                                    }`}
+                                    x-on:click="show_unpublish_post_confirm"
+                                >
+                                    {t('switch_to_draft')}
+                                </Button>
+                            </div>
                         }
-                    </FlexInline>
+                    </FluidFixed>
                     <FlexInline gap='var(--space-l)' justification='space-between'>
                         <FlexInline gap='var(--space-l)'>
                             <TextGroup title={t('state')}><small>{t(post.state as any)}</small></TextGroup>

diff --git a/frontend/app/src/pages/alliance/posts/[post_id].astro b/frontend/app/src/pages/alliance/posts/[post_id].astro
@@ -54,7 +54,7 @@ import Button from '@components/blocks/Button.astro';
 import Tag from '@components/blocks/Tag.astro';
 
 const page_title = post?.title ?? t('new_post')
-const page_description = post?.excerpt
+const page_description = post?.excerpt ?? page_title
 ---
 
 <Viewport
@@ -94,9 +94,11 @@ const page_description = post?.excerpt
                         <small>{format_date(lang, post?.date_posted)}</small>
                     </PilotBadge>
 
-                    <p class="[ excerpt ]">{post?.excerpt}</p>
+                    {post?.excerpt &&
+                        <p class="[ excerpt ]">{post?.excerpt}</p>
+                    }
 
-                    {(post?.tags?.length ?? 0 > 0) &&
+                    {((post?.tags?.length ?? 0) > 0) &&
                         <FlexInline>
                             {post?.tags.map(tag =>
                                 <Tag text={tag} />