Skip to content

Commit 274b091

Browse files
fredefoxfredefox
committed
feat: [COMM-1046] Update layout for badge widget
1 parent 21f855d commit 274b091

File tree

5 files changed

+87
-85
lines changed

5 files changed

+87
-85
lines changed

‎style.css

+22-18
Original file line numberDiff line numberDiff line change
@@ -2755,19 +2755,16 @@ ul {
27552755
white-space: nowrap;
27562756
display: inline-flex;
27572757
line-height: 18px;
2758-
margin: 1px 2px;
2758+
vertical-align: middle;
27592759
}
27602760

27612761
.profile-info .community-badge-title {
27622762
padding: 2px 8px;
2763-
vertical-align: middle;
27642763
line-height: 20px;
2765-
margin: 0 2px;
27662764
}
27672765

27682766
.community-badge-container-achievements {
27692767
display: flex;
2770-
padding-top: 5px;
27712768
}
27722769

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

2778+
.community-name-and-title-badges {
2779+
display: flex;
2780+
flex-wrap: wrap;
2781+
}
2782+
2783+
.community-badge {
2784+
margin: 2px;
2785+
}
2786+
27812787
.community-badge-achievements {
27822788
display: block;
2783-
float: left;
2784-
height: 20px;
2785-
margin: 0 3px 0 0;
2786-
width: 20px;
2789+
height: 16px;
2790+
white-space: nowrap;
2791+
width: 16px;
27872792
}
27882793

