Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge in video layout

Browse Source
This commit is contained in:
Kyle Fiedler
2012-01-26 17:55:02 -05:00
parent 13482e2f91 e59f3ed206
commit 8b2109ab46
9 changed files with 238 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
sass/_base-extends.scss
View File

@@ -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;
}
}
}

105
sass/_courseware-video.scss Normal file
View File

@@ -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;
}
}
}
}

172
sass/_courseware.scss
View File

@@ -1,6 +1,10 @@
div.course-wrapper {
@extend .table-wrapper;
ul, ol {
list-style: none;
}
div#accordion {
@extend .sidebar;
@@ -102,98 +106,120 @@ 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;
li {
margin-top: 5px;
display: inline-block;
cursor: pointer;
border: 0;
padding: 0;
div {
&:empty {
display: none;
}
}
&:hover {
background-color: lighten(#F6EFD4, 3%);
}
}
div#slider {
margin: -14px 0 10px 60px;
&.seq_problem_visited {
width: 14px;
background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
&:hover {
background-color: #F6EFD4;
}
}
div#vidtime {
float: left;
&.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#video_speeds {
//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;
@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') -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') 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;
@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;
cursor: pointer;
letter-spacing: 1px;
padding: lh(.75);
text-transform: uppercase;
span {
&:hover {
color: $mit-red;
}
&:hover {
text-decoration: none;
color: darken(#F6EFD4, 60%);
text-decoration: none;
background: none;
}
}
}
}
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;
}
}
}
}
}

12
sass/_textbook.scss
View File

@@ -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;
}
}

9
sass/_wiki.scss
View File

@@ -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 {
}
}
}
}
}

2
sass/application.scss
View File

@@ -8,7 +8,7 @@
@import "leanmodal";
// pages
@import "courseware";
@import "courseware", "courseware-video";
@import "textbook";
@import "profile";
@import "wiki-create", "wiki";

4
seq_module.html
View File

@@ -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>

2
seq_module.js
View File

@@ -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]);
}

14
video.html
View File

@@ -1,12 +1,14 @@
<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>