Iterate on rtl design
This commit is contained in:
parent
e77533a947
commit
a20502b653
1 changed files with 4 additions and 10 deletions
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in a new issue