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/components/DateFilter.jsx
+12 -15
View File
@@ -8,13 +8,13 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
}
return (
<div className="p-2 bg-light">
<div className="d-flex align-items-center gap-4 flex-wrap">
<div className="d-flex align-items-center gap-2">
<svg style={{width: '1.25rem', height: '1.25rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div className="px-2 py-1 bg-light">
<div className="d-flex align-items-center gap-2 flex-wrap small">
<div className="d-flex align-items-center gap-1">
<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" />
</svg>
<label className="small fw-semibold mb-0">From:</label>
<label className="fw-semibold mb-0">From:</label>
<DatePicker
selected={startDate}
onChange={onStartDateChange}
@@ -25,15 +25,12 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
maxDate={maxDate}
dateFormat="MMM d, yyyy"
className="form-control form-control-sm"
placeholderText="Select start date"
placeholderText="Start date"
/>
</div>
<div className="d-flex align-items-center gap-2">
<svg style={{width: '1.25rem', height: '1.25rem'}} 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" />
</svg>
<label className="small fw-semibold mb-0">To:</label>
<div className="d-flex align-items-center gap-1">
<label className="fw-semibold mb-0">To:</label>
<DatePicker
selected={endDate}
onChange={onEndDateChange}
@@ -44,19 +41,19 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
maxDate={maxDate}
dateFormat="MMM d, yyyy"
className="form-control form-control-sm"
placeholderText="Select end date"
placeholderText="End date"
/>
</div>
{(startDate || endDate) && (
<button
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" />
</svg>
Clear dates
<span className="d-none d-sm-inline">Clear</span>
</button>
)}
</div>