Rewrite SurahStream.tsx with tail.css
This commit is contained in:
parent
513fe07c8a
commit
b50192795d
7 changed files with 46 additions and 104 deletions
|
@ -51,7 +51,7 @@ body .root .content.theme {
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-y {
|
.scroll-y {
|
||||||
overflow-y: scroll !important;
|
overflow-y: auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -28,14 +28,14 @@
|
||||||
.stalled.icon {
|
.stalled.icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -34px;
|
left: 30px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 8px;
|
left: 8px;
|
||||||
width: 6px;
|
width: 5px;
|
||||||
animation: stalled 0.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
animation: stalled 0.8s cubic-bezier(0, 0.5, 0.5, 1) infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,19 +90,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.root .content.theme.ar {
|
|
||||||
ul.stream span.title {
|
|
||||||
.sound-on.icon, .sound-off.icon {
|
|
||||||
height: 40px;
|
|
||||||
transform: rotate(180deg) translate(0, 3px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
.sound-on.icon, .sound-off.icon {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
g {transform: translate(32px, 0); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -3,37 +3,8 @@
|
||||||
@import "components/Icon";
|
@import "components/Icon";
|
||||||
|
|
||||||
body .root .content.theme {
|
body .root .content.theme {
|
||||||
height: 80%;
|
|
||||||
@media (max-device-height: 968px) { height: 75%; }
|
|
||||||
@media (max-height: 800px) { height: 70%; }
|
|
||||||
@media (max-height: 700px) { height: 65%; }
|
|
||||||
@media (max-height: 600px) { height: 60%; }
|
|
||||||
@media (max-height: 500px) { height: 55%; }
|
|
||||||
@media (max-height: 400px) { height: 45%; }
|
|
||||||
@media (max-height: 330px) { height: 35%; }
|
|
||||||
|
|
||||||
ul.body.stream {
|
ul.body.stream {
|
||||||
scrollbar-gutter: stable;
|
scrollbar-gutter: stable;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
li.ayah {
|
|
||||||
padding: 10px 0 10px 0;
|
|
||||||
span.title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.svg.sound-on, .svg.sound-off {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
g { transform: translate(0px, 18px); }
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li.ayah.fade {
|
li.ayah.fade {
|
||||||
@keyframes FadeIn {
|
@keyframes FadeIn {
|
||||||
0% { opacity: 0;}
|
0% { opacity: 0;}
|
||||||
|
@ -45,41 +16,22 @@ body .root .content.theme {
|
||||||
animation: FadeIn 1s;
|
animation: FadeIn 1s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
footer {
|
/* English-specific rules */
|
||||||
.timer {
|
body .root .content.theme.en {
|
||||||
display: flex;
|
ul.body.stream {
|
||||||
flex-direction: column;
|
.sound-off.icon, .sound-on.icon {
|
||||||
align-items: flex-end;
|
transform: translate(0, 10px);
|
||||||
height: 24px;
|
|
||||||
width: 40px;
|
|
||||||
font-family: "Kanit Regular";
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content.theme.en {
|
|
||||||
header {
|
|
||||||
nav {
|
|
||||||
height: 30px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Arabic-specific rules */
|
||||||
body .root .content.theme.ar {
|
body .root .content.theme.ar {
|
||||||
header {
|
header {
|
||||||
nav, div {
|
.surah-name {
|
||||||
.localized-name {
|
flex-direction: row-reverse;
|
||||||
display: flex;
|
|
||||||
font-size: x-large;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: flex-end;
|
|
||||||
width: 100%;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.transliterated-name {
|
.transliterated-name {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -87,31 +39,24 @@ body .root .content.theme.ar {
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.body.stream {
|
ul.body.stream {
|
||||||
li.ayah:first-child {
|
|
||||||
padding: 35px 0 10px 0;
|
|
||||||
}
|
|
||||||
li.ayah {
|
li.ayah {
|
||||||
padding: 20px 0 10px 0;
|
.title {
|
||||||
span.title {
|
display: block;
|
||||||
font-size: larger;
|
margin-bottom: 5px;
|
||||||
height: 0;
|
|
||||||
font-family: "Mada Regular";
|
|
||||||
}
|
}
|
||||||
p {
|
.sound-off.icon, .sound-on.icon {
|
||||||
line-height: 3;
|
transform: rotate(180deg) translate(0, -4px);
|
||||||
font-size: x-large;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
.timer {
|
.timer {
|
||||||
align-items: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "themes/blue";
|
@import "themes/blue";
|
||||||
@import "themes/green";
|
@import "themes/green";
|
||||||
|
@import "vendor/tail";
|
||||||
|
|
|
@ -151,7 +151,7 @@ export function RefreshIcon({ onClick }: Props) {
|
||||||
|
|
||||||
export function StalledIcon() {
|
export function StalledIcon() {
|
||||||
return (
|
return (
|
||||||
<div className="stalled icon">
|
<div className="stalled icon flex justify-end w-16">
|
||||||
<div />
|
<div />
|
||||||
<div />
|
<div />
|
||||||
<div />
|
<div />
|
||||||
|
|
|
@ -29,7 +29,10 @@ export function Stream({
|
||||||
return (
|
return (
|
||||||
<ul
|
<ul
|
||||||
lang={locale}
|
lang={locale}
|
||||||
className={classNames("body", "stream", ...className)}
|
className={classNames(
|
||||||
|
"body stream scroll-y list-none p-0 h-5/6",
|
||||||
|
...className,
|
||||||
|
)}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
{stream.map((ayah: Quran.Ayah) => {
|
{stream.map((ayah: Quran.Ayah) => {
|
||||||
|
@ -51,7 +54,7 @@ export function Stream({
|
||||||
{formatNumber(surah.ayat.length, locale)}
|
{formatNumber(surah.ayat.length, locale)}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<p>{ayah.text}</p>
|
<p className="m-0 mb-3">{ayah.text}</p>
|
||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -52,7 +52,7 @@ export function Timer({
|
||||||
}, [soundOn, isStalled, isPaused, ms]);
|
}, [soundOn, isStalled, isPaused, ms]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="timer">
|
<div className="timer w-16 flex justify-end">
|
||||||
{ms / 1000 <= 0
|
{ms / 1000 <= 0
|
||||||
? formatNumber(0, locale)
|
? formatNumber(0, locale)
|
||||||
: formatNumber(ms / 1000, locale)}
|
: formatNumber(ms / 1000, locale)}
|
||||||
|
|
|
@ -56,18 +56,29 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
|
||||||
return (
|
return (
|
||||||
<article
|
<article
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={classNames("invisible", "content", "theme", theme, locale)}
|
className={classNames(
|
||||||
|
"flex flex-col invisible h-full content theme",
|
||||||
|
locale,
|
||||||
|
theme,
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
{readyToRender && (
|
{readyToRender && (
|
||||||
<header>
|
<header
|
||||||
<h1>
|
className={classNames("flex flex-col", {
|
||||||
<a href={`/${locale}/`}>{t(locale, "TheNobleQuran")}</a>
|
"h-24": locale !== "ar",
|
||||||
|
"h-26": locale === "ar",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<h1 className="flex justify-center p-0 mt-2">
|
||||||
|
<a className="no-underline color-primary" href={`/${locale}/`}>
|
||||||
|
{t(locale, "TheNobleQuran")}
|
||||||
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
<nav>
|
<nav className="flex flex-row justify-between">
|
||||||
<LanguageSelect locale={locale} path={surah.slug} />
|
<LanguageSelect locale={locale} path={surah.slug} />
|
||||||
<ThemeSelect theme={theme} setTheme={setTheme} />
|
<ThemeSelect theme={theme} setTheme={setTheme} />
|
||||||
</nav>
|
</nav>
|
||||||
<div>
|
<div className="flex justify-between surah-name">
|
||||||
<span className="localized-name" lang={locale}>
|
<span className="localized-name" lang={locale}>
|
||||||
{surah.localizedName}
|
{surah.localizedName}
|
||||||
</span>
|
</span>
|
||||||
|
@ -88,7 +99,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
|
||||||
t={t}
|
t={t}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<footer>
|
<footer className="flex justify-between h-16">
|
||||||
{readyToRender && isPaused && !endOfStream && (
|
{readyToRender && isPaused && !endOfStream && (
|
||||||
<PlayIcon onClick={() => setIsPaused(false)} />
|
<PlayIcon onClick={() => setIsPaused(false)} />
|
||||||
)}
|
)}
|
||||||
|
@ -106,7 +117,7 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
|
||||||
onStall={() => setIsStalled(true)}
|
onStall={() => setIsStalled(true)}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{readyToRender && !endOfStream && (
|
{readyToRender && !endOfStream && !isStalled && (
|
||||||
<Timer
|
<Timer
|
||||||
surah={surah}
|
surah={surah}
|
||||||
setStream={setStream}
|
setStream={setStream}
|
||||||
|
@ -118,11 +129,10 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) {
|
||||||
isStalled={isStalled}
|
isStalled={isStalled}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{readyToRender && soundOn && isStalled && <StalledIcon />}
|
||||||
{readyToRender && endOfStream && (
|
{readyToRender && endOfStream && (
|
||||||
<RefreshIcon onClick={() => setStream([])} />
|
<RefreshIcon onClick={() => setStream([])} />
|
||||||
)}
|
)}
|
||||||
<div className="br" />
|
|
||||||
{readyToRender && soundOn && isStalled && <StalledIcon />}
|
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue