From 55d8a72395e5bb62fb2106d9209e8f86ce93356b Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Thu, 3 Oct 2013 16:51:39 -0400 Subject: [PATCH 1/5] 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 @@
- % if sources.get('main'):
-

${(_('Download video') + ' ' + _('here') + '.') % sources.get('main')}

+

${('' + _('Download video') + '') % sources.get('main')}

% endif % if track:
-

${(_('Download subtitles') + ' ' + _('here') + '.') % track}

+

${('' + _('Download timed transcript') + '') % track}

% endif + + + + From 6fa642fc658db742824e389b835388fb4dc29aa4 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Fri, 4 Oct 2013 08:50:38 -0400 Subject: [PATCH 2/5] a11y adjustment to new video and transcript links styles --- common/lib/xmodule/xmodule/css/video/display.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 22d7577468..bb7ce9a2bd 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -39,7 +39,7 @@ div.video { a { display: inline-block; border-radius: 3px 3px 3px 3px; - background-color: $shadow-l1; + background-color: $white; padding: ($baseline*.75); &:hover { From 5653112f5e8f6c6edbb53d617a060167864b8c12 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Wed, 9 Oct 2013 12:02:09 -0400 Subject: [PATCH 3/5] ux cleanup of video and transcript download buttons --- cms/static/sass/_variables.scss | 1 + common/lib/xmodule/xmodule/css/video/display.scss | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 18ecdf7fef..9060d99c38 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -179,6 +179,7 @@ $notification-height: ($baseline*10); // inherited $baseFontColor: $gray-d2; +$lighter-base-font-color: rgb(100,100,100); $offBlack: #3c3c3c; $green: #108614; $lightGrey: #edf1f5; diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index bb7ce9a2bd..75ce1f6c61 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -30,17 +30,20 @@ div.video { .video-sources, .video-tracks { display: inline-block; + margin: ($baseline*.75) ($baseline/2) 0 0; p { - margin: ($baseline*.75) ($baseline/2) 0 0; display: inline-block; + margin: 0; } a { + @include transition(all 0.25s ease-in-out 0s); display: inline-block; border-radius: 3px 3px 3px 3px; background-color: $white; padding: ($baseline*.75); + color: $lighter-base-font-color; &:hover { background-color: $blue; From 729c0bca0989289760b83af35cbcb1d294558690 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Wed, 9 Oct 2013 14:40:01 -0400 Subject: [PATCH 4/5] updating video download links to a list - review feedback --- .../lib/xmodule/xmodule/css/video/display.scss | 6 +----- lms/templates/video.html | 16 ++++++++-------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 75ce1f6c61..3294549901 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -32,13 +32,9 @@ div.video { display: inline-block; margin: ($baseline*.75) ($baseline/2) 0 0; - p { - display: inline-block; - margin: 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: $white; diff --git a/lms/templates/video.html b/lms/templates/video.html index d9770c0977..a4fa42faee 100644 --- a/lms/templates/video.html +++ b/lms/templates/video.html @@ -76,19 +76,19 @@
- + From 5d509c2e085a3c64295b1bb3baaaa492a380249d Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Thu, 10 Oct 2013 10:09:43 -0400 Subject: [PATCH 5/5] addressing review feedback on video buttons - switched to use themeable color variables --- cms/static/sass/_variables.scss | 7 ++++ .../xmodule/xmodule/css/video/display.scss | 35 +++++++++++-------- lms/templates/video.html | 2 +- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index 9060d99c38..2dc2c74780 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -199,3 +199,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; + + + diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 3294549901..9a366330fd 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -27,26 +27,31 @@ div.video { height: 0px; } - .video-sources, - .video-tracks { - display: inline-block; - margin: ($baseline*.75) ($baseline/2) 0 0; + .wrapper-downloads { + margin: 0; + padding: 0; - a { - @include transition(all 0.25s ease-in-out 0s); - @include font-size(14); + .video-sources, + .video-tracks { display: inline-block; - border-radius: 3px 3px 3px 3px; - background-color: $white; - padding: ($baseline*.75); - color: $lighter-base-font-color; + margin: ($baseline*.75) ($baseline/2) 0 0; - &:hover { - background-color: $blue; - color: $white; + 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 { diff --git a/lms/templates/video.html b/lms/templates/video.html index a4fa42faee..4cb24fa223 100644 --- a/lms/templates/video.html +++ b/lms/templates/video.html @@ -76,7 +76,7 @@
-