From 55d8a72395e5bb62fb2106d9209e8f86ce93356b Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Thu, 3 Oct 2013 16:51:39 -0400
Subject: [PATCH] adding a little ux to the download video and transcript links

---
 .../xmodule/xmodule/css/video/display.scss    | 27 +++++++++++++++++--
 lms/templates/video.html                      |  9 ++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss
index c087d18098..22d7577468 100644
--- a/common/lib/xmodule/xmodule/css/video/display.scss
+++ b/common/lib/xmodule/xmodule/css/video/display.scss
@@ -27,6 +27,29 @@ div.video {
     height: 0px;
   }
 
+  .video-sources,
+  .video-tracks {
+    display: inline-block;
+
+    p {
+      margin: ($baseline*.75) ($baseline/2) 0 0;
+      display: inline-block;
+    }
+
+    a {
+      display: inline-block;
+      border-radius: 3px 3px 3px 3px;
+      background-color: $shadow-l1;
+      padding: ($baseline*.75);
+
+      &:hover {
+        background-color: $blue;
+        color: $white;
+      }
+    }
+
+  }
+
   article.video-wrapper {
     float: left;
     margin-right: flex-gutter(9);
@@ -392,7 +415,7 @@ div.video {
             @include transition(none);
             -webkit-font-smoothing: antialiased;
             width: 30px;
-          
+
             &:hover, &:active {
               background-color: #444;
               color: #fff;
@@ -457,7 +480,7 @@ div.video {
           text-indent: -9999px;
           @include transition(none);
           width: 30px;
-          
+
           &:hover, &:active {
             background-color: #444;
             color: #fff;
diff --git a/lms/templates/video.html b/lms/templates/video.html
index 3d0b9bd936..d9770c0977 100644
--- a/lms/templates/video.html
+++ b/lms/templates/video.html
@@ -76,16 +76,19 @@
     </div>
 
     <div class="focus_grabber last"></div>
-</div>
 
 % if sources.get('main'):
     <div class="video-sources">
-        <p>${(_('Download video') + ' <a href="%s">' + _('here') + '</a>.') % sources.get('main')}</p>
+        <p>${('<a href="%s">' + _('Download video') + '</a>') % sources.get('main')}</p>
     </div>
 % endif
 
 % if track:
     <div class="video-tracks">
-        <p>${(_('Download subtitles') + ' <a href="%s">' + _('here') + '</a>.') % track}</p>
+        <p>${('<a href="%s">' + _('Download timed transcript') + '</a>') % track}</p>
     </div>
 % endif
+
+</div>
+
+