Restructure BookNest hero header: bigger title, taller Favorites card, Add Bookmark button
This commit is contained in:
Claude
parent
8882d0af7c
commit
bed903914a
3 changed files with 47 additions and 23 deletions
|
|
@ -11,7 +11,9 @@ function App() {
|
|||
const sidebarWidth = sidebarCollapsed ? 64 : 200
|
||||
const location = useLocation()
|
||||
const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
|
||||
const heroPaddingTop = location.pathname === '/booknest' ? '240px' : '72px'
|
||||
const heroPaddingTop = location.pathname === '/booknest' ? '90px' : '72px'
|
||||
const heroObjectPosition = location.pathname === '/booknest' ? '54% 8%' : 'center 5%'
|
||||
const topBarHeight = location.pathname === '/booknest' ? 72 : 56
|
||||
|
||||
return (
|
||||
<div className="min-h-screen w-screen overflow-hidden bg-page">
|
||||
|
|
@ -32,7 +34,7 @@ function App() {
|
|||
className="absolute inset-0 h-full w-full"
|
||||
style={{
|
||||
objectFit: 'cover',
|
||||
objectPosition: 'center 5%',
|
||||
objectPosition: heroObjectPosition,
|
||||
maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
|
||||
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
|
||||
}}
|
||||
|
|
@ -52,7 +54,7 @@ function App() {
|
|||
|
||||
<section
|
||||
className="relative flex w-full flex-col overflow-hidden"
|
||||
style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: showHero ? `${heroPaddingTop} 24px 24px 24px` : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
|
||||
style={{ height: `calc(100vh - ${topBarHeight}px)`, scrollbarWidth: 'none', padding: showHero ? `${heroPaddingTop} 24px 24px 24px` : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<Glance />} />
|
||||
|
|
|
|||
|
|
@ -32,14 +32,17 @@ export default function TopBar() {
|
|||
}, [])
|
||||
|
||||
return (
|
||||
<header className="h-14 flex items-center px-6 sticky top-0 z-40">
|
||||
<header className="flex items-center px-6 sticky top-0 z-40" style={{ height: subtitle ? '72px' : '56px' }}>
|
||||
{/* Page Title — pushed away from sidebar edge */}
|
||||
<div style={{ marginLeft: '20px' }}>
|
||||
<h1 className="text-[18px] font-bold uppercase tracking-wide" style={{ color: '#C8A434' }}>
|
||||
<h1
|
||||
className="font-bold uppercase tracking-wide"
|
||||
style={{ color: '#C8A434', fontSize: subtitle ? '28px' : '18px' }}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
{subtitle && (
|
||||
<p className="text-[11px]" style={{ color: '#7A7D85', marginTop: '-2px' }}>
|
||||
<p className="text-[13px]" style={{ color: '#A8A6A0', marginTop: '2px' }}>
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import {
|
|||
Link2,
|
||||
FolderOpen,
|
||||
Star,
|
||||
Plus,
|
||||
Server,
|
||||
Bot,
|
||||
Cloud,
|
||||
|
|
@ -269,17 +270,35 @@ export default function BookNest() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col gap-5 overflow-y-auto" style={{ scrollbarWidth: 'none' }}>
|
||||
{/* Page stats */}
|
||||
<div className="flex items-center gap-5 shrink-0" 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 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' }}>
|
||||
<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>
|
||||
<button
|
||||
className="flex items-center gap-2 cursor-pointer transition-colors whitespace-nowrap"
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
color: '#0A0B0D',
|
||||
backgroundColor: '#C8A434',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
padding: '9px 16px',
|
||||
boxShadow: '0 0 14px rgba(200,164,52,0.2)',
|
||||
}}
|
||||
>
|
||||
<Plus size={14} />
|
||||
Add Bookmark
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid w-full gap-5" style={{ gridTemplateColumns: '3fr 1fr' }}>
|
||||
{/* Main column */}
|
||||
<div className="flex flex-col gap-5">
|
||||
<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) => (
|
||||
|
|
@ -317,15 +336,15 @@ export default function BookNest() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right sidebar */}
|
||||
<div className="flex flex-col gap-5">
|
||||
<div style={cardBase}>
|
||||
<h3 style={sectionTitle}>Favorites</h3>
|
||||
<div className="flex flex-col" style={{ gap: '2px' }}>
|
||||
{/* Right sidebar — spans both rows so Favorites reaches up near the hero */}
|
||||
<div className="flex flex-col gap-5" style={{ gridColumn: 2, gridRow: '1 / span 2' }}>
|
||||
<div style={{ ...cardBase, padding: '22px' }}>
|
||||
<h3 style={{ ...sectionTitle, fontSize: '12px', marginBottom: '18px' }}>Favorites</h3>
|
||||
<div className="flex flex-col" style={{ gap: '4px' }}>
|
||||
{favorites.map((f) => (
|
||||
<div key={f.name} className="flex items-center gap-2.5" style={{ padding: '6px 0' }}>
|
||||
<f.icon size={15} style={{ color: '#C8A434' }} />
|
||||
<span style={{ fontSize: '12px', color: '#E8E6E0' }}>{f.name}</span>
|
||||
<div key={f.name} className="flex items-center gap-3" style={{ padding: '8px 0' }}>
|
||||
<f.icon size={17} style={{ color: '#C8A434' }} />
|
||||
<span style={{ fontSize: '13px', color: '#E8E6E0' }}>{f.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue