asc/walkup
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine gameday and navbar UI

Browse Source
This commit is contained in:
Codex
2026-04-23 12:20:01 -05:00
parent c84dec2a0f
commit 6faf6f6dd5
5 changed files with 54 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<title>Walkup</title> <title>Walkup</title>
</head> </head>
<body> <body>
@@ -10,4 +11,3 @@
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

11
frontend/public/icon.svg
View File

@@ -1,7 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none">
<rect width="256" height="256" rx="48" fill="#132238"/> <rect width="256" height="256" rx="48" fill="#132238"/>
<circle cx="128" cy="128" r="78" fill="#f4ede2"/> <circle cx="128" cy="128" r="80" fill="#F4EDE2"/>
<path d="M93 166V92h18l28 33 28-33h18v74h-20v-40l-26 30-26-30v40H93z" fill="#d94f04"/> <path
<path d="M53 198c18-23 45-35 75-35s57 12 75 35" fill="none" stroke="#d94f04" stroke-width="12" stroke-linecap="round"/> d="M144 70a14 14 0 1 1-28 0a14 14 0 0 1 28 0m-18.8 26.6a9 9 0 0 1 8.6-6.6h15a9 9 0 0 1 7.4 3.9l15.2 22.7a9 9 0 1 1-15 10.1l-10.1-15.1l-4.7 21.6l20.8 18.1a9 9 0 0 1-11.8 13.6L132 148.4l-12.4 20.7V192a9 9 0 1 1-18 0v-25.4a9 9 0 0 1 1.3-4.6l14.1-23.5l4.4-20.3l-8 9.8a9 9 0 0 1-7 3.3H87a9 9 0 1 1 0-18h15.2z"
fill="#D94F04"
/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 392 B

After

Width:  |  Height:  |  Size: 533 B

29
frontend/src/App.tsx
View File

@@ -24,6 +24,23 @@ function getRouteDestinationLabel(pathname: string) {
} }
} }
function getNavbarPageLabel(pathname: string) {
switch (pathname) {
case "/":
return "Home";
case "/library":
return "Walkup Clips";
case "/gameday":
return "Gameday";
case "/profile":
return "Profile";
case "/admin":
return "Admin";
default:
return "";
}
}
function ProtectedRoute({ children }: { children: ReactElement }) { function ProtectedRoute({ children }: { children: ReactElement }) {
const location = useLocation(); const location = useLocation();
const { data, isLoading } = useSession(); const { data, isLoading } = useSession();
@@ -210,6 +227,7 @@ function ShellLayout() {
const [navOpen, setNavOpen] = useState(false); const [navOpen, setNavOpen] = useState(false);
const walkup = useWalkupContext(); const walkup = useWalkupContext();
const location = useLocation(); const location = useLocation();
const currentPageLabel = getNavbarPageLabel(location.pathname);
const showNavbar = walkup.sessionQuery.data?.authenticated === true; const showNavbar = walkup.sessionQuery.data?.authenticated === true;
const showTeamSelectionModal = walkup.isTeamSnap && walkup.teamsQuery.isFetched && !walkup.hasSelectedTeam; const showTeamSelectionModal = walkup.isTeamSnap && walkup.teamsQuery.isFetched && !walkup.hasSelectedTeam;
const shellClassName = showNavbar ? "shell is-authenticated" : "shell is-authless"; const shellClassName = showNavbar ? "shell is-authenticated" : "shell is-authless";
@@ -235,9 +253,14 @@ function ShellLayout() {
{showNavbar ? ( {showNavbar ? (
<header className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2"> <header className="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm sticky-top px-3 py-2">
<div className="container-fluid gap-3 align-items-center"> <div className="container-fluid gap-3 align-items-center">
<div className="navbar-brand d-grid gap-0"> <div className="navbar-brand d-flex align-items-center gap-3 mb-0">
<span className="text-uppercase small text-info-emphasis">Baseball audio ops</span> <span className="site-brand-mark" aria-hidden="true">
<span className="fw-semibold fs-4 lh-1 text-white">Walkup</span> <i className="bi bi-person-walking" />
</span>
<div className="site-brand-copy">
<span className="fw-semibold fs-4 lh-1 text-white">Walkup</span>
{currentPageLabel ? <span className="current-page-label d-lg-none">{currentPageLabel}</span> : null}
</div>
</div> </div>
<button <button
type="button" type="button"

10
frontend/src/pages/GamedayPage.tsx
View File

@@ -265,14 +265,6 @@ export function GamedayPage() {
</div> </div>
</div> </div>
) : null} ) : null}
<div className="hero">
<p className="eyebrow">Gameday mode</p>
<h1>{selectedGame ? formatGameTitle(selectedGame) : "Select a game for gameday"}</h1>
<p>
Any player can run gameday. The player list now follows the event lineup first, then RSVP order, and each expanded
row keeps pinned clips at the top of the player&apos;s library.
</p>
</div>
<div className="panel-grid"> <div className="panel-grid">
<div className="panel"> <div className="panel">
<div className="d-grid gap-2"> <div className="d-grid gap-2">
@@ -363,12 +355,10 @@ export function GamedayPage() {
const availability = (availabilityQuery.data ?? []).find( const availability = (availabilityQuery.data ?? []).find(
(entry) => String(entry.memberId) === memberId, (entry) => String(entry.memberId) === memberId,
) ?? null; ) ?? null;
const pinCount = assignmentList.filter((assignment) => assignment.external_player_id === memberId).length;
const isExpanded = memberId === expandedPlayerId; const isExpanded = memberId === expandedPlayerId;
const expansionId = `player-clips-${memberId}`; const expansionId = `player-clips-${memberId}`;
const availabilityStatusCode = availability?.statusCode ?? null; const availabilityStatusCode = availability?.statusCode ?? null;
const playerMeta = [ const playerMeta = [
pinCount ? `${pinCount} pinned clip${pinCount === 1 ? "" : "s"}` : null,
lineupEntry?.label ?? null, lineupEntry?.label ?? null,
].filter(Boolean); ].filter(Boolean);

21
frontend/src/styles.css
View File

@@ -126,6 +126,27 @@ select {
font-style: normal; font-style: normal;
} }
.site-brand-mark {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent-soft);
font-size: 1.4rem;
line-height: 1;
margin-left: 0.15rem;
}
.site-brand-copy {
display: grid;
gap: 0.16rem;
}
.current-page-label {
color: rgba(255, 255, 255, 0.68);
font-size: 0.72rem;
line-height: 1.2;
}
.clip-list-add-button .bootstrap-icon { .clip-list-add-button .bootstrap-icon {
font-size: 1.2rem; font-size: 1.2rem;
} }