From 57d129a3cfdbcb34d9dbf5de7e8d0dc6805b2464 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Jan 2012 14:16:27 -0500 Subject: [PATCH 1/5] Start to fix video layout --HG-- branch : kf-video-layout --- sass/_courseware.scss | 87 ++----------------------------------------- sass/application.scss | 2 +- video.html | 14 +++---- 3 files changed, 12 insertions(+), 91 deletions(-) diff --git a/sass/_courseware.scss b/sass/_courseware.scss index d2ab6d65b7..4ff4bc2012 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -1,6 +1,10 @@ div.course-wrapper { @extend .table-wrapper; + ul, ol { + list-style: none; + } + div#accordion { @extend .sidebar; @@ -112,88 +116,5 @@ div.course-wrapper { padding: 0 10px; } } - - div.video-wrapper { - float: left; - width: 640px; - min-height: 620px; - - iframe#html5_player { - border: none; - display: none; - height: 390px; - width: 640px; - } - - section { - ul { - display: inline-block; - - li { - margin-top: 5px; - display: inline-block; - cursor: pointer; - border: 0; - padding: 0; - - div { - &:empty { - display: none; - } - } - } - } - - div#slider { - margin: -14px 0 10px 60px; - } - - div#vidtime { - float: left; - } - - div#video_speeds { - float: right; - cursor: pointer; - - span { - &:hover { - color: $mit-red; - } - } - } - } - } - - ol.subtitles { - width: 220px; - margin-left: 20px; - float: left; - - li { - margin-bottom: 0px; - cursor: pointer; - border: 0; - padding: 0; - color: #666; - - &.current { - background-color: #f3f3f3; - color: #333; - } - - &:hover { - color: $mit-red; - } - - div { - margin-bottom: 8px; - } - - div:empty { - margin-bottom: 0px; - } - } - } } } diff --git a/sass/application.scss b/sass/application.scss index f274acbfb8..359197d16a 100644 --- a/sass/application.scss +++ b/sass/application.scss @@ -8,7 +8,7 @@ @import "leanmodal"; // pages -@import "courseware"; +@import "courseware", "courseware-video"; @import "textbook"; @import "profile"; @import "wiki-create", "wiki"; diff --git a/video.html b/video.html index bdbd6e80a5..089dfb74c2 100644 --- a/video.html +++ b/video.html @@ -1,12 +1,14 @@
-
+
+
+
+ + +
- - -
    • @@ -19,8 +21,6 @@
- -
    3. From 7cfc50fae8c9b8c7aefa6da7002e4dcd8b3da939 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Jan 2012 14:16:51 -0500 Subject: [PATCH 2/5] Video scss refactor --HG-- branch : kf-video-layout --- sass/_courseware-video.scss | 105 ++++++++++++++++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 sass/_courseware-video.scss diff --git a/sass/_courseware-video.scss b/sass/_courseware-video.scss new file mode 100644 index 0000000000..10504ff39c --- /dev/null +++ b/sass/_courseware-video.scss @@ -0,0 +1,105 @@ +section.course-content { + + div.video-wrapper { + float: left; + width: flex-grid(6, 9); + + margin-right: flex-gutter(9); + + div.video-player { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + + object { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + iframe#html5_player { + border: none; + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + section { + ul { + display: inline-block; + + li { + margin-top: 5px; + display: inline-block; + cursor: pointer; + border: 0; + padding: 0; + + div { + &:empty { + display: none; + } + } + } + } + + div#slider { + margin: -14px 0 10px 60px; + } + + div#vidtime { + float: left; + } + + div#video_speeds { + float: right; + cursor: pointer; + + span { + &:hover { + color: $mit-red; + } + } + } + } + } + + ol.subtitles { + float: left; + width: flex-grid(3, 9); + + li { + margin-bottom: 0px; + cursor: pointer; + border: 0; + padding: 0; + color: #666; + + &.current { + background-color: #f3f3f3; + color: #333; + } + + &:hover { + color: $mit-red; + } + + div { + margin-bottom: 8px; + } + + div:empty { + margin-bottom: 0px; + } + } + } + +} From f2a748e4a664777830afed6a487250a775d72b46 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Jan 2012 14:54:00 -0500 Subject: [PATCH 3/5] Added some style for video sequence made topbar extend better --HG-- branch : kf-video-layout --- sass/_base-extends.scss | 9 ++++++++- sass/_courseware.scss | 24 +++++++++++++++++++++--- sass/_textbook.scss | 12 ++++++++++-- sass/_wiki.scss | 9 +++++---- seq_module.html | 4 ++-- 5 files changed, 46 insertions(+), 12 deletions(-) diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss index 51ef608531..1ed3c8b530 100644 --- a/sass/_base-extends.scss +++ b/sass/_base-extends.scss @@ -109,11 +109,18 @@ @extend .clearfix; a { - text-transform: uppercase; + @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%)); + background: darken(#F6EFD4, 5%); + border-left: 1px solid darken(#f6efd4, 20%); color: darken(#F6EFD4, 80%); + padding: lh(.75); + text-transform: uppercase; + display: block; &:hover { color: darken(#F6EFD4, 60%); + text-decoration: none; + background: none; } } } diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 4ff4bc2012..f139ab9a21 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -106,14 +106,32 @@ div.course-wrapper { ol.sequence-nav { margin-bottom: $body-line-height; + @extend .topbar; li { border: none; cursor: pointer; display: table-cell; - min-width: 30px; - min-height: 30px; - padding: 0 10px; + padding: lh(.75); + float: left; + + &.prev, &.next { + @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%)); + background: darken(#F6EFD4, 5%); + border-left: 1px solid darken(#f6efd4, 20%); + color: darken(#F6EFD4, 80%); + float: right; + letter-spacing: 1px; + padding: lh(.75); + text-transform: uppercase; + + &:hover { + text-decoration: none; + color: darken(#F6EFD4, 60%); + text-decoration: none; + background: none; + } + } } } } diff --git a/sass/_textbook.scss b/sass/_textbook.scss index 6e22791f2c..b0fbdcd372 100644 --- a/sass/_textbook.scss +++ b/sass/_textbook.scss @@ -18,17 +18,25 @@ div.book-wrapper { nav { @extend .topbar; + @extend .clearfix; ul { @extend .clearfix; - li { - padding: 15px; + li { &.last { float: left; + display: block; + + a { + @include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%)); + border-right: 1px solid darken(#f6efd4, 20%); + border-left: 0; + } } &.next { + display: block; float: right; } } diff --git a/sass/_wiki.scss b/sass/_wiki.scss index aed8d34ef3..0cf50a54b6 100644 --- a/sass/_wiki.scss +++ b/sass/_wiki.scss @@ -8,8 +8,8 @@ div.wiki-wrapper { input[type="button"] { @extend h3; - color: lighten($text-color, 10%); @include transition(); + color: lighten($text-color, 10%); font-size: $body-font-size; margin: 0 !important; padding: 7px 7px 7px 30px; @@ -77,7 +77,7 @@ div.wiki-wrapper { section.wiki-body { @extend .content; - + header { @extend .topbar; @@ -91,6 +91,7 @@ div.wiki-wrapper { ul { float: right; + list-style: none; li { float: left; @@ -108,7 +109,7 @@ div.wiki-wrapper { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; - padding: 15px; + padding: lh(.75); margin: 0; &:hover { @@ -136,4 +137,4 @@ div.wiki-wrapper { } } } -} \ No newline at end of file +} diff --git a/seq_module.html b/seq_module.html index c2891af8f9..6608344e2f 100644 --- a/seq_module.html +++ b/seq_module.html @@ -4,8 +4,8 @@
  3.  
    4. % endfor -
  4. Previous
    5. -
  5. Next
    6. + +
From 7e86b8384be5e319f04536899d5d6c751ccf0a2d Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Jan 2012 17:33:20 -0500 Subject: [PATCH 4/5] Added more sequence styles --HG-- branch : kf-video-layout --- sass/_courseware.scss | 55 +++++++++++++++++++++++++++++++++++++++++++ seq_module.js | 2 +- 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/sass/_courseware.scss b/sass/_courseware.scss index f139ab9a21..36bef4b789 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -115,6 +115,61 @@ div.course-wrapper { padding: lh(.75); float: left; + //problem + &.seq_problem_inactive { + width: 14px; + background: url('/static/images/problem-icon.png') 13px 13px no-repeat; + } + + &.seq_problem_visited { + width: 14px; + background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat; + } + + &.seq_problem_active { + width: 14px; + background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat; + border-right: 1px solid #D8CFA8; + border-left: 1px solid #D8CFA8; + } + + //video + &.seq_video_inactive { + width: 14px; + background: url('/static/images/video-icon.png') 13px 15px no-repeat; + } + + &.seq_video_visited { + width: 14px; + background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -64px 15px no-repeat; + } + + &.seq_video_active { + width: 14px; + background: #FFFBEB url('/static/images/video-icon.png') -25px 15px no-repeat; + border-right: 1px solid #D8CFA8; + border-left: 1px solid #D8CFA8; + } + + + //vertical + &.seq_vertical_inactive { + width: 14px; + background: url('/static/images/vertical-icon.png') 13px 15px no-repeat; + } + + &.seq_vertical_visited { + width: 14px; + background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') -82px 15px no-repeat; + } + + &.seq_vertical_active { + width: 14px; + background: #FFFBEB url('/static/images/vertical-icon.png') -35px 15px no-repeat; + border-right: 1px solid #D8CFA8; + border-left: 1px solid #D8CFA8; + } + &.prev, &.next { @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%)); background: darken(#F6EFD4, 5%); diff --git a/seq_module.js b/seq_module.js index a636045587..57b73543c6 100644 --- a/seq_module.js +++ b/seq_module.js @@ -44,7 +44,7 @@ function ${ id }goto(i) { ${ id }loc=i; //$('#tt_'+i).attr("style", "background-color:red"); $('#tt_'+i).removeClass(); - $('#tt_'+i).addClass("seq_active"); + $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active"); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } From e59f3ed206a46775c13810082eb6d20740cd3ebf Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 26 Jan 2012 17:52:13 -0500 Subject: [PATCH 5/5] More styles for sequence --HG-- branch : kf-video-layout --- sass/_courseware.scss | 48 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/sass/_courseware.scss b/sass/_courseware.scss index 36bef4b789..b79bc89e5d 100644 --- a/sass/_courseware.scss +++ b/sass/_courseware.scss @@ -119,55 +119,87 @@ div.course-wrapper { &.seq_problem_inactive { width: 14px; background: url('/static/images/problem-icon.png') 13px 13px no-repeat; + @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%)); + + &:hover { + background-color: lighten(#F6EFD4, 3%); + } } &.seq_problem_visited { width: 14px; background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat; + &:hover { + background-color: #F6EFD4; + } } &.seq_problem_active { width: 14px; background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat; - border-right: 1px solid #D8CFA8; - border-left: 1px solid #D8CFA8; + @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%)); + + &:hover { + background-color: #F6EFD4; + } } //video &.seq_video_inactive { width: 14px; background: url('/static/images/video-icon.png') 13px 15px no-repeat; + @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%)); + + &:hover { + background-color: lighten(#F6EFD4, 3%); + } } &.seq_video_visited { width: 14px; background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -64px 15px no-repeat; + &:hover { + background-color: #F6EFD4; + } } &.seq_video_active { width: 14px; background: #FFFBEB url('/static/images/video-icon.png') -25px 15px no-repeat; - border-right: 1px solid #D8CFA8; - border-left: 1px solid #D8CFA8; + @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%),inset 1px 0 0 darken(#F6EFD4, 20%)); + &:hover { + background-color: #F6EFD4; + } } //vertical &.seq_vertical_inactive { width: 14px; - background: url('/static/images/vertical-icon.png') 13px 15px no-repeat; + background: url('/static/images/vertical-icon.png') -82px 15px no-repeat; + @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%)); + + &:hover { + background-color: lighten(#F6EFD4, 3%); + } } &.seq_vertical_visited { width: 14px; - background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') -82px 15px no-repeat; + background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') 13px 15px no-repeat; + &:hover { + background-color: #F6EFD4; + } } &.seq_vertical_active { width: 14px; background: #FFFBEB url('/static/images/vertical-icon.png') -35px 15px no-repeat; - border-right: 1px solid #D8CFA8; - border-left: 1px solid #D8CFA8; + @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%)); + + &:hover { + background-color: #F6EFD4; + } } &.prev, &.next {