Further UI improvements
This commit is contained in:
parent
af0f1dd3fa
commit
714d2613d5
10 changed files with 63 additions and 14 deletions
|
@ -5,7 +5,9 @@ files=$(git --no-pager diff --cached --name-only | grep -E -e "${pattern}")
|
|||
if [ "$?" = "0" ]; then
|
||||
npm run prettier -- ${files} || exit 1
|
||||
npm run eslint -- --fix --exit-on-fatal-error ${files} || exit 1
|
||||
git add "${files}"
|
||||
for f in $files; do
|
||||
git add "${f}"
|
||||
done
|
||||
exit 0
|
||||
else
|
||||
exit 0
|
||||
|
|
|
@ -56,15 +56,31 @@ body .root .content.theme {
|
|||
align-items: center;
|
||||
}
|
||||
.react-select.theme {
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.react-select.language {
|
||||
justify-content: flex-end;
|
||||
min-width: 70px;
|
||||
justify-content: flex-start;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
ul li {
|
||||
align-items: flex-start;
|
||||
font-family: "Kanit Regular";
|
||||
ul {
|
||||
position:relative;
|
||||
top: 15px;
|
||||
li {
|
||||
align-items: center;
|
||||
font-family: "Kanit Regular";
|
||||
span {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding-right: 7px;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
li.en {
|
||||
font-size: medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.br {
|
||||
|
@ -102,6 +118,16 @@ body .root .content.en {
|
|||
}
|
||||
header {
|
||||
nav, div {
|
||||
.react-select.language {
|
||||
ul {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
li.ar span {
|
||||
position: relative;
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -79,7 +79,8 @@
|
|||
ul li {
|
||||
display: flex;
|
||||
height: 20px;
|
||||
align-items: end;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
.circle {
|
||||
display: block;
|
||||
width: 16px;
|
||||
|
|
|
@ -6,5 +6,13 @@
|
|||
nav .react-select {
|
||||
color: $gold1;
|
||||
}
|
||||
nav .react-select.language {
|
||||
ul li {
|
||||
background: $blue1;
|
||||
color: $white;
|
||||
border: 2px solid $black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,6 +11,5 @@
|
|||
direction: rtl;
|
||||
.react-select.language {
|
||||
.selected-option { color: $green1; }
|
||||
ul li { color: $green1; }
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
$green1: #606850;
|
||||
$green1: lighten(#606850, 20%);
|
||||
$white: #FFF;
|
||||
|
|
|
@ -8,5 +8,14 @@
|
|||
background-color: transparent;
|
||||
color: $green1;
|
||||
}
|
||||
nav .react-select.language {
|
||||
ul li {
|
||||
background-color: $green1;
|
||||
color: $white;
|
||||
border: 2px solid darken($green1, 25%);
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -25,8 +25,12 @@ export function LanguageSelect({ locale, path = "" }: Props) {
|
|||
location.replace(`/${locale}/${newPath}`);
|
||||
}}
|
||||
>
|
||||
<option value="ar">عربي</option>
|
||||
<option value="en">English</option>
|
||||
<option value="ar">
|
||||
<span>عربي</span>
|
||||
</option>
|
||||
<option value="en">
|
||||
<span>English</span>
|
||||
</option>
|
||||
</Select>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -36,8 +36,8 @@ function SurahIndex({ locale, surahs, t }: Props) {
|
|||
<a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
|
||||
</h1>
|
||||
<nav>
|
||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||
<LanguageSelect locale={locale} />
|
||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||
</nav>
|
||||
</header>
|
||||
<ul className="body index scroll-y">
|
||||
|
|
|
@ -64,8 +64,8 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
|
|||
<a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
|
||||
</h1>
|
||||
<nav>
|
||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||
<LanguageSelect locale={locale} path={surah.slug} />
|
||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||
</nav>
|
||||
<div>
|
||||
<span className="localized-name" lang={locale}>
|
||||
|
|
Loading…
Reference in a new issue