UX: admin badge page improvements

UX: admin badge page improvements

diff --git a/app/assets/javascripts/admin/routes/admin-badges-index.js.es6 b/app/assets/javascripts/admin/routes/admin-badges-index.js.es6
new file mode 100644
index 0000000..84a5bee
--- /dev/null
+++ b/app/assets/javascripts/admin/routes/admin-badges-index.js.es6
@@ -0,0 +1,23 @@
+import { emojiUrlFor } from "discourse/lib/text";
+
+const badgeIntroLinks = [
+  {
+    text: "admin.badges.badge_intro.what_are_badges_title",
+    href: "https://meta.discourse.org/t/32540",
+    icon: "book"
+  },
+  {
+    text: "admin.badges.badge_intro.badge_query_examples_title",
+    href: "https://meta.discourse.org/t/18978",
+    icon: "book"
+  }
+];
+
+export default Ember.Route.extend({
+  setupController(controller) {
+    controller.setProperties({
+      badgeIntroLinks,
+      badgeIntroEmoji: emojiUrlFor("woman_student:t4")
+    });
+  }
+});
diff --git a/app/assets/javascripts/admin/templates/badges-index.hbs b/app/assets/javascripts/admin/templates/badges-index.hbs
index c0abf3f..ebeb2d5 100644
--- a/app/assets/javascripts/admin/templates/badges-index.hbs
+++ b/app/assets/javascripts/admin/templates/badges-index.hbs
@@ -1,9 +1,16 @@
-{{#d-section class="current-badge content-body"}}
-  <p>{{i18n 'admin.badges.none_selected'}}</p>
-
-  <div>
-    {{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
-      {{d-icon "plus"}} {{i18n 'admin.badges.new'}}
-    {{/link-to}}
+{{#d-section class="current-badges"}}
+  <div class="badge-intro">
+    <img src={{badgeIntroEmoji}} class="badge-intro-emoji">
+    <div class="content-wrapper">
+      <h1>{{i18n 'admin.badges.badge_intro.title'}}</h1>
+      <div class="external-resources">
+        {{#each badgeIntroLinks as |link|}}
+          <a href={{link.href}} class="external-link" target="_blank">
+            {{d-icon link.icon}}
+            <span>{{I18n link.text}}</span>
+          </a>
+        {{/each}}
+      </div>
+    </div>
   </div>
-{{/d-section}}
+{{/d-section}}
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/templates/badges.hbs b/app/assets/javascripts/admin/templates/badges.hbs
index 04b60d1..398a5c0 100644
--- a/app/assets/javascripts/admin/templates/badges.hbs
+++ b/app/assets/javascripts/admin/templates/badges.hbs
@@ -1,25 +1,26 @@
 <div class="badges">
-
+  <div class="badges-header">
+    <h3 class="badges-heading">{{i18n 'admin.badges.title'}}</h3>
+    <div class="create-new-badge">
+      {{#link-to 'adminBadges.show' 'new' class="btn btn-primary"}}
+        {{d-icon "plus"}}
+        <span>{{i18n 'admin.badges.new'}}</span>
+      {{/link-to}}
+    </div>
+  </div>
   <div class='content-list'>
-    <h3>{{i18n 'admin.badges.title'}}</h3>
-    <ul>
+    <ul class="admin-badge-list">
       {{#each model as |badge|}}
-      <li>
-        {{#link-to 'adminBadges.show' badge.id}}
-          {{badge-button badge=badge}}
-          {{#if badge.newBadge}}
-            <span class="list-badge">{{i18n 'filters.new.lower_title'}}</span>
-          {{/if}}
-        {{/link-to}}
-      </li>
+        <li class="admin-badge-list-item">
+          {{#link-to 'adminBadges.show' badge.id}}
+            {{badge-button badge=badge}}
+            {{#if badge.newBadge}}
+              <span class="list-badge">{{i18n 'filters.new.lower_title'}}</span>
+            {{/if}}
+          {{/link-to}}
+        </li>
       {{/each}}
     </ul>
-    {{#link-to 'adminBadges.show' 'new' class="btn btn-default"}}
-      {{d-icon "plus"}} {{i18n 'admin.badges.new'}}
-    {{/link-to}}
-    <br>
-    <br>
   </div>
-
   {{outlet}}
-</div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
index 279a805..9e639f7 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-edit-badge-groupings.hbs
@@ -1,30 +1,30 @@
-{{#d-modal-body title="admin.badges.badge_groupings.modal_title"}}
-  <div>
-    <ul class='badge-groupings'>
-    {{#each workingCopy as |wc|}}
-      <li class="badge-grouping-item">
-        <div class="badge-grouping">
-          {{#if wc.editing}}
-            {{input value=wc.name class="badge-grouping-name-input"}}
-            <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
-          {{else}}
-            {{wc.displayName}}
-          {{/if}}
-        </div>
-        <div class='actions'>
-          <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon "pencil-alt"}}</button>
-          <button {{action "up" wc}} class="btn no-text">{{d-icon 'toggle-up'}}</button>
-          <button {{action "down" wc}} class="btn no-text">{{d-icon 'toggle-down'}}</button>
-          <button {{action "delete" wc}} class="btn no-text btn-danger" disabled={{wc.system}}>{{d-icon 'times'}}</button>
-        </div>
-      </li>
-    {{/each}}
+{{#d-modal-body title="admin.badges.badge_groupings.modal_title" class="badge-groupings-modal"}}
+  <div class="badge-groupings">
+    <ul class='badge-groupings-list'>
+      {{#each workingCopy as |wc|}}
+        <li class="badge-grouping-item">
+          <div class="badge-grouping">
+            {{#if wc.editing}}
+              {{input value=wc.name class="badge-grouping-name-input"}}
+              <button {{action "save" wc}} class="btn no-text">{{d-icon 'check'}}</button>
+            {{else}}
+              <span>{{wc.displayName}}</span>
+            {{/if}}
+          </div>
+          <div class='actions'>
+            <button {{action "edit" wc}} class="btn no-text" disabled={{wc.system}}>{{d-icon 'pencil-alt'}}</button>
+            <button {{action "up" wc}} class="btn no-text">{{d-icon 'chevron-up'}}</button>
+            <button {{action "down" wc}} class="btn no-text">{{d-icon 'chevron-down'}}</button>
+            <button {{action "delete" wc}} class="btn no-text btn-danger"
+             disabled={{wc.system}}>{{d-icon 'times'}}</button>
+          </div>
+        </li>
+      {{/each}}
     </ul>
   </div>
-  <button class='btn' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
+  <button class='btn new-badge-grouping' {{action "add"}}>{{i18n 'admin.badges.new'}}</button>
 {{/d-modal-body}}
-
 <div class="modal-footer">
   <button class='btn btn-primary' {{action "saveAll"}} disabled={{submitDisabled}}>{{i18n 'admin.badges.save'}}</button>
   {{d-modal-cancel close=(route-action "closeModal")}}
-</div>
+</div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 399226d..ee8b99c 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -1,31 +1,95 @@
 // Styles for admin/badges
-
-// Badges area
-.badges {
-  .content-list ul {
-    margin-bottom: 10px;
-    .list-badge {
-      float: right;
-      font-size: $font-down-1;
-      font-weight: normal;
-      padding: 0 6px;
-      color: $secondary;
-      background-color: $tertiary-medium;
-      border-radius: 3px;
+.admin-badges {
+  // flex page layout
+  .badges {
+    display: flex;
+    flex-wrap: wrap;
+    .badges-header {
+      display: flex;
+      align-items: center;
+      flex: 1 0 100%;
+      .create-new-badge {
+        margin-left: auto;
+      }
+    }
+    .badge-intro {
+      display: inline-flex;
+      flex: 0 1 50%;
+    }
+    .content-list {
+      flex: 0 0 27%;
+    }
+    .current-badges {
+      display: flex;
+      justify-content: center;
+      flex: 1 1 72%;
+    }
+  }
+  .badges-header {
+    padding: 10px 0;
+    border-top: 1px solid $primary-low;
+    border-bottom: 1px solid $primary-low;
+    .badges-heading {
+      margin: 0;
+      padding: 0 10px;
+    }
+  }
+  .content-list {
+    .admin-badge-list {
+      height: 70vh;
+      overflow-y: scroll;
+      border-right: 1px solid $primary-low;

[... diff too long, it was truncated ...]

GitHub sha: d7202151

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there: