johnruina/johnruina
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

width wide rating category buttons

Browse Source
This commit is contained in:
johnruina
2026-07-19 23:06:07 -04:00
parent ede35930a8
commit 81eb95961a
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/RatingsPage.tsx
+8 -6
View File
@@ -314,20 +314,22 @@ function RatingsPage({ user }: Props) {
<style>{`input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:1px solid #424e88;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;padding:0}input[type="checkbox"]:checked{background:#424e88!important}input[type="checkbox"]:checked::after{content:"✓";color:#fff;font-size:11px;font-weight:700;line-height:1}`}</style> <style>{`input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:1px solid #424e88;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;padding:0}input[type="checkbox"]:checked{background:#424e88!important}input[type="checkbox"]:checked::after{content:"✓";color:#fff;font-size:11px;font-weight:700;line-height:1}`}</style>
<div style={{ fontSize: 28, fontWeight: 700, color: textClr, marginBottom: 12 }}>ratings</div> <div style={{ fontSize: 28, fontWeight: 700, color: textClr, marginBottom: 12 }}>ratings</div>
<div style={{ fontSize: 15, color: textClr, marginBottom: 20, whiteSpace: "pre-line" }}>rate some random stuff{'\n\n'}Accounts get to place 3 stars per rating category, put them on your all time favs.</div> <div style={{ fontSize: 15, color: textClr, marginBottom: 20, whiteSpace: "pre-line" }}>rate some random stuff{'\n\n'}Accounts get to place 3 stars per rating category, put them on your all time favs.</div>
<div style={{ display: "flex", alignItems: "center", gap: 4, overflowX: "auto", marginBottom: 8 }}> <div style={{ display: "flex", width: "100%", marginBottom: 8, border: `1px solid ${borderClr}`, borderRadius: 6, overflow: "hidden" }}>
{ratingTypes.map((t) => ( {ratingTypes.map((t, i) => (
<button <button
key={t.id} key={t.id}
onClick={() => { setSearch(""); navigate(`/ratings/${t.name}`); setSelectedCatId(t.categories[0]?.id ?? null); setSelectedId(null); setExpandedIds(new Set()); setSortMode("default"); }} onClick={() => { setSearch(""); navigate(`/ratings/${t.name}`); setSelectedCatId(t.categories[0]?.id ?? null); setSelectedId(null); setExpandedIds(new Set()); setSortMode("default"); }}
style={{ style={{
padding: "6px 12px", flex: 1,
padding: "8px 12px",
fontSize: 14, fontSize: 14,
fontWeight: 700,
whiteSpace: "nowrap", whiteSpace: "nowrap",
background: category === t.name ? "#424e88" : cardBg, background: category === t.name ? "#424e88" : dark ? "#2a2a2a" : "#f0f0f0",
color: category === t.name ? "#fff" : textClr, color: category === t.name ? "#fff" : textClr,
border: `1px solid ${category === t.name ? "#424e88" : borderClr}`, border: "none",
borderRight: i < ratingTypes.length - 1 ? `1px solid ${borderClr}` : "none",
cursor: "pointer", cursor: "pointer",
flexShrink: 0,
}} }}
> >
{t.name} {t.name}