Skip to content

E
edx-platform
Commit 63ad756a by Kyle Fiedler
Options

Added style for video and sequence 

--HG--
branch : kf-refactor
parent 170f81a4
Showing with 130 additions and 53 deletions
sass/_courseware.scss
......@@ -35,12 +35,12 @@ div.course-wrapper {
}
&.ui-state-active {
@include box-shadow(none);
background: none;
border-bottom: 1px solid #aaa;
border: 0;
border-bottom: 1px solid #aaa;
color: #000;
font-weight: bold;
@include box-shadow(none);
a {
color: #000;
......@@ -53,9 +53,9 @@ div.course-wrapper {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border: none;
border-top: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-top: 1px solid #c3c3c3;
border: none;
font-size: 12px;
margin: 0;
......@@ -73,5 +73,85 @@ div.course-wrapper {
padding: $gw-gutter;
vertical-align: top;
width: grid-width(9);
ol.vert-mod {
li {
@extend .clearfix;
}
}
ol.sequence-nav {
margin-bottom: $body-line-height;
li {
cursor: pointer;
display: table-cell;
min-width: 30px;
min-height: 30px;
padding: 0 10px;
}
}
div.video-wrapper {
float: left;
width: 640px;
min-height: 500px;
section {
ul {
display: inline-block;
li {
margin-top: 5px;
display: inline-block;
cursor: pointer;
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: 8px;
cursor: pointer;
&.current {
background-color: #f3f3f3;
}
&:hover {
color: $mit-red;
}
}
}
}
}
sass/_layout.scss
......@@ -18,7 +18,6 @@ html {
@extend .wrapper;
@include box-sizing(border-box);
padding: 0 $body-line-height;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
h1 {
border-right: 1px solid darken($mit-red, 5%);
......@@ -28,13 +27,15 @@ html {
padding: 15px $gw-gutter 15px 0;
display: block;
float: left;
color: #fff;
color: #000;
text-shadow: 0 1px 0 lighten($mit-red, 10%);
}
nav {
float: left;
display: block;
margin: 0;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
ul {
@extend .clearfix;
......
sass/_local.scss
......@@ -12,10 +12,6 @@
margin-right: 0px;
}
#bodyContent {
width: 100%;
}
.bordered { border: 1px solid #AAAAAA; border-style : dotted; }
.seq_problem_visited { background-color: #ccccaa;}
......
sass/_theme.scss
......@@ -140,10 +140,6 @@ a:hover {
background: transparent url( images/css/page-bg.jpg ) no-repeat center top;
}
#container {
margin:0 auto;
width:800px;
......@@ -184,7 +180,7 @@ a:hover {
#sidebar ul.vmenu {
list-style: none;
text-align: left;
margin: 7px 0px 8px 0px;
margin: 7px 0px 8px 0px;
padding: 0;
text-decoration: none;
border-top: 1px solid #eeeeee;
......
seq_module.html
% for t in range(1,1+len(items)):
<ol>
<li class="seq_inactive" id="tt_${ t }" height=10>&nbsp;</li>
<ol class="sequence-nav">
% for t in range(1,1+len(items)):
<li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
% endfor
<li id="${ id }prev">Previous</li>
<li id="${ id }next">Next</li>
</ol>
% endfor
<div id="${ id }prev">Previous</div>
<div id="${ id }next">Next</div>
<!-- <td colspan=${ len(items) }> -->
<div id="seq_content"></div>
......
staticbook.html
......@@ -48,7 +48,7 @@ function next_page() {
<nav>
<ul>
<li class="last">
<a href="javascript:prev_page()">Last page</a>
<a href="javascript:prev_page()">Previous page</a>
</li>
<li class="next">
<a href="javascript:next_page()">Next page</a>
......
vert_module.html
<ol>
<ol class="vert-mod">
% for t in items:
<li id="vert-${items.index(t)}">
${t[1]['content']}
......
video.html
<div id="ytapiplayer">
<p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
</div>
<div class="video-wrapper">
<div id="ytapiplayer">
<p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
</div>
<ol>
<li id=stt_n5><div id=std_n7 onclick="title_seek(-7);">&nbsp;</div></li>
<li id=stt_n4><div id=std_n6 onclick="title_seek(-6);">&nbsp;</div></li>
<li id=stt_n4><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></li>
<li id=stt_n4><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></li>
<li id=stt_n3><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></li>
<li id=stt_n2><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></li>
<li id=stt_n1><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></li>
<li id=stt_0 class="current"><div id=std_0 onclick="title_seek(0);">&nbsp;</div></li>
<li id=stt_p1><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></li>
<li id=stt_p2><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></li>
<li id=stt_p3><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></li>
<li id=stt_p4><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></li>
<li id=stt_p5><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 7);">&nbsp;</div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 8);">&nbsp;</div></li>
</ol>
<section class="video-controls">
<ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
<li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
</ul>
<section class="video-controls">
<ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
<li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
</ul>
<div id=slider></div>
<div id="vidtime">0:00/0:00</div>
<div id="video_speeds"></div>
</section>
</div>
<div id=slider></div>
<div id="vidtime">0:00/0:00</div>
<div id="video_speeds"></div>
</section>
<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>
<li id=stt_n4><div id=std_n5 onclick="title_seek(-5);"></div></li>
<li id=stt_n4><div id=std_n4 onclick="title_seek(-4);"></div></li>
<li id=stt_n3><div id=std_n3 onclick="title_seek(-3);"></div></li>
<li id=stt_n2><div id=std_n2 onclick="title_seek(-2);"></div></li>
<li id=stt_n1><div id=std_n1 onclick="title_seek(-1);"></div></li>
<li id=stt_0 class="current"><div id=std_0 onclick="title_seek(0);"></div></li>
<li id=stt_p1><div id=std_p1 onclick="title_seek( 1);"></div></li>
<li id=stt_p2><div id=std_p2 onclick="title_seek( 2);"></div></li>
<li id=stt_p3><div id=std_p3 onclick="title_seek( 3);"></div></li>
<li id=stt_p4><div id=std_p4 onclick="title_seek( 4);"></div></li>
<li id=stt_p5><div id=std_p5 onclick="title_seek( 5);"></div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 6);"></div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 7);"></div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 8);"></div></li>
</ol>
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