2789-
[dir="rtl"] .community-badge-achievements {
2790-
margin: 0 0 0 3px;
2794+
.profile-info .community-badge-achievements {
2795+
height: 40px;
2796+
width: 40px;
2797+
}
2798+
2799+
.community-title-badges {
2800+
flex-basis: 100%;
2801+
margin-top: 15px;
27912802
}
27922803

27932804
.community-badge-achievements-rest {
2794-
background-color: #c2c8cc;
2795-
border-radius: 50%;
2796-
color: #fff;
27972805
font-size: 12px;
27982806
font-weight: 600;
27992807
line-height: 20px;
28002808
text-align: center;
2809+
vertical-align: top;
28012810
}
28022811

28032812
.community-badge-achievements img {
@@ -2810,11 +2819,6 @@ ul {
28102819
height: 20px;
28112820
}
28122821

2813-
.profile-info .community-badge-achievements {
2814-
width: 40px;
2815-
height: 40px;
2816-
}
2817-
28182822
.profile-info .community-badge-achievements-rest {
28192823
line-height: 40px;
28202824
font-size: 20px;

‎styles/_community_badge.scss

+22-18
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,16 @@
1111
white-space: nowrap;
1212
display: inline-flex;
1313
line-height: 18px;
14-
margin: 1px 2px;
14+
vertical-align: middle;
1515
}
1616

1717
.profile-info .community-badge-title {
1818
padding: 2px 8px;
19-
vertical-align: middle;
2019
line-height: 20px;
21-
margin: 0 2px;
2220
}
2321

2422
.community-badge-container-achievements {
2523
display: flex;
26-
padding-top: 5px;
2724
}
2825

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

34+
.community-name-and-title-badges {
35+
display: flex;
36+
flex-wrap: wrap;
37+
}
38+
39+
.community-badge {
40+
margin: 2px;
41+
}
42+
3743
.community-badge-achievements {
3844
display: block;
39-
float: left;
40-
height: 20px;
41-
margin: 0 3px 0 0;
42-
width: 20px;
45+
height: 16px;
46+
white-space: nowrap;
47+
width: 16px;
48+
}
49+
50+
.profile-info .community-badge-achievements {
51+
height: 40px;
52+
width: 40px;
4353
}
4454

45-
[dir="rtl"] .community-badge-achievements {
46-
margin: 0 0 0 3px;
55+
.community-title-badges {
56+
flex-basis: 100%;
57+
margin-top: 15px;
4758
}
4859

4960
.community-badge-achievements-rest {
50-
background-color: #c2c8cc;
51-
border-radius: 50%;
52-
color: #fff;
5361
font-size: 12px;
5462
font-weight: $font-weight-semibold;
5563
line-height: 20px;
5664
text-align: center;
65+
vertical-align: top;
5766
}
5867

5968
.community-badge-achievements img {
@@ -66,11 +75,6 @@
6675
height: 20px;
6776
}
6877

69-
.profile-info .community-badge-achievements {
70-
width: 40px;
71-
height: 40px;
72-
}
73-
7478
.profile-info .community-badge-achievements-rest {
7579
line-height: 40px;
7680
font-size: 20px;

‎templates/article_page.hbs

+10-13
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,14 @@
213213
{{/link}}
214214
</span>
215215

216+
<span aria-label="{{t 'badges'}}" class="community-badge community-badge-titles">
217+
{{#each (filter author.badges on="category_slug" equals="titles")}}
218+
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
219+
{{name}}
220+
</div>
221+
{{/each}}
222+
</span>
223+
216224
<ul class="meta-group meta-group-opposite">
217225
{{#if editor}}
218226
<li class="meta-data">{{date edited_at timeago=true}}</li>
@@ -222,7 +230,7 @@
222230
{{/if}}
223231
</ul>
224232

225-
<div class="community-badge-container-achievements">
233+
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
226234
{{#each (
227235
slice
228236
(
@@ -242,20 +250,9 @@
242250

243251
{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
244252
<div class="community-badge community-badge-achievements">
245-
<div class="community-badge-achievements-rest">+{{calc author.badges.length "-" 4}}</div>
253+
{{#link "user_profile" id=author.id filter_by="badges" class="community-badge-achievements-rest"}}{{t 'plus_more' count=(calc author.badges.length "-" 4)}}{{/link}}
246254
</div>
247255
{{/if}}
248-
249-
<div class="community-badge community-badge-titles">
250-
{{#each (filter author.badges on="category_slug" equals="titles")}}
251-
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
252-
{{#if icon_url}}
253-
<img src="{{icon_url}}" alt="" />
254-
{{/if}}
255-
{{name}}
256-
</div>
257-
{{/each}}
258-
</div>
259256
</div>
260257
</div>
261258
<div class="comment-labels">

‎templates/community_post_page.hbs

+20-24
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,15 @@
6262
{{post.author.name}}
6363
{{/link}}
6464
</span>
65+
66+
<span class="community-badge community-badge-titles">
67+
{{#each (filter post.author.badges on="category_slug" equals="titles")}}
68+
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
69+
{{name}}
70+
</div>
71+
{{/each}}
72+
</span>
73+
6574
<ul class="meta-group meta-group-opposite">
6675
{{#if post.editor}}
6776
<li class="meta-data">{{date post.edited_at timeago=true}}</li>
@@ -90,20 +99,10 @@
9099

91100
{{#if (compare (calc post.author.badges.length "-" 4) ">" 0)}}
92101
<div class="community-badge community-badge-achievements">
93-
<div class="community-badge-achievements-rest">+{{calc post.author.badges.length "-" 4}}</div>
102+
{{#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}}
94103
</div>
95104
{{/if}}
96105

97-
<div class="community-badge community-badge-titles">
98-
{{#each (filter post.author.badges on="category_slug" equals="titles")}}
99-
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
100-
{{#if icon_url}}
101-
<img src="{{icon_url}}" alt="" />
102-
{{/if}}
103-
{{name}}
104-
</div>
105-
{{/each}}
106-
</div>
107106
</div>
108107
</div>
109108

@@ -214,6 +213,14 @@
214213
{{/link}}
215214
</span>
216215

216+
<span aria-label="{{t 'badges'}}" class="community-badge community-badge-titles">
217+
{{#each (filter author.badges on="category_slug" equals="titles")}}
218+
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
219+
{{name}}
220+
</div>
221+
{{/each}}
222+
</span>
223+
217224
<ul class="meta-group meta-group-opposite">
218225
{{#if editor}}
219226
<li class="meta-data">{{date edited_at timeago=true}}</li>
@@ -223,7 +230,7 @@
223230
{{/if}}
224231
</ul>
225232

226-
<div class="community-badge-container-achievements">
233+
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
227234
{{#each (
228235
slice
229236
(
@@ -243,20 +250,9 @@
243250

244251
{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
245252
<div class="community-badge community-badge-achievements">
246-
<div class="community-badge-achievements-rest">+{{calc author.badges.length "-" 4}}</div>
253+
{{#link "user_profile" id=author.id filter_by="badges" class="community-badge-achievements-rest"}}{{t 'plus_more' count=(calc author.badges.length "-" 4)}}{{/link}}
247254
</div>
248255
{{/if}}
249-
250-
<div class="community-badge community-badge-titles">
251-
{{#each (filter author.badges on="category_slug" equals="titles")}}
252-
<div class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
253-
{{#if icon_url}}
254-
<img src="{{icon_url}}" alt="" />
255-
{{/if}}
256-
{{name}}
257-
</div>
258-
{{/each}}
259-
</div>
260256
</div>
261257

262258
</div>

‎templates/user_profile_page.hbs

+13-12
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,23 @@
1010
<img class="user-avatar" src="{{user.avatar_url}}" alt=""/>
1111
</div>
1212
<div class="basic-info">
13-
<h1 class="name">
14-
{{#if user.url}}
15-
<a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
16-
{{else}}
17-
{{user.name}}
18-
{{/if}}
13+
<div class="community-name-and-title-badges">
14+
<h1 class="name">
15+
{{#if user.url}}
16+
<a href="{{user.url}}" target="_zendesk_lotus" title="{{t 'open_user_in_support'}}">{{user.name}}</a>
17+
{{else}}
18+
{{user.name}}
19+
{{/if}}
20+
</h1>
21+
22+
<div hidden="true" aria-label="{{t 'badges'}}" />
1923
{{#each (filter user.badges on="category_slug" equals="titles")}}
2024
<span class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
21-
{{#if icon_url}}
22-
<img src="{{icon_url}}" alt="" />
23-
{{/if}}
2425
{{name}}
2526
</span>
2627
{{/each}}
27-
</h1>
28-
<div class="community-badge-container-achievements">
28+
</div>
29+
<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
2930
{{#each (
3031
slice
3132
(
@@ -45,7 +46,7 @@
4546

4647
{{#if (compare (calc user.badges.length "-" 4) ">" 0)}}
4748
<div class="community-badge community-badge-achievements">
48-
<div class="community-badge-achievements-rest">+{{calc user.badges.length "-" 4}}</div>
49+
{{#link "user_profile" id=user.id filter_by="badges" class="community-badge-achievements-rest"}}{{t 'plus_more' count=(calc user.badges.length "-" 4)}}{{/link}}
4950
</div>
5051
{{/if}}
5152
</div>

0 commit comments

Comments
 (0)