Skip to content

Commit 8e8c55c

Browse files
marwanmarwan
committed
more settings drawer design changes
1 parent 64fdea2 commit 8e8c55c

File tree

5 files changed

+73
-54
lines changed

5 files changed

+73
-54
lines changed

‎src/components/ui/Drawer.svelte

Lines changed: 67 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { displayOptions, selectableFontTypes, selectableThemes, selectableVerseTranslations, verseTranslationsLanguages, selectableWordTranslations, selectableReciters, selectablePlaybackSpeeds } from "$data/options";
44
import { updateSettings } from "$utils/updateSettings";
55
import { resetSettings } from "$utils/resetSettings";
6-
import { disabledElement, buttonElement } from "$utils/commonStyles";
6+
import { disabledElement, buttonElement, labelPillElement } from "$utils/commonStyles";
77
88
const settingsBlockClasses = "space-y-2 py-6 border-b";
99
@@ -12,11 +12,21 @@
1212

1313
<!-- drawer component -->
1414
<div id="settings-drawer" class="fixed top-0 right-0 z-40 h-screen p-4 pt-0 pb-16 overflow-y-auto transition-transform rounded-tl-xl rounded-bl-xl translate-x-full bg-white grayscale w-full md:w-1/2 lg:w-[430px] dark:bg-gray-800" tabindex="-1" aria-labelledby="settings-drawer-label">
15-
<div id="settings-head" class="top-0 sticky bg-white border-b-2 pt-4 mb-4">
15+
<div id="settings-head" class="top-0 sticky bg-white border-b-2 py-4 mb-4">
1616
<h5 id="settings-drawer-label" class="inline-flex items-center mb-4 text-3xl space-x-2 font-semibold text-gray-500 dark:text-gray-400">
1717
<span>Settings</span>
1818
</h5>
1919

20+
<!-- <div id="quick-jump" class="flex flex-row space-x-2">
21+
<span>Jump: </span>
22+
<div>
23+
<a href="#display-settings-block" class={labelPillElement}>Display</a>
24+
<a href="#font-settings-block" class={labelPillElement}>Font</a>
25+
<a href="#translation-settings-block" class={labelPillElement}>Translation</a>
26+
<a href="#audio-settings-block" class={labelPillElement}>Audio</a>
27+
</div>
28+
</div> -->
29+
2030
<button type="button" data-drawer-hide="settings-drawer" aria-controls="settings-drawer" class="text-gray-400 bg-transparent hover:bg-[#ebebeb] hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-4 right-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
2131
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
2232
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
@@ -25,8 +35,8 @@
2535
</button>
2636
</div>
2737

28-
<!-- display -->
29-
<div class="py-5 border-gray-200">
38+
<!-- display-settings-block -->
39+
<div id="display-settings-block" class="py-5">
3040
<h3 class="block mb-2 font-medium text-xl text-gray-500 dark:text-slate-400">Display</h3>
3141

3242
<div class="flex flex-col flex-wrap text-base">
@@ -43,6 +53,52 @@
4353
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">An assortment of website themes to please your vision.</p>
4454
</div>
4555

