Skip to content

[459] Create styles for displaying Categories & Tags #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yuramax merged 25 commits into from
May 28, 2025
Merged

[459] Create styles for displaying Categories & Tags #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
0a0dc8d
feat: implement category display in sidebar for case studies
IhorMasechko May 21, 2025
1433f82
Fix lint error
IhorMasechko May 21, 2025
a4bdf2b
Fix linter errors in case studies page tag counting system
IhorMasechko May 22, 2025
3890338
Merge branch 'main' into 595-display-created-categories-in-the-sidebar
IhorMasechko May 22, 2025
ff21ccb
Fix ApostropheCMS module structure for tag counting
IhorMasechko May 22, 2025
ca33acc
Fixed coderabbitai and sonarqube issues
IhorMasechko May 22, 2025
8686372
Merge branch 'main' into 595-display-created-categories-in-the-sidebar
IhorMasechko May 22, 2025
7917367
Merge branch 'main' into 595-display-created-categories-in-the-sidebar
IhorMasechko May 23, 2025
a4d3885
Refactor case study search UI for tag-based filtering
IhorMasechko May 23, 2025
8ee217c
Fixed sonar issues
IhorMasechko May 23, 2025
bfed418
re-initialize tag search filter after Barba transitions
IhorMasechko May 23, 2025
122e5e0
Merge with main branch
IhorMasechko May 23, 2025
3d19683
Merge branch 'main' into 594-case-study-search-by-tags
IhorMasechko May 23, 2025
49ca94b
Add styles for categories and tags display, update case studies page …
yuramax May 26, 2025
b4314e3
add styles for focus items
VitalyyP May 26, 2025
14d411b
fix
VitalyyP May 26, 2025
3a4f0a1
fix
VitalyyP May 26, 2025
f3736d3
Refactor check mark implementation to use CSS variable for better fle…
yuramax May 26, 2025
06b696b
Refactor check mark implementation to use CSS variable for better fle…
yuramax May 26, 2025
ec02c5b
Merge branch 'main' into 459-create-styles-for-displaying-categories-…
yuramax May 26, 2025
47cac8c
added missed .svg image during merge branches
yuramax May 27, 2025
6db03fc
Merge branch 'main' into 459-create-styles-for-displaying-categories-…
yuramax May 27, 2025
3c6d03b
style(cases): improve filter section styling and layout
yuramax May 28, 2025
ee2366c
style(cases): improve filter section styling and layout
yuramax May 28, 2025
e512aa8
Merge branch '459-create-styles-for-displaying-categories-and-tags' o…
yuramax May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions website/modules/asset/ui/src/scss/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
box-sizing: border-box;
}

:root {
--check-mark-url: url(/images/check_mark.svg);
}

.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
Expand Down
159 changes: 103 additions & 56 deletions website/modules/asset/ui/src/scss/_cases.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,82 +67,131 @@
&_list {
display: flex;
flex-direction: column;
gap: 32px;
border-top: 1px solid $gray-border;
padding-top: 24px;
align-items: center;

@include breakpoint-medium {
flex-direction: row;
padding-top: 32px;
align-items: flex-start;
}
}
}

// Tags styling

.tags-filter {
margin-top: 1rem;
}
border: 1px solid $gray-border;
font-style: $font-style-normal;
max-width: 262px;
width: 100%;

.tags-title {
font-weight: 600;
color: #1a202c;
margin-bottom: 0.75rem;
.filter-section {
&:first-of-type {
.filter-category {
&::before {
content: none;
}
}
}
}
}

.tags-list {
list-style: none;
padding: 0;
margin: 0;
}
.filter-section {
padding: 0 24px;

.tag-item {
display: flex;
align-items: center;
.filter-category {
@include font-settings(14px, 150%, $font-weight-extra-bold);
color: $gray-500;
margin: 0 0 16px;
padding: 12px 0;
position: relative;

&::before,
&::after {
content: '';
position: absolute;
left: -24px;
right: -24px;
bottom: 0;
border-bottom: 1px solid $gray-border;
}

&::before {
top: 0;
bottom: initial;
}
}
}

.tag-link {
display: flex;
align-items: center;
padding: 0 12px 0 0;
font-size: 11px;
font-weight: $font-weight-medium;
line-height: $line-height-body;
color: $gray-300;
text-decoration: none;
position: relative;
flex: 1;
cursor: pointer;
transition: color 0.2s;

&::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid $gray-300;
margin-right: 10px;
background: $gray-100;
box-sizing: border-box;
transition:
border-color 0.2s,
background 0.2s;
.filter-content {
margin-bottom: 32px;

.tag-search {
@include font-settings(11px, 140%, $font-weight-medium);
border: 1px solid rgba($gray-200, 0.4);
padding: 12px;
margin-bottom: 11px;
color: $gray-300;
width: 100%;

&:focus {
outline: 0;
border-left: 0;
border-right: 0;
border-top: 0;
padding-left: 0;
}
}

.tags-list {
list-style: none;
padding: 0;
margin: 0;
}

.tag-item {
margin-bottom: 6px;

&.active {
.tag-link {
&::before {
content: '';
background-color: $gray-500;
background-image: var(--check-mark-url, url(/images/check_mark.svg));
}
}
}
}

&.selected {
.tag-link {
@include truncate-lines(1);
@include font-settings(11px, 140%, $font-weight-medium);
text-transform: capitalize;
color: $gray-300;
display: block;
text-decoration: none;
padding: 5px 0;
cursor: pointer;

&::before {
content: '';
display: inline-block;
background: $gray-400;
border-color: $gray-400;
width: 14px;
height: 14px;
background-color: $gray-100;
background-repeat: no-repeat;
background-position: center;
background-size: 10px 10px;
margin-right: 10px;
vertical-align: middle;
margin-top: -1px;
}
&::after {
content: '';
position: absolute;
left: 2px;
top: 1px;
width: 8px;
height: 6px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
pointer-events: none;

span {
margin-left: 5px;
}
}
}
Expand Down Expand Up @@ -184,13 +233,11 @@
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
margin-bottom: 32px;

@include breakpoint-medium {
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
margin-bottom: 42px;
}
}

Expand Down
148 changes: 81 additions & 67 deletions website/modules/case-studies-page/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,74 +79,88 @@
tags and tags.length %}
<div class="filter-section">
<p class="filter-category">{{ filterLabel }}:</p>
<input
type="text"
class="tag-search"
placeholder="Search {{ filterLabel | lower }}"
data-filter-type="{{ filterType }}"
style="margin-bottom: 10px; width: 100%"
/>
<ul class="tags-list">
{% for tag in tags %} {# Get count from dynamic tag counts #} {% set
count = data.tagCounts[filterType][tag.value] or 0 %} {# Check if
tag is selected (handle both array and string) #} {% set
isTagSelected = false %} {% if data.query[filterType] %} {% if
data.query[filterType].length is defined %} {# It's an array
(multiple values) #} {% set isTagSelected = tag.value in
data.query[filterType] %} {% else %} {# It's a string (single value)
#} {% set isTagSelected = tag.value == data.query[filterType] %} {%
endif %} {% endif %} {% if isTagSelected %}
<li class="tag-item active" data-label="{{ tag.label | lower }}">
{% if filterType == 'industry' %}
<a
class="tag-link"
href="{{ data.url | build({}, { industry: { $pull: tag.value } }) }}"
>
{{ tag.label }} [{{ count }}]
</a>
{% elif filterType == 'caseStudyType' %}
<a
class="tag-link"
href="{{ data.url | build({}, { caseStudyType: { $pull: tag.value } }) }}"
>
{{ tag.label }} [{{ count }}]
</a>
{% elif filterType == 'stack' %}
<a
class="tag-link"
href="{{ data.url | build({}, { stack: { $pull: tag.value } }) }}"
>
{{ tag.label }} [{{ count }}]
</a>
{% endif %}
</li>
{% else %}
<li class="tag-item" data-label="{{ tag.label | lower }}">
{% if filterType == 'industry' %}
<a
class="tag-link"
href="{{ data.url | build({}, { industry: { $addToSet: tag.value } }) }}"
>
{{ tag.label }} [{{ count }}]
</a>
{% elif filterType == 'caseStudyType' %}
<a
class="tag-link"
href="{{ data.url | build({}, { caseStudyType: { $addToSet: tag.value } }) }}"
>
{{ tag.label }} [{{ count }}]
</a>
{% elif filterType == 'stack' %}
<a
class="tag-link"
href="{{ data.url | build({}, { stack: { $addToSet: tag.value } }) }}"
>
{{ tag.label }} [{{ count }}]
</a>
<div class="filter-content">
<input
type="text"
class="tag-search"
placeholder="Search by {{ filterLabel | capitalize }}"
data-filter-type="{{ filterType }}"
/>
<ul class="tags-list">
<!-- prettier-ignore -->
{% for tag in tags %}

{# Get count from dynamic tag counts #}
{% set count = data.tagCounts[filterType][tag.value] or 0 %}

{# Check if tag is selected (handle both array and string) #}
{% set isTagSelected = false %}

{% if data.query[filterType] %}
{% if data.query[filterType].length is defined %}

{# It's an array (multiple values) #}
{% set isTagSelected = tag.value in data.query[filterType] %}
{% else %}

{# It's a string (single value) #}
{% set isTagSelected = tag.value == data.query[filterType] %}
{% endif %}
</li>
{% endif %} {% endfor %}
</ul>

{% endif %}
{% if isTagSelected %}
<li class="tag-item active" data-label="{{ tag.label | lower }}">
{% if filterType == 'industry' %}
<a
class="tag-link"
href="{{ data.url | build({}, { industry: { $pull: tag.value } }) }}"
>
{{ tag.label }} <span>[ {{ count }} ]</span>
</a>
{% elif filterType == 'caseStudyType' %}
<a
class="tag-link"
href="{{ data.url | build({}, { caseStudyType: { $pull: tag.value } }) }}"
>
{{ tag.label }} <span>[ {{ count }} ]</span>
</a>
{% elif filterType == 'stack' %}
<a
class="tag-link"
href="{{ data.url | build({}, { stack: { $pull: tag.value } }) }}"
>
{{ tag.label }} <span>[ {{ count }} ]</span>
</a>
{% endif %}
</li>
{% else %}
<li class="tag-item" data-label="{{ tag.label | lower }}">
{% if filterType == 'industry' %}
<a
class="tag-link"
href="{{ data.url | build({}, { industry: { $addToSet: tag.value } }) }}"
>
{{ tag.label }} <span>[ {{ count }} ]</span>
</a>
{% elif filterType == 'caseStudyType' %}
<a
class="tag-link"
href="{{ data.url | build({}, { caseStudyType: { $addToSet: tag.value } }) }}"
>
{{ tag.label }} <span>[ {{ count }} ]</span>
</a>
{% elif filterType == 'stack' %}
<a
class="tag-link"
href="{{ data.url | build({}, { stack: { $addToSet: tag.value } }) }}"
>
{{ tag.label }} <span>[ {{ count }} ]</span>
</a>
{% endif %}
</li>
{% endif %} {% endfor %}
</ul>
</div>
</div>
{% endif %} {% endfor %}
</div>
Expand Down
4 changes: 1 addition & 3 deletions website/public/images/check_mark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading