diff --git a/app/assets/javascripts/discourse/components/groups_list_component.js b/app/assets/javascripts/discourse/components/groups_list_component.js
new file mode 100644
index 00000000000..0f78ba24f53
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/groups_list_component.js
@@ -0,0 +1,12 @@
+/**
+ Displays a list of groups that a user belongs to.
+
+ @class Discourse.GroupsListComponent
+ @extends Ember.Component
+ @namespace Discourse
+ @module Discourse
+**/
+Discourse.GroupsListComponent = Em.Component.extend({
+ classNames: ['groups']
+});
+
diff --git a/app/assets/javascripts/discourse/mixins/scroll_top.js b/app/assets/javascripts/discourse/mixins/scroll_top.js
new file mode 100644
index 00000000000..b9c7c68cce8
--- /dev/null
+++ b/app/assets/javascripts/discourse/mixins/scroll_top.js
@@ -0,0 +1,18 @@
+/**
+ This mixin will cause a view to scroll the viewport to the top once it has been inserted
+
+ @class Discourse.ScrollTop
+ @extends Ember.Mixin
+ @namespace Discourse
+ @module Discourse
+**/
+Discourse.ScrollTop = Em.Mixin.create({
+
+ _scrollTop: function() {
+ Em.run.schedule('afterRender', function() {
+ $(document).scrollTop(0);
+ });
+ }.on('didInsertElement'),
+
+});
+
diff --git a/app/assets/javascripts/discourse/templates/components/groups-list.js.handlebars b/app/assets/javascripts/discourse/templates/components/groups-list.js.handlebars
new file mode 100644
index 00000000000..95a012d1e19
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/groups-list.js.handlebars
@@ -0,0 +1,6 @@
+{{#if groups}}
+ {{i18n groups.title count=groups.length}}:
+ {{#each groups}}
+ {{#link-to 'group' this class="group-link"}}{{name}}{{/link-to}}
+ {{/each}}
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
index 0c52cb78ec4..fdb3fdef282 100644
--- a/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
+++ b/app/assets/javascripts/discourse/templates/poster_expansion.handlebars
@@ -10,6 +10,8 @@
{{#if user.bio_cooked}}
{{{user.bio_cooked}}}
{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/user/user.js.handlebars b/app/assets/javascripts/discourse/templates/user/user.js.handlebars
index beac824acac..259aaa1b57d 100644
--- a/app/assets/javascripts/discourse/templates/user/user.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/user/user.js.handlebars
@@ -43,14 +43,7 @@
{{{bio_cooked}}}
- {{#if custom_groups}}
-
- {{i18n groups.title count=custom_groups.length}}:
- {{#each custom_groups}}
- {{#link-to 'group' this class="group-link"}}{{name}}{{/link-to}}
- {{/each}}
-
- {{/if}}
+ {{groups-list groups=custom_groups}}
{{#if isSuspended}}
diff --git a/app/assets/javascripts/discourse/views/discovery_topics_view.js b/app/assets/javascripts/discourse/views/discovery_topics_view.js
index 0256dbc499d..00b9528bace 100644
--- a/app/assets/javascripts/discourse/views/discovery_topics_view.js
+++ b/app/assets/javascripts/discourse/views/discovery_topics_view.js
@@ -7,15 +7,9 @@
@namespace Discourse
@module Discourse
**/
-Discourse.DiscoveryTopicsView = Discourse.View.extend(Discourse.LoadMore, {
+Discourse.DiscoveryTopicsView = Discourse.View.extend(Discourse.ScrollTop, Discourse.LoadMore, {
eyelineSelector: '.topic-list-item',
- _scrollTop: function() {
- Em.run.schedule('afterRender', function() {
- $(document).scrollTop(0);
- });
- }.on('didInsertElement'),
-
actions: {
loadMore: function() {
var self = this;
diff --git a/app/assets/javascripts/discourse/views/group_index_view.js b/app/assets/javascripts/discourse/views/group_index_view.js
index c73a56d4391..71082bb15b8 100644
--- a/app/assets/javascripts/discourse/views/group_index_view.js
+++ b/app/assets/javascripts/discourse/views/group_index_view.js
@@ -1,4 +1,13 @@
-Discourse.GroupIndexView = Discourse.View.extend(Discourse.LoadMore, {
+/**
+ Displays all posts within a group
+
+ @class Discourse.GroupIndexView
+ @extends Ember.Mixin
+ @namespace Discourse
+ @module Discourse
+**/
+Discourse.GroupIndexView = Discourse.View.extend(Discourse.ScrollTop, Discourse.LoadMore, {
eyelineSelector: '.user-stream .item'
+
});
diff --git a/app/assets/stylesheets/desktop/poster_expansion.scss b/app/assets/stylesheets/desktop/poster_expansion.scss
index f32773f47b0..c5e60915320 100644
--- a/app/assets/stylesheets/desktop/poster_expansion.scss
+++ b/app/assets/stylesheets/desktop/poster_expansion.scss
@@ -40,6 +40,16 @@
margin-top: 0px;
color: $primary_medium;
}
+ .groups {
+ font-size: 13px;
+ font-weight: normal;
+ margin-top: 0px;
+ color: $primary_medium;
+
+ .group-link {
+ color: $primary;
+ }
+ }
.bottom {
clear: both;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 3c2f93364e7..3e76c2cd4ed 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -2,6 +2,12 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
+.groups {
+ .group-link {
+ color: $tertiary_lightest;
+ }
+}
+
.user-preferences {
input.category-group {
width: 500px;
@@ -210,9 +216,6 @@
h1, h2 {margin-top: 10px;}
- .group-link {
- color: $tertiary_lightest;
- }
.bio {
color: $primary_lighter;