Migrate project to Bootstrap 4

[Jaifroid]

Fixes #803.

Major changes:

• Upgraded Bootstrap 3.3.7 to Bootstrap 4.6.2 for modern CSS framework
• Replaced Glyphicons with Font Awesome 5.15.4 for better Tailwind compatibility
• Removed jQuery dependency (was unused, Bootstrap JS was already disabled)
• Updated all HTML components: panels → cards, glyphicons → Font Awesome icons
• Migrated app.css overrides to use Bootstrap 4 class names
• Updated rollup.config.js to copy Bootstrap 4 and Font Awesome assets to dist

Technical details:

• .panel/.panel-heading/.panel-body → .card/.card-header/.card-body
• .panel-info/warning/danger → .card.border-info/warning/danger
• All 15 unique Glyphicons replaced with Font Awesome equivalents
• Updated documentation in About section to reflect new libraries
• Maintained IE11 and Edge 18 compatibility (Bootstrap 4.6.2 supports IE10+)

This migration prepares the codebase for future Tailwind CSS adoption by:

1. Using framework-agnostic Font Awesome icons
2. Modernizing component structure (cards vs panels)
3. Eliminating jQuery dependency

[Copilot]

Pull Request Overview

This PR successfully migrates the project from Bootstrap 3.3.7 to Bootstrap 4.6.2, replacing Glyphicons with Font Awesome 5.15.4 icons and removing the jQuery dependency. The migration modernizes the CSS framework while maintaining IE11 and Edge 18 compatibility.

Key changes include:

• Updated all Bootstrap 3 components to Bootstrap 4 equivalents (panels → cards, glyphicons → Font Awesome icons)
• Migrated CSS class names and added Bootstrap 4-specific overrides in app.css
• Updated build configuration to copy Bootstrap 4 and Font Awesome assets to the dist folder

Reviewed Changes

Copilot reviewed 7 out of 10 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
www/index.html	Migrated all HTML components from Bootstrap 3 to Bootstrap 4 classes (panels → cards, col-xs-* → col-*, glyphicons → Font Awesome icons, input-group-addon → input-group-text)
www/css/app.css	Added extensive Bootstrap 4 overrides, replaced panel/glyphicon CSS selectors with card/Font Awesome equivalents, added custom .card-heading styles for collapsible configuration sections
www/js/app.js	Updated JavaScript references to use Bootstrap 4 class names and Font Awesome icon classes instead of glyphicons
www/js/lib/uiUtil.js	Updated DOM queries and class name checks to use .card-heading/.card-body instead of .panel-heading/.panel-body, changed collapse indicator characters
rollup.config.js	Updated asset copying to include Bootstrap 4 and Font Awesome files from node_modules, removed jQuery references
package.json	Added Bootstrap 4.6.2 and Font Awesome 5.15.4 as dev dependencies, removed jQuery dependency
package-lock.json	Updated dependency tree to reflect Bootstrap 4 and Font Awesome additions, jQuery marked as peer dependency only
scripts/patch_gitignore.sh	Updated gitignore patching to allow Bootstrap files instead of jQuery
.gitignore	Added /dist/node_modules entry to ignore copied node_modules in dist

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull Request Overview

Copilot reviewed 12 out of 19 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Jaifroid]

Some issues still to fix:

• Clicking on search in article when no ZIM is loaded causes the navbar to become fat and ugly, and unclicking doesn't reverse it. It's adding the space for the second row, and then not taking it away. A check is needed to show it only if a ZIM is loaded.
• The x (×) in modals no longer closes the modal.
• Buttons are a garish blue. We should use the more staid blue of the PWA with Bootstrap 3.
• Clicking on an archive in the archive list causes a flash of white in the combo box.
• Checkboxes are indented unnecessarily in panels.