fixes title of course in dashboard to accept very long course names, improves…

fixes title of course in dashboard to accept very long course names, improves various other UI elemnts in the dashboard

lms/static/sass/_course_about.scss

@@ -99,7 +99,7 @@
             @include box-sizing(border-box);
             @include border-radius(3px);
             display: block;
-            //font: normal 1.2rem/1.6rem $sans-serif;
+            font: normal 1.2rem/1.6rem $sans-serif;
             letter-spacing: 1px;
             padding: 10px 0px;
             text-transform: uppercase;
@@ -117,7 +117,6 @@
             @include box-sizing(border-box);
             color: darken($blue, 20%);
             display: block;
-            //font: normal 1.2rem/1.6rem $sans-serif;
             letter-spacing: 1px;
             padding: 10px 0px 8px;
             text-transform: uppercase;

lms/static/sass/_dashboard.scss

@@ -9,10 +9,13 @@
     width: flex-grid(3);
 
     header.profile {
-      h1.user-name {
+      @include background-image(linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)));
       border: 1px solid rgb(200,200,200);
       @include border-radius(4px);
       @include box-sizing(border-box);
+      width: flex-grid(12);
+
+      h1.user-name {
         color: $base-font-color;
         font: 700 1.2em/1.2em $sans-serif;
         margin: 0px;
@@ -21,7 +24,7 @@
         text-wrap: nowrap;
         text-overflow: ellipsis;
         text-transform: none;
-        width: flex-grid(12);
+      }
     }
 
     .user-info {
@@ -29,10 +32,10 @@
       padding: 0px 10px;
 
       > ul {
-          background: rgb(250,250,250);
+        background: rgb(252,252,252);
         border: 1px solid rgb(200,200,200);
         border-top: none;
-          @include border-bottom-radius(4px);
+        //@include border-bottom-radius(4px);
         @include box-sizing(border-box);
         @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
         @include clearfix;
@@ -90,7 +93,6 @@
       }
     }
   }
-  }
 
   .my-courses {
     float: left;
@@ -136,13 +138,10 @@
     }
 
     .my-course {
-      background: rgb(250,250,250);
-      @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240)));
-      border: 1px solid rgb(190,190,190);
       @include border-radius(3px);
       @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
-      @include box-sizing(border-box);
       @include clearfix;
+      height: 120px;
       margin-right: flex-gutter();
       margin-bottom: 25px;
       overflow: hidden;
@@ -158,12 +157,15 @@
         background: rgb(225,225,225);
         background-size: cover;
         background-position: center center;
-        border-right: 1px solid rgb(150,150,150);
+        border: 1px solid rgb(120,120,120);
         @include border-left-radius(3px);
         @include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.6), 1px 0 0 0 rgba(255,255,255, 0.8));
+        @include box-sizing(border-box);
         float: left;
-        height: 120px;
+        height: 100%;
+        max-height: 100%;
         margin: 0px;
+        overflow: hidden;
         position: relative;
         @include transition(all, 0.15s, linear);
         width: 200px;
@@ -171,7 +173,6 @@
         .shade {
           @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
                                                             rgba(0,0,0, 0.3) 100%));
-          @include border-radius(4px);
           bottom: 0px;
           content: "";
           display: block;
@@ -211,7 +212,15 @@
       }
 
       .info {
+        background: rgb(250,250,250);
+        @include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240)));
+        @include box-sizing(border-box);
+        border: 1px solid rgb(190,190,190);
+        border-left: none;
+        @include border-right-radius(3px);
         left: 201px;
+        height: 100%;
+        max-height: 100%;
         padding: 0px 10px;
         position: absolute;
         right: 0px;
@@ -219,6 +228,7 @@
         z-index: 2;
 
         > hgroup {
+          @include clearfix;
           border-bottom: 1px solid rgb(210,210,210);
           @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
           padding: 12px 0px;
@@ -236,7 +246,8 @@
             @include inline-block;
             margin-right: 10px;
             padding: 5px 10px;
-            vertical-align: middle;
+
+            float: left;
 
             &:hover {
               color: $blue;
@@ -245,16 +256,17 @@
           }
 
           h3 {
-            @include inline-block;
+            display: block;
             margin-bottom: 0px;
-            vertical-align: middle;
+            overflow: hidden;
+            padding-top: 2px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
 
             a {
               color: $base-font-color;
               font-weight: 700;
               text-shadow: 0 1px rgba(255,255,255, 0.6);
-              text-overflow: ellipsis;
-              white-space: nowrap;
 
               &:hover {
                 text-decoration: underline;

lms/templates/dashboard.html

@@ -11,6 +11,7 @@
   <section class="profile-sidebar">
     <header class="profile">
       <h1 class="user-name">${ user.username }</h1>
+    </header>
     <section class="user-info">
       <ul>
         <li>
@@ -21,7 +22,6 @@
         </li>
       </ul>
     </section>
-    </header>
   </section>
 
   <section class="my-courses">