0x1eef/al-quran.reflectslight.io
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Iterate on rtl design

Browse source
This commit is contained in:
0x1eef 2024-05-30 18:10:16 -03:00
parent e77533a947
commit a20502b653
1 changed files with 4 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/js/components/SurahIndex/index.tsx
View file

@ -38,23 +38,17 @@ export function SurahIndex({ locale, surahs, t }: Props) {
<Head locale={locale} theme={theme} setTheme={setTheme}> <Head locale={locale} theme={theme} setTheme={setTheme}>
{t(locale, "TheNobleQuran")} {t(locale, "TheNobleQuran")}
</Head> </Head>
<ul className="body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6"> <ul className="flex flex-wrap body index scroll-y list-none m-0 p-0 pt-4 m-auto w-full h-5/6">
{index.map((surah, key) => ( {index.map((surah, key) => (
<li <li
className={classNames("flex justify-center surah", { className={classNames("flex justify-center surah", {
"w-full": locale.direction === "ltr", "w-full": locale.direction === "ltr",
"w-11/12": locale.direction === "rtl", "w-1/2": locale.direction === "rtl",
})} })}
key={key} key={key}
> >
<a <a
className={classNames( className="flex items-center color-primary no-underline rounded w-11/12 h-14"
"flex items-center color-primary no-underline rounded h-14",
{
"w-full": locale.direction === "rtl",
"w-11/12": locale.direction === "ltr",
},
)}
href={`/${locale.name}/${surah.roman.slug}/`} href={`/${locale.name}/${surah.roman.slug}/`}
> >
{locale.direction === "ltr" ? ( {locale.direction === "ltr" ? (
@ -62,7 +56,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
{formatNumber(locale, surah.id)} {formatNumber(locale, surah.id)}
</span> </span>
) : ( ) : (
<span className="flex items-center justify-center color-white background-secondary w-8 h-8 p-1 mr-5 ml-5 rounded"> <span className="flex items-center justify-center color-white background-secondary w-8 h-8 p-1 ml-5 rounded">
{formatNumber(locale, surah.id)} {formatNumber(locale, surah.id)}
</span> </span>
)} )}