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 @@
@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;
}
}
}
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 {
@extend .table-wrapper;
ul, ol {
list-style: none;
}
div#accordion {
@extend .sidebar;
......@@ -102,97 +106,119 @@ 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;
div.video-wrapper {
float: left;
width: 640px;
min-height: 620px;
//problem
&.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%));
iframe#html5_player {
border: none;
display: none;
height: 390px;
width: 640px;
}
section {
ul {
display: inline-block;
&:hover {
background-color: lighten(#F6EFD4, 3%);
}
}
li {
margin-top: 5px;
display: inline-block;
cursor: pointer;
border: 0;
padding: 0;
div {
&:empty {
display: none;
}
}
&.seq_problem_visited {
width: 14px;
background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
&:hover {
background-color: #F6EFD4;
}
}
div#slider {
margin: -14px 0 10px 60px;
&.seq_problem_active {
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 {
float: left;
//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%);
}
}
div#video_speeds {
float: right;
cursor: pointer;
&.seq_video_visited {
width: 14px;
background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -64px 15px no-repeat;
&:hover {
background-color: #F6EFD4;
}
}
span {
&:hover {
color: $mit-red;
}
&.seq_video_active {
width: 14px;
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 {
margin-bottom: 0px;
cursor: pointer;
border: 0;
padding: 0;
color: #666;
//vertical
&.seq_vertical_inactive {
width: 14px;
background: url('/static/images/vertical-icon.png') -82px 15px no-repeat;
@include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
&.current {
background-color: #f3f3f3;
color: #333;
&:hover {
background-color: lighten(#F6EFD4, 3%);
}
}
&:hover {
color: $mit-red;
&.seq_vertical_visited {
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 {
margin-bottom: 0px;
}
&.seq_vertical_active {
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 {
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;
}
}
......
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
}
sass/application.scss
......@@ -8,7 +8,7 @@
@import "leanmodal";
// pages
@import "courseware";
@import "courseware", "courseware-video";
@import "textbook";
@import "profile";
@import "wiki-create", "wiki";
......
seq_module.html
......@@ -4,8 +4,8 @@
<li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
% endfor
<li id="${ id }prev">Previous</li>
<li id="${ id }next">Next</li>
<li id="${ id }next" class="next">Next</li>
<li id="${ id }prev" class="prev">Previous</li>
</ol>
......
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]);
}
......
video.html
<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>
<!-- TODO(Ernie/Kyle) move styles to css -->
<iframe id="html5_player" type="text/html" frameborder="0">
</iframe>
<section class="video-controls">
<ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
......@@ -19,8 +21,6 @@
</section>
</div>
<ol class="subtitles">
<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>
......
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