188 lines
8.9 KiB
Markdown
188 lines
8.9 KiB
Markdown
# Session Changelog - December 11-12, 2025
|
|
|
|
## Summary of Changes
|
|
|
|
### 1. Fixed Decimal Number Sorting
|
|
- **Issue**: Job numbers with decimals (e.g., 3887.2) were sorting incorrectly, appearing before higher whole numbers (e.g., 4735)
|
|
- **Solution**: Replaced parseInt with parseFloat and used regex `/[0-9]+\.?[0-9]*/` to correctly extract and compare decimal job numbers
|
|
- **File**: Frontend/index.html
|
|
- **Function**: `jobNumberValue()`
|
|
|
|
### 2. Removed Premature Initial Render
|
|
- **Issue**: Cards were flashing with incorrect order during initial page load, then updating after full load completed
|
|
- **Solution**: Removed the `initialRendered` flag and early `applyFiltersAndRender()` call during the fetch loop
|
|
- **Result**: Cards no longer render until data is properly sorted and ready
|
|
|
|
### 3. Implemented Server-Side Sorting
|
|
- **Change**: Added `&sort=-Job_Number` parameter to PocketBase API query
|
|
- **Benefit**: Data arrives pre-sorted in descending order, eliminating client-side sort overhead
|
|
- **File**: Frontend/index.html
|
|
- **Function**: `fetchAllJobs()`
|
|
|
|
### 4. Implemented Progressive Loading (2-Phase)
|
|
- **Phase 1**: First 40 cards display immediately after first batch loads (~50 records from perPage=50)
|
|
- **Phase 2**: Remaining cards load in background and full list renders when complete
|
|
- **Benefit**: Users see meaningful content within 1-2 seconds instead of waiting for full dataset
|
|
- **File**: Frontend/index.html
|
|
- **Functions**:
|
|
- `fetchAllJobs()` - triggers render at 40 cards
|
|
- `renderInitialBatch()` - renders first 40 cards immediately
|
|
- `applyFiltersAndRender()` - renders complete sorted list after all data loaded
|
|
|
|
### 5. Expanded Cards Viewing Area
|
|
- **Change**: Converted layout to flexbox with `height:100vh` on body
|
|
- **Result**: Cards area now extends to bottom of screen, leaving only version footer visible
|
|
- **Improvements**:
|
|
- Better use of screen real estate
|
|
- More cards visible without scrolling
|
|
- Cleaner full-screen experience
|
|
- **Files Modified**: Frontend/index.html
|
|
- **CSS Changes**:
|
|
- `body`: Added `height:100vh`, `display:flex`, `flex-direction:column`, `overflow:hidden`
|
|
- `.wrap`: Changed to `display:flex`, `flex-direction:column`, `flex:1`, `overflow:hidden`, removed margin
|
|
- `#results`: Changed `max-height:56vh` to `flex:1` for dynamic expansion
|
|
|
|
## Performance Improvements
|
|
- **Perceived Load Time**: ~1-2 seconds for first 40 cards (was waiting for full load)
|
|
- **Search/Filter Responsiveness**: Now uses server-side sort, reducing client-side computation
|
|
- **Memory**: Progressive loading means full dataset isn't necessarily all rendered at once
|
|
|
|
## Files Modified
|
|
- Frontend/index.html (primary changes)
|
|
- No backend or configuration changes required
|
|
|
|
## Testing Notes
|
|
- Decimal job numbers (e.g., 3887.2, 4735) now sort correctly in descending order
|
|
- Initial page load shows first 40 cards immediately
|
|
- Remaining pages load in background with progress bar indication
|
|
- Full list renders with all filters/search applied once complete
|
|
|
|
---
|
|
|
|
## December 12, 2025 - UI/UX Refinements
|
|
|
|
### 1. Show Filters Button Width Reduction
|
|
- **Change**: Added `max-width:110px` to `#filterToggle` to constrain button width
|
|
- **Benefit**: Cleaner, more compact home screen layout
|
|
- **File**: Frontend/index.html
|
|
|
|
### 2. Job Folder Link Conversion to Button (Modal)
|
|
- **Previous**: Text-based hyperlink with label "Job Folder Link" and "No Link Available" placeholder
|
|
- **New**: Two-state button in job detail modal
|
|
- **Disabled State**: Grey button (`#4b5563`), disabled, text = "No Folder Available"
|
|
- **Active State**: Blue button matching accent color (`#0d6efd`), clickable, text = "Show Job Folder"
|
|
- **Behavior**: Clicking active button opens job folder URL in new tab with noopener/noreferrer
|
|
- **File**: Frontend/index.html
|
|
- **CSS**: Added `#jobFolderBtn` styling with state classes
|
|
- **JavaScript**: Updated `openDetail()` function to configure button state
|
|
|
|
### 3. Job Folder Button Typography
|
|
- **Font Size**: Increased to 17px (was 15px)
|
|
- **Font Weight**: Changed to bold (700)
|
|
- **Result**: Better visual prominence matching modal design
|
|
|
|
### 4. Notes Section Color Scheme
|
|
- **Border Color**: Changed from light (`#e6e9ef`) to dark grey (`#4b5563`) for both `#jobNotes` and `#newNote`
|
|
- **Text Color**: `#jobNotes` now displays text in dark grey (`#4b5563`) for consistency
|
|
- **Design Goal**: Unified dark grey accent color matching disabled button background
|
|
- **File**: Frontend/index.html
|
|
|
|
### 5. Notes Section Heading
|
|
- **Change**: Added blue accent color (`color:var(--accent)`) to Notes h3 heading
|
|
- **Result**: Matches "Job Detail" h3 styling for visual consistency
|
|
- **File**: Frontend/index.html
|
|
|
|
### 6. Modal Height Expansion
|
|
- **Previous**: `max-height:84vh`
|
|
- **Updated**: `max-height:96vh`
|
|
- **Additional Space**: ~60px more at bottom for better content visibility
|
|
- **Auto-Scroll**: Modal now automatically scrolls to top when opened
|
|
- **Implementation**: Added `document.getElementById('detailBox').scrollTop = 0;` in `openDetail()` function
|
|
- **File**: Frontend/index.html
|
|
|
|
## UI/UX Summary
|
|
All changes focused on improving the job detail modal design:
|
|
- Converted job folder link from text to button interface for better UX
|
|
- Implemented cohesive color scheme using dark grey (`#4b5563`) as accent
|
|
- Increased modal height to 96vh for better content visibility
|
|
- Auto-scroll to top ensures users always see details from the beginning
|
|
- Typography enhancements (larger, bolder button text) improve readability
|
|
|
|
## Files Modified (December 12)
|
|
- Frontend/index.html (all UI/UX changes)
|
|
|
|
---
|
|
|
|
## December 12, 2025 - Tailwind CSS Migration & Major UI Redesign
|
|
|
|
### 1. Tailwind CSS Migration
|
|
- **signin.html**: Converted entire file from custom CSS to Tailwind CSS utility classes
|
|
- Removed ~116 lines of custom CSS
|
|
- All styles now use Tailwind utility classes
|
|
- Maintained exact visual appearance and functionality
|
|
- Updated JavaScript to use `classList.add/remove('hidden')` instead of `style.display`
|
|
- **index.html**: Converted entire file from custom CSS to Tailwind CSS utility classes
|
|
- Removed ~82 lines of custom CSS
|
|
- All HTML elements converted to Tailwind utility classes
|
|
- Dynamically created elements (cards, table cells) updated to use Tailwind classes
|
|
- JavaScript updated to use Tailwind class manipulation
|
|
- **Benefits**:
|
|
- ~70-80% reduction in CSS code
|
|
- Styles co-located with HTML for better maintainability
|
|
- Consistent design system
|
|
- Better responsive design with Tailwind breakpoints
|
|
|
|
### 2. Responsive Layout Improvements
|
|
- **Change**: Added max-width constraint to main container
|
|
- Desktop: `max-w-2xl` (800px) centered layout
|
|
- Mobile: Full width on screens ≤800px
|
|
- **Result**: Content no longer stretches full width on large screens, better readability
|
|
- **File**: Frontend/index.html
|
|
|
|
### 3. Job Details Modal Redesign
|
|
- **Tab System**: Implemented INFO and NOTES tabs
|
|
- Tab bar moved to bottom of modal
|
|
- Blue heading bar for INFO tab
|
|
- Orange heading bar for NOTES tab
|
|
- Headings fill top of card including rounded corners
|
|
- **Back Button**: Added back button to left of tabs for easy modal dismissal
|
|
- **Visual Hierarchy**:
|
|
- All field labels now bold (`font-bold`)
|
|
- Cleaner table design with better spacing
|
|
- Job Number/Company Client displayed side by side
|
|
- Contact Person/Phone Number displayed side by side
|
|
- **Modal Height**: Constrained to `h-[90vh] max-h-[926px]` (iPhone Pro Max size) to prevent full-height on desktop browsers
|
|
- **File**: Frontend/index.html
|
|
|
|
### 4. Interactive Address & Phone Features
|
|
- **Address**: Made clickable with map integration
|
|
- Apple Maps icon opens address in Apple Maps
|
|
- Google Maps icon opens address in Google Maps
|
|
- Icons displayed inline with address text
|
|
- **Phone Number**: Made clickable with `tel:` protocol
|
|
- Opens phone dialer on iOS devices
|
|
- Properly formatted phone numbers for dialing
|
|
- **File**: Frontend/index.html
|
|
|
|
### 5. UI Polish
|
|
- **Filter Toggle Button**: Increased width to `min-w-[140px]` to prevent text wrapping
|
|
- **Job Detail Heading**: Removed generic "Job Detail" heading, now displays Job Full Name dynamically
|
|
- **Table Redesign**: Converted from table to cleaner div-based layout with better typography
|
|
- **Date Formatting**: Start dates now display in readable format (e.g., "July 28, 2026")
|
|
- **Empty Field Handling**: Tax Exempt field hidden when empty
|
|
|
|
### 6. Version Update
|
|
- Updated version from `v1.0.0-beta2` to `v1.0.0-beta3`
|
|
|
|
## Technical Improvements
|
|
- **Code Maintainability**: Tailwind CSS makes styles easier to modify and maintain
|
|
- **Performance**: Reduced CSS file size, faster rendering
|
|
- **Responsive Design**: Better mobile/desktop experience with Tailwind breakpoints
|
|
- **Accessibility**: Maintained all ARIA labels and semantic HTML
|
|
|
|
## Files Modified
|
|
- Frontend/signin.html (complete Tailwind migration)
|
|
- Frontend/index.html (complete Tailwind migration + major UI redesign)
|
|
- Images/apple.svg (used for Apple Maps integration)
|
|
- Images/google.svg (used for Google Maps integration)
|