This commit is contained in:
parent
8f409c4d68
commit
ebd4bb36ca
7 changed files with 26 additions and 11 deletions
|
@ -2,6 +2,12 @@
|
||||||
|
|
||||||
* vNEXT
|
* vNEXT
|
||||||
|
|
||||||
|
** Revisit ~ThemeSelect.tsx~ for touch devices
|
||||||
|
On touch devices it is now easier to change themes thanks to
|
||||||
|
a container that has a larger height and width than the theme
|
||||||
|
icon it contains. Along with this change, the theme icons have
|
||||||
|
become larger and less circular
|
||||||
|
|
||||||
** Reduce default width
|
** Reduce default width
|
||||||
The look and feel of the website has changed to be more like
|
The look and feel of the website has changed to be more like
|
||||||
a book that could fit in the palm of your hand
|
a book that could fit in the palm of your hand
|
||||||
|
|
|
@ -13,12 +13,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-select.theme-select {
|
.react-select.theme-select {
|
||||||
|
ul li,
|
||||||
|
ul li a {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
.circle {
|
.circle {
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: var(--primary-color);
|
background: var(--primary-color);
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,7 +32,9 @@ export function AudioControl({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (enabled) {
|
if (enabled) {
|
||||||
audio.src = [audioBaseUrl, surah.id, `${ayah.id}.mp3?v=${commitId}`].join("/");
|
audio.src = [audioBaseUrl, surah.id, `${ayah.id}.mp3?v=${commitId}`].join(
|
||||||
|
"/",
|
||||||
|
);
|
||||||
play(audio);
|
play(audio);
|
||||||
}
|
}
|
||||||
}, [hidden, enabled, ayah?.id, audioBaseUrl]);
|
}, [hidden, enabled, ayah?.id, audioBaseUrl]);
|
||||||
|
@ -42,7 +44,7 @@ export function AudioControl({
|
||||||
"[data-audio-base-url]",
|
"[data-audio-base-url]",
|
||||||
);
|
);
|
||||||
const url = el?.dataset?.audioBaseUrl;
|
const url = el?.dataset?.audioBaseUrl;
|
||||||
const commit = el?.dataset?.commitId
|
const commit = el?.dataset?.commitId;
|
||||||
if (url?.length) {
|
if (url?.length) {
|
||||||
setAudioBaseUrl(url);
|
setAudioBaseUrl(url);
|
||||||
setCommitId(commit);
|
setCommitId(commit);
|
||||||
|
|
|
@ -9,8 +9,9 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export function Option({ children, href, className, onClick }: Props) {
|
export function Option({ children, href, className, onClick }: Props) {
|
||||||
|
const ref = createRef();
|
||||||
return (
|
return (
|
||||||
<a href={href} className={className} onClick={onClick}>
|
<a href={href} className={className} onClick={onClick} ref={ref}>
|
||||||
{children as string}
|
{children as string}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,10 +15,10 @@ export function ThemeSelect({ theme, setTheme }: Props) {
|
||||||
<Select.Option
|
<Select.Option
|
||||||
key={i}
|
key={i}
|
||||||
onClick={() => setTheme(t)}
|
onClick={() => setTheme(t)}
|
||||||
className={classNames("block circle mb-1", t)}
|
className="flex justify-end w-10 h-6"
|
||||||
value={t}
|
value={t}
|
||||||
>
|
>
|
||||||
<span className="block w-full h-full" />
|
<span className={classNames("rounded w-5 h-5", t)} />
|
||||||
</Select.Option>
|
</Select.Option>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
|
@ -37,7 +37,12 @@ function Select({ value, children: options, className }: Props) {
|
||||||
<li
|
<li
|
||||||
key={key}
|
key={key}
|
||||||
className={classNames({ hidden: isHidden })}
|
className={classNames({ hidden: isHidden })}
|
||||||
onClick={(e) => [e.stopPropagation(), setOpen(!isOpen)]}
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const { ref } = n.props;
|
||||||
|
setOpen(!isOpen);
|
||||||
|
ref.current?.click();
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{n}
|
{n}
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { render } from "preact";
|
import { render, createRef } from "preact";
|
||||||
import { useState, useEffect, useMemo, useRef } from "preact/hooks";
|
import { useState, useEffect, useMemo, useRef } from "preact/hooks";
|
||||||
import * as React from "preact/compat";
|
import * as React from "preact/compat";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
@ -10,6 +10,7 @@ const exports = {
|
||||||
useEffect,
|
useEffect,
|
||||||
useMemo,
|
useMemo,
|
||||||
useRef,
|
useRef,
|
||||||
|
createRef,
|
||||||
classNames,
|
classNames,
|
||||||
};
|
};
|
||||||
Object.assign(window, exports);
|
Object.assign(window, exports);
|
||||||
|
|
Loading…
Reference in a new issue