[459] Create styles for displaying Categories & Tags #120
Conversation
- Refactor case-studies-page/index.js to fix ESLint errors while maintaining functionality - Split large functions into smaller utility functions - Fix race condition warnings using defensive copies - Implement dynamic tag counting with proper modularization - Update template to use the dynamic tag counts
- Remove invalid tagCountsMethods property from module top level - Move tag counting logic into helper utility functions - Simplify module structure to comply with ApostropheCMS conventions - Fix linter errors related to function length
- Remove main search form from case studies page - Add per-tag-type search input for filtering tags - Implement client-side tag filtering with JavaScript
📝 WalkthroughWalkthroughThe changes update the SCSS and HTML template for the case studies page, restructuring and restyling the tag filter UI into a more organized filter section with categories, a search input, and refined tag item states. A CSS variable for the check mark image URL is introduced for consistent styling. No logic or exported entity changes were made. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CaseStudiesPage
participant FilterSection
participant TagList
User->>CaseStudiesPage: Load page
CaseStudiesPage->>FilterSection: Render filter categories
FilterSection->>TagList: Render tags with search input
User->>FilterSection: Enter search text / select tag
FilterSection->>TagList: Update displayed tags / selection state
TagList->>CaseStudiesPage: Trigger filter update
CaseStudiesPage->>User: Display filtered case studies
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
website/public/images/check_mark.svgis excluded by!**/*.svg
📒 Files selected for processing (4)
website/modules/asset/ui/src/index.js(1 hunks)website/modules/asset/ui/src/scss/_cases.scss(1 hunks)website/modules/case-studies-page/views/index.html(2 hunks)website/modules/case-studies-page/views/show.html(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
website/modules/case-studies-page/views/index.html (1)
Learnt from: yuramax
PR: speedandfunction/website#84
File: website/modules/case-studies-page/views/index.html:87-90
Timestamp: 2025-05-14T09:44:56.398Z
Learning: For the Case Study cards in website/modules/case-studies-page/views/index.html, the "type" and "industry" fields are temporarily hard-coded with values "Mobile Development" and "Manufacturing" as placeholders. These will be replaced with dynamic data ({{ article.type }} and {{ article.industry }}) in a future task.
🧬 Code Graph Analysis (1)
website/modules/asset/ui/src/index.js (2)
website/modules/asset/ui/src/swipers.js (1)
initAllSwipers(57-69)website/modules/asset/ui/src/smoothCounters.js (1)
initSmoothCounters(58-78)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: e2e-tests
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: security-scan
🔇 Additional comments (8)
website/modules/case-studies-page/views/show.html (3)
42-47: LGTM! Good defensive programming and security practices.The addition of existence checks (
data.piece._industry and data.piece._industry.length) prevents template errors when the array is undefined, and the HTML escaping (| efilter) protects against XSS vulnerabilities.
52-57: LGTM! Consistent with previous improvements.The existence check and HTML escaping are correctly applied to the case study type field, maintaining consistency with the industry field implementation.
93-99: LGTM! Completes the safety improvements.The tech stack field now includes the same defensive measures as the other fields, ensuring consistent error prevention and security across all dynamic content areas.
website/modules/asset/ui/src/index.js (1)
75-75: LGTM! Proper integration into component lifecycle.The function is correctly integrated into the initialization flow, ensuring it runs both on initial page load and after Barba.js page transitions.
website/modules/case-studies-page/views/index.html (2)
81-152: LGTM! Well-structured filter UI supporting client-side search.The restructuring effectively replaces the global search with category-specific filtering. The implementation includes:
- Proper accessibility with meaningful placeholders
- Consistent
data-labelattributes for JavaScript filtering- Maintained filter logic and URL building
- Clean separation of concerns between search input and tag display
The new structure aligns well with the JavaScript implementation in
index.js.
185-187: LGTM! Consistent safety improvements.The existence check and HTML escaping for case study types match the defensive programming approach used in
show.html, ensuring consistent error prevention across templates.website/modules/asset/ui/src/scss/_cases.scss (2)
70-80: LGTM! Improved layout structure and spacing.The updated flexbox layout with proper gap spacing and border styling creates a cleaner separation between the filter panel and content grid. The responsive adjustments maintain good UX across screen sizes.
86-165: LGTM! Comprehensive and well-organized filter styling.The new filter UI styling is well-structured with:
- Clear visual hierarchy with bordered sections and category separators
- Properly styled search inputs with appropriate sizing and colors
- Effective active state indication using check mark backgrounds
- Consistent typography and spacing throughout
- Good use of pseudo-elements for decorative borders
The styling effectively supports the new JavaScript filtering functionality and provides clear visual feedback to users.
🔍 Vulnerabilities of
|
| digest | sha256:72e15057862c19665d1185b8c1717df8aa82007d496ffd1dcdd04d46cdad246b |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 284 MB |
| packages | 935 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:169ee1b69bd3f5c7c8508a9919e8b367bba9dc7fa9a03097ec9f85d2e8179631 |
| vulnerabilities |  |
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
VitalyyP
dismissed stale reviews from IhorMasechko and coderabbitai[bot]
via
b4314e3
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
website/modules/asset/ui/src/scss/_cases.scss (4)
85-89: Consider adding border-radius to.tags-filter
You’ve added a border and max-width, which nicely contains the filter. For consistency with other UI components, you might introduce a$border-radius(e.g.,$border-radius-sm) to soften the corners—this could improve visual cohesion.
91-93: Good structure for.filter-sectionand.filter-category
The padding, typography mixin, and separator (::after) correctly distinguish each filter block. One minor nit: consider replacing hard-coded values (15px 24pxand the-24pxoffsets) with your design system’s spacing variables (e.g.,$spacing-md,$spacing-lg) to maintain consistency and make future adjustments easier.Also applies to: 94-100, 102-109
136-147: Active marker for.tag-itemlooks correct
Leveraging the.tag-link::beforeproperties to inject the check-mark icon viabackground-imageis a clean approach. Just double-check that/images/check_mark.svgresolves correctly in production and consider specifyingbackground-sizeif you need pixel-perfect control.
150-196: Review focus & accessibility styles for.tag-link
You’ve added detailed:focusand:focus-visiblerules to manage outlines on interactive tags, which is great for keyboard users. A few items to verify:
- Make sure the selector
.tag-link + label::beforematches your markup—if the<label>isn’t immediately after the link, this won’t take effect.- Consider trusting
:focus-visiblealone (and dropping the generic:focus) once you’ve confirmed browser support, to simplify the rules.- Validate that
$gray-300on white meets WCAG AA contrast requirements for body text.
If all checks pass, these changes are solid.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/modules/asset/ui/src/scss/_cases.scss(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: lint
- GitHub Check: e2e-tests
- GitHub Check: security-scan
- GitHub Check: unit-tests
🔇 Additional comments (3)
website/modules/asset/ui/src/scss/_cases.scss (3)
70-74: Approved: Layout adjustments for.cs_list
The addedgap,border-top,padding-top, andalign-itemstweaks create clear separation and proper alignment at both small and medium breakpoints. The breakpoint overrides shift toflex-startand increase padding as expected.Also applies to: 76-80
113-121: Verify focus state for.tag-searchinput
The focus rule strips most borders and removes left padding, leaving only the bottom border. This can cause a layout shift on focus and may be jarring. Please confirm this aligns with the design spec. If an underline-only focus is unintended, you could adjust to something like:.tag-search { - &:focus { - outline: 0; - border-left: 0; - border-right: 0; - border-top: 0; - padding-left: 0; - } + &:focus { + outline: none; + border-color: $gray-500; + box-shadow: 0 0 0 1px rgba($gray-500, 0.2); + }Also applies to: 122-127
130-134: Clear list reset for.tags-list
Resettinglist-style,padding, andmarginis spot-on to ensure the tags list starts from a clean slate.
yuramax
dismissed stale reviews from VitalyyP, Anton-88, and coderabbitai[bot]
via
6db03fc
Anton-88
left a comment
Anton-88
left a comment
There was a problem hiding this comment.
good job, but I found a few small things that needs to be fixed/changed
- the width of container with tags(213px) is smaller than in figma(262px)
- some category lacks lines over their names
- for mobile version the border over the filter is too long
- Add proper spacing and borders for filter sections\n- Improve tag count display with better spacing\n- Fix filter section padding and margins\n- Add responsive layout improvements\n- Clean up focus states and accessibility
refined filter layout, spacing, responsiveness, and accessibility
…f github.com:speedandfunction/website into 459-create-styles-for-displaying-categories-and-tags
|
Anton-88
left a comment
Anton-88
left a comment
There was a problem hiding this comment.
good job! everything works and looks correctly!
This PR adds styles for displaying categories and tags in the case studies section, including:\n\n- Updated SCSS styles for categories and tags\n- Modified case studies page layout\n- Added check mark SVG icon