ryang3d/sbv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reduce vertical space

Browse Source
This commit is contained in:
lowcarbdev
2025-11-22 12:25:16 -07:00
parent 92092d2544
commit f48353ff16
2 changed files with 37 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+25 -28
View File
@@ -146,38 +146,35 @@ function App() {
return ( return (
<div className="vh-100 d-flex flex-column bg-light"> <div className="vh-100 d-flex flex-column bg-light">
{/* Header */} {/* Header */}
<header className="bg-primary bg-gradient text-white p-2 shadow-lg"> <header className="bg-primary bg-gradient text-white py-1 px-2 shadow">
<div className="d-flex justify-content-between align-items-center"> <div className="d-flex justify-content-between align-items-center">
<div className="d-flex align-items-center gap-3"> <div className="d-flex align-items-center gap-2">
<svg style={{width: '2.5rem', height: '2.5rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '1.75rem', height: '1.75rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg> </svg>
<div> <h1 className="h5 mb-0 fw-bold">SMS Backup Viewer</h1>
<h1 className="h2 mb-1 fw-bold">SMS Backup Viewer</h1>
<p className="mb-0 small opacity-75">View and browse your message history</p>
</div> </div>
</div> <div className="d-flex align-items-center gap-2">
<div className="d-flex align-items-center gap-3"> <div className="text-end d-none d-md-block">
<div className="text-end"> <div className="small fw-semibold">{user?.username}</div>
<div className="small opacity-75">Logged in as</div>
<div className="fw-bold">{user?.username}</div>
</div> </div>
<button <button
onClick={() => setShowUpload(true)} onClick={() => setShowUpload(true)}
className="btn btn-light btn-lg shadow d-flex align-items-center gap-2" className="btn btn-light btn-sm shadow-sm d-flex align-items-center gap-1"
> >
<svg style={{width: '1.25rem', height: '1.25rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '1rem', height: '1rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg> </svg>
Upload Backup <span className="d-none d-sm-inline">Upload</span>
</button> </button>
<Dropdown align="end"> <Dropdown align="end">
<Dropdown.Toggle <Dropdown.Toggle
variant="outline-light" variant="outline-light"
className="d-flex align-items-center gap-2" size="sm"
className="d-flex align-items-center"
style={{ backgroundColor: 'transparent', borderColor: 'rgba(255, 255, 255, 0.5)' }} style={{ backgroundColor: 'transparent', borderColor: 'rgba(255, 255, 255, 0.5)' }}
> >
<svg style={{width: '1.5rem', height: '1.5rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '1.25rem', height: '1.25rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg> </svg>
</Dropdown.Toggle> </Dropdown.Toggle>
@@ -270,34 +267,34 @@ function App() {
</div> </div>
{/* Main Content */} {/* Main Content */}
<div className="flex-fill d-flex overflow-hidden gap-2 p-2 position-relative"> <div className="flex-fill d-flex overflow-hidden gap-1 p-1 position-relative">
{activeView === 'conversations' ? ( {activeView === 'conversations' ? (
<> <>
{/* Conversation List */} {/* Conversation List */}
<div <div
className={`conversation-sidebar bg-white rounded-3 shadow overflow-hidden border ${showSidebar ? 'show' : ''}`} className={`conversation-sidebar bg-white rounded-3 shadow overflow-hidden border ${showSidebar ? 'show' : ''}`}
> >
<div className="bg-light border-bottom p-2"> <div className="bg-light border-bottom p-1">
<h2 className="h5 mb-2 d-flex align-items-center gap-2"> <h2 className="h6 mb-1 d-flex align-items-center gap-1 px-1">
<svg style={{width: '1.25rem', height: '1.25rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '1rem', height: '1rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg> </svg>
Conversations Conversations
</h2> </h2>
<div className="position-relative"> <div className="position-relative">
<svg style={{width: '1rem', height: '1rem', position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)'}} className="text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '0.875rem', height: '0.875rem', position: 'absolute', left: '0.5rem', top: '50%', transform: 'translateY(-50%)'}} className="text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg> </svg>
<input <input
type="text" type="text"
className="form-control form-control-sm ps-5" className="form-control form-control-sm ps-4"
placeholder="Search by name or number..." placeholder="Search..."
value={searchFilter} value={searchFilter}
onChange={(e) => setSearchFilter(e.target.value)} onChange={(e) => setSearchFilter(e.target.value)}
/> />
</div> </div>
</div> </div>
<div className="overflow-auto" style={{height: 'calc(100% - 7rem)'}}> <div className="overflow-auto" style={{height: 'calc(100% - 4.5rem)'}}>
<ConversationList <ConversationList
conversations={filteredConversations} conversations={filteredConversations}
selectedConversation={selectedConversation} selectedConversation={selectedConversation}
@@ -311,15 +308,15 @@ function App() {
<div className="flex-fill bg-white rounded-3 shadow overflow-hidden border message-thread-container" style={{minWidth: 0}}> <div className="flex-fill bg-white rounded-3 shadow overflow-hidden border message-thread-container" style={{minWidth: 0}}>
{/* Mobile back button */} {/* Mobile back button */}
{selectedConversation && ( {selectedConversation && (
<div className="mobile-back-button bg-light border-bottom p-2 d-md-none"> <div className="mobile-back-button bg-light border-bottom p-1 d-md-none">
<button <button
className="btn btn-sm btn-outline-primary" className="btn btn-sm btn-outline-primary d-flex align-items-center gap-1"
onClick={() => setShowSidebar(true)} onClick={() => setShowSidebar(true)}
> >
<svg style={{width: '1rem', height: '1rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '0.875rem', height: '0.875rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg> </svg>
Back to conversations Back
</button> </button>
</div> </div>
)} )}
frontend/src/components/DateFilter.jsx
+12 -15
View File
@@ -8,13 +8,13 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
} }
return ( return (
<div className="p-2 bg-light"> <div className="px-2 py-1 bg-light">
<div className="d-flex align-items-center gap-4 flex-wrap"> <div className="d-flex align-items-center gap-2 flex-wrap small">
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-1">
<svg style={{width: '1.25rem', height: '1.25rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '1rem', height: '1rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg> </svg>
<label className="small fw-semibold mb-0">From:</label> <label className="fw-semibold mb-0">From:</label>
<DatePicker <DatePicker
selected={startDate} selected={startDate}
onChange={onStartDateChange} onChange={onStartDateChange}
@@ -25,15 +25,12 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
maxDate={maxDate} maxDate={maxDate}
dateFormat="MMM d, yyyy" dateFormat="MMM d, yyyy"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholderText="Select start date" placeholderText="Start date"
/> />
</div> </div>
<div className="d-flex align-items-center gap-2"> <div className="d-flex align-items-center gap-1">
<svg style={{width: '1.25rem', height: '1.25rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <label className="fw-semibold mb-0">To:</label>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<label className="small fw-semibold mb-0">To:</label>
<DatePicker <DatePicker
selected={endDate} selected={endDate}
onChange={onEndDateChange} onChange={onEndDateChange}
@@ -44,19 +41,19 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
maxDate={maxDate} maxDate={maxDate}
dateFormat="MMM d, yyyy" dateFormat="MMM d, yyyy"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholderText="Select end date" placeholderText="End date"
/> />
</div> </div>
{(startDate || endDate) && ( {(startDate || endDate) && (
<button <button
onClick={clearDates} onClick={clearDates}
className="btn btn-sm btn-outline-primary d-flex align-items-center gap-2" className="btn btn-sm btn-outline-primary d-flex align-items-center gap-1"
> >
<svg style={{width: '1rem', height: '1rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg style={{width: '0.875rem', height: '0.875rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
Clear dates <span className="d-none d-sm-inline">Clear</span>
</button> </button>
)} )}
</div> </div>