Skip to content

Story 2204: Library Item Component#2270

Merged
julioest merged 14 commits intoboostorg:developfrom
julioest:library-item-component
Apr 15, 2026
Merged

Story 2204: Library Item Component#2270
julioest merged 14 commits intoboostorg:developfrom
julioest:library-item-component

Conversation

@julioest
Copy link
Copy Markdown
Collaborator

@julioest julioest commented Apr 2, 2026

Issue: #2204

Summary & Context

Implements the Library Item component with list and card variants for displaying Boost libraries, responsive across desktop, tablet, and mobile.

Changes

  • New _library_item.html with list and card variants via variant prop
  • List: 6-column subgrid, compresses on tablet, collapses to stacked cards on mobile
  • Card: vertical stack with auto-fill grid (340px desktop / 320px tablet), contributor pinned to bottom
  • Both variants render name, description, category tags, contributor (avatar + name + badge), C++ version tag, and doc button
  • Consumes existing Tag component for category and version tags
  • Reuses _user_profile.html (isolated with only) for contributor with real GitHub avatars and initials fallback
  • Semantic <li> within <ul> for list variant; analytics-ready via extra_attrs prop
  • Design tokens throughout; fully functional without JavaScript
  • Demo page with both variants using real library data

‼️ Risks & Considerations ‼️

  • Avatars require update_author_github_data management command to be populated

Screenshots

Frame 5 Frame 4 Frame 2 Frame 3

Self-review Checklist

  • Tag at least one team member from each team to review this PR
  • Link this PR to the related GitHub Project ticket

Frontend

  • UI implementation matches Figma design
  • Tested in light and dark mode
  • Responsive / mobile verified
  • Accessibility checked (keyboard navigation, etc.)
  • Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
  • Test without JavaScript (if applicable)
  • No console errors or warnings

@julioest julioest changed the title Story 2204 Library Item Component Story 2204: Library Item Component Apr 2, 2026
@julioest julioest force-pushed the library-item-component branch 6 times, most recently from 6b6c11e to 202bb7b Compare April 7, 2026 07:02
@julioest julioest marked this pull request as ready for review April 7, 2026 07:07
Copy link
Copy Markdown
Collaborator

@jlchilders11 jlchilders11 left a comment

Choose a reason for hiding this comment

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

@henryajisegiri Question: This seems to fully implement the task #2211 as well. Am I missing something, or should this close both?

@julioest Couple of small Python changes, but the frontend looks good.

Comment thread core/views.py Outdated
Comment thread core/views.py Outdated
@julioest julioest removed a link to an issue Apr 8, 2026
@julioest julioest force-pushed the library-item-component branch from d151d4c to 87d0759 Compare April 8, 2026 14:45
@julioest julioest requested a review from jlchilders11 April 8, 2026 14:46
Copy link
Copy Markdown
Collaborator

@jlchilders11 jlchilders11 left a comment

Choose a reason for hiding this comment

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

Looks good to me

@julioest julioest force-pushed the library-item-component branch from 87d0759 to b16fdac Compare April 14, 2026 06:02
Copy link
Copy Markdown
Collaborator

@kattyode kattyode left a comment

Choose a reason for hiding this comment

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

QA Approved

julioest added 9 commits April 15, 2026 11:08
Prefer authors with GitHub usernames for avatar
display, falling back to any non-deleted author.
Subgrid for consistent column alignment, card
layout for mobile list variant, dual version tag
for desktop/mobile, and design token for icon size.
Expand demo libraries to match Figma, move tags
inside header, fix doc icon viewBox to 16x16.
Card grid layout, split actions into columns,
mobile card overrides, icon sizing, and comments.
Replace fabricated github.com/{username}.png URLs
with actual avatar data from CommitAuthor/User
thumbnail. Falls back to initials circle instead
of static placeholder image.
julioest and others added 5 commits April 15, 2026 11:08
Add 'only' to user_profile include to prevent
parent variant="list" leaking into the avatar
template, which rendered avatar--list (no bg)
instead of avatar--yellow.
Reorganize by variant with co-located
breakpoints, remove redundant declarations,
fix card border visibility in dark mode.
Move _get_author_avatar from demo view to
User.get_avatar_url() with walrus operator.
@julioest julioest force-pushed the library-item-component branch from 61fced2 to 3969842 Compare April 15, 2026 15:09
@julioest julioest merged commit 4b00fd4 into boostorg:develop Apr 15, 2026
4 checks 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.

Library Card Component Library Item Component

3 participants