Merge pull request #1280 from edx/fix/frances/lms-video-dl-buttons2

Improving the video and transcript download buttons

cms/static/sass/_variables.scss

@@ -180,6 +180,7 @@ $ui-update-color: $blue-l4;
 
 // inherited
 $baseFontColor: $gray-d2;
+$lighter-base-font-color: rgb(100,100,100);
 $offBlack: #3c3c3c;
 $green: #108614;
 $lightGrey: #edf1f5;
@@ -199,3 +200,10 @@ $error-red: rgb(253, 87, 87);
 // type
 $sans-serif: $f-sans-serif;
 $body-line-height: golden-ratio(.875em, 1);
+
+// carried over from LMS for xmodules
+$action-primary-active-bg: #1AA1DE; // $m-blue
+$very-light-text: #fff;
+
+
+

common/lib/xmodule/xmodule/css/video/display.scss

@@ -27,6 +27,33 @@ div.video {
     height: 0px;
   }
 
+  .wrapper-downloads {
+    margin: 0;
+    padding: 0;
+
+    .video-sources,
+    .video-tracks {
+      display: inline-block;
+      margin: ($baseline*.75) ($baseline/2) 0 0;
+
+      a {
+        @include transition(all 0.25s ease-in-out 0s);
+        @include font-size(14);
+        display: inline-block;
+        border-radius: 3px 3px 3px 3px;
+        background-color: $very-light-text;
+        padding: ($baseline*.75);
+        color: $lighter-base-font-color;
+
+        &:hover {
+          background-color: $action-primary-active-bg;
+          color: $very-light-text;
+        }
+      }
+
+    }
+  }
+
   article.video-wrapper {
     float: left;
     margin-right: flex-gutter(9);

lms/templates/video.html

@@ -89,16 +89,19 @@
     </div>
 
     <div class="focus_grabber last"></div>
-</div>
-
+<ul class="wrapper-downloads">
 % if sources.get('main'):
-    <div class="video-sources">
-        <p>${(_('Download video') + ' <a href="%s">' + _('here') + '</a>.') % sources.get('main')}</p>
-    </div>
+    <li class="video-sources">
+        ${('<a href="%s">' + _('Download video') + '</a>') % sources.get('main')}
+    </li>
 % endif
 
 % if track:
-    <div class="video-tracks">
-        <p>${(_('Download subtitles') + ' <a href="%s">' + _('here') + '</a>.') % track}</p>
-    </div>
+    <li class="video-tracks">
+        ${('<a href="%s">' + _('Download timed transcript') + '</a>') % track}
+    </li>
 % endif
+</ul>
+</div>
+
+