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

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

diff --git a/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs b/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs
index bdae640..a0aa65b 100644
--- a/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs
+++ b/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.hbs
@@ -1 +1 @@
-{{group-assignments-menu-item group = group}}
\ No newline at end of file
+{{group-assignments-menu-item group=group}}
diff --git a/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.js.es6 b/assets/javascripts/discourse-assign/connectors/group-reports-nav-item/assigned-topic-list.js.es6
new file mode 100644
index 0000000..4d9d836
--- /dev/null
+++ b/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
+    );
+  }
+};
diff --git a/assets/javascripts/discourse/components/group-assignments-menu-item.js.es6 b/assets/javascripts/discourse/components/group-assignments-menu-item.js.es6
index 188c08d..91ad923 100644
--- a/assets/javascripts/discourse/components/group-assignments-menu-item.js.es6
+++ b/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: ""
 });
diff --git a/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs b/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs
index 35fa403..676f407 100644
--- a/assets/javascripts/discourse/templates/components/group-assignments-filter.hbs
+++ b/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}}
diff --git a/assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs b/assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs
index 6d3395c..e96c886 100644
--- a/assets/javascripts/discourse/templates/components/group-assignments-menu-item.hbs
+++ b/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}}
diff --git a/assets/javascripts/discourse/templates/group/assignments.hbs b/assets/javascripts/discourse/templates/group/assignments.hbs
index 743f33a..2c1ae28 100644
--- a/assets/javascripts/discourse/templates/group/assignments.hbs
+++ b/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>
\ No newline at end of file
+</section>
diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss
index eafa680..8625524 100644
--- a/assets/stylesheets/assigns.scss
+++ b/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;
+    }
+  }
+}
diff --git a/assets/stylesheets/mobile/assigns.scss b/assets/stylesheets/mobile/assigns.scss
index 761b50f..4eea2ef 100644
--- a/assets/stylesheets/mobile/assigns.scss
+++ b/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;
+  }
+}

GitHub sha: 26682cce

1 Like

This commit appears in #86 which was merged by davidtaylorhq.