Skip to content

Commit

Permalink
feat: [COMM-1046] Update layout for badge widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@fredefox
fredefox committed Sep 2, 2021
1 parent 21f855d commit 274b091
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 85 deletions.
40 changes: 22 additions & 18 deletions style.css
View file
Expand Up @@ -2755,19 +2755,16 @@ ul {
white-space: nowrap;
display: inline-flex;
line-height: 18px;
margin: 1px 2px;
vertical-align: middle;
}

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

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

.community-badge-container-achievements > .community-badge-titles {
Expand All @@ -2778,26 +2775,38 @@ ul {
margin-right: calc(28px - 0.5em);
}

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

.community-badge {
margin: 2px;
}

.community-badge-achievements {
display: block;
float: left;
height: 20px;
margin: 0 3px 0 0;
width: 20px;
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 {
background-color: #c2c8cc;
border-radius: 50%;
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 20px;
text-align: center;
vertical-align: top;
}

.community-badge-achievements img {
Expand All @@ -2810,11 +2819,6 @@ ul {
height: 20px;
}

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

.profile-info .community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
Expand Down
40 changes: 22 additions & 18 deletions styles/_community_badge.scss
View file
Expand Up @@ -11,19 +11,16 @@
white-space: nowrap;
display: inline-flex;
line-height: 18px;
margin: 1px 2px;
vertical-align: middle;
}

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

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

.community-badge-container-achievements > .community-badge-titles {
Expand All @@ -34,26 +31,38 @@
margin-right: calc(28px - 0.5em);
}

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

.community-badge {
margin: 2px;
}

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

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

[dir="rtl"] .community-badge-achievements {
margin: 0 0 0 3px;
.community-title-badges {
flex-basis: 100%;
margin-top: 15px;
}

.community-badge-achievements-rest {
background-color: #c2c8cc;
border-radius: 50%;
color: #fff;
font-size: 12px;
font-weight: $font-weight-semibold;
line-height: 20px;
text-align: center;
vertical-align: top;
}

.community-badge-achievements img {
Expand All @@ -66,11 +75,6 @@
height: 20px;
}

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

.profile-info .community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
Expand Down
23 changes: 10 additions & 13 deletions templates/article_page.hbs
View file
Expand Up @@ -213,6 +213,14 @@
{{/link}}
</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>

<ul class="meta-group meta-group-opposite">
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
Expand All @@ -222,7 +230,7 @@
{{/if}}
</ul>

<div class="community-badge-container-achievements">
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
{{#each (
slice
(
Expand All @@ -242,20 +250,9 @@

{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
<div class="community-badge-achievements-rest">+{{calc author.badges.length "-" 4}}</div>
{{#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 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}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="" />
{{/if}}
{{name}}
</div>
{{/each}}
</div>
</div>
</div>
<div class="comment-labels">
Expand Down
44 changes: 20 additions & 24 deletions templates/community_post_page.hbs
View file
Expand Up @@ -62,6 +62,15 @@
{{post.author.name}}
{{/link}}
</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 Down Expand Up @@ -90,20 +99,10 @@

{{#if (compare (calc post.author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
<div class="community-badge-achievements-rest">+{{calc post.author.badges.length "-" 4}}</div>
{{#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 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}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="" />
{{/if}}
{{name}}
</div>
{{/each}}
</div>
</div>
</div>

Expand Down Expand Up @@ -214,6 +213,14 @@
{{/link}}
</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>

<ul class="meta-group meta-group-opposite">
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
Expand All @@ -223,7 +230,7 @@
{{/if}}
</ul>

<div class="community-badge-container-achievements">
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
{{#each (
slice
(
Expand All @@ -243,20 +250,9 @@

{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
<div class="community-badge-achievements-rest">+{{calc author.badges.length "-" 4}}</div>
{{#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 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}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="" />
{{/if}}
{{name}}
</div>
{{/each}}
</div>
</div>

</div>
Expand Down
25 changes: 13 additions & 12 deletions templates/user_profile_page.hbs
View file
Expand Up @@ -10,22 +10,23 @@
<img class="user-avatar" src="{{user.avatar_url}}" alt=""/>
</div>
<div class="basic-info">
<h1 class="name">
{{#if user.url}}
<a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
{{else}}
{{user.name}}
{{/if}}
<div class="community-name-and-title-badges">
<h1 class="name">
{{#if user.url}}
<a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
{{else}}
{{user.name}}
{{/if}}
</h1>

<div hidden="true" aria-label="{{t 'badges'}}" />
{{#each (filter user.badges on="category_slug" equals="titles")}}
<span class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
{{#if icon_url}}
<img src="{{icon_url}}" alt="" />
{{/if}}
{{name}}
</span>
{{/each}}
</h1>
<div class="community-badge-container-achievements">
</div>
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
{{#each (
slice
(
Expand All @@ -45,7 +46,7 @@

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

0 comments on commit 274b091

Please sign in to comment.