ea23419aac
Bump surah ID width to 45px
...
On the Surah Index page, in the "en" locale, there was not enough
space between a surah's ID and its name. This change fixes that.
2023-11-20 19:16:41 -03:00
94619bab19
Enable hover effect on devices with first-class hover support
...
On devices such as a phone, the hover effect will not be applied.
2023-11-20 12:56:31 -03:00
c3b1d0be45
Remove height properties
2023-11-15 19:27:55 -03:00
1f0127192f
Fix /ar/ alignment
...
align-items: center; appears to not have the desired effect, but
leaving it unset does. The en locale remains with align-items: center;
2023-11-12 19:33:56 -03:00
e358b65736
Add hover effect on SurahIndex.tsx
2023-11-12 12:54:02 -03:00
6c0819bfdd
Improve language dropdown (take 2)
2023-10-30 06:55:24 -03:00
770c087868
Improve language dropdown
2023-10-30 06:28:21 -03:00
300188bbc4
Adjust "blue" theme
2023-10-30 06:10:51 -03:00
2496f2c309
Increase overall font-size for Arabic pages
2023-10-30 05:46:24 -03:00
5c629463dc
Center <h1> content
2023-10-30 03:22:50 -03:00
7a943802ca
Set height on ul.stream
2023-10-30 03:18:10 -03:00
864253c4b7
Add space between h1 and the content below it
2023-10-30 02:54:20 -03:00
714d2613d5
Further UI improvements
2023-10-30 02:34:35 -03:00
af0f1dd3fa
Adjust header heights
2023-10-30 01:11:24 -03:00
aaea2cc7e6
Add custom scrollbar rules, improve CSS
2023-10-30 01:01:40 -03:00
d381ec1522
Wrap theme / language dropdowns in a <nav> element.
2023-10-29 20:10:04 -03:00
43f7fc85c9
Add semantic-HTML improvements, CSS improvements
2023-10-29 20:03:16 -03:00
a534e2eb79
CSS tweaks and fixes
2023-10-28 10:40:48 -03:00
3e703b6a3d
Improve "Select a random chapter"
...
Add arrow, add <footer> to `SurahIndex`, and other
mprovements.
2023-10-28 09:50:13 -03:00
c41a5cd2a7
Bug fixes
2023-10-28 07:47:27 -03:00
3682c4a3bd
Fix alignment of items in footer
2023-10-28 06:08:37 -03:00
996325a13b
Fix for Arabic layout
2023-10-26 09:48:22 -03:00
6f2e33366d
Further UI improvements
2023-10-26 09:39:20 -03:00
820b0a4eb5
Tweak h1
2023-10-25 04:25:42 -03:00
19d9dd2e53
Tweaks and fixes
2023-10-25 03:49:11 -03:00
3d69b44c1c
Tweaks and fixes
2023-10-25 03:47:20 -03:00
a3d9dd1446
Start transition to semantic HTML
2023-10-25 03:11:54 -03:00
b238f361df
Remove unneccesary unsets
2023-10-24 04:39:59 -03:00
56fe18ea95
Fix Icon (blue theme)
2023-10-24 04:35:38 -03:00
6768a6650b
Fix icon
2023-10-24 04:31:26 -03:00
6179b8928c
Replace $gold2 with $gold1 - 10% lighter than a gold-ish color.
2023-10-24 02:27:55 -03:00
e140d38931
Adjust $max-width
2023-10-24 02:19:37 -03:00
cb029d6b8a
Increase $max-width
2023-10-24 02:11:24 -03:00
a83e8dd15f
Further UI improvements
2023-10-24 02:01:06 -03:00
6515ee579f
Blue theme is blended with gold more often (ar locale)
2023-10-24 01:54:44 -03:00
70e2e82753
Show surah name in blue (blue theme, ar locale)
2023-10-23 23:36:07 -03:00
6ac7c6ee04
Fix / improve layout of play / pause icon in footer
2023-10-23 22:35:20 -03:00
98f259fb22
Change language dropdown to be similar to the theme dropdown
...
Not yet perfect but a step in the right direction.
2023-10-23 22:35:20 -03:00
48329928e3
Update UI for surah's name (ar locale)
2023-10-23 18:58:55 -03:00
11bd1105fb
Avoid re-render glitches
...
When changing between languages, the transition between pages can
cause UI glitches, where text could change font for a brief second.
The fix makes the main content invisible by default, and applies the
'invisible' class just before switching languages. After the main
content has rendered, the 'invisible' class is removed. These changes
effectively remove the UI glitches that were present when switching
languages.
2023-10-23 14:52:55 -03:00
764cf6709c
Set selected language to $blue1 (blue theme)
2023-10-23 14:23:25 -03:00
c944c1afa7
Fix import path
2023-10-23 14:23:25 -03:00
d7cf081028
.stalled.icon is rendered outside .footer
2023-10-23 14:23:25 -03:00
16352bd37c
Fix stalled icon within green theme
2023-10-23 14:23:25 -03:00
b1a8c053c5
Fix position of stalled icon
2023-10-23 14:23:25 -03:00
feae0ea6e6
Further UI improvements
2023-10-23 02:08:43 -03:00
75a72397e3
Switch to more straight forward scss $var names
2023-10-23 02:08:43 -03:00
a9315803f0
Fix ThemeSelect, LanguageSelect
2023-10-23 02:08:43 -03:00
9e393fcdf7
Rename themes after colors (leaf = green, moon = blue)
...
This commit introduces the language and theme dropdowns as being
invisible, and includes work related to improving how the dropdowns
are implemented.
2023-10-23 02:08:43 -03:00
c9347a490e
Further UI improvements
2023-10-23 02:08:42 -03:00
a56de77773
Further UI improvements
2023-10-23 02:08:42 -03:00
c4e00f2158
Further UI improvements
2023-10-23 02:08:42 -03:00
a2259df872
Further UI improvements
2023-10-23 02:08:42 -03:00
7542e762fc
Further UI improvements
2023-10-23 02:08:42 -03:00
05e519c737
UI changes
2023-10-14 09:21:39 -03:00
04fb949a28
Add AudioControl
2023-10-13 00:37:16 -03:00
1d641e7c71
Re-organize project files
...
Attempt to simplify the layout of project files.
2023-10-08 06:31:29 -03:00
300b59aa14
Improve layout on stream page (Arabic)
2023-07-25 14:26:02 -03:00
731e951f2e
Fix layout on index page (Arabic)
2023-07-25 14:26:02 -03:00
2bb64eb390
Add spinner
...
When the audio is stalled or "waiting", show an animation
that indicates the loading state.
2023-07-17 09:16:22 -03:00
51cc7484a0
Set $green on refresh button (leaf theme)
2023-07-13 16:23:37 -03:00
7c8134cd05
Remove remnants of webpackage
2023-07-12 21:31:38 -03:00
5455881498
Add audio support
2023-07-12 17:20:32 -03:00
bd000760ea
webpackage.scss -> postman.scss
2023-07-11 20:14:58 -03:00
c8174f881e
Follow up 3c6b2f6bf4
2023-03-12 19:54:30 -03:00
3c6b2f6bf4
Fix scroll jump
...
When the 'pause' button was clicked, the text could jump and become
realigned according to the space taken by the now visible scrollbar.
This change fixes that issue by leaving a gap for the scrollbar whether
it is visible or hidden.
2023-03-12 19:33:36 -03:00
667f63fa06
Add link to /<locale>/random
...
Fix #87
2023-03-10 13:13:21 -03:00
1a55879015
Hide surah.name.transliterated on iPhone
...
Fix #89
2023-03-10 12:04:33 -03:00
b8ab4d2559
Remove src/css/fonts.scss
...
No need to declare the fonts in CSS.
Handled by loader.ts
2023-03-10 09:23:14 -03:00
20b7420ac9
Replace TheSurahPage with surah/stream
2023-03-10 06:47:35 -03:00
d8b63e4fd0
Replace TheSurahIndex with surah/index
2023-03-10 06:13:49 -03:00
2e937c2a2a
Fix TheSurahStream on low-height devices
2023-03-08 00:48:57 -03:00
0158b89f42
Add src/css/webpackage.scss
2023-03-06 17:31:36 -03:00
0073c76fbb
Add TheSurahIndex.tsx
...
TheSurahIndex.tsx provides a list of surahs (aka chapters) from
The Quran. Fix #2 .
2023-03-06 17:30:38 -03:00
51b7a523ce
s/theme-and-language/dropdown-row/g
2023-02-28 05:03:09 -03:00
95be842bc4
Add src/css/layout.scss
2023-02-28 05:03:09 -03:00
78a0146cf9
Generalize the CSS
2023-02-28 05:03:09 -03:00
278292dc89
src/css/components/TheQuran/ -> src/css/components/TheSurahPage/
2023-02-28 05:03:09 -03:00
13234d34d1
Set background color of .box-shape to $gold
...
This was overlooked when renaming .container.shape to .box-shape
2023-01-13 12:37:55 -03:00
c911322429
Change base width to 470px
...
And when the vertical scroll bar is present, reduce the width
of a paragraph to 98% of 470px.
2023-01-12 21:51:52 -03:00
13789768a1
Add ability to pause, and resume the stream
...
This change allows the stream to be paused, and
resumed on-demand.
2023-01-12 21:51:52 -03:00
de538b2a00
Maintain rtl direction on .surah-row.surah-details
2022-12-30 08:58:43 -03:00
8626dad6d9
Revise HTML markup, and stylesheets
...
* Remove the 'AboutSurah' component:
It is too simple to be worth being a component.
* Prefer long-form CSS syntax over SCSS indentation:
I think it is easier to read, although there's probably
still a soft spot to find between the two.
* Rename root class from 'surah' to 'root-box'.
* Rename / revise other CSS class names.
2022-12-30 08:39:59 -03:00
431bde851c
Add Select component
...
The Select component renders a list, and provides more flexibility
in how the element is styled (compared to a regular "<select>").
2022-12-28 04:01:23 -03:00
5a7f49c2c2
add LanguageSelect.tsx
2022-12-27 03:42:20 -03:00
7d68da0293
Fix CSS precendence of media rules
...
Adjust <=595px rule to a height of 330px.
Ref #53
2022-12-24 14:22:01 -03:00
0cf6089fb7
Fit content on 1378x768 device (follow up)
...
The previous commits broke support on Chrome / Safari on iOS.
`HTMLElement.scroll` does not seem to work when the height is set
as a percentage. This commit also uses `HTMLElement#scrollHeight`
instead of "offsetHeight".
2022-12-24 14:13:22 -03:00
c928f56601
Fit content on 1368x768 device (follow up)
...
Follow up to 80881311badb47133cbcdf440ee0cf470efae6ae
2022-12-24 13:01:53 -03:00
8d076fc5d6
Fit content (vertically) on 1368x768 device
...
I bought a new laptop recently, and I discovered that I couldn't view
a surah without a vertical scroll bar. The timer for an ayah wasn't
visible without scrolling. This change will hopefully address that.
2022-12-24 11:50:06 -03:00
b7d6c9262e
Rules: add a more precise compilation rule
2022-11-28 00:33:23 -03:00
aca7450b81
src/css: remove unneccessary styles.
2022-11-28 00:33:23 -03:00
45a39b6d25
src/css: assign meaningful class names to "span:first-child"
2022-11-20 06:31:00 -03:00
eadc482e07
swap css variable with scss variable.
2022-11-20 06:31:00 -03:00
dfd6d2bdb4
src/css/: add improvements
2022-11-20 06:31:00 -03:00
94ec17940b
src/css/: 'ltr' on select
...
we only have english theme names (for now) - rtl doesn't make sense.
2022-11-06 07:16:52 -03:00
92ad7af99b
src/: s/leaf/moon/
2022-11-06 07:13:00 -03:00
0254d444e9
src/: allow locale-specific styles
2022-11-06 07:11:27 -03:00
bc6f6f4617
improve layout on mobile
2022-11-02 07:26:58 -03:00
c28e7497d4
fix a couple of 404s, and 'rake deploy:local'
2022-11-02 06:23:24 -03:00
93c8b110b8
themes/leaf.scss: bold, green font
2022-10-31 15:39:30 -03:00
