touch up groups ui styles

fixes CNVS-9562

Test Plan
1) Navigate to the groups index page with the new ui enabled
2) Ensure that empty groups and group sets have helpful messages and
   correct styling to match the provided design mockups
3) Ensure line height for group headings is normal during browser
   resize (e.g. Unassigned Students (12) )
4) Ensure the drag and drop styles match the provided design mockups and
   that the draggable element stays forward of other DOM elements during
   dragging
5) Ensure group detail information remains visible during browser
   resize (e.g. 3 Students FULL )

Change-Id: I1ccc0a5413e1173d742e653d0e2ec0c1366f996a
Reviewed-on: https://gerrit.instructure.com/26675
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Jon Jensen <jon@instructure.com>
Product-Review: Marc LeGendre <marc@instructure.com>
QA-Review: Marc LeGendre <marc@instructure.com>

app/stylesheets/bootstrap/_variables.scss

@@ -175,6 +175,11 @@ $horizontalComponentOffset:       180px;
 $wellBackground:                  #f5f5f5 !default;
 
 
+// Drag & Drop
+// -------------------------
+$droppableBackground:             #dde0e4 !default;
+
+
 // Navbar
 // -------------------------
 $navbarCollapseWidth:             979px !default;

app/stylesheets/jst/groups/manage/group.scss

@@ -54,9 +54,7 @@
   }
 
   &.droppable-hover {
-    > * {
-      opacity: 0.5;
-    }
+    background-color: $droppableBackground;
   }
 
   .show-group-full { display: none; }
@@ -69,3 +67,16 @@
   padding: 0.7em 1em;
 }
 
+.no-results {
+  background: #fff;
+  border: {
+    color: #c1c7cf;
+    radius: 3px;
+    style: dashed;
+    width: 1px;
+  }
+  color: #878d92;
+  margin: 5px;
+  padding: 8px;
+  text-align: center;
+}

app/stylesheets/jst/groups/manage/groupCategory.scss

@@ -60,6 +60,8 @@
 }
 
 .group-heading {
+  padding: 10px 8px;
+  line-height: 1.5;
   font-weight: bold;
   font-size: 1.1em;
   color: #555;
@@ -72,10 +74,10 @@ a.group-heading:hover {
 }
 
 .unassigned-students {
-  padding-left: 8px;
+  ul {
+    padding: 0 8px;
+  }
   &.droppable-hover {
-    > * {
-      opacity: 0.5;
-    }
+    background-color: $droppableBackground;
   }
 }

app/stylesheets/jst/groups/manage/groupUsers.scss

@@ -9,6 +9,7 @@
   cursor: pointer;
   &.ui-draggable-dragging {
     cursor: move;
+    z-index: 9999;
   }
   &.group-user-highlight {
     animation: highlight-shadow-fade ease-in 1s;

app/stylesheets/utilities/_spacing.scss

@@ -55,6 +55,9 @@ Use pad-box if you want to arbitrarily add some padding to an element.
   &.no-sides {
     padding-left: 0; padding-right: 0;
   }
+  &.sides-only {
+    padding-top: 0; padding-bottom: 0;
+  }
   &.top-only {
     padding-bottom: 0; padding-right: 0; padding-left: 0;
   }

app/views/jst/groups/manage/groupDetail.handlebars

@@ -1,12 +1,12 @@
 <div class="row-fluid">
-  <div class="span8 ellipsis">
+  <div class="{{#if ENV.IS_LARGE_ROSTER}}span7{{else}}span6{{/if}} ellipsis">
     <a href="#" class="toggle-group group-heading" aria-label="{{#t "show_group_details"}}Show details for group {{name}}{{/t}}" title="{{name}}" aria-expanded="false">
       <i class="group-collapsed-item icon-mini-arrow-right"></i>
       <i class="group-expanded-item icon-mini-arrow-down"></i>
       <span class="group-name">{{name}}</span>
     </a>
   </div>
-  <div class="span2">
+  <div class="{{#if ENV.IS_LARGE_ROSTER}}span3{{else}}span4{{/if}} ellipsis">
     <span class="toggle-group group-summary">{{summary}}</span>
     <span class="label label-info show-group-full">{{#t "group_full"}}Full{{/t}}</span>
   </div>

app/views/jst/groups/manage/groupUsers.handlebars

@@ -2,11 +2,11 @@
   <ul class="collectionViewItems unstyled"></ul>
   <div class="paginatedLoadingIndicator"></div>
 {{else}}
-  <p>
+  <div class="no-results">
     {{#ifEqual ENV.group_user_type "student"}}
-      {{#t "no_students"}}No students{{/t}}
+      {{#t "no_students"}}There are currently no students in this group. Add a student to get started.{{/t}}
     {{else}}
-      {{#t "no_users"}}No users{{/t}}
+      {{#t "no_users"}}There are currently no users in this group. Add a user to get started.{{/t}}
     {{/ifEqual}}
-  </p>
+  </div>
 {{/ifAny}}

app/views/jst/groups/manage/groups.handlebars

@@ -2,10 +2,10 @@
   <ul class="collectionViewItems unstyled groups-list"></ul>
   <div class="paginatedLoadingIndicator"></div>
 {{else}}
-  <p>
-    {{#t "no_groups"}}No groups.{{/t}}
-  </p>
+  <div class="no-results">
+    {{#t "no_groups"}}There are currently no groups in this group set. Add a group to get started.{{/t}}
+  </div>
 {{/ifAny}}
-<p class="no-results hidden">
-  {{#t "no_matching_groups"}}No matching groups.{{/t}}
-</p>
+<div class="no-results hidden">
+  {{#t "no_matching_groups"}}There are no groups that match your current search term.{{/t}}
+</div>