Merged with kf-sequence-nav
This commit is contained in:
Kyle Fiedler
13
main.html
13
main.html
@@ -38,12 +38,25 @@
|
||||
<!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
|
||||
<p> Copyright © 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
|
||||
</p>
|
||||
<nav>
|
||||
<ul class="social">
|
||||
<li class="linkedin">
|
||||
<a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
|
||||
</li>
|
||||
<li class="twitter">
|
||||
<a href="https://twitter.com/#!/MyMITx">Twitter</a>
|
||||
</li>
|
||||
<li class="facebook">
|
||||
<a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="#feedback_div" rel="leanModal">Feedback</a></li>
|
||||
<li><a href="#calculator_div" rel="leanModal">Calculator</a></li>
|
||||
<li><a href="/s/help.html">Help</a></li>
|
||||
<li><a href="/logout">Log out</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
|
||||
<div id="feedback_div" class="leanModal_box">
|
||||
|
||||
@@ -5,7 +5,7 @@ nav.sequence-nav {
|
||||
ol {
|
||||
display: table-row;
|
||||
float: left;
|
||||
width: flex-grid(7.5,9) + flex-gutter();
|
||||
width: flex-grid(8,9) + flex-gutter();
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
@@ -157,49 +157,131 @@ nav.sequence-nav {
|
||||
ul {
|
||||
float: right;
|
||||
margin-right: 1px;
|
||||
width: flex-grid(1.5, 9);
|
||||
width: flex-grid(1, 9);
|
||||
display: table-row;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
|
||||
&.prev, &.next {
|
||||
// color: darken(#F6EFD4, 80%);
|
||||
// letter-spacing: 1px;
|
||||
// text-transform: uppercase;
|
||||
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
|
||||
background-color: darken(#F6EFD4, 5%);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
border-left: 1px solid darken(#f6efd4, 20%);
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
padding: 0 4px;
|
||||
text-indent: -9999px;
|
||||
width: 82px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(#F6EFD4, 60%);
|
||||
text-decoration: none;
|
||||
background-color: none;
|
||||
a {
|
||||
// color: darken(#F6EFD4, 80%);
|
||||
// letter-spacing: 1px;
|
||||
// text-transform: uppercase;
|
||||
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
|
||||
background-color: darken(#F6EFD4, 5%);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
border-left: 1px solid darken(#f6efd4, 20%);
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
text-indent: -9999px;
|
||||
width: 38px;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(#F6EFD4, 60%);
|
||||
text-decoration: none;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: normal;
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.prev {
|
||||
&.prev {
|
||||
a {
|
||||
background-image: url('/static/images/sequence-nav/previous-icon.png');
|
||||
|
||||
&:hover {
|
||||
background-color: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
&.next {
|
||||
a {
|
||||
background-image: url('/static/images/sequence-nav/next-icon.png');
|
||||
|
||||
&:hover {
|
||||
background-color: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
section.course-content {
|
||||
nav.sequence-bottom {
|
||||
margin-bottom: -(lh());
|
||||
|
||||
ul {
|
||||
@extend .clearfix;
|
||||
border: 1px solid darken(#f6efd4, 20%);
|
||||
border-bottom: 0;
|
||||
@include border-radius(3px 3px 0 0);
|
||||
margin: lh() auto 0;
|
||||
overflow: hidden;
|
||||
width: 106px;
|
||||
background-color: darken(#F6EFD4, 5%);
|
||||
@include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
&.prev, &.next {
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
padding: lh(.75) 4px;
|
||||
text-indent: -9999px;
|
||||
width: 45px;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: darken(#F6EFD4, 60%);
|
||||
text-decoration: none;
|
||||
opacity: .5;
|
||||
background-color: darken(#F6EFD4, 10%);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .4;
|
||||
background-color: lighten(#F6EFD4, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.prev {
|
||||
a {
|
||||
background-image: url('/static/images/sequence-nav/previous-icon.png');
|
||||
|
||||
&:hover {
|
||||
background-color: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
a {
|
||||
background-image: url('/static/images/sequence-nav/next-icon.png');
|
||||
|
||||
&:hover {
|
||||
background-color: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,22 +26,69 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
nav {
|
||||
float: right;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
ul {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
color: #444;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
|
||||
&:link, &:visited {
|
||||
a {
|
||||
color: #444;
|
||||
|
||||
&:link, &:visited {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.social {
|
||||
margin-right: 40px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
|
||||
@media screen and (max-width: 780px) {
|
||||
float: none;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #000;
|
||||
li {
|
||||
float: left;
|
||||
margin-right: lh(.5);
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 29px;
|
||||
width: 28px;
|
||||
text-indent: -9999px;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter a {
|
||||
background: url('/static/images/twitter.png') 0 0 no-repeat;
|
||||
}
|
||||
|
||||
&.facebook a {
|
||||
background: url('/static/images/facebook.png') 0 0 no-repeat;
|
||||
}
|
||||
|
||||
&.linkedin a {
|
||||
background: url('/static/images/linkedin.png') 0 0 no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,10 +6,17 @@
|
||||
</ol>
|
||||
|
||||
<ul>
|
||||
<li id="${ id }prev" class="prev">Previous</li>
|
||||
<li id="${ id }next" class="next">Next</li>
|
||||
<li class="${ id }prev prev"><a href="#">Previous</a></li>
|
||||
<li class="${ id }next next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="seq_content"></div>
|
||||
|
||||
<nav class="sequence-bottom">
|
||||
<ul>
|
||||
<li class="${ id }prev prev"><a href="#">Previous</a></li>
|
||||
<li class="${ id }next next"><a href="#">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -29,26 +29,49 @@ var ${ id }destroy_functions=["",
|
||||
""];
|
||||
|
||||
var ${ id }loc = -1;
|
||||
function disablePrev() {
|
||||
var i=${ id }loc-1;
|
||||
log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
|
||||
if (i < 1 ) {
|
||||
$('.${ id }prev a').addClass('disabled');
|
||||
} else {
|
||||
$('.${ id }prev a').removeClass('disabled');
|
||||
};
|
||||
}
|
||||
|
||||
function disableNext() {
|
||||
var i=${ id }loc+1;
|
||||
log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
|
||||
|
||||
if(i > ${ len(items) } ) {
|
||||
$('.${ id }next a').addClass('disabled');
|
||||
} else {
|
||||
$('.${ id }next a').removeClass('disabled');
|
||||
};
|
||||
}
|
||||
|
||||
function ${ id }goto(i) {
|
||||
log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'});
|
||||
log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'});
|
||||
|
||||
postJSON('/modx/sequential/${ id }/goto_position',
|
||||
{'position' : i });
|
||||
postJSON('/modx/sequential/${ id }/goto_position',
|
||||
{'position' : i });
|
||||
|
||||
if (${ id }loc!=-1)
|
||||
${ id }destroy_functions[ ${ id }loc ]();
|
||||
$('#seq_content').html(${ id }contents[i]);
|
||||
${ id }init_functions[i]()
|
||||
//$('#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;
|
||||
//$('#tt_'+i).attr("style", "background-color:red");
|
||||
$('#tt_'+i).removeClass();
|
||||
$('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");
|
||||
if (${ id }loc!=-1)
|
||||
${ id }destroy_functions[ ${ id }loc ]();
|
||||
$('#seq_content').html(${ id }contents[i]);
|
||||
${ id }init_functions[i]()
|
||||
//$('#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;
|
||||
//$('#tt_'+i).attr("style", "background-color:red");
|
||||
$('#tt_'+i).removeClass();
|
||||
$('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");
|
||||
|
||||
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
|
||||
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
|
||||
|
||||
disableNext();
|
||||
disablePrev();
|
||||
}
|
||||
|
||||
function ${ id }setup_click(i) {
|
||||
@@ -61,23 +84,35 @@ function ${ id }setup_click(i) {
|
||||
function ${ id }next() {
|
||||
var i=${ id }loc+1;
|
||||
log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
|
||||
if(i > ${ len(items) } ) i = ${ len(items) };
|
||||
if(i > ${ len(items) } ) {
|
||||
i = ${ len(items) };
|
||||
} else {
|
||||
${ id }goto(i);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function ${ id }prev() {
|
||||
var i=${ id }loc-1;
|
||||
log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
|
||||
if (i < 1 ) i = 1;
|
||||
if (i < 1 ) {
|
||||
i = 1;
|
||||
} else {
|
||||
${ id }goto(i);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
$(function() {
|
||||
var i;
|
||||
for(i=1; i<${ len(items)+1 }; i++) {
|
||||
${ id }setup_click(i);
|
||||
}
|
||||
$('#${ id }next').click(function(eo) { ${ id }next();});
|
||||
$('#${ id }prev').click(function(eo) { ${ id }prev();});
|
||||
${ id }goto( ${ position } );
|
||||
});
|
||||
var i;
|
||||
for(i=1; i<${ len(items)+1 }; i++) {
|
||||
${ id }setup_click(i);
|
||||
}
|
||||
|
||||
|
||||
$('.${ id }next a').click(function(eo) { ${ id }next(); return false;});
|
||||
$('.${ id }prev a').click(function(eo) { ${ id }prev(); return false;});
|
||||
${ id }goto( ${ position } );
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user