Issue #85 - Make gallery page mobile responsive, add features, and enhance styling

[kylelhk]

Change Summary

Enhanced features and styling

1. Added preamble with new font style "Komika Axis"
2. Enabled the Enter key to trigger search button click
3. Added a reset button for search function
4. Adjusted gallery table format
5. Added sorting function for gallery table (case insensitive)
6. Fixed the position of pagination container
7. Changed the number of drawings per page from 9 to 10
8. Removed duplicate cdn in gallery.css
9. Enhanced overall styling

Mobile device compatibility (iPhone 14 Pro Max and iPad Pro)

1. Leveraged both Bootstrap classes and css media query
2. Touch slide is required to view the entire gallery table in iPhone 14 Pro Max

iPhone 14 Pro Max:

iPad Pro:

Manual testing conducted on:

1. Search, reset, sorting, pagination, and guess page redirection functions
2. Chrome dev tool – toggle device toolbar – Dimensions: iPhone 14 Pro Max and iPad Pro

Change Form

• [x] The pull request title includes issue number and description.
• [x] The work done is summarised above.
• [x] The code is commented and well formatted.
• [x] Testing has been performed and documented above.

Other Information

TODO (if time allows):

1. Refactor gallery.js using jQuery
2. Replace the deprecated event DOMSubtreeModified in gallery.js (attempted to use MutationObserver but that would lead to undesired flash of buttons)
3. Adding spaces around the slashes in the category “Person/Place/Animal” may make the table column in mobile view more stable.

[iheathers]

Looking great