QGato v0.4.0 - Clean up

In this update, we’ve focused on enhancing QGato’s interface, particularly the landing page. This redesign streamlines the page, trims CSS from 2000 to 433 lines, and centers the search bar to create a more intuitive and visually appealing experience.

Landing Page Update

As you can see, the landing page now feels cleaner and is more responsive, with dynamically moving buttons and centered search bar. The mini-menu has also been reimagined as a side-sliding menu, which will most likely be a menu for devices with smaller screens. At the moment the side-sliding menu is enabled on all devices.

Alongside the landing page overhaul, we’ve significantly improved the Image Results page. Now, the page structure loads first, with images loading afterward for for a faster and smoother experience. We’ve also introduced HardCache, an experimental feature that caches images to the drive, enhancing load times. Additionally, we’ve added error handling with missing.svg for invalid image URLs, reducing broken image links.

While missing.svg prevents you from seeing invalid image URLs, it’s still not ideal to see missing images. We plan to improve this by having the page automatically load the next batch of images to replace any invalid ones. Image titles are now automatically trimmed to prevent overlap, and we’ve fixed page width resizing issues, plus added a work-in-progress image viewer. Note that the image results page now requires JavaScript to function fully.

For comparison:

Before (v0.3.0)

Image Results Page Before

After (v0.4.0)

Image Results Page After

Visual and Functional Updates

The QGato logo has been updated on all pages, and a new page icon has been added, with a 1 in 10 chance of displaying a playful alternate icon. Theme names now come with icons and emojis, adding consistency to the UI.

Dark Reader compatibility issues have been resolved on map results. Some JavaScript scripts have been rewritten to reduce unnecessary complexity of the code and improving loading times. Minor adjustments to button positioning and layout across devices ensure that elements are aligned and accessible, regardless of screen size.

Expanded Functionality and Ongoing Work

We’re continually working to refine the performance behind the scenes. This update includes optimizations like HardCacheDuration in the configuration file, enhancing caching efficiency for frequently accessed content. Language support is also expanding to make QGato accessible to a broader audience, with ongoing work to translate new language strings across the platform.

Update Log Summary

Visual Updates

  • Image Results Loading: Improved the image results page by loading the page structure first, with images loading asynchronously afterward for faster user interaction.
  • Landing Page Rework: Redesigned the landing page, reducing CSS from 2000 to 433 lines.
  • Settings Mini-Menu: Revamped the mini-menu to a side-sliding menu on the landing page, primarily being tested for mobile deployment.
  • Logo Update: Updated the page logo across all pages.
  • New Page Icon: Introduced a new page icon, with a 1 in 10 chance of displaying an alternate icon.
  • Dynamic Elements: Added dynamically moving buttons on the main page and refined the centered search layout.
  • Icons & Emojis: Updated theme names by adding icons and emojis for visual consistency.

Bug Fixes

  • Dark Reader Compatibility: Resolved display issues for the Dark Reader plugin on map results.
  • JavaScript Cleanup: Cleaned up JavaScript code and fixed various language string mismatches.
  • Error Handling: Improved error handling by serving missing.svg for invalid image URLs.
  • Layout Fixes: Adjusted button positioning and visual alignment for both mobile and desktop views.
  • Landing Page Buttons: Updated buttons on the landing page, changing the color from black to blue for the Latte theme.
  • Alignment Fixes: Aligned “safe search” and “language” options on the results page to resolve clipping issues.
  • Search Bar Icon: Fixed alignment of the magnifying glass icon in the search bar on the results pages.
  • Image Titles: Fixed overlapping titles on the image results page, ensuring titles do not overlap with those of neighboring images.
  • Icon Mismatches: Fixed icon mismatches on the text results page.
  • Search Suggestions: Corrected display issues with search suggestions on non-main pages.

Ongoing Work

  • Caching Enhancements: Added HardCacheDuration to the configuration file and implemented image caching to the drive.
  • Codebase Optimization: Removed unused code and conducted general performance optimizations.
  • Language Support: Added support for additional languages, though translations for new language strings are still pending.
  • Image Viewer: Work-in-progress image viewer added to the image results page, allowing for enhanced interaction.