mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-19 13:21:46 +00:00
refactor(vacay,journey): drop redundant buttons from the new toolbar
Vacay: remove the filter-sidebar toggle from the desktop bar and shift the breakpoint so the pre-existing mobile/tablet header (which still has the toggle) handles everything below the lg threshold where the sidebar is always visible anyway. Journey: drop the desktop search toggle and inline search input from the bar. Mobile search UI is untouched.
This commit is contained in:
@@ -168,37 +168,6 @@ export default function JourneyPage() {
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
|
<div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
|
||||||
{searchOpen && (
|
|
||||||
<input
|
|
||||||
value={searchQuery}
|
|
||||||
onChange={e => setSearchQuery(e.target.value)}
|
|
||||||
onKeyDown={e => { if (e.key === 'Escape') { setSearchQuery(''); setSearchOpen(false) } }}
|
|
||||||
placeholder={t('journey.search.placeholder')}
|
|
||||||
autoFocus
|
|
||||||
className="w-52 px-3 py-2 rounded-[10px] text-[13px] bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white focus:outline-none"
|
|
||||||
style={{ border: '1px solid var(--border-primary)' }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
setSearchOpen(s => !s)
|
|
||||||
if (searchOpen) setSearchQuery('')
|
|
||||||
}}
|
|
||||||
title={t('journey.search.placeholder')}
|
|
||||||
style={{
|
|
||||||
appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
|
|
||||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
|
||||||
padding: '7px 11px', borderRadius: 99,
|
|
||||||
background: searchOpen ? 'var(--bg-card)' : 'transparent',
|
|
||||||
color: searchOpen ? 'var(--text-primary)' : 'var(--text-muted)',
|
|
||||||
boxShadow: searchOpen ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
|
|
||||||
transition: 'all 0.15s ease',
|
|
||||||
}}
|
|
||||||
onMouseEnter={e => { if (!searchOpen) { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.color = 'var(--text-primary)' } }}
|
|
||||||
onMouseLeave={e => { if (!searchOpen) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)' } }}
|
|
||||||
>
|
|
||||||
{searchOpen ? <X size={15} /> : <Search size={15} />}
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => openCreateModal()}
|
onClick={() => openCreateModal()}
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
@@ -138,8 +138,8 @@ export default function VacayPage(): React.ReactElement {
|
|||||||
|
|
||||||
<div style={{ paddingTop: 'var(--nav-h)' }}>
|
<div style={{ paddingTop: 'var(--nav-h)' }}>
|
||||||
<div className="max-w-[1800px] mx-auto px-3 sm:px-4 py-4 sm:py-6">
|
<div className="max-w-[1800px] mx-auto px-3 sm:px-4 py-4 sm:py-6">
|
||||||
{/* Mobile header */}
|
{/* Mobile + tablet header (filter toggle lives here) */}
|
||||||
<div className="md:hidden flex items-center justify-between mb-4">
|
<div className="lg:hidden flex items-center justify-between mb-4">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
|
<div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
|
||||||
<CalendarDays size={18} style={{ color: 'var(--text-primary)' }} />
|
<CalendarDays size={18} style={{ color: 'var(--text-primary)' }} />
|
||||||
@@ -164,8 +164,8 @@ export default function VacayPage(): React.ReactElement {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Desktop header — unified toolbar */}
|
{/* Desktop header — unified toolbar (sidebar is always visible at this width) */}
|
||||||
<div className="hidden md:block" style={{ marginBottom: 20 }}>
|
<div className="hidden lg:block" style={{ marginBottom: 20 }}>
|
||||||
<div style={{
|
<div style={{
|
||||||
background: 'var(--bg-tertiary)', borderRadius: 18,
|
background: 'var(--bg-tertiary)', borderRadius: 18,
|
||||||
border: '1px solid var(--border-primary)',
|
border: '1px solid var(--border-primary)',
|
||||||
@@ -181,22 +181,6 @@ export default function VacayPage(): React.ReactElement {
|
|||||||
{t('vacay.subtitle')}
|
{t('vacay.subtitle')}
|
||||||
</span>
|
</span>
|
||||||
<div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
|
<div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
|
||||||
<button
|
|
||||||
onClick={() => setShowMobileSidebar(true)}
|
|
||||||
className="lg:hidden"
|
|
||||||
title={t('vacay.filters') || 'Filters'}
|
|
||||||
style={{
|
|
||||||
appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
|
|
||||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
|
||||||
padding: '7px 11px', borderRadius: 99,
|
|
||||||
background: 'transparent', color: 'var(--text-muted)',
|
|
||||||
transition: 'all 0.15s ease',
|
|
||||||
}}
|
|
||||||
onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.color = 'var(--text-primary)' }}
|
|
||||||
onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)' }}
|
|
||||||
>
|
|
||||||
<SlidersHorizontal size={15} />
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowSettings(true)}
|
onClick={() => setShowSettings(true)}
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
Reference in New Issue
Block a user