mirror of
https://github.com/gabehf/Koito.git
synced 2026-03-07 13:38:15 -08:00
fix: improved mobile ui for rewind (#133)
This commit is contained in:
Gabe Farrell
GitHub
parent
6e7b4e0522
commit
c2a0987946
1 changed files with 64 additions and 62 deletions
|
|
@ -128,74 +128,76 @@ export default function RewindPage() {
|
||||||
transition: "1000",
|
transition: "1000",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col items-start md:flex-row sm:items-center gap-4">
|
<div className="flex flex-col items-start sm:items-center gap-4">
|
||||||
<title>{pgTitle}</title>
|
<title>{pgTitle}</title>
|
||||||
<meta property="og:title" content={pgTitle} />
|
<meta property="og:title" content={pgTitle} />
|
||||||
<meta name="description" content={pgTitle} />
|
<meta name="description" content={pgTitle} />
|
||||||
<div className="flex flex-col items-start mt-20 gap-10 w-19/20 px-20">
|
<div className="flex flex-col lg:flex-row items-start lg:mt-15 mt-5 gap-10 w-19/20 px-5 md:px-20">
|
||||||
|
<div className="flex flex-col items-start gap-4">
|
||||||
|
<div className="flex flex-col items-start gap-4 py-8">
|
||||||
|
<div className="flex items-center gap-6 justify-around">
|
||||||
|
<button
|
||||||
|
onClick={() => navigateMonth("prev")}
|
||||||
|
className="p-2 disabled:text-(--color-fg-tertiary)"
|
||||||
|
disabled={
|
||||||
|
// Previous month is in the future OR
|
||||||
|
new Date(year, month - 2) > new Date() ||
|
||||||
|
// We are looking at current year and prev would take us to full year
|
||||||
|
(new Date().getFullYear() === year && month === 1)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={20} />
|
||||||
|
</button>
|
||||||
|
<p className="font-medium text-xl text-center w-30">
|
||||||
|
{months[month]}
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigateMonth("next")}
|
||||||
|
className="p-2 disabled:text-(--color-fg-tertiary)"
|
||||||
|
disabled={new Date(year, month) > new Date()}
|
||||||
|
>
|
||||||
|
<ChevronRight size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-6 justify-around">
|
||||||
|
<button
|
||||||
|
onClick={() => navigateYear("prev")}
|
||||||
|
className="p-2 disabled:text-(--color-fg-tertiary)"
|
||||||
|
disabled={new Date(year - 1, month) > new Date()}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={20} />
|
||||||
|
</button>
|
||||||
|
<p className="font-medium text-xl text-center w-30">{year}</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigateYear("next")}
|
||||||
|
className="p-2 disabled:text-(--color-fg-tertiary)"
|
||||||
|
disabled={
|
||||||
|
// Next year date is in the future OR
|
||||||
|
new Date(year + 1, month - 1) > new Date() ||
|
||||||
|
// Next year date is current full year OR
|
||||||
|
(month == 0 && new Date().getFullYear() === year + 1) ||
|
||||||
|
// Next year date is current month
|
||||||
|
(new Date().getMonth() === month - 1 &&
|
||||||
|
new Date().getFullYear() === year + 1)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ChevronRight size={20} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<label htmlFor="show-time-checkbox">Show time listened?</label>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="show-time-checkbox"
|
||||||
|
checked={showTime}
|
||||||
|
onChange={(e) => setShowTime(!showTime)}
|
||||||
|
></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{stats !== undefined && (
|
{stats !== undefined && (
|
||||||
<Rewind stats={stats} includeTime={showTime} />
|
<Rewind stats={stats} includeTime={showTime} />
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-col items-center gap-4 py-8">
|
|
||||||
<div className="flex items-center gap-6 justify-around">
|
|
||||||
<button
|
|
||||||
onClick={() => navigateMonth("prev")}
|
|
||||||
className="p-2 disabled:text-(--color-fg-tertiary)"
|
|
||||||
disabled={
|
|
||||||
// Previous month is in the future OR
|
|
||||||
new Date(year, month - 2) > new Date() ||
|
|
||||||
// We are looking at current year and prev would take us to full year
|
|
||||||
(new Date().getFullYear() === year && month === 1)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ChevronLeft size={20} />
|
|
||||||
</button>
|
|
||||||
<p className="font-medium text-xl text-center w-30">
|
|
||||||
{months[month]}
|
|
||||||
</p>
|
|
||||||
<button
|
|
||||||
onClick={() => navigateMonth("next")}
|
|
||||||
className="p-2 disabled:text-(--color-fg-tertiary)"
|
|
||||||
disabled={new Date(year, month) > new Date()}
|
|
||||||
>
|
|
||||||
<ChevronRight size={20} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-6 justify-around">
|
|
||||||
<button
|
|
||||||
onClick={() => navigateYear("prev")}
|
|
||||||
className="p-2 disabled:text-(--color-fg-tertiary)"
|
|
||||||
disabled={new Date(year - 1, month) > new Date()}
|
|
||||||
>
|
|
||||||
<ChevronLeft size={20} />
|
|
||||||
</button>
|
|
||||||
<p className="font-medium text-xl text-center w-30">{year}</p>
|
|
||||||
<button
|
|
||||||
onClick={() => navigateYear("next")}
|
|
||||||
className="p-2 disabled:text-(--color-fg-tertiary)"
|
|
||||||
disabled={
|
|
||||||
// Next year date is in the future OR
|
|
||||||
new Date(year + 1, month - 1) > new Date() ||
|
|
||||||
// Next year date is current full year OR
|
|
||||||
(month == 0 && new Date().getFullYear() === year + 1) ||
|
|
||||||
// Next year date is current month
|
|
||||||
(new Date().getMonth() === month - 1 &&
|
|
||||||
new Date().getFullYear() === year + 1)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ChevronRight size={20} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<label htmlFor="show-time-checkbox">Show time listened?</label>
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="show-time-checkbox"
|
|
||||||
checked={showTime}
|
|
||||||
onChange={(e) => setShowTime(!showTime)}
|
|
||||||
></input>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue