github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-27 22:53:50 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Style group flair in /groups same as in topic avatars

Browse Source
This commit is contained in:
Penar Musaraj 2018-11-28 16:02:49 -05:00
parent 6568832235
commit c388cacb81
3 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/components/groups-info.js.es6
View File

@ -2,6 +2,7 @@ import computed from "ember-addons/ember-computed-decorators";
export default Ember.Component.extend({ export default Ember.Component.extend({
tagName: "span", tagName: "span",
classNames: ["group-info-details"],
@computed("group.full_name", "group.title") @computed("group.full_name", "group.title")
showFullName(fullName, title) { showFullName(fullName, title) {

8
app/assets/stylesheets/common/base/group.scss
View File

@ -56,9 +56,15 @@
.avatar-flair { .avatar-flair {
background-size: $size; background-size: $size;
height: $size; height: $size;
width: $size;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.d-icon { .d-icon {
font-size: $size !important; height: $size / 1.8;
width: $size / 1.8;
} }
} }
} }

17
app/assets/stylesheets/common/base/groups.scss
View File

@ -189,6 +189,10 @@
} }
.groups-info { .groups-info {
.group-info-details {
vertical-align: middle;
}
.groups-info-name { .groups-info-name {
font-weight: bold; font-weight: bold;
color: $primary; color: $primary;
@ -204,6 +208,11 @@
color: dark-light-choose($primary-medium, $secondary-medium); color: dark-light-choose($primary-medium, $secondary-medium);
} }
.group-avatar-flair {
vertical-align: middle;
color: $primary;
}
span { span {
display: inline-block; display: inline-block;
} }
@ -213,9 +222,15 @@
.avatar-flair { .avatar-flair {
background-size: $size; background-size: $size;
height: $size; height: $size;
width: $size;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.d-icon { .d-icon {
font-size: $size !important; height: $size / 1.8;
width: $size / 1.8;
} }
} }