- {{bound-avatar model "huge"}}
+
+ {{bound-avatar model "huge"}}
+ {{#if model.primary_group_name}}
+ {{avatar-flair
+ flairURL=model.primary_group_flair_url
+ flairBgColor=model.primary_group_flair_bg_color
+ flairColor=model.primary_group_flair_color
+ groupName=model.primary_group_name}}
+ {{/if}}
+
{{#if model.can_send_private_message_to_user}}
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 9614af03bc4..baee2ab77a7 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -263,7 +263,7 @@ aside.quote {
}
-.topic-avatar, .avatar-flair-preview, .user-card-avatar, .topic-map .poster {
+.topic-avatar, .avatar-flair-preview, .user-card-avatar, .topic-map .poster, .user-profile-avatar {
.avatar-flair {
display: flex;
align-items: center;
@@ -275,7 +275,7 @@ aside.quote {
right: -6px;
}
}
-.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair {
+.topic-avatar .avatar-flair, .avatar-flair-preview .avatar-flair, .collapsed-info .user-profile-avatar .avatar-flair {
background-size: 20px 20px;
width: 20px;
height: 20px;
@@ -288,7 +288,7 @@ aside.quote {
right: -8px;
}
}
-.user-card-avatar .avatar-flair {
+.user-card-avatar .avatar-flair, .user-profile-avatar .avatar-flair {
background-size: 40px 40px;
width: 40px;
height: 40px;
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 5efd7ed9ca2..1d0343cb569 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -120,6 +120,15 @@
}
}
}
+
+ .user-profile-avatar {
+ position: relative;
+ float: left;
+ .avatar-flair {
+ bottom: 8px;
+ right: 16px;
+ }
+ }
}
.controls {
@@ -176,6 +185,13 @@
}
}
}
+
+ .user-profile-avatar {
+ .avatar-flair {
+ bottom: 8px;
+ right: 2px;
+ }
+ }
}
}
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index fccb2542ef4..7a652d99046 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -127,6 +127,10 @@
max-width: 700px;
}
}
+
+ .user-profile-avatar .avatar-flair {
+ right: 2px;
+ }
}
.controls {
@@ -177,6 +181,9 @@
}
}
}
+ .user-profile-avatar .avatar-flair {
+ bottom: 12px;
+ }
}
}