IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improving title selection on badge pages

Browse Source
This commit is contained in:
Kris 2018-03-02 16:15:31 -05:00
parent dda248f5df
commit c684843c53
2 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/discourse/templates/badges/index.hbs
View File

@ -8,10 +8,11 @@
<div class='title'> <div class='title'>
<h3>{{bg.badgeGrouping.displayName}}</h3> <h3>{{bg.badgeGrouping.displayName}}</h3>
</div> </div>
<div class="badge-group-list">
{{#each bg.badges as |b|}} {{#each bg.badges as |b|}}
{{badge-card badge=b filterUser=b.has_badge username=currentUser.username}} {{badge-card badge=b filterUser=b.has_badge username=currentUser.username}}
{{/each}} {{/each}}
</div>
</div> </div>
{{/each}} {{/each}}
</div> </div>

44
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -206,7 +206,7 @@
vertical-align: top; vertical-align: top;
flex: 0 0 32%; flex: 0 0 32%;
margin-right: calc(2% - 3px); margin-right: calc(2% - 3px);
&:nth-of-type(3n+1) { &:nth-of-type(3n) {
margin-right: 0; margin-right: 0;
} }
@include small-width { @include small-width {
@ -228,8 +228,10 @@
} }
&.large { &.large {
width: 100%; width: 100%;
align-self: flex-start;
@media screen and (min-width: 767px) { @media screen and (min-width: 767px) {
max-width: calc(#{$large-width} / 2); max-width: calc(#{$large-width} / 2);
margin-right: 1.5em;
} }
.badge-contents { .badge-contents {
.badge-link { .badge-link {
@ -251,7 +253,6 @@
} }
} }
.badge-groups { .badge-groups {
margin: 20px 0; margin: 20px 0;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
@ -260,7 +261,13 @@
} }
} }
.badge-grouping { .badge-title {
.user-content {
padding: 0;
}
}
.badge-group-list {
margin-bottom: 1.5em; margin-bottom: 1.5em;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -282,20 +289,11 @@
margin-top: 1em; margin-top: 1em;
.badge-grant-info { .badge-grant-info {
display: flex;
align-items: center;
width: 100%;
@media screen and (max-width: 500px) {
flex-wrap: wrap;
}
div:not(.grant-info-item) {
display: flex;
}
&.hidden { &.hidden {
display: none; display: none;
} }
} }
.grant-info-item { .grant-info-item {
margin-bottom: 1em; margin-bottom: 1em;
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
@ -304,12 +302,24 @@
} }
} }
.badge-title .form-horizontal .controls { .badge-set-title {
margin-left: 20px; padding: 1.5em;
border: 1px solid $primary-low;
.user-content {
padding: 0;
.control-group {
margin-bottom: 1em;
}
}
} }
.close-btn { .badge-title .form-horizontal .controls {
margin: -20px 0 0 20px; margin-left: 0;
}
.form-horizontal {
margin-bottom: 0;
} }
} }