this repo has no description
Attempt to make month picker better
+44
-22
+15
-1
src/app.css
+15
-1
src/app.css
···
2134
2134
border-radius: 999px;
2135
2135
color: var(--text-color);
2136
2136
background-color: var(--bg-color);
2137
+
background-image: none;
2137
2138
border: 2px solid transparent;
2138
2139
margin: 0;
2139
-
appearance: none;
2140
+
/* appearance: none; */
2140
2141
line-height: 1;
2141
2142
font-size: 90%;
2143
+
display: flex;
2144
+
gap: 8px;
2145
+
2146
+
> .icon {
2147
+
color: var(--link-color);
2148
+
}
2142
2149
2143
2150
&:placeholder-shown {
2144
2151
color: var(--text-insignificant-color);
···
2157
2164
2158
2165
:is(input, select) {
2159
2166
background-color: transparent;
2167
+
background-image: none;
2160
2168
border: 0;
2161
2169
padding: 0;
2162
2170
margin: 0;
···
2167
2175
border-radius: 0;
2168
2176
box-shadow: none;
2169
2177
outline: none;
2178
+
2179
+
&::-webkit-calendar-picker-indicator {
2180
+
/* replace icon with triangle */
2181
+
opacity: 0.5;
2182
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
2183
+
}
2170
2184
}
2171
2185
}
2172
2186
}
+1
src/components/icon.jsx
+1
src/components/icon.jsx
···
101
101
'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
102
102
keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
103
103
cloud: () => import('@iconify-icons/mingcute/cloud-line'),
104
+
month: () => import('@iconify-icons/mingcute/calendar-month-line'),
104
105
};
105
106
106
107
function Icon({
+28
-21
src/pages/account-statuses.jsx
+28
-21
src/pages/account-statuses.jsx
···
16
16
import useTitle from '../utils/useTitle';
17
17
18
18
const LIMIT = 20;
19
+
const MIN_YEAR = 1983;
20
+
const MIN_YEAR_MONTH = `${MIN_YEAR}-01`; // Birth of the Internet
19
21
20
22
const supportsInputMonth = (() => {
21
23
try {
···
67
69
}, [sameCurrentInstance, account?.acct]);
68
70
69
71
async function fetchAccountStatuses(firstLoad) {
70
-
if (/^\d{4}-[01]\d$/.test(month)) {
72
+
const isValidMonth = /^\d{4}-[01]\d$/.test(month);
73
+
const isValidYear = month?.split?.('-')?.[0] >= MIN_YEAR;
74
+
if (isValidMonth && isValidYear) {
71
75
if (!account) {
72
76
return {
73
77
value: [],
···
297
301
))}
298
302
{searchEnabled &&
299
303
(supportsInputMonth ? (
300
-
<input
301
-
type="month"
302
-
class={`filter-field ${month ? 'is-active' : ''}`}
303
-
disabled={!account?.acct}
304
-
value={month || ''}
305
-
min="1983-01" // Birth of the Internet
306
-
max={new Date().toISOString().slice(0, 7)}
307
-
onInput={(e) => {
308
-
const { value } = e.currentTarget;
309
-
setSearchParams(
310
-
value
311
-
? {
312
-
month: value,
313
-
}
314
-
: {},
315
-
);
316
-
}}
317
-
/>
304
+
<label class={`filter-field ${month ? 'is-active' : ''}`}>
305
+
<Icon icon="month" size="l" />
306
+
<input
307
+
type="month"
308
+
disabled={!account?.acct}
309
+
value={month || ''}
310
+
min={MIN_YEAR_MONTH}
311
+
max={new Date().toISOString().slice(0, 7)}
312
+
onInput={(e) => {
313
+
const { value } = e.currentTarget;
314
+
setSearchParams(
315
+
value
316
+
? {
317
+
month: value,
318
+
}
319
+
: {},
320
+
);
321
+
}}
322
+
/>
323
+
</label>
318
324
) : (
319
325
// Fallback to <select> for month and <input type="number"> for year
320
326
<MonthPicker
321
327
class={`filter-field ${month ? 'is-active' : ''}`}
322
328
disabled={!account?.acct}
323
329
value={month || ''}
324
-
min="1983-01" // Birth of the Internet
330
+
min={MIN_YEAR_MONTH}
325
331
max={new Date().toISOString().slice(0, 7)}
326
332
onInput={(e) => {
327
333
const { value } = e;
···
465
471
466
472
return (
467
473
<div class={className}>
474
+
<Icon icon="month" size="l" />
468
475
<select
469
476
ref={monthFieldRef}
470
477
disabled={disabled}
···
497
504
type="number"
498
505
disabled={disabled}
499
506
value={_year || new Date().getFullYear()}
500
-
min={min?.slice(0, 4) || '1983'}
507
+
min={min?.slice(0, 4) || MIN_YEAR}
501
508
max={max?.slice(0, 4) || new Date().getFullYear()}
502
509
onInput={(e) => {
503
510
const { value } = e.currentTarget;