365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make components RTL compatible

Browse Source
This commit is contained in:
prototypa
2023-08-10 14:47:19 -04:00
parent 0d7f2eb683
commit c0c4cd1ccf
20 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/blog/ListItem.astro
View File

@@ -47,7 +47,7 @@ const link = APP_BLOG_CONFIG?.post?.isEnabled ? getPermalink(post.permalink, 'po
<div class="mb-1">
<span class="text-sm">
<Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
<time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
{
post.category && (
<>

6
src/components/blog/SinglePost.astro
View File

@@ -25,13 +25,13 @@ const Content = post?.Content || null;
<div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
<p>
<Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
<time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
<time datetime={String(post.publishDate)} class="inline-block">{getFormattedDate(post.publishDate)}</time>
{
post.category && (
<>
{' '}
·{' '}
<a class="capitalize hover:underline" href={getPermalink(post.category, 'category')}>
<a class="capitalize hover:underline inline-block" href={getPermalink(post.category, 'category')}>
{post.category.replaceAll('-', ' ')}
</a>
</>
@@ -86,7 +86,7 @@ const Content = post?.Content || null;
}
</div>
<div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
<PostTags tags={post.tags} class="mr-5" />
<PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
<SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" />
</div>
</article>

2
src/components/blog/Tags.astro
View File

@@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
</>
<ul class={className}>
{tags.map((tag) => (
<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 mb-2 py-0.5 px-2 lowercase font-medium">
<li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">
{!APP_BLOG_CONFIG?.tag?.isEnabled ? (
tag
) : (

9
src/components/blog/ToBlogLink.astro
View File

@@ -1,10 +1,17 @@
---
import { Icon } from 'astro-icon/components';
import { getBlogPermalink } from '~/utils/permalinks';
import { I18N_CONFIG } from '~/utils/config';
const { textDirection } = I18N_CONFIG;
---
<div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
<a class="btn btn-ghost px-3 md:px-3" href={getBlogPermalink()}
><Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5" /> Back to Blog</a
>
{textDirection === "rtl" ?
<Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
:
<Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />} Back to Blog</a
>
</div>