Skip to content

Upgrade dependencies to latest stable versions and modernize admin media UI#4

Draft
Copilot wants to merge 2 commits intomasterfrom
copilot/upgrade-package-and-ui
Draft

Upgrade dependencies to latest stable versions and modernize admin media UI#4
Copilot wants to merge 2 commits intomasterfrom
copilot/upgrade-package-and-ui

Conversation

Copy link

Copilot AI commented Feb 27, 2026

Bumps cropperjs and dropzone to their latest stable versions, replaces outdated vendored dist files, and rewrites the admin gallery/upload UI with modern patterns.

Dependency upgrades

  • cropperjs: ^1.5^1.6.2 (API-compatible, bug fixes)
  • dropzone: ^5.7^5.9.3 (v6 still in beta)
  • Replaced vendored _cropper.min.js/css and _dropzone.min.js/css with updated builds

CSS (gallery.css)

  • Rewrote using CSS custom properties for theming
  • Flexbox card layout, object-fit: cover for consistent thumbnails
  • Hover lift + border highlight transitions
  • Replaced heavy base64 GIF loading overlay with a pure-CSS spinner via ::after
  • Added .dz-upload-area drag-and-drop zone with hover state, .dz-file-card preview card styles

PHP views

  • base-grid.php: Bootstrap 5 grid (g-3), loading="lazy", htmlspecialchars() on filenames, default-image star badge, semantic aria attributes
  • base-gallery.php: Card with shadow-sm, icon + fw-semibold title
  • dropzone/modal.php: Centered dialog (modal-dialog-centered), upload requirements panel, progress bar with live percentage, reorganized footer with me-auto alignment
  • dropzone/template.php: dz-file-card grid with image preview, 3px progress bar, icon-only action buttons, drag-and-drop hint area

JavaScript

  • _init-cropper.js: Full-screen dark editor overlay with inline SVG toolbar; keyboard shortcuts (Enter = confirm, Esc = cancel); replaced $.param() with URLSearchParams
  • _init-dropzone.js: Null-safe DOM queries, const/let, drop area shown/hidden on file add/remove, live upload percentage
  • _media-manage.js: Fixed deprecated $.size().length; event delegation for dynamic gallery items; notification abstraction supporting $.jGrowl, toastr, or console.log fallback

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

- Update cropperjs ^1.5 → ^1.6.2 (latest stable)
- Update dropzone ^5.7 → ^5.9.3 (latest stable)
- Update vendored dist files (cropper.min.js/css, dropzone.min.js/css)
- Modernize gallery.css with CSS variables, flexbox, transitions, CSS spinner
- Modernize base-grid.php with Bootstrap 5 grid, lazy loading, accessibility
- Modernize base-gallery.php with card/shadow design
- Modernize dropzone modal.php with centered dialog, better UX
- Modernize dropzone template.php with modern file preview cards
- Rewrite _init-cropper.js: dark overlay editor, SVG icons, keyboard shortcuts
- Improve _init-dropzone.js: better event handling, drop area feedback
- Fix _media-manage.js: remove deprecated $.size(), event delegation, fallback notifications

Co-authored-by: gabrielsolomon <17990591+gabrielsolomon@users.noreply.github.com>
Copilot AI changed the title [WIP] Update package and UI for improved UX and compatibility Upgrade dependencies to latest stable versions and modernize admin media UI Feb 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants