Skip to content

Commit

Permalink
Merge pull request #260 from zendesk/avecerek-COMM-1046-badge-widget
Browse files Browse the repository at this point in the history 
feat: implement +n badge widget
  • Loading branch information
Sergio Azevedo authored Sep 14, 2021
2 parents 04ecdd3 + 274b091 commit 9c5d3b1
Show file tree
Hide file tree
Showing 5 changed files with 229 additions and 106 deletions.
66 changes: 52 additions & 14 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2744,46 +2744,84 @@ ul {

/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-titles {
.community-badge-title {
background-color: #04444d;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
vertical-align: middle;
padding: 0px 8px;
vertical-align: top;
white-space: nowrap;
display: inline-flex;
line-height: 18px;
vertical-align: middle;
}

.profile-info .community-badge-title {
padding: 2px 8px;
line-height: 20px;
margin: 0 2px;
}

.community-badge-container-achievements {
padding-top: 5px;
display: flex;
}

.community-badge-container-achievements > .community-badge-titles {
margin-left: calc(28px - 0.5em);
}

[dir="rtl"] .community-badge-container-achievements > .community-badge-titles {
margin-right: calc(28px - 0.5em);
}

.community-name-and-title-badges {
display: flex;
flex-wrap: wrap;
}

.community-badge {
margin: 2px;
}

.community-badge-achievements {
display: inline-block;
margin: 0 3px 0 0;
display: block;
height: 16px;
white-space: nowrap;
width: 16px;
}

.profile-info .community-badge-achievements {
height: 40px;
width: 40px;
}

.community-title-badges {
flex-basis: 100%;
margin-top: 15px;
}

[dir="rtl"] .community-badge-achievements {
margin: 0 0 0 3px;
.community-badge-achievements-rest {
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
vertical-align: top;
}

.community-badge-achievements img {
width: 22px;
height: 22px;
width: 100%;
height: 100%;
}

.community-badge-titles img {
width: 20px;
height: 20px;
}

.profile-info .community-badge-achievements img {
width: 40px;
height: 40px;
.profile-info .community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
}

/* Navigation element that collapses on mobile */
Expand Down
66 changes: 52 additions & 14 deletions styles/_community_badge.scss
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,81 @@
/***** Community Badges *****/
/* Styles labels used next to the authors of article comments, community posts, and community comments */
.community-badge-titles {
.community-badge-title {
background-color: #04444d;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: $font-weight-semibold;
padding: 2px 8px;
vertical-align: middle;
padding: 0px 8px;
vertical-align: top;
white-space: nowrap;
display: inline-flex;
line-height: 18px;
vertical-align: middle;
}

.profile-info .community-badge-title {
padding: 2px 8px;
line-height: 20px;
margin: 0 2px;
}

.community-badge-container-achievements {
padding-top: 5px;
display: flex;
}

.community-badge-container-achievements > .community-badge-titles {
margin-left: calc(28px - 0.5em);
}

[dir="rtl"] .community-badge-container-achievements > .community-badge-titles {
margin-right: calc(28px - 0.5em);
}

.community-name-and-title-badges {
display: flex;
flex-wrap: wrap;
}

.community-badge {
margin: 2px;
}

.community-badge-achievements {
display: inline-block;
margin: 0 3px 0 0;
display: block;
height: 16px;
white-space: nowrap;
width: 16px;
}

[dir="rtl"] .community-badge-achievements {
margin: 0 0 0 3px;
.profile-info .community-badge-achievements {
height: 40px;
width: 40px;
}

.community-title-badges {
flex-basis: 100%;
margin-top: 15px;
}

.community-badge-achievements-rest {
font-size: 12px;
font-weight: $font-weight-semibold;
line-height: 20px;
text-align: center;
vertical-align: top;
}

.community-badge-achievements img {
width: 22px;
height: 22px;
width: 100%;
height: 100%;
}

.community-badge-titles img {
width: 20px;
height: 20px;
}

.profile-info .community-badge-achievements img {
width: 40px;
height: 40px;
.profile-info .community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
}
47 changes: 29 additions & 18 deletions templates/article_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,15 +211,13 @@
{{#link 'user_profile' id=author.id}}
{{author.name}}
{{/link}}
{{#each author.badges}}
{{#is category_slug "titles"}}
<span class="community-badge community-badge-titles" title="{{description}}" aria-label="{{name}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="" />
{{/if}}
{{name}}
</span>
{{/is}}
</span>

<span aria-label="{{t 'badges'}}" class="community-badge community-badge-titles">
{{#each (filter author.badges on="category_slug" equals="titles")}}
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
{{name}}
</div>
{{/each}}
</span>

Expand All @@ -232,16 +230,29 @@
{{/if}}
</ul>

<div class="community-badge-container-achievements">
{{#each author.badges}}
{{#is category_slug "achievements"}}
{{#if icon_url}}
<div class="community-badge community-badge-achievements">
<img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
</div>
{{/if}}
{{/is}}
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
{{#each (
slice
(
filter
(filter author.badges on="category_slug" equals="achievements")
on="icon_url"
starts_with="https"
)
0
4
)
}}
<div class="community-badge community-badge-achievements">
<img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
</div>
{{/each}}

{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
{{#link "user_profile" id=author.id filter_by="badges" class="community-badge-achievements-rest"}}{{t 'plus_more' count=(calc author.badges.length "-" 4)}}{{/link}}
</div>
{{/if}}
</div>
</div>
<div class="comment-labels">
Expand Down
94 changes: 59 additions & 35 deletions templates/community_post_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,16 @@
{{#link 'user_profile' id=post.author.id}}
{{post.author.name}}
{{/link}}
{{#each post.author.badges}}
{{#is category_slug "titles"}}
<span class="community-badge community-badge-titles" title="{{description}}" aria-label="{{name}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="" />
{{/if}}
{{name}}
</span>
{{/is}}
</span>

<span class="community-badge community-badge-titles">
{{#each (filter post.author.badges on="category_slug" equals="titles")}}
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
{{name}}
</div>
{{/each}}
</span>

<ul class="meta-group meta-group-opposite">
{{#if post.editor}}
<li class="meta-data">{{date post.edited_at timeago=true}}</li>
Expand All @@ -81,15 +80,29 @@
{{/if}}
</ul>
<div class="community-badge-container-achievements">
{{#each post.author.badges}}
{{#is category_slug "achievements"}}
{{#if icon_url}}
<div class="community-badge community-badge-achievements">
<img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
</div>
{{/if}}
{{/is}}
{{#each (
slice
(
filter
(filter post.author.badges on="category_slug" equals="achievements")
on="icon_url"
starts_with="https"
)
0
4
)
}}
<div class="community-badge community-badge-achievements">
<img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
</div>
{{/each}}

{{#if (compare (calc post.author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
{{#link "user_profile" id=post.author.id filter_by="badges" class="community-badge-achievements-rest"}}{{t 'plus_more' count=(calc post.author.badges.length "-" 4)}}{{/link}}
</div>
{{/if}}

</div>
</div>

Expand Down Expand Up @@ -198,15 +211,13 @@
{{#link 'user_profile' id=author.id}}
{{author.name}}
{{/link}}
{{#each author.badges}}
{{#is category_slug "titles"}}
<span class="community-badge community-badge-titles" title="{{description}}" aria-label="{{name}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="" />
{{/if}}
{{name}}
</span>
{{/is}}
</span>

<span aria-label="{{t 'badges'}}" class="community-badge community-badge-titles">
{{#each (filter author.badges on="category_slug" equals="titles")}}
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
{{name}}
</div>
{{/each}}
</span>

Expand All @@ -219,16 +230,29 @@
{{/if}}
</ul>

<div class="community-badge-container-achievements">
{{#each author.badges}}
{{#is category_slug "achievements"}}
{{#if icon_url}}
<div class="community-badge community-badge-achievements">
<img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" aria-label="{{name}}" />
</div>
{{/if}}
{{/is}}
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
{{#each (
slice
(
filter
(filter author.badges on="category_slug" equals="achievements")
on="icon_url"
starts_with="https"
)
0
4
)
}}
<div class="community-badge community-badge-achievements">
<img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
</div>
{{/each}}

{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
{{#link "user_profile" id=author.id filter_by="badges" class="community-badge-achievements-rest"}}{{t 'plus_more' count=(calc author.badges.length "-" 4)}}{{/link}}
</div>
{{/if}}
</div>

</div>
Expand Down
Loading

0 comments on commit 9c5d3b1

Please sign in to comment.