Upgrade Bootstrap from 3.1.1 to 5.3.7 #82
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Updated to self-hosted Bootstrap 5.3.7 CSS and JavaScript files - Migrated all templates from Bootstrap 3 to Bootstrap 5 syntax - Fixed navigation breadcrumbs and added full-width header menu - Updated dropdown components and button styling to Bootstrap 5 - Replaced jQuery UI tooltips with native Bootstrap 5 tooltips - Updated template tags to map Bootstrap 3 classes to Bootstrap 5 - Enhanced responsive design and improved overall styling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
This commit completes the Bootstrap 5.3.7 upgrade with significant navigation and user experience improvements: **Bootstrap 5 Migration:** - Updated JavaScript APIs: modal() → new bootstrap.Modal() - Fixed modal header structure with proper title positioning - Updated button classes: btn-default → btn-outline-secondary - Fixed form submit buttons to use btn-primary styling **Navigation System:** - Replaced basic menu with full-width dark navbar - Added active state highlighting for current pages - Integrated search functionality in header - Added GitHub contribution button with proper icon styling - Created "More" dropdown for secondary navigation items - Added conditional "New Patch" link when CF is available **Homepage Redesign:** - Merged dashboard functionality into homepage for logged-in users - Added experience-based help text for new users (30+ days) - Removed separate /me/ route and template - Added login prompt for non-authenticated users - Integrated complete patch listing with filtering **Typography & Consistency:** - Updated all date ranges to use en dash (–) instead of hyphen (-) - Added CommitFest dates to breadcrumbs on new patch page - Fixed modal close button positioning and sizing **Context & Configuration:** - Added global context processor for navigation state - Added CommitFest.get_current() method for nav logic - Updated URL patterns and view logic Closes #74 - "New Patch" button now visible in navigation Closes #19 - GitHub contribution button added to header Improves overall UX with modern Bootstrap 5 components and better information architecture. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
JelteF
force-pushed
the
upgrade-bootstrap-5
branch
from
0b4e311 to
0855cfc
Compare
JelteF
commented
Aug 4, 2025
pgcommitfest/commitfest/views.py
Outdated
Comment on lines
62
to
67
| # Check if user is experienced (has been active for a while) | ||
| from django.db import connection | ||
| from django.utils import timezone | ||
|
|
||
| from datetime import timedelta | ||
|
|
There was a problem hiding this comment.
Don't import modules in functions.
Comment on lines
52
to
62
| bootstrap3_class = [v for k, v in PatchOnCommitFest._STATUS_LABELS if k == i][0] | ||
| # Map Bootstrap 3 label classes to Bootstrap 5 badge classes | ||
| mapping = { | ||
| "default": "secondary", | ||
| "primary": "primary", | ||
| "info": "info", | ||
| "success": "success", | ||
| "warning": "warning", # Keep warning but we'll override the color in CSS | ||
| "danger": "danger", | ||
| } | ||
| return mapping.get(bootstrap3_class, "secondary") |
There was a problem hiding this comment.
Update the source instead, i.e. _STATUS_LABELS to use the new label names.
Comment on lines
28
to
38
| bootstrap3_class = [v for k, v in CommitFest._STATUS_LABELS if k == i][0] | ||
| # Map Bootstrap 3 label classes to Bootstrap 5 badge classes | ||
| mapping = { | ||
| "default": "secondary", | ||
| "primary": "primary", | ||
| "info": "info", | ||
| "success": "success", | ||
| "warning": "warning", | ||
| "danger": "danger", | ||
| } | ||
| return mapping.get(bootstrap3_class, "secondary") |
There was a problem hiding this comment.
Update the source instead, i.e. _STATUS_LABELS to use the new label names.
media/commitfest/js/commitfest.js
Outdated
Comment on lines
284
to
287
| // Toggle button active state | ||
| button.classList.toggle("active"); | ||
|
|
||
| // Use Bootstrap 5 Collapse API |
There was a problem hiding this comment.
Useless comments
Suggested change
| // Toggle button active state | |
| button.classList.toggle("active"); | |
| // Use Bootstrap 5 Collapse API | |
| button.classList.toggle("active"); | |
Comment on lines
5
to
9
| """Add global context variables available in all templates.""" | ||
| return { | ||
| "current_cf": CommitFest.get_current(), | ||
| "open_cf": CommitFest.get_open_regular(), | ||
| } |
There was a problem hiding this comment.
Use the relevant_commitfests instead for this.
| {%endif%} | ||
| <dl> | ||
| {%for t in patch.mailthread_set.all%} | ||
| <dt><a href="https://www.postgresql.org/message-id/flat/{{t.messageid}}">{{t.subject}}</a> <button type="button" class="close close-nofloat" title="Detach this thread" onclick="detachThread({{cf.id}},{{patch.id}},'{{t.messageid}}')">×</button></dt> | ||
| <dt><a href="https://www.postgresql.org/message-id/flat/{{t.messageid}}">{{t.subject}}</a> <button type="button" class="btn btn-outline-danger btn-sm ms-2" title="Detach this thread" onclick="detachThread({{cf.id}},{{patch.id}},'{{t.messageid}}')">×</button></dt> |
There was a problem hiding this comment.
Can you keep this the same type of close button? No need to make it all red and button-y. Just a simple X like it was before will suffice.
pgcommitfest/commitfest/views.py
Outdated
Comment on lines
75
to
86
| curs = connection.cursor() | ||
| curs.execute("SET TRANSACTION ISOLATION LEVEL REPEATABLE READ") | ||
| current_cfs = list( | ||
| CommitFest.objects.filter(status=CommitFest.STATUS_INPROGRESS) | ||
| ) | ||
| if len(current_cfs) == 0: | ||
| current_cfs = list(CommitFest.objects.filter(status=CommitFest.STATUS_OPEN)) | ||
|
|
||
| if len(current_cfs) > 0: | ||
| cf = current_cfs[0] | ||
| else: | ||
| cf = None |
There was a problem hiding this comment.
Can you reuse the cfs that we already gathered?
- Move imports to top of file instead of inside function - Update _STATUS_LABELS in models to use Bootstrap 5 class names directly - Remove mapping logic from template tags - Remove unnecessary comments from JavaScript - Use relevant_commitfests() in context processor for efficiency - Revert close button to simple Bootstrap 5 btn-close styling - Reuse existing cfs variable in home view instead of querying again
Make CSS selector more specific to only affect CommitFests table, not the filter form table labels.
- Set filter form to show by default instead of collapsed - Make Search/filter button active by default to match state - Move status summary below the search/filter boxes on homepage - Apply same default behavior to commitfest.html
Convert the shortcuts dropdown menu to individual buttons with concise text: - 'No reviewers' (was 'Patches with no reviewers') - 'My patches' (was 'Patches where you are author') - 'My reviews' (was 'Patches where you are reviewer') This makes the shortcuts more immediately visible and saves space.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This completes the upgrade from Bootstrap 3.1.1 to Bootstrap 5.3.7 and fixes all styling issues that arose during the migration. The upgrade includes updating HTML structures, JavaScript APIs, button classes, modals, and dropdown components to work with Bootstrap 5.
Additionally, this enhances the navigation with a full-width dark header containing search functionality, a GitHub contribution button, and better organization of navigation items. The homepage now integrates dashboard functionality for logged-in users, removing the separate /me/ route. Typography has been improved with consistent en dash usage for date ranges and proper breadcrumb formatting.
Closes #74
Closes #19