Skip to content

E
edx-platform
Commit 8b2109ab by Kyle Fiedler
Options

Merge in video layout

parents 13482e2f e59f3ed2
Showing with 231 additions and 85 deletions
sass/_base-extends.scss
...@@ -109,11 +109,18 @@ ...@@ -109,11 +109,18 @@
@extend .clearfix; @extend .clearfix;
a { 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%); color: darken(#F6EFD4, 80%);
padding: lh(.75);
text-transform: uppercase;
display: block;
&:hover { &:hover {
color: darken(#F6EFD4, 60%); color: darken(#F6EFD4, 60%);
text-decoration: none;
background: none;
} }
} }
} }
sass/_courseware-video.scss 0 → 100644
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;
}
}
}
}
sass/_courseware.scss
div.course-wrapper { div.course-wrapper {
@extend .table-wrapper; @extend .table-wrapper;
ul, ol {
list-style: none;
}
div#accordion { div#accordion {
@extend .sidebar; @extend .sidebar;
...@@ -102,97 +106,119 @@ div.course-wrapper { ...@@ -102,97 +106,119 @@ div.course-wrapper {
ol.sequence-nav { ol.sequence-nav {
margin-bottom: $body-line-height; margin-bottom: $body-line-height;
@extend .topbar;
li { li {
border: none; border: none;
cursor: pointer; cursor: pointer;
display: table-cell; display: table-cell;
min-width: 30px; padding: lh(.75);
min-height: 30px; float: left;
padding: 0 10px;
}
}
div.video-wrapper { //problem
float: left; &.seq_problem_inactive {
width: 640px; width: 14px;
min-height: 620px; background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
iframe#html5_player { &:hover {
border: none; background-color: lighten(#F6EFD4, 3%);
display: none; }
height: 390px; }
width: 640px;
}
section {
ul {
display: inline-block;
li { &.seq_problem_visited {
margin-top: 5px; width: 14px;
display: inline-block; background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
cursor: pointer; &:hover {
border: 0; background-color: #F6EFD4;
padding: 0;
div {
&:empty {
display: none;
}
}
} }
} }
div#slider { &.seq_problem_active {
margin: -14px 0 10px 60px; width: 14px;
background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
&:hover {
background-color: #F6EFD4;
}
} }
div#vidtime { //video
float: left; &.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%);
}
} }
div#video_speeds { &.seq_video_visited {
float: right; width: 14px;
cursor: pointer; background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -64px 15px no-repeat;
&:hover {
background-color: #F6EFD4;
}
}
span { &.seq_video_active {
&:hover { width: 14px;
color: $mit-red; background: #FFFBEB url('/static/images/video-icon.png') -25px 15px no-repeat;
} @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%),inset 1px 0 0 darken(#F6EFD4, 20%));
&:hover {
background-color: #F6EFD4;
} }
} }
}
}
ol.subtitles {
width: 220px;
margin-left: 20px;
float: left;
li { //vertical
margin-bottom: 0px; &.seq_vertical_inactive {
cursor: pointer; width: 14px;
border: 0; background: url('/static/images/vertical-icon.png') -82px 15px no-repeat;
padding: 0; @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
color: #666;
&.current { &:hover {
background-color: #f3f3f3; background-color: lighten(#F6EFD4, 3%);
color: #333; }
} }
&:hover { &.seq_vertical_visited {
color: $mit-red; width: 14px;
background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') 13px 15px no-repeat;
&:hover {
background-color: #F6EFD4;
}
} }
div {
margin-bottom: 8px;
}
div:empty { &.seq_vertical_active {
margin-bottom: 0px; width: 14px;
} background: #FFFBEB url('/static/images/vertical-icon.png') -35px 15px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
&:hover {
background-color: #F6EFD4;
}
}
&.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;
}
}
} }
} }
} }
......
sass/_textbook.scss
...@@ -18,17 +18,25 @@ div.book-wrapper { ...@@ -18,17 +18,25 @@ div.book-wrapper {
nav { nav {
@extend .topbar; @extend .topbar;
@extend .clearfix;
ul { ul {
@extend .clearfix; @extend .clearfix;
li {
padding: 15px;
li {
&.last { &.last {
float: left; 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 { &.next {
display: block;
float: right; float: right;
} }
} }
......
sass/_wiki.scss
...@@ -8,8 +8,8 @@ div.wiki-wrapper { ...@@ -8,8 +8,8 @@ div.wiki-wrapper {
input[type="button"] { input[type="button"] {
@extend h3; @extend h3;
color: lighten($text-color, 10%);
@include transition(); @include transition();
color: lighten($text-color, 10%);
font-size: $body-font-size; font-size: $body-font-size;
margin: 0 !important; margin: 0 !important;
padding: 7px 7px 7px 30px; padding: 7px 7px 7px 30px;
...@@ -77,7 +77,7 @@ div.wiki-wrapper { ...@@ -77,7 +77,7 @@ div.wiki-wrapper {
section.wiki-body { section.wiki-body {
@extend .content; @extend .content;
header { header {
@extend .topbar; @extend .topbar;
...@@ -91,6 +91,7 @@ div.wiki-wrapper { ...@@ -91,6 +91,7 @@ div.wiki-wrapper {
ul { ul {
float: right; float: right;
list-style: none;
li { li {
float: left; float: left;
...@@ -108,7 +109,7 @@ div.wiki-wrapper { ...@@ -108,7 +109,7 @@ div.wiki-wrapper {
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
padding: 15px; padding: lh(.75);
margin: 0; margin: 0;
&:hover { &:hover {
...@@ -136,4 +137,4 @@ div.wiki-wrapper { ...@@ -136,4 +137,4 @@ div.wiki-wrapper {
} }
} }
} }
} }
\ No newline at end of file
sass/application.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
@import "leanmodal"; @import "leanmodal";
// pages // pages
@import "courseware"; @import "courseware", "courseware-video";
@import "textbook"; @import "textbook";
@import "profile"; @import "profile";
@import "wiki-create", "wiki"; @import "wiki-create", "wiki";
......
seq_module.html
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
<li class="seq_inactive" id="tt_${ t }">&nbsp;</li> <li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
% endfor % endfor
<li id="${ id }prev">Previous</li> <li id="${ id }next" class="next">Next</li>
<li id="${ id }next">Next</li> <li id="${ id }prev" class="prev">Previous</li>
</ol> </ol>
......
seq_module.js
...@@ -44,7 +44,7 @@ function ${ id }goto(i) { ...@@ -44,7 +44,7 @@ function ${ id }goto(i) {
${ id }loc=i; ${ id }loc=i;
//$('#tt_'+i).attr("style", "background-color:red"); //$('#tt_'+i).attr("style", "background-color:red");
$('#tt_'+i).removeClass(); $('#tt_'+i).removeClass();
$('#tt_'+i).addClass("seq_active"); $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
} }
......
video.html
<div class="video-wrapper"> <div class="video-wrapper">
<div id="ytapiplayer"> <div class="video-player">
<div id="ytapiplayer">
</div>
<!-- TODO(Ernie/Kyle) move styles to css -->
<iframe id="html5_player" type="text/html" frameborder="0">
</iframe>
</div> </div>
<!-- TODO(Ernie/Kyle) move styles to css -->
<iframe id="html5_player" type="text/html" frameborder="0">
</iframe>
<section class="video-controls"> <section class="video-controls">
<ul> <ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li> <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
...@@ -19,8 +21,6 @@ ...@@ -19,8 +21,6 @@
</section> </section>
</div> </div>
<ol class="subtitles"> <ol class="subtitles">
<li id=stt_n5><div id=std_n7 onclick="title_seek(-7);"></div></li> <li id=stt_n5><div id=std_n7 onclick="title_seek(-7);"></div></li>
<li id=stt_n4><div id=std_n6 onclick="title_seek(-6);"></div></li> <li id=stt_n4><div id=std_n6 onclick="title_seek(-6);"></div></li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment