[557] Display filter values above case studies#89
Conversation
IhorMasechko
commented
May 15, 2025
IhorMasechko
commented
- Add selected filters display above case studies
- Implement item count display
- Relocate 'Clear all' button to new section
- Add styles for filter tags display
- Remove unnecessary padding and margins
- Add selected filters display above case studies - Implement item count display - Relocate 'Clear all' button to new section - Add styles for filter tags display - Remove unnecessary padding and margins
📝 Walkthrough""" WalkthroughThe changes update the case studies page by introducing a new filter summary section that displays the number of items found, selected tags, and options to remove individual tags or clear all filters. Corresponding SCSS styles are overhauled to support the new filter UI, replacing previous simpler tag and clear-all link styles. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CaseStudiesPage (HTML/JS)
participant SCSS Styles
User->>CaseStudiesPage: Selects/deselects tags or clicks "Clear all"
CaseStudiesPage->>CaseStudiesPage: Updates query/tags in URL
CaseStudiesPage->>CaseStudiesPage: Renders filter summary section
CaseStudiesPage->>SCSS Styles: Applies new filter info and tag styles
User->>CaseStudiesPage: Clicks remove on a tag
CaseStudiesPage->>CaseStudiesPage: Removes tag from filter, updates view
Possibly related PRs
Suggested reviewers
📜 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)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (11)
website/modules/asset/ui/src/scss/_cases.scss (8)
266-279: Review flex container and breakpoint behavior
The.cs_filter-infoblock establishes a responsive flex layout with wrap/nowrap switches between mobile and medium breakpoints. Verify that at narrow widths thespace-betweenjustification doesn’t force unwanted wrapping, and at medium sizes theflex-startalignment keeps elements properly grouped. If mismatches occur, consider adding per-childflexormin-widthconstraints to stabilize the layout.
281-291: Enhance accessibility for dynamic counts
.items-countrenders the filtered-items text. To ensure screen readers announce updates when filters change, add attributes likerole="status"oraria-live="polite"in the HTML markup. This small tweak will improve usability for assistive-technology users.
306-322: Assess tag pill sizing versus content length
The.selected-tagpills use fixed heights (24px/28px) and small font sizes. Confirm longer tag labels won’t overflow or clip. If necessary, consider using vertical padding only and allowing height to grow naturally, which can prevent content truncation without manual height adjustments.
325-334: Ensure hit-area meets accessibility guidelines
.remove-tagis set to 16×16 px—below the recommended 24×24 px target for touch/click targets. To improve accessibility, wrap the icon in extra padding or increase the container size so the clickable area is at least 24×24 px.
336-355: Validate color contrast and hover states for clear-all
The.clear-allbutton uses light gray text on white with a red border. Check that the text–background contrast ratio meets WCAG AA. Also, consider adding a:hoverbackground or border-color change to signal interactivity consistently with other buttons.
358-362: Scope the link color override if specificity issues arise
.clear-all-linkforces link text to red. If you observe conflicts with other link styles, you may need to increase selector specificity (e.g..clear-all a.clear-all-link) rather than using!important.
363-370: Remove redundantflex-direction: row
In.clear-all-content,flex-direction: rowis the default and can be omitted to reduce verbosity:.clear-all-content { - display: flex; - flex-direction: row; + display: flex; justify-content: space-between; align-items: center; /* … */ }
371-378: Standardize alignment technique for remove-icon
.remove-signusesdisplay: grid; place-items: center;, whereas.remove-tagusesinline-flex. For consistency, you could unify on one alignment approach (e.g.display: inline-flex; align-items: center; justify-content: center;) across both icon elements.website/modules/case-studies-page/views/index.html (3)
5-10: Simplify conditional and boost accessibility
Instead of{% if data.query.tags.length >= 1 %}, consider Twig’s length filter:{% if data.query.tags|length > 0 %}for clearer intent. Additionally, addrole="status" aria-live="polite"to the<p class="items-count">to announce count updates to screen readers.
12-23: Consider control semantics for "Clear all"
You’re using an<a>with anhrefto clear filters. If this action resets UI state rather than navigating, a<button type="button">might be semantically more appropriate. If you remain with an<a>, verify that other query parameters (e.g. search) are preserved or intentionally omitted.
24-41: Flatten redundant conditions & clean up wrapper
The inner{% if data.query.tags and data.query.tags.length %}is unnecessary given the outer check. You can remove the nestedifto simplify the logic. Also, the<div class="selected-tags">wrapper currently has no styles; consider removing it or styling it explicitly if you need a flex container separate from the UL.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
website/modules/asset/ui/src/scss/_cases.scss(1 hunks)website/modules/case-studies-page/views/index.html(1 hunks)
🔍 Vulnerabilities of
|
| digest | sha256:90a6a840e58593df7e12880b40b2bac65549c5016ae103936c2788ddaef689f1 |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 284 MB |
| packages | 935 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:169ee1b69bd3f5c7c8508a9919e8b367bba9dc7fa9a03097ec9f85d2e8179631 |
| vulnerabilities |  |
Description
| ||||||||||||
Description
|
yuramax
left a comment
yuramax
left a comment
There was a problem hiding this comment.
@IhorMasechko, you did a great job on the features and styles, but I found some inconsistencies and error, please see screenshots below:
-
there are some inconsistencies in styles with mocks
-
the bug is that when you are not logged in as an administrator (viewing the page as a user), you can't see the filters, they are under the heading
Please fix the issues. If you need help with the consistent "close button" look, please let me know. Thank you!
IhorMasechko
dismissed stale reviews from killev and coderabbitai[bot]
via
bc78d05
yuramax
left a comment
yuramax
left a comment
There was a problem hiding this comment.
@IhorMasechko, well done! 💯
Thank you for resolving the comments promptly 👍
|
3 participants
