mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests 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

4
src/components/widgets/Announcement.astro
View File

@ -4,14 +4,14 @@
<div
class="text-muted text-sm bg-[#dbeafe] dark:bg-transparent dark:border-b dark:border-slate-800 dark:text-slate-400 hidden md:block overflow-hidden px-3 py-2 relative text-ellipsis whitespace-nowrap"
>
<span class="dark:bg-slate-700 bg-white/40 dark:text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5">NEW</span>
<span class="dark:bg-slate-700 bg-white/40 dark:text-slate-300 font-semibold px-1 py-0.5 text-xs mr-0.5 rtl:mr-0 rtl:ml-0.5 inline-block">NEW</span>
<a href="https://astro.build/blog/astro-2100/" class="text-muted hover:underline dark:text-slate-400 font-medium"
>Astro 2.10 is released. »</a
>
<a
target="_blank"
rel="noopener"
class="float-right"
class="float-right rtl:float-left"
title="If you like AstroWind, give us a star."
href="https://github.com/onwidget/astrowind"
>

2
src/components/widgets/CallToAction.astro
View File

@ -47,7 +47,7 @@ const {
callToAction.href && (
<div class="mt-6 max-w-xs mx-auto">
<a class="btn btn-primary w-full sm:w-auto" href={callToAction.href} target="_blank" rel="noopener">
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />}
{callToAction.text}
</a>
</div>

2
src/components/widgets/Content.astro
View File

@ -53,7 +53,7 @@ const {
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
</div>
</div>
<div class="ml-4">
<div class="ml-4 rtl:ml-0 rtl:mr-4">
{title2 && <h3 class="text-lg font-medium leading-6 dark:text-white">{title2}</h3>}
{description && <p class="mt-2 text-muted dark:text-slate-400" set:html={description} />}
</div>

4
src/components/widgets/Footer.astro
View File

@ -38,7 +38,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
{
secondaryLinks.map(({ text, href }) => (
<a
class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2 rtl:mr-0 rtl:ml-2"
href={href}
set:html={text}
/>
@ -72,7 +72,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
<div class="md:flex md:items-center md:justify-between py-6 md:py-8">
{
socialLinks?.length ? (
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0">
<ul class="flex mb-4 md:order-1 -ml-2 md:ml-4 md:mb-0 rtl:ml-0 rtl:-mr-2 rtl:md:ml-0 rtl:md:mr-4">
{socialLinks.map(({ ariaLabel, href, text, icon }) => (
<li>
<a

4
src/components/widgets/Header.astro
View File

@ -125,7 +125,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
<div
class:list={[
{ "ml-auto rtl:ml-0 rtl:mr-auto": position === "left" },
"hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 bottom-0 p-3 md:p-0",
"hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0",
]}
>
<div class="items-center flex justify-between w-full md:w-auto">
@ -145,7 +145,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`
</div>
{
actions?.length ? (
<span class="ml-4 rtl:ml-0 rtl:mr-0">
<span class="ml-4 rtl:ml-0 rtl:mr-4">
{actions.map(({ text, href, class: className }) => (
<a class:list={["btn ml-2 py-2.5 px-5.5 md:px-6 font-semibold shadow-none text-sm", className]} href={href}>
<Fragment set:html={text} />

3
src/components/widgets/Hero.astro
View File

@ -38,8 +38,7 @@ const {
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
{callToAction?.icon && (
<>
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />
&nbsp;
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
</>
)}
{callToAction?.text}

2
src/components/widgets/Hero2.astro
View File

@ -50,7 +50,7 @@ const {
<a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} target="_blank" rel="noopener">
{callToAction?.icon && (
<>
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}
<Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />{' '}
</>
)}
{callToAction?.text}

6
src/components/widgets/Pricing.astro
View File

@ -24,13 +24,13 @@ const {
<div class="grid grid-cols-3 gap-4 dark:text-white sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
{
prices &&
prices.map(({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
prices.map(({ title, price, period, items, callToAction, hasRibbon = false, ribbonTitle }) => (
<div class="col-span-3 mx-auto flex w-full sm:col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-1">
{price && period && (
<div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
{hasRibbon && ribbonTitle && (
<div class="absolute right-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
<span class="absolute top-[19px] right-[-21px] block w-full rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
<div class="absolute right-[-5px] rtl:right-auto rtl:left-[-5px] top-[-5px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
<span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
{ribbonTitle}
</span>
</div>

2
src/components/widgets/Steps.astro
View File

@ -27,7 +27,7 @@ const {
title={title}
subtitle={subtitle}
tagline={tagline}
classes={{ container: "text-left", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }}
classes={{ container: "text-left rtl:text-right", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }}
/>
<Timeline items={items} classes={classes?.items as {}} />
</div>

10
src/components/widgets/Steps2.astro
View File

@ -27,14 +27,14 @@ const {
subtitle={subtitle}
tagline={tagline}
classes={{
container: 'text-center md:text-left mb-4 md:mb-8',
container: 'text-center md:text-left rtl:md:text-right mb-4 md:mb-8',
title: 'mb-4 text-3xl lg:text-4xl font-bold font-heading',
subtitle: 'mb-8 text-xl text-muted dark:text-slate-400',
// ...((classes?.headline as {}) ?? {}),
}}
/>
<div class="w-full text-center md:text-left">
<div class="w-full text-center md:text-left rtl:md:text-right">
{
typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />
@ -43,7 +43,7 @@ const {
callToAction.text &&
callToAction.href && (
<a class="btn btn-primary mb-12" href={callToAction.href} target="_blank" rel="noopener">
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />}
{callToAction.icon && <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />}
{callToAction.text}
</a>
)
@ -57,12 +57,12 @@ const {
items && items.length
? items.map(({ title: title2, description, icon }, index) => (
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<div class="pr-4 sm:pl-4 rtl:pr-0 rtl:pl-4 rtl:sm:pl-0 rtl:sm:pr-4">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
{icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
</span>
</div>
<div class="pl-4">
<div class="pl-4 rtl:pl-0 rtl:pr-4">
<h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
<p class="text-muted dark:text-gray-400" set:html={description} />
</div>

2
src/components/widgets/Testimonials.astro
View File

@ -55,7 +55,7 @@ const {
</div>
)}
<div class="grow ml-3">
<div class="grow ml-3 rtl:ml-0 rtl:mr-3">
{name && <p class="text-base font-semibold">{name}</p>}
{job && <p class="text-xs text-muted">{job}</p>}
</div>