From a2259df8726c5e19827bdedc66a9af5440a951b8 Mon Sep 17 00:00:00 2001 From: 0x1eef <0x1eef@protonmail.com> Date: Sat, 21 Oct 2023 17:31:10 -0300 Subject: [PATCH] Further UI improvements --- src/css/_layout.scss | 2 +- src/css/components/Icon.scss | 6 +- src/css/pages/SurahIndex.scss | 85 ++++++++++++++------- src/css/pages/SurahStream.scss | 7 +- src/css/themes/leaf/components/_Icon.scss | 24 ++++++ src/css/themes/leaf/pages/_SurahStream.scss | 8 +- src/css/themes/moon/_layout.scss | 2 +- src/css/themes/moon/pages/_SurahIndex.scss | 10 +-- src/js/pages/SurahIndex.tsx | 13 +++- 9 files changed, 107 insertions(+), 50 deletions(-) create mode 100644 src/css/themes/leaf/components/_Icon.scss diff --git a/src/css/_layout.scss b/src/css/_layout.scss index 9bf9d23..632f685 100644 --- a/src/css/_layout.scss +++ b/src/css/_layout.scss @@ -7,7 +7,6 @@ $max-width: 728px; [lang="ar"] { font-family: "Noto Sans Arabic Regular"; - font-weight: bold; } html { @@ -47,6 +46,7 @@ body .root .content .row.title { place-content: center; text-decoration: none; width: 100%; + font-size: large; } body .root .content .row.dropdown-row { diff --git a/src/css/components/Icon.scss b/src/css/components/Icon.scss index 28a5df5..593753d 100644 --- a/src/css/components/Icon.scss +++ b/src/css/components/Icon.scss @@ -1,3 +1,7 @@ +.icon { + cursor: pointer; +} + .play.icon, .pause.icon { width: 32px; height: 22px; @@ -25,7 +29,7 @@ .stalled.icon { display: inline-block; position: relative; - left: 7px; + left: -26px; height: 4px; div { diff --git a/src/css/pages/SurahIndex.scss b/src/css/pages/SurahIndex.scss index c3880c7..2714c9d 100644 --- a/src/css/pages/SurahIndex.scss +++ b/src/css/pages/SurahIndex.scss @@ -9,38 +9,57 @@ ul.body.index { overflow: auto; li.surah { - display: flex; width: 100%; margin-bottom: 10px; } li.surah a { display: flex; + justify-content: space-between; width: 100%; &:visited, &:active, &:link { text-decoration: none; } - } - li.surah a .surah.id { - text-align: center; - width: 25px; - } + div:first-child { + display: flex; + flex-direction: row; + height: 32px; - li.surah a .surah.name { - display: flex; - flex-direction: column; - justify-content: center; - width: 210px; - } + span { + display: flex; + align-items: center; + } - li.surah a .surah.name.transliterated { - align-items: end; - width: 200px; + span.id { + flex-direction: row; + justify-content: center; + width: 32px; + height: 32px; + text-align: center; + font-weight: bold; + } - @media screen and (max-width: $max-width) { - display: none; + span.name { + display: flex; + flex-direction: column; + 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; + } } } } @@ -51,20 +70,30 @@ body .root .content .row.surah.choose-random { } body .root .content.theme.en { - ul.body.index a .surah.id { - margin-right: 5px; - } -} - -body .root .content.theme.ar { - ul.body.index { - a .surah.id { - width: 35px; - padding: 1px; - margin-left: 8px; + ul.body.index li.surah { + a div:first-child .id { + margin-right: 5px; } } } +body .root .content.theme.ar { + font-size: larger; + ul.body.index { + li.surah { + a div:first-child .id { + width: 40px; + margin-left: 8px; + } + a div:first-child .name { + font-size: large; + } + .transliterated { display: none; } + } + + } + +} + @import "themes/moon"; @import "themes/leaf"; diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss index b09668c..88be732 100644 --- a/src/css/pages/SurahStream.scss +++ b/src/css/pages/SurahStream.scss @@ -46,6 +46,8 @@ .timer { display: flex; + position: relative; + left: 8px; justify-content: flex-end; width: 40px; @@ -76,11 +78,6 @@ } } } - - .row.footer .timer { - position: relative; - top: 2px; - } } @import "themes/moon"; diff --git a/src/css/themes/leaf/components/_Icon.scss b/src/css/themes/leaf/components/_Icon.scss new file mode 100644 index 0000000..60cd59a --- /dev/null +++ b/src/css/themes/leaf/components/_Icon.scss @@ -0,0 +1,24 @@ +.footer { + .play.icon { + background: unset; + g path { + fill: $green; + stroke: $green; + stroke-width: 3px; + } + } + + .pause.icon { + background: unset; + g rect { + fill: $green; + stroke: $green; + stroke-width: 1px; + } + } + + .refresh.icon { + background: unset; + fill: $green; + } +} diff --git a/src/css/themes/leaf/pages/_SurahStream.scss b/src/css/themes/leaf/pages/_SurahStream.scss index b96bb8d..7babdf0 100644 --- a/src/css/themes/leaf/pages/_SurahStream.scss +++ b/src/css/themes/leaf/pages/_SurahStream.scss @@ -1,5 +1,6 @@ .root .content.theme.leaf { @import "themes/leaf/colors"; + @import "themes/leaf/components/Icon"; .row.details { color: $green; @@ -12,8 +13,7 @@ } .timer { - background-color: $green; - color: $white-primary; + color: $green; } .row .shape.refresh { @@ -21,11 +21,11 @@ fill: $green; } - .row .loading div { + .stalled.icon { background: $green; } - .svg.sound-on, .svg.sound-off { + .sound-on.icon, .svg.sound-off.icon { polygon { fill: $green; stroke-width: 2; diff --git a/src/css/themes/moon/_layout.scss b/src/css/themes/moon/_layout.scss index be938f7..1362721 100644 --- a/src/css/themes/moon/_layout.scss +++ b/src/css/themes/moon/_layout.scss @@ -2,7 +2,7 @@ @import "colors"; .row.title { - color: $gold-primary; + color: $blue-primary; } .row.dropdown-row .react-select { diff --git a/src/css/themes/moon/pages/_SurahIndex.scss b/src/css/themes/moon/pages/_SurahIndex.scss index dcdf29f..9f1e734 100644 --- a/src/css/themes/moon/pages/_SurahIndex.scss +++ b/src/css/themes/moon/pages/_SurahIndex.scss @@ -5,17 +5,13 @@ justify-content: center; } - ul.body.index a { + ul.body.index li.surah a { &:active, &:link, &:visited { color: $blue-primary; } - .surah.id { - background: $gold-secondary; - color: $white-primary; - border-radius: 5px; - padding: 3px; - border: 1px solid $blue-primary; + div:first-child .id { + color: $gold-secondary; } } diff --git a/src/js/pages/SurahIndex.tsx b/src/js/pages/SurahIndex.tsx index 07749ef..5f92625 100644 --- a/src/js/pages/SurahIndex.tsx +++ b/src/js/pages/SurahIndex.tsx @@ -33,9 +33,16 @@ function SurahIndex({ locale, surahs, t }: Props) { {surahs.map((surah, key) => (
  • -
    {formatNumber(surah.id, locale)}
    -
    {surah.localizedName}
    -
    +
    + + {formatNumber(surah.id, locale)} + + + {surah.localizedName} + +
    + +
    {surah.transliteratedName}