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

Further UI improvements

Browse source
This commit is contained in:
0x1eef 2023-10-21 21:17:41 -03:00
parent c4e00f2158
commit a56de77773
14 changed files with 163 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
src/css/_layout.scss
View file

@ -1,12 +1,12 @@
$black: #454545;
$max-width: 728px;
[lang="en"] {
html[lang="en"] {
font-family: "Kanit Regular";
}
[lang="ar"] {
font-family: "Noto Sans Arabic Regular";
html[lang="ar"] {
font-family: "Amiri Quran Regular";
}
html {
@ -14,7 +14,6 @@ html {
}
html body {
font-family: "Kanit Regular";
color: $black;
height: 85%;
}
@ -32,51 +31,57 @@ body .root .content {
@media screen and (max-width: $max-width) {
width: 350px;
}
}
body .root .content .row {
display: flex;
flex-direction: row;
justify-content: space-between;
direction: ltr;
}
a.title {
display: flex;
place-content: center;
text-decoration: none;
width: 100%;
font-size: large;
}
body .root .content .row.title {
display: flex;
place-content: center;
text-decoration: none;
width: 100%;
font-size: large;
ul.body {
clear: both;
list-style-type: none;
height: 90%;
padding: 0;
/* Height of 625px, or less */
@media screen and (max-height: 625px) {
height: 330px;
}
/* Height of 595px, or less */
@media screen and (max-height: 595px) {
height: 310px;
}
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
direction: ltr;
}
.row.dropdown-row {
align-items: flex-end;
line-height: 30px;
.react-select.theme {
width: 35px;
}
.react-select.language {
width: 70px;
text-align: right;
li { font-family: "Kanit Regular"; }
}
}
}
body .root .content.ar {
a.title {
font-family: "Amiri Quran Regular";
font-size: xx-large;
}
}
body .root .content .row.dropdown-row {
.react-select.language {
text-align: right;
li:first-child { font-family: "Noto Sans Arabic Regular"; }
li:last-child { font-family: "Kanit Regular"; }
}
}
body .root .content ul.body {
clear: both;
list-style-type: none;
height: 90%;
padding: 0;
/* Height of 625px, or less */
@media screen and (max-height: 625px) {
height: 330px;
}
/* Height of 595px, or less */
@media screen and (max-height: 595px) {
height: 310px;
}
}

5
src/css/components/Icon.scss
View file

@ -29,7 +29,7 @@
.stalled.icon {
display: inline-block;
position: relative;
left: -26px;
left: -42px;
height: 4px;
div {
@ -86,9 +86,10 @@
.content.theme.ar {
ul.stream span.title {
.sound-on.icon, .sound-off.icon {
height: 30px;
transform: rotate(180deg);
g {
transform: translate(0px, 10px);
transform: translate(0px, -15px);
}
}
}

2
src/css/components/Select.scss
View file

@ -19,8 +19,6 @@
.react-select ul li {
display: block;
width: 100px;
padding: 2px;
font-weight: normal;
&:hover {
cursor: pointer;

105
src/css/pages/SurahIndex.scss
View file

@ -1,73 +1,74 @@
@import "layout";
@import "components/Select";
ul.body.index {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
overflow: auto;
li.surah {
width: 100%;
margin-bottom: 10px;
}
li.surah a {
body .root .content.theme {
ul.body.index {
display: flex;
justify-content: space-between;
justify-content: center;
flex-wrap: wrap;
width: 100%;
overflow: auto;
&:visited, &:active, &:link {
text-decoration: none;
li.surah {
width: 100%;
margin-bottom: 10px;
}
div:first-child {
li.surah a {
display: flex;
flex-direction: row;
height: 32px;
justify-content: space-between;
width: 100%;
span {
&:visited, &:active, &:link {
text-decoration: none;
}
div:first-child {
display: flex;
align-items: center;
}
span.id {
flex-direction: row;
justify-content: center;
width: 32px;
height: 32px;
text-align: center;
font-weight: bold;
span {
display: flex;
align-items: center;
}
span.id {
flex-direction: row;
justify-content: center;
width: 32px;
height: 32px;
text-align: center;
font-weight: bold;
}
span.name {
display: flex;
flex-direction: column;
justify-content: center;
font-weight: normal;
}
}
span.name {
.transliterated {
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
align-items: unset;
width: 210px;
font-weight: normal;
}
}
.transliterated {
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
font-weight: normal;
@media screen and (max-width: $max-width) {
display: none;
@media screen and (max-width: $max-width) {
display: none;
}
}
}
}
.row.surah.choose-random {
display: flex;
place-content: center;
}
}
body .root .content .row.surah.choose-random {
display: flex;
place-content: center;
}
body .root .content.theme.en {
ul.body.index li.surah {
@ -79,20 +80,24 @@ body .root .content.theme.en {
body .root .content.theme.ar {
font-size: larger;
ul.body.index {
li.surah {
a div:first-child .id {
width: 40px;
width: 55px;
margin-left: 8px;
}
a div:first-child .name {
font-size: large;
a div:first-child .id, a div:first-child .name {
font-size: larger;
}
.transliterated { display: none; }
}
}
.row.surah.choose-random {
font-family: "Handjet Regular";
font-size: x-large;
}
}
@import "themes/moon";

36
src/css/pages/SurahStream.scss
View file

@ -46,13 +46,12 @@
.timer {
display: flex;
position: relative;
left: 8px;
flex-direction: column;
justify-content: flex-end;
height: 32px;
width: 40px;
font-size: 80%;
font-family: "Kanit Regular";
font-size: 80%;
text-align: center;
font-weight: bold;
}
@ -62,19 +61,42 @@
justify-content: flex-end !important;
}
.content.theme.en {}
.content.theme.ar {
.row.details {
display: none;
place-content: flex-end;
span[lang="en"] {
display: none;
}
.row.dropdown-row {
span.surah-name {
position: relative;
left: 20px;
display: flex;
flex-direction: column;
width: 180px;
font-size: xx-large;
align-items: center;
line-height: 30px;
height: 30px;
}
}
.row.details {
display: none;
}
ul.body.stream {
li.ayah {
p {
span.title {
font-size: larger;
}
p {
font-size: x-large;
font-weight: normal;
line-height: 30px;
margin: 15px 0 10px 0;
}
}
}

8
src/css/themes/leaf/pages/_SurahStream.scss
View file

@ -7,7 +7,7 @@
}
ul.body.stream li.ayah {
span.title {
span.title span:first-child {
color: $green;
}
}
@ -36,6 +36,12 @@
.root .content.theme.leaf.ar {
@import "themes/leaf/colors";
.row.dropdown-row {
.surah-name {
color: lighten($green, 15%);
}
}
ul.body.stream {
}
}

13
src/css/themes/moon/pages/_SurahStream.scss
View file

@ -12,10 +12,21 @@
ul.body.stream {
li.ayah {
span.title {
span.title span {
color: $gold-primary;
}
p { }
}
}
}
.root .content.theme.moon.ar {
@import "themes/moon/colors";
.row.dropdown-row {
line-height: 30px;
span.surah-name {
color: lighten($gold-primary, 25%);
}
}
}

BIN
src/fonts/handjet-regular.ttf Normal file
View file

Binary file not shown.

BIN
src/fonts/notosansarabic-regular.ttf
View file

Binary file not shown.

2
src/js/components/ThemeSelect.tsx
View file

@ -14,7 +14,7 @@ export function ThemeSelect({ setTheme, theme }: Props) {
};
return (
<Select value={theme} onChange={onThemeChange}>
<Select className="theme" value={theme} onChange={onThemeChange}>
<option value="moon">🌛</option>
<option value="leaf">🌿</option>
</Select>

5
src/js/lib/i18n.ts
View file

@ -21,8 +21,5 @@ export function i18n(json: string): TFunction {
export function formatNumber(number: number, locale: Quran.Locale): string {
const numLocale = locale === "ar" ? "ar-SA" : locale;
const options = { maximumFractionDigits: 1 };
return new Intl.NumberFormat(numLocale, options)
.format(number)
.split(/([^\d])/)
.join(" ");
return new Intl.NumberFormat(numLocale, options).format(number);
}

2
src/js/loaders/SurahIndexLoader.ts
View file

@ -10,7 +10,7 @@ import postman, { item } from "postman";
item.script("/js/pages/surah-index.js"),
item.css("/css/pages/surah-index.css"),
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.font("Noto Sans Arabic Regular", "url(/fonts/notosansarabic-regular.ttf"),
item.font("Handjet Regular", "url(/fonts/handjet-regular.ttf"),
item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf"),
item.progress((percent: number) => {
progressBar.value = percent;

2
src/js/loaders/SurahStreamLoader.ts
View file

@ -16,7 +16,7 @@ import * as Quran from "lib/Quran";
item.script("/js/pages/surah-stream.js"),
item.css("/css/pages/surah-stream.css"),
item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
item.font("Noto Sans Arabic Regular", "url(/fonts/notosansarabic-regular.ttf"),
item.font("Cairo Regular", "url(/fonts/cairo-regular.ttf"),
item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf"),
item.json(`/${locale}/${surahId}/surah.json`, { className: "surah" }),
...recitations.map((recitation: Quran.Recitation) => {

6
src/js/pages/SurahStream.tsx
View file

@ -39,6 +39,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
);
const readyToRender = stream.length > 0;
const ayah = stream[stream.length - 1];
const hasCompactLayout = ["ar"].includes(locale);
const onLanguageChange = (o: SelectOption) => {
const locale = o.value;
const params = [["paused", isPaused ? "t" : null]];
@ -63,11 +64,14 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
</a>
<div className="row dropdown-row">
<ThemeSelect theme={theme} setTheme={setTheme} />
{hasCompactLayout && (
<span className="surah-name">{surah.localizedName}</span>
)}
<LanguageSelect locale={locale} onChange={onLanguageChange} />
</div>
</>
)}
{readyToRender && (
{readyToRender && !hasCompactLayout && (
<div className="row details">
<span lang={locale}>{surah.localizedName}</span>
<span lang="en">{surah.transliteratedName}</span>