This commit is contained in:
Shusui MOYATANI
2023-03-17 20:31:51 +09:00
parent 7a84167ed9
commit 5a37842702

View File

@@ -48,21 +48,25 @@ const RelayConfig = () => {
); );
}; };
const dateFormats: { id: Config['dateFormat']; name: string; example: string }[] = [ const dateFormats: {
id: Config['dateFormat'];
name: string;
example: string;
}[] = [
{ {
id: 'relative', id: 'relative',
name: '相対', name: '相対表記',
example: '秒前', example: '7秒前',
}, },
{ {
id: 'absolute-short', id: 'absolute-short',
name: '絶対 (短形式)', name: '絶対表記 (短形式)',
example: '昨日 12:34', example: '昨日 23:55',
}, },
{ {
id: 'absolute-long', id: 'absolute-long',
name: '絶対 (長形式)', name: '絶対表記 (長形式)',
example: '2023', example: '2020/11/8 21:02:53',
}, },
]; ];
@@ -76,13 +80,13 @@ const DateFormatConfig = () => {
return ( return (
<div> <div>
<h3 class="font-bold"></h3> <h3 class="font-bold"></h3>
<div class="flex justify-evenly gap-2"> <div class="flex flex-col justify-evenly gap-2 md:flex-row">
<For each={dateFormats}> <For each={dateFormats}>
{({ id, name, example }) => ( {({ id, name, example }) => (
<div class="flex flex-1 flex-col items-center"> <div class="flex flex-1 flex-row items-center gap-1 md:flex-col">
<button <button
type="button" type="button"
class="w-full rounded border border-rose-300 p-2 font-bold" class="w-48 rounded border border-rose-300 p-2 font-bold md:w-full"
classList={{ classList={{
'bg-rose-300': config().dateFormat === id, 'bg-rose-300': config().dateFormat === id,
'text-white': config().dateFormat === id, 'text-white': config().dateFormat === id,
@@ -93,7 +97,7 @@ const DateFormatConfig = () => {
> >
{name} {name}
</button> </button>
{example} <div class="text-xs">{example}</div>
</div> </div>
)} )}
</For> </For>
@@ -118,7 +122,7 @@ const ConfigUI = (props: ConfigProps) => {
role="button" role="button"
onClick={handleClickContainer} onClick={handleClickContainer}
> >
<div class="w-[480px] max-w-[100vw] rounded bg-white p-4 shadow"> <div class="max-h-[90vh] w-[640px] max-w-[100vw] overflow-y-scroll rounded bg-white p-4 shadow">
<div class="relative"> <div class="relative">
<h2 class="flex-1 text-center font-bold"></h2> <h2 class="flex-1 text-center font-bold"></h2>
<button class="absolute top-1 right-0" onClick={() => props.onClose()}> <button class="absolute top-1 right-0" onClick={() => props.onClose()}>