Skip to content

Commit

Permalink
fix(badges): render badges as lists
Browse files Browse the repository at this point in the history
  • Loading branch information
@anpa
anpa committed Feb 6, 2023
1 parent 9a8e4d2 commit f89c264
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 125 deletions.
61 changes: 22 additions & 39 deletions style.css
View file
Expand Up @@ -2267,7 +2267,7 @@ ul {
}

.comment-meta {
flex: 1 0 auto;
flex: 1 1 auto;
}

.comment-labels {
Expand Down Expand Up @@ -3101,52 +3101,29 @@ ul {
padding: 0px 8px;
vertical-align: top;
white-space: nowrap;
display: inline-flex;
display: inline-block;
line-height: 18px;
vertical-align: middle;
}

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

.community-badge-container-achievements {
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-titles {
display: inline;
}

.community-badge-achievements {
.community-badge-achievement {
display: block;
height: 16px;
white-space: nowrap;
width: 16px;
}

.profile-info .community-badge-achievements {
height: 40px;
width: 40px;
.community-badge-achievement img {
width: 100%;
height: 100%;
}

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

.community-badge-achievements-rest {
Expand All @@ -3157,14 +3134,18 @@ ul {
vertical-align: top;
}

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

.community-badge-titles img {
width: 20px;
height: 20px;
.profile-info .community-badge-title {
padding: 2px 8px;
line-height: 20px;
}

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

.profile-info .community-badge-achievements-rest {
Expand Down Expand Up @@ -4016,6 +3997,8 @@ ul {
.profile-header .basic-info .name {
margin: 0;
line-height: 25px;
vertical-align: middle;
display: inline;
}

.profile-header .options {
Expand Down
2 changes: 1 addition & 1 deletion styles/_comments.scss
View file
Expand Up @@ -85,7 +85,7 @@
}

&-meta {
flex: 1 0 auto;
flex: 1 1 auto;
}

&-labels {
Expand Down
69 changes: 26 additions & 43 deletions styles/_community_badge.scss
View file
Expand Up @@ -9,52 +9,29 @@
padding: 0px 8px;
vertical-align: top;
white-space: nowrap;
display: inline-flex;
display: inline-block;
line-height: 18px;
vertical-align: middle;
}

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

.community-badge-container-achievements {
display: flex;
}

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

[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 {
.community-badge-achievement {
display: block;
height: 16px;
white-space: nowrap;
width: 16px;
}

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

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

.community-badge-achievements-rest {
Expand All @@ -65,17 +42,23 @@
vertical-align: top;
}

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

.community-badge-titles img {
width: 20px;
height: 20px;
}
.profile-info {
.community-badge-title {
padding: 2px 8px;
line-height: 20px;
}

.community-badge-achievement {
height: 40px;
width: 40px;
}

.profile-info .community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
.community-badge-achievements-rest {
line-height: 40px;
font-size: 20px;
}
}
2 changes: 2 additions & 0 deletions styles/_user-profiles.scss
View file
Expand Up @@ -57,6 +57,8 @@
.name {
margin: 0;
line-height: 25px;
vertical-align: middle;
display: inline;
}
}

Expand Down
20 changes: 10 additions & 10 deletions templates/article_page.hbs
View file
Expand Up @@ -226,13 +226,13 @@
{{/link}}
</span>

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

<div class="meta-group meta-group-opposite">
{{#if editor}}
Expand All @@ -243,21 +243,21 @@
{{/if}}
</div>

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

{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
<li class="community-badge community-badge-achievement">
<a href="{{page_path "user_profile" id=author.id filter_by="badges"}}" class="community-badge-achievements-rest" aria-label="{{t 'more_awards_to' count=(calc author.badges.length "-" 4) name=author.name}}">
{{t 'plus_more' count=(calc author.badges.length "-" 4)}}
</a>
</div>
</li>
{{/if}}
</div>
</ul>
</div>
<div class="comment-labels">
{{#with ticket}}
Expand Down
40 changes: 20 additions & 20 deletions templates/community_post_page.hbs
View file
Expand Up @@ -63,13 +63,13 @@
{{/link}}
</span>

<span class="community-badge community-badge-titles">
<ul aria-label="{{t 'badges'}}" class="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}}">
<li class="community-badge community-badge-title" title="{{description}}" aria-label="{{name}}">
{{name}}
</div>
</li>
{{/each}}
</span>
</ul>

<div class="meta-group meta-group-opposite">
{{#if post.editor}}
Expand All @@ -79,22 +79,22 @@
<span class="meta-data">{{date post.created_at timeago=true}}</span>
{{/if}}
</div>
<div class="community-badge-container-achievements">
<ul aria-label="{{t 'badges'}}" class="community-badge-achievements">
{{#each (slice (filter post.author.badges on="category_slug" equals="achievements") 0 4)}}
<div class="community-badge community-badge-achievements">
<li class="community-badge community-badge-achievement">
<img src="{{icon_url}}" alt="{{name}}" title="{{name}} | {{description}}" />
</div>
</li>
{{/each}}

{{#if (compare (calc post.author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
<li class="community-badge community-badge-achievement">
<a href="{{page_path "user_profile" id=post.author.id filter_by="badges"}}" class="community-badge-achievements-rest" aria-label="{{t 'more_awards_to' count=(calc post.author.badges.length "-" 4) name=post.author.name}}">
{{t 'plus_more' count=(calc post.author.badges.length "-" 4)}}
</a>
</div>
</li>
{{/if}}

</div>
</ul>
</div>

{{#if post.pending}}
Expand Down Expand Up @@ -221,13 +221,13 @@
{{/link}}
</span>

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

<div class="meta-group meta-group-opposite">
{{#if editor}}
Expand All @@ -238,21 +238,21 @@
{{/if}}
</div>

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

{{#if (compare (calc author.badges.length "-" 4) ">" 0)}}
<div class="community-badge community-badge-achievements">
<li class="community-badge community-badge-achievement">
<a href="{{page_path "user_profile" id=author.id filter_by="badges"}}" class="community-badge-achievements-rest" aria-label="{{t 'more_awards_to' count=(calc author.badges.length "-" 4) name=author.name}}">
{{t 'plus_more' count=(calc author.badges.length "-" 4)}}
</a>
</div>
</li>
{{/if}}
</div>
</ul>

</div>
<div class="comment-labels">
Expand Down

0 comments on commit f89c264

Please sign in to comment.