redesigned and fixed social page #4080
Conversation
WalkthroughThe changes update the social feed page template. Modifications include simplified container classes and adjusted widths, reduced header font sizes with shortened descriptions, and a streamlined navigation structure. The feed list now features an updated layout with an image and user interaction metrics, along with a new section promoting the OWASP_BLT account on X through a call-to-action button. Additionally, the pagination controls have been repositioned and restyled to appear conditionally based on the page count. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant T as Template Renderer
U->>T: Request Social Feed Page
T->>T: Render template with updated layout
alt Multiple pages available
T->>U: Display pagination controls
else
T->>U: Omit pagination controls
end
T->>U: Display updated feed including CTA for OWASP_BLT on X
Assessment against linked issues
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
website/templates/social.html (5)
42-55: New "Follow on X" Component ImplementationA dedicated section to promote following OWASP_BLT on X has been introduced. The call-to-action button is clearly styled with a black background and white text.
Suggestion: For external links (target="_blank"), consider addingrel="noopener noreferrer"to the<a>tag (line 48–50) to enhance security and performance.
58-60: Feed Item Link Fallback LogicThe anchor tag conditionally sets its
hrefto{{ item.url }}if available; otherwise, it falls back to#. While this works functionally, consider whether a non-clickable container might communicate a better user experience when no URL is provided.
66-72: Feed Item Header DetailsThe header within each feed item displays a hard-coded username "OWASP_BLT" alongside the creation date.
Suggestion: If feed items are meant to be dynamic, verify if the username should be populated from a variable rather than hard-coded. If intentional for branding, this is acceptable.
82-115: Interactive Elements for Feed ItemsThe updated block for interactive elements (comments, retweets, likes, bookmark, and share icons) includes clear hover effects and spacing:
- Icons are grouped with transitions that improve interactivity.
Suggestion: Consider adding accessible labels (e.g., using
aria-label) for these interactive icons if they will have click functionality in the future, to enhance screen reader support.
121-151: Pagination Controls RedesignThe pagination section has been repositioned and styled consistently:
- It conditionally displays based on the number of pages.
- The current page is highlighted with a distinct red border and background.
Suggestion: To further improve accessibility, consider adding hidden descriptive text (e.g., using
aria-hidden="true"on icons or including an off-screen label) for the chevron icons.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/templates/social.html(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Run Tests
- GitHub Check: docker-test
🔇 Additional comments (6)
website/templates/social.html (6)
22-23: Container Layout and Maximum Width UpdateThe outer container now uses
min-h-screenfor full height and a custom maximum width (max-w-[50%]). This appears aligned with the redesigned layout. Please double-check on various screen sizes to ensure responsiveness as intended.
25-31: Header Section Styling UpdateThe header section has been updated with a simplified style:
- The container now has a white background with a red left border (using
border-l-[#e74c3c]).- The title’s font size has been reduced to
text-2xland the description is nowtext-sm.These changes enhance the visual hierarchy and readability.
56-56: Feed List Container Border UpdateThe feed list container now uses
border-xandborder-tto delineate its boundaries, creating a clean separation of content. This change is consistent with the streamlined design.
61-65: Logo Image ReferenceThe logo image is rendered using
{% static 'img/logo.png' %}with a well-defined alternate text ("BLT Logo"). This should resolve the previously broken image issue.
75-81: Feed Item Content and Conditional Image RenderingThe main content area now displays the item message with reduced opacity and conditionally renders an image if available. The styling (e.g.,
max-h-[400px]andobject-cover) provides a consistent look.
118-118: Feed Item Link ClosureThe closing
</a>on line 118 properly terminates the clickable area for each feed item.
DonnieBLT
left a comment
There was a problem hiding this comment.
I'm not sure how we would get the stats but maybe we can just remove them instead of hardcoding them
They were only for the design. Should I remove the numbers or the entire component? |
|
@DonnieBLT what about this? I have removed the stats. |
d28dc8e
Fixes #4079
Changes Introduced by this PR:
Before:
After:
Summary by CodeRabbit