gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-07 21:48:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: tweaks and fixes (#194)

Browse source 
* reduce min width of top chart on mobile

* adjust error page style

* adjust h1 line height
This commit is contained in:
Gabe Farrell 2026-02-04 13:41:12 -05:00 • committed by GitHub
parent 531c72899c
commit 0ec7b458cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 13 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/app/app.css
View file

@ -58,6 +58,7 @@
--header-sm: 16px; --header-sm: 16px;
--header-xl-weight: 600; --header-xl-weight: 600;
--header-weight: 600; --header-weight: 600;
--header-line-height: 3rem;
} }
@media (min-width: 60rem) { @media (min-width: 60rem) {
@ -68,6 +69,7 @@
--header-sm: 16px; --header-sm: 16px;
--header-xl-weight: 600; --header-xl-weight: 600;
--header-weight: 600; --header-weight: 600;
--header-line-height: 1.3em;
} }
} }
@ -98,6 +100,7 @@ h1 {
font-family: "League Spartan"; font-family: "League Spartan";
font-weight: var(--header-weight); font-weight: var(--header-weight);
font-size: var(--header-xl); font-size: var(--header-xl);
line-height: var(--header-line-height);
} }
h2 { h2 {
font-family: "League Spartan"; font-family: "League Spartan";

8
client/app/root.tsx
View file

@ -116,12 +116,12 @@ export function ErrorBoundary() {
<AppProvider> <AppProvider>
<ThemeProvider> <ThemeProvider>
<title>{title}</title> <title>{title}</title>
<div className="flex">
<Sidebar /> <Sidebar />
<div className="flex">
<div className="w-full flex flex-col"> <div className="w-full flex flex-col">
<main className="pt-16 p-4 container mx-auto flex-grow"> <main className="pt-16 p-4 mx-auto flex-grow">
<div className="flex gap-4 items-end"> <div className="md:flex gap-4">
<img className="w-[200px] rounded" src="../yuu.jpg" /> <img className="w-[200px] rounded mb-3" src="../yuu.jpg" />
<div> <div>
<h1>{message}</h1> <h1>{message}</h1>
<p>{details}</p> <p>{details}</p>

4
client/app/routes/Charts/AlbumChart.tsx
View file

@ -30,7 +30,7 @@ export default function AlbumChart() {
initialData={initialData} initialData={initialData}
endpoint="chart/top-albums" endpoint="chart/top-albums"
render={({ data, page, onNext, onPrev }) => ( render={({ data, page, onNext, onPrev }) => (
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5 w-full">
<div className="flex gap-15 mx-auto"> <div className="flex gap-15 mx-auto">
<button className="default" onClick={onPrev} disabled={page <= 1}> <button className="default" onClick={onPrev} disabled={page <= 1}>
Prev Prev
@ -47,7 +47,7 @@ export default function AlbumChart() {
ranked ranked
separators separators
data={data} data={data}
className="w-[400px] sm:w-[600px]" className="w-11/12 sm:w-[600px]"
type="album" type="album"
/> />
<div className="flex gap-15 mx-auto"> <div className="flex gap-15 mx-auto">

4
client/app/routes/Charts/ArtistChart.tsx
View file

@ -30,7 +30,7 @@ export default function Artist() {
initialData={initialData} initialData={initialData}
endpoint="chart/top-artists" endpoint="chart/top-artists"
render={({ data, page, onNext, onPrev }) => ( render={({ data, page, onNext, onPrev }) => (
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5 w-full">
<div className="flex gap-15 mx-auto"> <div className="flex gap-15 mx-auto">
<button className="default" onClick={onPrev} disabled={page <= 1}> <button className="default" onClick={onPrev} disabled={page <= 1}>
Prev Prev
@ -47,7 +47,7 @@ export default function Artist() {
ranked ranked
separators separators
data={data} data={data}
className="w-[400px] sm:w-[600px]" className="w-11/12 sm:w-[600px]"
type="artist" type="artist"
/> />
<div className="flex gap-15 mx-auto"> <div className="flex gap-15 mx-auto">

4
client/app/routes/Charts/TrackChart.tsx
View file

@ -30,7 +30,7 @@ export default function TrackChart() {
initialData={initialData} initialData={initialData}
endpoint="chart/top-tracks" endpoint="chart/top-tracks"
render={({ data, page, onNext, onPrev }) => ( render={({ data, page, onNext, onPrev }) => (
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5 w-full">
<div className="flex gap-15 mx-auto"> <div className="flex gap-15 mx-auto">
<button className="default" onClick={onPrev} disabled={page <= 1}> <button className="default" onClick={onPrev} disabled={page <= 1}>
Prev Prev
@ -47,7 +47,7 @@ export default function TrackChart() {
ranked ranked
separators separators
data={data} data={data}
className="w-[400px] sm:w-[600px]" className="w-11/12 sm:w-[600px]"
type="track" type="track"
/> />
<div className="flex gap-15 mx-auto"> <div className="flex gap-15 mx-auto">