vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-05-31 13:31:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 18

feat(stats): improve mobile leaderboard layout

Browse source
This commit is contained in:
Adam 2026-05-29 07:43:56 -05:00
parent dc28b82394
commit e9966b651f
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 72 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

68
packages/stats/app/src/routes/index.css
View file

@ -1559,7 +1559,8 @@
[data-page="stats"] [data-component="leaderboard"],
[data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-compact"],
[data-page="stats"] [data-slot="leaderboard-column"] {
[data-page="stats"] [data-slot="leaderboard-column"],
[data-page="stats"] [data-slot="leaderboard-mobile"] {
display: grid;
}
@ -1592,6 +1593,10 @@
gap: 8px;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] {
display: none;
}
[data-page="stats"] [data-section="leaderboard"] [data-slot="chart-footer"] {
margin-top: 32px;
}
@ -2024,8 +2029,12 @@
height: 18px;
}
[data-page="stats"] [data-slot="session-heading"] strong {
flex: 0 0 56px;
}
[data-page="stats"] [data-slot="session-heading"] span {
flex: 0 0 210px;
flex: 0 0 150px;
}
[data-page="stats"] [data-slot="session-heading"] p {
@ -2305,6 +2314,10 @@
font-size: 96px;
}
[data-page="stats"] [data-slot="session-heading"] {
display: none;
}
[data-page="stats"] [data-slot="market-labels"],
[data-page="stats"] [data-slot="market-bars"] {
gap: 8px;
@ -2383,6 +2396,57 @@
display: none;
}
[data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-pattern"],
[data-page="stats"] [data-slot="leaderboard-compact"] {
display: none;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] {
box-sizing: border-box;
display: flex;
gap: 12px;
width: calc(100% + 48px);
margin-inline: -24px;
padding-inline: 24px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-padding-inline: 24px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
[data-page="stats"] [data-slot="leaderboard-mobile"]::-webkit-scrollbar {
display: none;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-component="leader-card"] {
flex: 0 0 240px;
width: 240px;
min-height: 156px;
gap: 32px;
scroll-snap-align: start;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-body"] {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-avatar"] {
width: 28px;
height: 28px;
padding: 4px;
border-radius: 6px;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-watermark"] {
right: -68px;
width: 240px;
height: 240px;
}
[data-page="stats"] [data-component="top-models-chart"] {
grid-template-rows: 40px minmax(0, 1fr);
height: 400px;

8
packages/stats/app/src/routes/index.tsx
View file

@ -749,6 +749,9 @@ function Leaderboard(props: { data: LeaderboardEntry[] }) {
)}
</For>
</div>
<div data-slot="leaderboard-mobile" aria-label="Scrollable model token leaderboard">
<For each={props.data}>{(entry) => <LeaderboardCard entry={entry} size="featured" />}</For>
</div>
</div>
)
}
@ -1184,9 +1187,10 @@ function SessionCostChart(props: {
return (
<div data-component="session-cost">
<div data-slot="session-heading">
<span />
<strong aria-hidden="true" />
<span aria-hidden="true" />
<p>COST / SESSION</p>
<p>TOKENS / SESSIONS</p>
<p>TOKENS / SESSION</p>
</div>
<For each={props.data}>
{(item, index) => (