sam/dev_arc_aws
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Align BookNest header layout closer to blueprint: stats under title, Quick Access label

Browse source
This commit is contained in:
Claude 2026-06-18 18:27:37 +00:00
parent bed903914a
commit 9d7fc518de
No known key found for this signature in database
2 changed files with 23 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.tsx
View file

@ -11,7 +11,7 @@ function App() {
const sidebarWidth = sidebarCollapsed ? 64 : 200
const location = useLocation()
const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
const heroPaddingTop = location.pathname === '/booknest' ? '90px' : '72px'
const heroPaddingTop = location.pathname === '/booknest' ? '70px' : '72px'
const heroObjectPosition = location.pathname === '/booknest' ? '54% 8%' : 'center 5%'
const topBarHeight = location.pathname === '/booknest' ? 72 : 56

17
src/pages/BookNest.tsx
View file

@ -272,13 +272,20 @@ export default function BookNest() {
return (
<div className="flex h-full w-full flex-col overflow-y-auto" style={{ scrollbarWidth: 'none' }}>
<div className="grid w-full gap-5" style={{ gridTemplateColumns: '3fr 1fr', gridTemplateRows: 'auto 1fr' }}>
{/* Page stats + Add Bookmark — main column only, so sidebar can rise above it */}
<div className="flex items-center justify-between shrink-0" style={{ gridColumn: 1, gridRow: 1, marginTop: '180px' }}>
{/* Page stats — sits directly under the hero title/subtitle, like the blueprint */}
<div className="flex items-center shrink-0" style={{ gridColumn: 1, gridRow: 1, marginTop: '8px' }}>
<div className="flex items-center gap-5" style={{ fontSize: '12px', color: '#7A7D85' }}>
<span className="flex items-center gap-1.5"><Link2 size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>312</strong> Links</span>
<span className="flex items-center gap-1.5"><FolderOpen size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>18</strong> Categories</span>
<span className="flex items-center gap-1.5"><Star size={13} style={{ color: '#C8A434' }} /> <strong style={{ color: '#E8E6E0' }}>12</strong> Favorites</span>
</div>
</div>
{/* Main column */}
<div className="flex flex-col gap-5" style={{ gridColumn: 1, gridRow: 2, marginTop: '14px' }}>
{/* Quick Access */}
<div className="flex items-center justify-between">
<h3 style={{ ...sectionTitle, marginBottom: 0, color: '#C8A434' }}>Quick Access</h3>
<button
className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
style={{
@ -288,7 +295,7 @@ export default function BookNest() {
backgroundColor: '#C8A434',
border: 'none',
borderRadius: '8px',
padding: '9px 16px',
padding: '8px 14px',
boxShadow: '0 0 14px rgba(200,164,52,0.2)',
}}
>
@ -296,10 +303,6 @@ export default function BookNest() {
Add Bookmark
</button>
</div>
{/* Main column */}
<div className="flex flex-col gap-5" style={{ gridColumn: 1, gridRow: 2, marginTop: '20px' }}>
{/* Quick Access */}
<div className="grid grid-cols-5 gap-4">
{quickAccess.map((qa) => (
<div key={qa.label} style={{ ...cardBase, padding: '14px' }} className="hover:!border-gold/20">