From adac9912b06f56fe508bed9026db9f348d03f2f2 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Sun, 26 Nov 2023 22:08:38 -0300 Subject: [PATCH] Misc UI / layout improvements The Arabic layout is especially improved. The CSS still needs work, I think the most tech debt is probably within the css. --- src/css/_layout.scss | 30 +++++----- src/css/components/Icon.scss | 5 +- src/css/components/Select.scss | 6 +- src/css/pages/SurahIndex.scss | 69 +++++++--------------- src/css/pages/SurahStream.scss | 36 +++++++---- src/css/themes/blue/pages/_SurahIndex.scss | 10 ++-- src/js/pages/SurahIndex.tsx | 11 ++-- 7 files changed, 72 insertions(+), 95 deletions(-) diff --git a/src/css/_layout.scss b/src/css/_layout.scss index 8010920..9614250 100644 --- a/src/css/_layout.scss +++ b/src/css/_layout.scss @@ -1,6 +1,10 @@ $black: #454545; $max-width: 1024px; +* { + line-height: 1.5; +} + html[lang="en"] { font-family: "Kanit Regular"; } @@ -27,6 +31,7 @@ body .root .content.theme { margin: 0 auto; height: 100%; width: 85%; + height: 80%; max-width: $max-width; header { @@ -37,7 +42,7 @@ body .root .content.theme { flex-direction: column; font-size: xx-large; margin: 0; - line-height: 1.5; + height: 75px; a { text-decoration: none; } @@ -50,6 +55,7 @@ body .root .content.theme { } nav { + height: 40px; .react-select { display: flex; flex-direction: row; @@ -59,12 +65,11 @@ body .root .content.theme { justify-content: flex-end; } .react-select.language { - justify-content: flex-start; min-width: 50px; text-align: right; ul { position:relative; - top: 15px; + right: 82px; li { align-items: center; font-family: "Kanit Regular"; @@ -95,8 +100,8 @@ body .root .content.theme { list-style-type: none; padding: 0; margin: 0; - overflow: auto; - height: 73%; + overflow: scroll; + height: 100%; } footer { @@ -132,21 +137,14 @@ body .root .content.en { } } -body .root .content.ar { +body .root .content.theme.ar { header { nav, div { direction: ltr; - .localized-name { - display: flex; - font-size: x-large; - justify-content: flex-end; - align-items: flex-end; - width: 100%; - } - .transliterated-name { - display: none; - } .react-select.language { + ul { + top: 15px; + } .selected-option.ar { font-size: x-large; position: relative; diff --git a/src/css/components/Icon.scss b/src/css/components/Icon.scss index 7392b89..cd2a99f 100644 --- a/src/css/components/Icon.scss +++ b/src/css/components/Icon.scss @@ -101,10 +101,7 @@ ul.stream span.title { .sound-on.icon, .sound-off.icon { height: 40px; - transform: rotate(180deg); - g { - transform: translate(0px, -28px); - } + transform: rotate(180deg) translate(0, 3px); } } diff --git a/src/css/components/Select.scss b/src/css/components/Select.scss index 24827a5..bc47e32 100644 --- a/src/css/components/Select.scss +++ b/src/css/components/Select.scss @@ -28,7 +28,8 @@ } .react-select.language { - align-items: flex-start; + flex-direction: column; + justify-content: flex-end; .selected-option.ar { font-size: large; @@ -103,9 +104,6 @@ .content.theme.ar { .react-select.language { - .selected-option { - line-height: 0; - } ul { li { align-items: center; diff --git a/src/css/pages/SurahIndex.scss b/src/css/pages/SurahIndex.scss index 47ce0a5..9a43e58 100644 --- a/src/css/pages/SurahIndex.scss +++ b/src/css/pages/SurahIndex.scss @@ -5,7 +5,6 @@ body .root .content.theme { header { - height: 115px; .react-select.language { ul li { border-radius: 15px; @@ -17,47 +16,30 @@ body .root .content.theme { li.surah a { display: flex; align-items: center; - justify-content: space-between; + border-radius: 10px; min-height: 45px; + width: 98%; &:visited, &:active, &:link { text-decoration: none; } - div:first-child { - display: flex; - flex-direction: row; - height: 32px; - - span { - display: flex; - align-items: center; - } - - span.id { - flex-direction: row; - justify-content: center; - width: 45px; - height: 32px; - text-align: center; - font-weight: bolder; - font-size: large; - } - - span.name { - display: flex; - flex-direction: column; - justify-content: center; - font-weight: normal; - } + span.id { + width: 45px; + font-weight: bolder; + font-size: large; + text-align: center; } - .transliterated { - display: flex; - flex-direction: column; - align-items: end; - justify-content: center; + span.name { font-weight: normal; + } + + span.transliterated { + display: flex; + flex-grow: 1; + justify-content: flex-end; + padding: 0 10px 0 0; @media screen and (max-width: $max-width) { display: none; } @@ -90,27 +72,20 @@ body .root .content.theme.ar { ul.body.index { li.surah { - min-height: 55px; a { - align-items: unset; - div:first-child { - .id { - font-size: x-large; - font-family: "Kanit Regular"; - width: 55px; - height: 47px; - } - .name { - font-size: x-large; - } + font-family: "Mada Regular"; + span.id { + font-size: x-large; } - .transliterated { display: none; } + span.name { + font-size: x-large; + } + span.transliterated { display: none; } } } } footer { - height: 40px; font-family: "Mada Regular"; a span { padding: 0 7px 0 0; diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss index 6342ac0..6bc100b 100644 --- a/src/css/pages/SurahStream.scss +++ b/src/css/pages/SurahStream.scss @@ -3,11 +3,14 @@ @import "components/Icon"; @import "components/Scrollbar"; -.root .content.theme { +body .root .content.theme { + height: 75%; + ul.body.stream { scrollbar-gutter: stable; li.ayah { + padding: 10px 0 10px 0; span.title { display: flex; align-items: center; @@ -57,27 +60,38 @@ height: 30px; } } - ul.body.stream { - li { padding: 10px 0 0 0; } - } } -.content.theme.ar { - header { } +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; + } + .transliterated-name { + display: none; + } + } + } ul.body.stream { li.ayah:first-child { - span.title { - padding: 15px 0 20px 0; - } + padding: 35px 0 10px 0; } li.ayah { + padding: 20px 0 10px 0; span.title { - font-size: x-large; + font-size: larger; height: 0; - padding: 35px 0 20px 0; + font-family: "Mada Regular"; } p { + line-height: 3; font-size: x-large; font-weight: normal; } diff --git a/src/css/themes/blue/pages/_SurahIndex.scss b/src/css/themes/blue/pages/_SurahIndex.scss index ed81083..438dd4b 100644 --- a/src/css/themes/blue/pages/_SurahIndex.scss +++ b/src/css/themes/blue/pages/_SurahIndex.scss @@ -13,10 +13,8 @@ } } - div:first-child { - .id { - color: $gold1; - } + span.id { + color: $gold1; } } } @@ -47,10 +45,10 @@ @import "themes/blue/colors"; ul.body.index { li.surah a { - div:first-child .id { + span.id { color: $gold1; } - div:first-child .name { + span.name { color: $blue1; } } diff --git a/src/js/pages/SurahIndex.tsx b/src/js/pages/SurahIndex.tsx index 76123e5..95900a7 100644 --- a/src/js/pages/SurahIndex.tsx +++ b/src/js/pages/SurahIndex.tsx @@ -44,14 +44,11 @@ function SurahIndex({ locale, surahs, t }: Props) { {surahs.map((surah, key) => (
  • -
    - {formatNumber(surah.id, locale)} - {surah.localizedName} -
    - -
    + {formatNumber(surah.id, locale)} + {surah.localizedName} + {surah.transliteratedName} -
    +
    • ))}