gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-07 13:38:15 -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-xl-weight: 600;
--header-weight: 600;
--header-line-height: 3rem;
}
@media (min-width: 60rem) {
@ -68,6 +69,7 @@
--header-sm: 16px;
--header-xl-weight: 600;
--header-weight: 600;
--header-line-height: 1.3em;
}
}
@ -98,6 +100,7 @@ h1 {
font-family: "League Spartan";
font-weight: var(--header-weight);
font-size: var(--header-xl);
line-height: var(--header-line-height);
}
h2 {
font-family: "League Spartan";

8
client/app/root.tsx
View file

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

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

@ -30,7 +30,7 @@ export default function AlbumChart() {
initialData={initialData}
endpoint="chart/top-albums"
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">
<button className="default" onClick={onPrev} disabled={page <= 1}>
Prev
@ -47,7 +47,7 @@ export default function AlbumChart() {
ranked
separators
data={data}
className="w-[400px] sm:w-[600px]"
className="w-11/12 sm:w-[600px]"
type="album"
/>
<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}
endpoint="chart/top-artists"
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">
<button className="default" onClick={onPrev} disabled={page <= 1}>
Prev
@ -47,7 +47,7 @@ export default function Artist() {
ranked
separators
data={data}
className="w-[400px] sm:w-[600px]"
className="w-11/12 sm:w-[600px]"
type="artist"
/>
<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}
endpoint="chart/top-tracks"
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">
<button className="default" onClick={onPrev} disabled={page <= 1}>
Prev
@ -47,7 +47,7 @@ export default function TrackChart() {
ranked
separators
data={data}
className="w-[400px] sm:w-[600px]"
className="w-11/12 sm:w-[600px]"
type="track"
/>
<div className="flex gap-15 mx-auto">