Merge pull request #980 from openstax/fix/period-tab-ellipsis-tooltip

Student Scores: adds tooltips, ellipsis and scale/wrap to tabs
openstax · Feb 23, 2016 · c858acd · c858acd
2 parents 518d6d1 + 0776cb3
commit c858acd
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 8 deletions.
diff --git a/resources/styles/components/course-settings.less b/resources/styles/components/course-settings.less
@@ -33,6 +33,10 @@
   .nav-tabs {
     .tutor-nav-tabs();
 
+    span {
+      max-width: 100px;
+    }
+
     li.active {
       border: 1px solid @nav-tabs-border-color;
       border-bottom: none;

diff --git a/resources/styles/components/scores/table-cc.less b/resources/styles/components/scores/table-cc.less
@@ -4,6 +4,10 @@
   @pie-color-hover: #0DC0DC;
   @finished-icon-size: 24px;
 
+  .nav.nav-tabs {
+    clear: both;
+  }
+
   .header-cell {
     .no-select();
     cursor: pointer;

diff --git a/resources/styles/mixins.less b/resources/styles/mixins.less
@@ -71,7 +71,9 @@
 
 .tutor-nav-tabs() {
   background: none;
-  li {
+  display: flex;
+  flex-wrap: wrap;
+  li.tab-item-period {
     text-align: center;
     background: @tutor-neutral-lighter;
 
@@ -80,6 +82,14 @@
     a {
       font-weight: 400;
       color: @tutor-neutral !important;
+      span.tab-item-period-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+        white-space: nowrap;
+        font-size: 1.3rem;
+        max-width: 100px;
+      }
     }
 
     &:hover {

diff --git a/resources/styles/mixins/tutor-modal.less b/resources/styles/mixins/tutor-modal.less
@@ -46,7 +46,6 @@
     }
 
     .btn:not(.btn-link):not(.btn-flat) {
-      margin-top: 0;
       margin-bottom: 0;
     }
   }

diff --git a/src/components/course-periods-nav.cjsx b/src/components/course-periods-nav.cjsx
@@ -3,6 +3,7 @@ BS = require 'react-bootstrap'
 LoadableItem = require './loadable-item'
 _ = require 'underscore'
 camelCase = require 'camelcase'
+classnames = require 'classnames'
 
 {CourseActions, CourseStore} = require '../flux/course'
 PeriodHelper = require '../helpers/period'
@@ -18,6 +19,7 @@ CoursePeriodsNav = React.createClass
     periods: React.PropTypes.array.isRequired
     afterTabsItem: React.PropTypes.func
 
+
   getDefaultProps: ->
     initialActive: 0
     sortedPeriods: []
@@ -58,13 +60,25 @@ CoursePeriodsNav = React.createClass
     @setState(active: key)
 
   renderPeriod: (period, key) ->
-    <BS.NavItem 
-      className={'is-trouble' if period.is_trouble}
-      eventKey={key} 
+    className = classnames('tab-item-period', {'is-trouble': period.is_trouble})
+    tooltip =
+      <BS.Tooltip>
+        {period.name}
+      </BS.Tooltip>
+    <BS.NavItem
+      className={className}
+      eventKey={key}
       key="period-nav-#{period.id}">
-      {period.name}
+        <BS.OverlayTrigger
+        placement='top'
+        delayShow={1000}
+        delayHide={0}
+        overlay={tooltip}>
+          <span className='tab-item-period-name'>{period.name}</span>
+        </BS.OverlayTrigger>
     </BS.NavItem>
 
+
   render: ->
     {active, sortedPeriods} = @state
     {afterTabsItem} = @props

diff --git a/src/components/course-settings/roster.cjsx b/src/components/course-settings/roster.cjsx
@@ -1,6 +1,8 @@
 React = require 'react'
 BS = require 'react-bootstrap'
 _  = require 'underscore'
+classnames = require 'classnames'
+
 BindStoreMixin = require '../bind-store-mixin'
 NoPeriods = require '../no-periods'
 
@@ -46,7 +48,21 @@ module.exports = React.createClass
     {is_concept_coach} = course
     periods = course.periods.length > 0
     tabs = _.map course.periods, (period, index) =>
-      <BS.TabPane key={period.id}, eventKey={index} tab={period.name}>
+      className = classnames('tab-item-period', {'is-trouble': period.is_trouble})
+      tooltip =
+        <BS.Tooltip>
+          {period.name}
+        </BS.Tooltip>
+      name =
+        <BS.OverlayTrigger
+        placement='top'
+        delayShow={1000}
+        delayHide={0}
+        overlay={tooltip}>
+          <span className='tab-item-period-name'>{period.name}</span>
+        </BS.OverlayTrigger>
+
+      <BS.TabPane key={period.id}, eventKey={index} tab={name} className={className}>
         <PeriodRoster
         period={period}
         courseId={@props.courseId}
@@ -56,7 +72,7 @@ module.exports = React.createClass
     enrollmentButton =
       <PeriodEnrollmentCode
       activeTab={@getActivePeriod(@state.key, course.periods)}
-      periods={course.periods} 
+      periods={course.periods}
       bookUrl={course.webview_url}
       bookName={course.salesforce_book_name} />
     renameButton =