From 8519f03bdb9ec004b148dac3fc38c49ce34672a1 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 6 Mar 2012 14:22:22 -0500 Subject: [PATCH 1/2] Added styles and js for disablling next and prev buttons --HG-- branch : kf-sequence-nav --- sass/courseware/_sequence-nav.scss | 126 ++++++++++++++++++++++++----- seq_module.html | 11 ++- seq_module.js | 85 +++++++++++++------ 3 files changed, 173 insertions(+), 49 deletions(-) diff --git a/sass/courseware/_sequence-nav.scss b/sass/courseware/_sequence-nav.scss index 99e29a39d2..155c3962b0 100644 --- a/sass/courseware/_sequence-nav.scss +++ b/sass/courseware/_sequence-nav.scss @@ -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; + } + } + } + } } } } diff --git a/seq_module.html b/seq_module.html index 3df90fc343..f71a371e22 100644 --- a/seq_module.html +++ b/seq_module.html @@ -6,10 +6,17 @@
+ + diff --git a/seq_module.js b/seq_module.js index c7b9fabab9..b4f92db8a1 100644 --- a/seq_module.js +++ b/seq_module.js @@ -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 } ); + +}); From 2cd1b353247ee02a63676f91ec2e0bf48121c402 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Thu, 8 Mar 2012 14:34:35 -0500 Subject: [PATCH 2/2] Added styles and html for social links --HG-- branch : kf-sequence-nav --- main.html | 13 ++++++++ sass/layout/_footer.scss | 65 ++++++++++++++++++++++++++++++++++------ 2 files changed, 69 insertions(+), 9 deletions(-) diff --git a/main.html b/main.html index 888fb82903..67b6e3a849 100644 --- a/main.html +++ b/main.html @@ -38,12 +38,25 @@

Copyright © 2012. MIT. Some rights reserved.

+
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss index 5edcb630b8..eb4786dd83 100644 --- a/sass/layout/_footer.scss +++ b/sass/layout/_footer.scss @@ -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; + } } } }