From b50192795d522ca823aad7c631addb598675c9ab Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Wed, 28 Feb 2024 19:40:41 -0300 Subject: [PATCH] Rewrite SurahStream.tsx with tail.css --- src/css/_layout.scss | 2 +- src/css/components/Icon.scss | 20 +------- src/css/pages/SurahStream.scss | 87 +++++++--------------------------- src/js/components/Icon.tsx | 2 +- src/js/components/Stream.tsx | 7 ++- src/js/components/Timer.tsx | 2 +- src/js/pages/SurahStream.tsx | 30 ++++++++---- 7 files changed, 46 insertions(+), 104 deletions(-) diff --git a/src/css/_layout.scss b/src/css/_layout.scss index a9fe72958..06d98d9ee 100644 --- a/src/css/_layout.scss +++ b/src/css/_layout.scss @@ -51,7 +51,7 @@ body .root .content.theme { } .scroll-y { - overflow-y: scroll !important; + overflow-y: auto !important; } } diff --git a/src/css/components/Icon.scss b/src/css/components/Icon.scss index 861106786..0fa0bc629 100644 --- a/src/css/components/Icon.scss +++ b/src/css/components/Icon.scss @@ -28,14 +28,14 @@ .stalled.icon { display: inline-block; position: relative; - left: -34px; + left: 30px; height: 4px; div { display: inline-block; position: absolute; left: 8px; - width: 6px; + width: 5px; 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); } - } - } -} diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss index 18e91bbee..58c04d045 100644 --- a/src/css/pages/SurahStream.scss +++ b/src/css/pages/SurahStream.scss @@ -3,37 +3,8 @@ @import "components/Icon"; 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 { 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 { @keyframes FadeIn { 0% { opacity: 0;} @@ -45,41 +16,22 @@ body .root .content.theme { animation: FadeIn 1s; } } +} - footer { - .timer { - display: flex; - flex-direction: column; - align-items: flex-end; - height: 24px; - width: 40px; - font-family: "Kanit Regular"; - text-align: center; - font-weight: bold; - font-size: large; - } - } -} - -.content.theme.en { - header { - nav { - height: 30px; +/* English-specific rules */ +body .root .content.theme.en { + ul.body.stream { + .sound-off.icon, .sound-on.icon { + transform: translate(0, 10px); } } } +/* Arabic-specific rules */ body .root .content.theme.ar { header { - nav, div { - .localized-name { - display: flex; - font-size: x-large; - justify-content: flex-end; - align-items: flex-end; - width: 100%; - line-height: 1; - } + .surah-name { + flex-direction: row-reverse; .transliterated-name { display: none; } @@ -87,31 +39,24 @@ body .root .content.theme.ar { } ul.body.stream { - li.ayah:first-child { - padding: 35px 0 10px 0; - } li.ayah { - padding: 20px 0 10px 0; - span.title { - font-size: larger; - height: 0; - font-family: "Mada Regular"; + .title { + display: block; + margin-bottom: 5px; } - p { - line-height: 3; - font-size: x-large; - font-weight: normal; + .sound-off.icon, .sound-on.icon { + transform: rotate(180deg) translate(0, -4px); } } - padding: 0; } footer { .timer { - align-items: flex-start; + justify-content: flex-start; } } } @import "themes/blue"; @import "themes/green"; +@import "vendor/tail"; diff --git a/src/js/components/Icon.tsx b/src/js/components/Icon.tsx index 5f6f5d917..828393b15 100644 --- a/src/js/components/Icon.tsx +++ b/src/js/components/Icon.tsx @@ -151,7 +151,7 @@ export function RefreshIcon({ onClick }: Props) { export function StalledIcon() { return ( -
+
diff --git a/src/js/components/Stream.tsx b/src/js/components/Stream.tsx index 06aff51ad..dd28683ee 100644 --- a/src/js/components/Stream.tsx +++ b/src/js/components/Stream.tsx @@ -29,7 +29,10 @@ export function Stream({ return (
    {stream.map((ayah: Quran.Ayah) => { @@ -51,7 +54,7 @@ export function Stream({ {formatNumber(surah.ayat.length, locale)} -

    {ayah.text}

    +

    {ayah.text}

    ); })} diff --git a/src/js/components/Timer.tsx b/src/js/components/Timer.tsx index e2584f0ce..fd7fd351b 100644 --- a/src/js/components/Timer.tsx +++ b/src/js/components/Timer.tsx @@ -52,7 +52,7 @@ export function Timer({ }, [soundOn, isStalled, isPaused, ms]); return ( -
    +
    {ms / 1000 <= 0 ? formatNumber(0, locale) : formatNumber(ms / 1000, locale)} diff --git a/src/js/pages/SurahStream.tsx b/src/js/pages/SurahStream.tsx index 8d9652bd3..2920f3d1a 100644 --- a/src/js/pages/SurahStream.tsx +++ b/src/js/pages/SurahStream.tsx @@ -56,18 +56,29 @@ function SurahStream({ node, recitations, locale, paused, t }: Props) { return (
    {readyToRender && ( -
    -

    - {t(locale, "TheNobleQuran")} +
    +

    + + {t(locale, "TheNobleQuran")} +

    -

    );