feat: compact search page with shared hero, inline sort & icon buttons#14
Merged
Merged
Conversation
vahldiek
force-pushed
the
feat/compact-search-hero
branch
from
a9ba4ee to
23c54c0
Compare
…& unified results Redesign the search/index page for a cleaner, more stable layout: - Shared hero CSS (reprodb-search-hero.css) used by both search and profile pages - Justified tagline text with ReproDB branding; fades out on search - Persistent toolbar: filters, sort dropdown, result count, download & share buttons all in one row that never moves or hides - Result count includes both artifact results and profile cards - Default page size reduced from 50 to 20 - Scrollbar always visible to prevent horizontal layout shift - Dark mode support throughout
vahldiek
force-pushed
the
feat/compact-search-hero
branch
from
23c54c0 to
2fcee01
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Compact the search page layout to maximize vertical space for results, matching the profile page's collapsible hero pattern. Shares search hero CSS between both pages.
Changes
Shared
reprodb-search-hero.css— Extracts common hero container, search box, search icon, clear icon, and tagline fade-out styles into a single file loaded by both the index and profile pages, eliminating ~60 lines of duplicated CSS.Collapsible hero with tagline fade-out — The tagline ("Research artifacts & artifact evaluation…") smoothly fades out and collapses when a search is active, moving the search bar up. Reverses when search is cleared — same pattern as the profile page heading.
Inline sort dropdown — Replaces the separate "Sort by: Year · Title · Venue" links (which took a full line) with a compact
<select>dropdown placed to the right of the Security checkbox in the filters row.Icon-only action buttons — Download JSON and Share buttons are now small icon-only buttons (↓ download arrow and 🔗 link icon) with tooltip text, rendered inline next to the result count. Inspired by Google's search tools placement.
Profile page dedup — Profile hero and search box now use dual classes (
rdb-search-hero+profile-search-hero) so the shared base handles box styling/transitions while profile-specific CSS only adds overrides (40vh min-height, narrower max-width, heading collapse on profile load).Files changed
src/assets/css/reprodb-search-hero.csssrc/index.mdsrc/assets/css/reprodb-search.csssrc/assets/js/reprodb-search.jssrc/_includes/profile_common.htmlsrc/profile.mdrdb-search-hero/rdb-search-inputclassessrc/assets/css/reprodb-profile.css