assignment index view condensed styles

closes CNVS-6891

test plan:
- open the new assignment index page
- it should look more condensed
- it should still be accessible

Change-Id: Ic48b293f159729df4fb5667fbdaab3fdc5412d9f
Reviewed-on: https://gerrit.instructure.com/22439
QA-Review: Amber Taniuchi <amber@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Cameron Sutter <csutter@instructure.com>
Product-Review: Simon Williams <simon@instructure.com>

app/coffeescripts/backbone-ext/View.coffee

@@ -105,7 +105,7 @@ define [
     #
     # @api private
     
-    storeChildrenViews: -> 
+    storeChildrenViews: ->
       return unless @constructor.__childViews__
       @children = _.map @constructor.__childViews__, (viewObj) => @[viewObj.name]
     

app/coffeescripts/bundles/teacher_assignments.coffee

@@ -60,4 +60,3 @@ require [
       course: course
 
   @app.render()
-  @app.$el.appendTo $('#content')

app/coffeescripts/views/assignments/AssignmentGroupListItemView.coffee

@@ -13,6 +13,7 @@ define [
   class AssignmentGroupListItemView extends CollectionView
 
     tagName: "li"
+    className: "item-group-condensed"
     itemView: AssignmentListItemView
     template: template
 

app/coffeescripts/views/assignments/TeacherIndexView.coffee

@@ -7,6 +7,8 @@ define [
 
     template: template
 
+    el: '#content'
+
     @child 'assignmentGroupsView', '[data-view=assignmentGroups]'
 
     @child 'inputFilterView', '[data-view=inputFilter]'

app/controllers/assignments_controller.rb

@@ -48,6 +48,7 @@ class AssignmentsController < ApplicationController
         elsif @just_viewing_one_course && @context.assignments.new.grants_right?(@current_user, session, :update)
           format.html {
             if @domain_root_account.enable_draft?
+              @padless = true
               js_env({
                 :NEW_ASSIGNMENT_URL => new_polymorphic_url([@context, :assignment]),
                 :COURSE_URL => api_v1_course_url(@context)

app/stylesheets/utilities/_item-groups-condensed.scss

@@ -159,6 +159,13 @@ body.with_item_groups #main {
   .item-group-condensed.last {
     border-bottom: 0;
   }
+
+  .ig-list {
+    margin-top: 0;
+  }
+  .ig-list li {
+    margin: 0;
+  }
 }
 
 
@@ -177,12 +184,6 @@ body.with_item_groups #main {
     left: 15px;
   }
 
-  .ig-list {
-    margin-top: 0;
-  }
-  .ig-list li {
-    margin: 0;
-  }
   .ig-row {
     border-top-width: 0;
     border-bottom: 1px solid #e1e3e4;

app/stylesheets/utilities/_pill.scss

@@ -24,7 +24,6 @@
   padding: 0 10px;
   border-right: solid 1px rgba(0, 0, 0, 0.25);
   font-size: 12px;
-  line-height: 12px;
 
   &:first-child {
     padding-left: 10px;

app/views/assignments/new_teacher_index.html.erb

@@ -1,5 +1,6 @@
 <%
   @body_classes << 'hide-content-while-scripts-not-loaded'
+  @body_classes << 'with_item_groups'
 
   content_for :page_title, join_title((t '#titles.assignments', 'Assignments'),
     @context.name)

app/views/jst/assignments/TeacherIndex.handlebars

@@ -1,27 +1,33 @@
-<div class="form-inline clearfix">
-  <input
-    type="text"
-    name="search_term"
-    data-view="inputFilter"
-    placeholder='{{#t "search_for_assignment"}}Search for assignment{{/t}}'
-    aria-label='{{#t "search"}}Search{{/t}}'
-  >
+<div class="header-bar">
+  <div class="header-bar-left form-inline">
+    <input
+      id="search_term"
+      name="search_term"
+      type="search"
+      value=""
+      data-view="inputFilter"
+      placeholder="{{#t "search_for_assignment"}}Search for Assignment{{/t}}"
+      aria-label="{{#t "search_for_assignment"}}Search for Assignment{{/t}}"
+    >
+  </div>
 
-  <div class="pull-right">
+  <div class="header-bar-right form-inline">
     <a
       href="#"
-      class="btn"
+      class="btn icon-plus"
       id="addGroup"
       role="button"
       title='{{#t "title_add_group"}}Add Assignment Group{{/t}}'
-    >{{#t "add_group"}}Add Group{{/t}}</a>
+      aria-label='{{#t "title_add_group"}}Add Assignment Group{{/t}}'
+    >{{#t "add_group"}}Group{{/t}}</a>
 
     <a
       href="{{addAssignmentUrl}}"
-      class="new_assignment btn btn-primary"
+      class="new_assignment btn btn-primary icon-plus"
       role="button"
       title='{{#t "title_add_assignment"}}Add Assignment{{/t}}'
-    >{{#t "add_assignment"}}Add Assignment{{/t}}</a>
+      aria-label='{{#t "title_add_assignment"}}Add Assignment{{/t}}'
+    >{{#t "add_assignment"}}Assignment{{/t}}</a>
 
     <a
       class="btn"
@@ -34,9 +40,7 @@
   </div>
 </div>
 
-<div class="v-gutter">
-  <div data-view="assignmentGroups"></div>
-</div>
+<div data-view="assignmentGroups" class="item-group-container"></div>
 
 <form data-view="createGroup" class="form-dialog"></form>
 

app/views/jst/assignments/teacher_index/AssignmentGroupListItem.handlebars

@@ -1,4 +1,4 @@
-<div id="assignment_group_{{id}}" class="item-group">
+<div id="assignment_group_{{id}}">
   <div class="ig-header" style="position:relative;">
 
     <span>
@@ -30,8 +30,7 @@
 
       <a id="ag_{{id}}_manage_link" class="al-trigger btn">
         <span class="screenreader-only">{{#t "manage"}}Manage{{/t}}</span>
-        <i class="icon-settings"></i>
-        <i class="icon-mini-arrow-down"></i>
+        <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
       </a>
       <ul class="al-options">
         <li>

app/views/jst/assignments/teacher_index/AssignmentListItem.handlebars

@@ -6,7 +6,10 @@
   <div class="ig-details row-fluid">
     <div class="span6 ellipses">
       <!-- TODO: VDD -->
-      {{#if dueAt}}{{#t "due_date"}}Due{{/t}} {{datetimeFormatted dueAt}}{{/if}}
+      {{#if dueAt}}
+        <strong>{{#t "due_date"}}Due{{/t}}</strong>
+        {{datetimeFormatted dueAt}}
+      {{/if}}
     </div>
     <div class="span6 ellipses">
       {{#if pointsPossible}}{{#t "points_possible"}}{{pointsPossible}} pts{{/t}}{{/if}}