Skip to content

Improve catalogue and PDF viewer UX and light mode uiux - #527

Merged
YOGESH-08 merged 5 commits into
CodeChefVIT:stagingfrom
Rithish-2914:fix/UI-PDFVIEWER
Aug 19, 2026
Merged

Improve catalogue and PDF viewer UX and light mode uiux#527
YOGESH-08 merged 5 commits into
CodeChefVIT:stagingfrom
Rithish-2914:fix/UI-PDFVIEWER

Conversation

@Rithish-2914

Copy link
Copy Markdown
Contributor

📌 Purpose

Improve the overall user experience across the PDF viewer and paper catalogue, with a focus on Reading Mode, light-mode UI consistency, bulk downloads, and clearer loading/feedback states.

Showcase

  • PDF Reading Mode now works as a viewport-level overlay.
  • Improved light-mode UI and dropdown readability.
  • Improved Select All / Deselect All and Download Selected interactions.
  • Added clear loading feedback while preparing downloads.

Changes

PDF Viewer / Reading Mode

  • Added/improved Reading Mode with a dedicated book icon.
  • Reading Mode now covers the browser viewport using a fixed overlay.
  • The banner/navbar underneath is automatically covered while Reading Mode is active.
  • Added body scroll locking while Reading Mode is active.
  • Reading Mode respects the browser viewport, including split-screen/snapped windows.
  • Reading Mode does not use the browser's native Fullscreen API.
  • Added visual feedback/coachmark for the new Reading Mode feature.
  • Added keyboard shortcut support for Reading Mode.

Light Mode UI/UX

  • Fixed white text appearing on light dropdown backgrounds.
  • Improved dropdown readability in light mode.
  • Updated hover/focus states for better contrast.
  • Improved consistency between light and dark mode controls.

Catalogue Selection & Downloads

  • Improved Select All / Deselect All behaviour.
  • Added selected-paper count to the Download button.
  • Improved Download Selected button styling and interaction.
  • Download button is disabled when no papers are selected.
  • Added loading state while the ZIP is being prepared.
  • Added spinner and Preparing zip... feedback during downloads.
  • Prevented duplicate download actions while a download is in progress.
  • Improved download error/partial-download feedback.
  • Improved overall bulk-selection and download UX.

Additional Notes

  • Changes were tested locally before pushing.
  • Reading Mode is implemented as a CSS viewport overlay rather than native browser fullscreen.
  • PR targets the staging branch.

Comment thread src/components/newPdfViewer.tsx Outdated
<Button
onClick={toggleReadingMode}
className="relative h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]"
title="Reading Mode (R) — show just the paper"

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove em dashes pls

className="group fixed bottom-5 left-1/2 z-[2] flex -translate-x-1/2 items-center gap-2 rounded-full bg-[#262635]/70 py-1.5 pl-3.5 pr-2 text-xs font-medium text-white/70 shadow-lg backdrop-blur transition-all hover:bg-[#262635] hover:text-white hover:opacity-100"
style={{ opacity: 0.55 }}
>
<BookOpenText size={13} />

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice ux

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

@YOGESH-08

Copy link
Copy Markdown
Collaborator

deselect option when only a few papers are selected

image

@YOGESH-08

Copy link
Copy Markdown
Collaborator

Give Border raidus to the sort year button, to match the other buttons

image

also make sure the button color and on hovering color matches the theme, better not to use black

@YOGESH-08

Copy link
Copy Markdown
Collaborator

Disable the toolbar here(on pressing eye button)

image

@YOGESH-08

Copy link
Copy Markdown
Collaborator

Just Like other button text color, give the sort year button , white and black, for dark and light mode respectively

image

@YOGESH-08
YOGESH-08 merged commit 256a338 into CodeChefVIT:staging Aug 19, 2026
1 check passed
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