Commit fd2dbd82 by Piotr Mitros

UI Cleanup. Much nicer now

parent a2ddface
...@@ -21,21 +21,29 @@ $('#hide_acc').click(function() { ...@@ -21,21 +21,29 @@ $('#hide_acc').click(function() {
}); });
</script> </script>
<table width=100%> <div id="bodyContent">
<tr><td id="acc_td" width=320 rowspan=2 valign=top> <table width=100% cellpadding=0><tr>
<div id="accordion"> <td width=276 valign=top>
${accordion} <div id="accordion">
</div> ${accordion}
</td><td rowspan=2 valign=center><div id="hide_acc">&lt;<br>&lt;<br>&lt;</div></td> </div>
<td align=right valign=top><div id="coursenav"><a href="/courseware"><b>Digital Textbook</b></a> </td>
<td valign=top>
<div id="coursenav">
<a href="/courseware"><b>Digital Textbook</b></a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/discussion">Discussion</a> <a href="/discussion">Discussion</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/profile">Profile</a> <a href="/profile">Profile</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/help">Help</a> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span> <a href="/help">Help</a> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/logout">Log out</a></div> <a href="/logout">Log out</a>
</td></tr><tr><td valign=top> </div>
<div>
${content}
</div>
</td>
</tr></table>
${content} </div>
</td></tr></table>
...@@ -57,7 +57,7 @@ $(function() { ...@@ -57,7 +57,7 @@ $(function() {
</script> </script>
<div align="right"><table><tr><td align=right valign=top><a href="/courseware">Digital Textbook</a> <div align="right" id="coursenav"><div align=right><table><tr><td align=right valign=top><a href="/courseware">Digital Textbook</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
<a href="/discussion">Discussion</a> <a href="/discussion">Discussion</a>
<span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span> <span class="ui-icon ui-icon-bullet" style="display:inline-block;"></span>
...@@ -67,6 +67,7 @@ $(function() { ...@@ -67,6 +67,7 @@ $(function() {
<a href="/logout">Log out</a> <a href="/logout">Log out</a>
</td></tr><tr><td valign=top> </td></tr><tr><td valign=top>
</td></tr></table> </td></tr></table>
</div></div>
<center> <center>
<br><br><br><br> <br><br><br><br>
<h1> ${name} </h1> <h1> ${name} </h1>
......
<table width=800 > <table width=800 >
<tr><td></td> <tr><td></td>
% for t in range(1,1+len(items)): % for t in range(1,1+len(items)):
<td style="background-color:grey" id="tt_${ t }" height=10></td> <td class="seq_inactive" id="tt_${ t }" height=10></td>
% endfor % endfor
<td></td></tr> <td></td></tr>
<tr><td align=center valign=center><div id="${ id }prev"><span class="ui-icon ui-icon-circle-triangle-w"></span></div></td> <tr><td align=center valign=top><br><br><br><br><br><br><br><br><br><br><br><div id="${ id }prev"><span class="ui-icon ui-icon-circle-triangle-w"></span></div></td>
<td colspan=10><div id="content"></div></td> <td colspan=10><div id="seq_content"></div></td>
<td align=center valign=center><div id="${ id }next"><span class="ui-icon ui-icon-circle-triangle-e">&nbsp;</span></div></td> <td align=center valign=top><br><br><br><br><br><br><br><br><br><br><br><div id="${ id }next"><span class="ui-icon ui-icon-circle-triangle-e">&nbsp;</span></div></td>
</tr> </tr>
<tr></tr> <tr></tr>
</table> </table>
......
...@@ -7,6 +7,13 @@ var ${ id }contents=["", ...@@ -7,6 +7,13 @@ var ${ id }contents=["",
"" ""
]; ];
var ${ id }types=["",
%for t in items:
"${t[1]['type']}" ,
%endfor
""
];
var ${ id }init_functions=["", var ${ id }init_functions=["",
%for t in items: %for t in items:
function(){ ${t[1]['init_js']} }, function(){ ${t[1]['init_js']} },
...@@ -24,16 +31,23 @@ var ${ id }loc = -1; ...@@ -24,16 +31,23 @@ var ${ id }loc = -1;
function ${ id }goto(i) { function ${ id }goto(i) {
if (${ id }loc!=-1) if (${ id }loc!=-1)
${ id }destroy_functions[ ${ id }loc ](); ${ id }destroy_functions[ ${ id }loc ]();
$('#content').html(${ id }contents[i]); $('#seq_content').html(${ id }contents[i]);
${ id }init_functions[i]() ${ id }init_functions[i]()
$('#tt_'+${ id }loc).attr("style", "background-color:grey"); //$('#tt_'+${ id }loc).attr("style", "background-color:gray");
$('#tt_'+${ id }loc).removeClass();
$('#tt_'+${ id }loc).addClass("seq_"+${ id }types[${ id }loc]+"_visited");
${ 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).addClass("seq_active");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]); MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
} }
function ${ id }setup_click(i) { function ${ id }setup_click(i) {
$('#tt_'+i).click(function(eo) { ${ id }goto(i);}); $('#tt_'+i).click(function(eo) { ${ id }goto(i);});
$('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive");
} }
function ${ id }next() { function ${ id }next() {
......
<table> <table>
<tr><td rowspan=14 colspan=4> <tr><td rowspan=13 colspan=3>
<div id="ytapiplayer"> <div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video. You need Flash player 8+ and JavaScript enabled to view this video.
</div> </div>
</td> </td>
<td width=15> <span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_n5 align=center><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></td></tr> <td id=stt_n5 align=center><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_n4 align=center><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></td></tr> <tr><td id=stt_n4 align=center><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_n3 align=center><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></td></tr> <tr><td id=stt_n3 align=center><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_n2 align=center><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></td></tr> <tr><td id=stt_n2 align=center><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_n1 align=center><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></td></tr> <tr><td id=stt_n1 align=center><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_0 align=center bgcolor=#aed0ea><div id=std_0 onclick="title_seek(0);">&nbsp;</div></td></tr> <tr><td id=stt_0 align=center bgcolor=#aed0ea><div id=std_0 onclick="title_seek(0);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_p1 align=center><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></td></tr> <tr><td id=stt_p1 align=center><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_p2 align=center><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></td></tr> <tr><td id=stt_p2 align=center><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_p3 align=center><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></td></tr> <tr><td id=stt_p3 align=center><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_p4 align=center><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></td></tr> <tr><td id=stt_p4 align=center><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_p5 align=center><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></td></tr> <tr><td id=stt_p5 align=center><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></td></tr>
<tr><td width=15><span class="" onclick="">&nbsp;</span></td><td colspan=2 id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></td></tr> <tr><td id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></td></tr>
<tr><td></td><td colspan=2><img src="/static/pixel.jpg" width=400 height=0></td></tr> <tr><td><img src="/static/pixel.jpg" width=400 height=0></td></tr>
<tr><td></td></tr>
<tr><td width=15><span class="ui-icon ui-icon-play" onclick="play();"></span></td> <tr><td width=15><span class="ui-icon ui-icon-play" onclick="play();"></span></td>
<td width=15><span class="ui-icon ui-icon-pause" onclick="pause();"></span></td> <td width=15><span class="ui-icon ui-icon-pause" onclick="pause();"></span></td>
<td width=500 colspan=4><div id=slider></div></td></tr> <td colspan=2><div id=slider></div></td></tr>
<tr><td colspan=4 align=right><div align=right>0.75x 1x 1.25x 1.5x </div></td></tr>
</table> </table>
<div align=right>0.75x 1x 1.25x 1.5x </div>
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