UX: Improving styling so names/usernames fit better (#86)

assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs

@@ -1 +1 @@
-{{group-assignments-menu-item group = group}}
+{{group-assignments-menu-item group=group}}

assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.js.es6

@@ -0,0 +1,9 @@
+export default {
+  shouldRender(args, component) {
+    return (
+      component.currentUser &&
+      component.currentUser.can_assign &&
+      args.group.assignment_count > 0
+    );
+  }
+};

assets/javascripts/discourse/components/group-assignments-menu-item.js.es6

@@ -1,13 +1,3 @@
 export default Ember.Component.extend({
-  canAssign: false,
-
-  init() {
-    this._super(...arguments);
-    this.set(
-      "displayAssignTab",
-      this.currentUser &&
-        this.currentUser.can_assign &&
-        this.group.assignment_count > 0
-    );
-  }
+  tagName: ""
 });

assets/javascripts/discourse/templates/components/group-assignments-filter.hbs

@@ -1,6 +1,8 @@
 {{#if show-avatar}}
   {{#link-to "group.assignments.show" filter.username_lower}}
-    {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{displayName}} ({{filter.assignments_count}})
+    {{avatar filter avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}}
+    <span class="assign-count">({{filter.assignments_count}})</span>
+    <span class="assign-name">{{displayName}}</span>
   {{/link-to}}
 {{else}}
   {{#link-to "group.assignments.show" filter}}

assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs

@@ -1,9 +1,3 @@
-{{#if displayAssignTab}}
-  <ul class ='nav-pills'>
-    <li>
-      {{#link-to "group.assignments"}}
-        {{d-icon "user-plus" class="glyph"}}{{i18n 'discourse_assign.group_assignments'}} ({{group.assignment_count}})
-      {{/link-to}}
-    </li>
-  </ul>
-{{/if}}
+{{#link-to "group.assignments"}}
+  {{d-icon "user-plus" class="glyph"}}{{i18n 'discourse_assign.group_assignments'}} ({{group.assignment_count}})
+{{/link-to}}

assets/javascripts/discourse/templates/group/assignments.hbs

@@ -1,4 +1,4 @@
-<section class="user-secondary-navigation">
+<section class="user-secondary-navigation group-assignments">
   {{#mobile-nav class="activity-nav" desktopClass="action-list activity-list nav-stacked" currentPath=router._router.currentPath}}
     {{#load-more selector=".activity-nav li" action=(action "loadMore")}}
       {{group-assignments-filter show-avatar=false filter="everyone" routeType=route_type assignment_count=group.assignment_count}}
@@ -11,4 +11,4 @@
 </section>
 <section class="user-content">
   {{outlet}}
-</section>
+</section>

assets/stylesheets/assigns.scss

@@ -90,3 +90,30 @@
     }
   }
 }
+
+// Group assigns sidebar nav
+
+.group-assignments {
+  // a little extra space for long names
+  min-width: 180px;
+  li a {
+    display: grid;
+    grid-template-areas:
+      "avatar count"
+      "name name";
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    img {
+      margin-right: 0.25em;
+      grid-area: avatar;
+    }
+    .assign-name {
+      grid-area: name;
+      margin-top: 0.25em;
+      @include ellipsis;
+    }
+    .assign-count {
+      grid-area: count;
+    }
+  }
+}

assets/stylesheets/mobile/assigns.scss

@@ -24,3 +24,23 @@
     }
   }
 }
+
+.group-assignments .mobile-nav .drop li a {
+  display: grid;
+}
+
+.group-assignments .mobile-nav a.expander > span {
+  display: flex;
+  @include ellipsis;
+  .assign-count {
+    display: none;
+  }
+  .assign-name {
+    margin: 0;
+    padding: 0;
+  }
+  img {
+    width: 1em;
+    height: 1em;
+  }
+}