56+
<!-- display-type-setting -->
57+
<div id="display-type-setting" class={settingsBlockClasses}>
58+
<div class="flex flex-row justify-between items-center">
59+
<label for="display-style-list" class="block text-gray-900 dark:text-slate-400">Display Type</label>
60+
<select id="display-style-list" bind:value={$displayTypeStore} on:change={(event) => updateSettings({ type: "displayType", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
61+
{#each Object.entries(displayOptions) as [id, displayOption]}
62+
<option disabled={$currentPageStore !== "chapter" && displayOption.displayID > 2 && "true"} value={displayOption.displayID}>{displayOption.displayName}</option>
63+
{/each}
64+
</select>
65+
</div>
66+
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Different verse layouts that you can choose from.</p>
67+
</div>
68+
69+
<!-- word-translation-toggle-setting -->
70+
<div id="word-translation-toggle-setting" class={settingsBlockClasses}>
71+
<div class="flex flex-row justify-between items-center">
72+
<span class="block text-gray-900 dark:text-slate-400">Word Translation</span>
73+
<div class="inline-flex rounded-md shadow-sm {$wordTransliterationEnabledStore === false && disabledElement}" role="group">
74+
<button type="button" on:click={() => updateSettings({ type: "wordTranslationEnabled", value: !$wordTranslationEnabledStore })} class="w-32 border text-center border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
75+
{$wordTranslationEnabledStore === true ? "Shown" : "Hidden"}
76+
</button>
77+
</div>
78+
</div>
79+
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Select whether you would like to show or hide word translations which is shown below the Arabic word.</p>
80+
</div>
81+
82+
<!-- word-transliteration-toggle-setting -->
83+
<div id="word-transliteration-toggle-setting" class="{settingsBlockClasses} border-b-0">
84+
<div class="flex flex-row justify-between items-center">
85+
<span class="block text-gray-900 dark:text-slate-400">Word Transliteration</span>
86+
<div class="inline-flex rounded-md shadow-sm {$wordTranslationEnabledStore === false && disabledElement}" role="group">
87+
<button type="button" on:click={() => updateSettings({ type: "wordTransliterationEnabled", value: !$wordTransliterationEnabledStore })} class="w-32 border text-center border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
88+
{$wordTransliterationEnabledStore === true ? "Shown" : "Hidden"}
89+
</button>
90+
</div>
91+
</div>
92+
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Select whether you would like to show or hide word transliterations which is shown below the Arabic word.</p>
93+
</div>
94+
</div>
95+
</div>
96+
97+
<!-- font-settings-block -->
98+
<div id="font-settings-block" class="py-5 border-t-2 border-gray-200">
99+
<h3 class="block mb-2 font-medium text-xl text-gray-500 dark:text-slate-400">Font</h3>
100+
101+
<div class="flex flex-col flex-wrap text-base">
46102
<!-- quran-font-setting -->
47103
<div id="quran-font-setting" class={settingsBlockClasses}>
48104
<div class="flex flex-row justify-between items-center">
@@ -61,19 +117,6 @@
61117
{/if}
62118
</div>
63119

64-
<!-- display-type-setting -->
65-
<div id="display-type-setting" class={settingsBlockClasses}>
66-
<div class="flex flex-row justify-between items-center">
67-
<label for="display-style-list" class="block text-gray-900 dark:text-slate-400">Display Type</label>
68-
<select id="display-style-list" bind:value={$displayTypeStore} on:change={(event) => updateSettings({ type: "displayType", value: +event.target.selectedIndex + 1 })} class="w-32 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
69-
{#each Object.entries(displayOptions) as [id, displayOption]}
70-
<option disabled={$currentPageStore !== "chapter" && displayOption.displayID > 2 && "true"} value={displayOption.displayID}>{displayOption.displayName}</option>
71-
{/each}
72-
</select>
73-
</div>
74-
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Different verse layouts that you can choose from.</p>
75-
</div>
76-
77120
<!-- arabic-word-size-setting -->
78121
<div id="arabic-word-size-setting" class={settingsBlockClasses}>
79122
<div class="flex flex-row justify-between items-center">
@@ -115,7 +158,7 @@
115158
</div>
116159

117160
<!-- verse-translation-size-setting -->
118-
<div id="verse-translation-size-setting" class={settingsBlockClasses}>
161+
<div id="verse-translation-size-setting" class="{settingsBlockClasses} border-b-0">
119162
<div class="flex flex-row justify-between items-center">
120163
<span class="block text-gray-900 dark:text-slate-400">Verse Tr/Tl Size ({fontSizeCodes.verseTranslationText.split("-")[1]})</span>
121164
<div class="inline-flex rounded-md shadow-sm" role="group">
@@ -133,38 +176,12 @@
133176
</div>
134177
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Font size for verse translation and transliteration.</p>
135178
</div>
136-
137-
<!-- word-translation-toggle-setting -->
138-
<div id="word-translation-toggle-setting" class={settingsBlockClasses}>
139-
<div class="flex flex-row justify-between items-center">
140-
<span class="block text-gray-900 dark:text-slate-400">Word Translation</span>
141-
<div class="inline-flex rounded-md shadow-sm {$wordTransliterationEnabledStore === false && disabledElement}" role="group">
142-
<button type="button" on:click={() => updateSettings({ type: "wordTranslationEnabled", value: !$wordTranslationEnabledStore })} class="w-32 border text-center border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
143-
{$wordTranslationEnabledStore === true ? "Shown" : "Hidden"}
144-
</button>
145-
</div>
146-
</div>
147-
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Select whether you would like to show or hide word translations which is shown below the Arabic word.</p>
148-
</div>
149-
150-
<!-- word-transliteration-toggle-setting -->
151-
<div id="word-transliteration-toggle-setting" class="{settingsBlockClasses} border-b-0">
152-
<div class="flex flex-row justify-between items-center">
153-
<span class="block text-gray-900 dark:text-slate-400">Word Transliteration</span>
154-
<div class="inline-flex rounded-md shadow-sm {$wordTranslationEnabledStore === false && disabledElement}" role="group">
155-
<button type="button" on:click={() => updateSettings({ type: "wordTransliterationEnabled", value: !$wordTransliterationEnabledStore })} class="w-32 border text-center border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-slate-700 dark:placeholder-gray-400 dark:text-slate-400 dark:focus:ring-blue-500 dark:focus:border-blue-500">
156-
{$wordTransliterationEnabledStore === true ? "Shown" : "Hidden"}
157-
</button>
158-
</div>
159-
</div>
160-
<p class="mb-6 text-sm text-gray-500 dark:text-gray-400">Select whether you would like to show or hide word transliterations which is shown below the Arabic word.</p>
161-
</div>
162179
</div>
163180
</div>
164181

165-
<!-- translations -->
166-
<div class="py-5 border-t-2 border-gray-200">
167-
<h3 class="block mb-2 font-medium text-xl text-gray-500 dark:text-slate-400">Translations</h3>
182+
<!-- translation-settings-block -->
183+
<div id="translation-settings-block" class="py-5 border-t-2 border-gray-200">
184+
<h3 class="block mb-2 font-medium text-xl text-gray-500 dark:text-slate-400">Translation</h3>
168185

169186
<div class="flex flex-col flex-wrap text-base">
170187
<!-- word-translation-setting -->
@@ -219,9 +236,9 @@
219236
</div>
220237
</div>
221238

222-
<!-- audio -->
223-
<div class="py-5 border-t-2 border-gray-200">
224-
<h3 class="block mb-2 font-medium text-xl text-gray-500 dark:text-slate-400">Audios</h3>
239+
<!-- audio-settings-block -->
240+
<div id="audio-settings-block" class="py-5 border-t-2 border-gray-200">
241+
<h3 class="block mb-2 font-medium text-xl text-gray-500 dark:text-slate-400">Audio</h3>
225242

226243
<div class="flex flex-col flex-wrap text-base">
227244
<!-- verse-reciter-setting -->

‎src/components/ui/modals/InitialSetupModal.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
{/key}
7676
</div>
7777
<!-- Modal footer -->
78-
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
78+
<div class="flex justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
7979
<button on:click={() => toggleModal("InitialSetupModal", "hide")} type="button" class={buttonElement}>Close</button>
8080
</div>
8181
</div>

‎src/components/ui/modals/TajweedRulingModal.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</div>
4646
</div>
4747
<!-- Modal footer -->
48-
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
48+
<div class="flex justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
4949
<button on:click={() => toggleModal("TajweedRulingModal", "hide")} type="button" class={buttonElement}>Close</button>
5050
</div>
5151
</div>

‎src/utils/commonStyles.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ export const buttonElement = "py-2 px-4 border border-gray-200 bg-gray-50 hover:
44

55
export const tabPillElement = "py-2 px-4 text-xs cursor-pointer rounded-lg hover:bg-[#ebebeb] dark:hover:bg-slate-700 bg-[#ebebeb] dark:bg-slate-700";
66

7+
export const labelPillElement = "bg-gray-300 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full grayscale";
8+
79
export const linkElement = "font-semibold hover:underline";

‎src/views/Issues.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { websiteURL } from "$data/websiteSettings";
55
import { currentPageStore } from "$utils/stores";
66
import { timeAgo } from "$utils/timeAgo";
7-
import { linkElement } from "$utils/commonStyles";
7+
import { linkElement, labelPillElement } from "$utils/commonStyles";
88
99
let fetchData;
1010
@@ -45,7 +45,7 @@
4545
<!-- labels -->
4646
<div class="inline-flex ml-2 space-x-2">
4747
{#each Object.entries(value.labels) as [id, label]}
48-
<span class="bg-gray-300 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full grayscale">{label.name}</span>
48+
<span class={labelPillElement}>{label.name}</span>
4949
{/each}
5050
</div>
5151
<div>

0 commit comments

Comments
 (0)