From: jordan Date: Sat, 25 Feb 2012 02:05:50 +0000 (-0500) Subject: completed live courses overlay with static data X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=2af4feeef77eabe18b29590e5d79334e5128478a;p=oweals%2Ffinalsclub.git completed live courses overlay with static data --- diff --git a/bc b/bc index 1553834..3ee3af3 160000 --- a/bc +++ b/bc @@ -1 +1 @@ -Subproject commit 155383492f576d1e0875f67a5228d680345fdcb5 +Subproject commit 3ee3af3ffc3d0cca4453bf3a4c79e399a803fa51 diff --git a/etherpad-lite b/etherpad-lite index 1bb6216..9534f9f 160000 --- a/etherpad-lite +++ b/etherpad-lite @@ -1 +1 @@ -Subproject commit 1bb6216617bd659391702d7ac88ecb5ffaa3b8f4 +Subproject commit 9534f9f1a1bf7b232231b3889e6030218704751d diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css index ec7346f..1ab6b33 100755 --- a/public/assets/css/screen.css +++ b/public/assets/css/screen.css @@ -181,7 +181,7 @@ body { .tiny-line-height { line-height: 0.5em; } -.tight-line-height, #g-nav-user ul, .subheader h1, .subheader h3 { +.tight-line-height, #g-nav-user > ul, .subheader h1, .subheader h3 { line-height: 1em; } /* a.`elements @@ -340,15 +340,21 @@ body { display: block; } #g-nav-user { - padding: 0.375em 0.75em 0.75em; + padding: 0 0 0.75em; text-align: right; } - #g-nav-user li { - display: inline; } - #g-nav-user li.first, #g-nav-user li.first a { + #g-nav-user > ul > li { + float: right; } + #g-nav-user > ul > li.first, #g-nav-user > ul > li.first a { border: 0; } - #g-nav-user a { - padding: 0 0.75em; - color: #ffcd58; } + #g-nav-user > ul > li > a { + display: block; + padding: 0.375em 0.75em; + color: #ffcd58; } + #g-nav-user > ul > li > a#live-courses-link { + padding-right: 1.5em; + color: #fff; } + #g-nav-user > ul > li > a#live-courses-link.s-active { + background-color: #333333; } #g-nav-main ul { float: right; @@ -366,17 +372,17 @@ body { color: #fff; } #g-nav-main a:hover { color: #ffcd58; } - #g-nav-main a .icon { + #g-nav-main a .icon, #g-nav-main a #live-courses-link .indicator, #live-courses-link #g-nav-main a .indicator { position: absolute; left: 0; } #g-nav-main #school_link { padding-left: 1.65em; } - #g-nav-main #school_link .icon { + #g-nav-main #school_link .icon, #g-nav-main #school_link #live-courses-link .indicator, #live-courses-link #g-nav-main #school_link .indicator { top: 50%; margin-top: -10px; } #g-nav-main #blog_link { padding-left: 1.8em; } - #g-nav-main #blog_link .icon { + #g-nav-main #blog_link .icon, #g-nav-main #blog_link #live-courses-link .indicator, #live-courses-link #g-nav-main #blog_link .indicator { top: 50%; margin-top: -9px; } #g-nav-main #archive_link { @@ -384,6 +390,7 @@ body { #g-masthead-hr { position: absolute; + z-index: 10; margin-top: 0; margin-bottom: 0; top: 100%; @@ -520,7 +527,8 @@ form .row { /* 3.`Extensible Classes ---------------------------------------------- */ -.group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after { +.group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after, #g-nav-user .live-course:after, +.live-course > a:after { content: "."; display: block; height: 0; @@ -566,7 +574,7 @@ form .row { ---------------------------------------------------------------- */ /* A1.`Setup ---------------------------------------------- */ -.icon, +.icon, #live-courses-link .indicator, .sprite { text-indent: -9999px; line-height: 0; @@ -577,35 +585,55 @@ form .row { .sprite { background-image: url("../img/finalsclub-sprite-images.png"); } -.icon { +.icon, #live-courses-link .indicator { background-image: url("../img/finalsclub-sprite-icons.png"); } /* A2.`Sprites ---------------------------------------------- */ -.paperclip, #g-nav-main #school_link .icon, .paperclip-active, #g-nav-main #school_link:hover .icon { +.paperclip, #g-nav-main #school_link .icon, #g-nav-main #school_link #live-courses-link .indicator, #live-courses-link #g-nav-main #school_link .indicator, .paperclip-active, #g-nav-main #school_link:hover .icon, #g-nav-main #school_link:hover #live-courses-link .indicator, #live-courses-link #g-nav-main #school_link:hover .indicator { background-position: 0 0; width: 22px; height: 20px; } -.paperclip-active, #g-nav-main #school_link:hover .icon { +.paperclip-active, #g-nav-main #school_link:hover .icon, #g-nav-main #school_link:hover #live-courses-link .indicator, #live-courses-link #g-nav-main #school_link:hover .indicator { background-position: -24px 0; } -.align-lines, #g-nav-main #blog_link .icon { +.align-lines, #g-nav-main #blog_link .icon, #g-nav-main #blog_link #live-courses-link .indicator, #live-courses-link #g-nav-main #blog_link .indicator { background-position: 0 -25px; width: 24px; height: 17px; } -.align-lines-active, #g-nav-main #blog_link:hover .icon { +.align-lines-active, #g-nav-main #blog_link:hover .icon, #g-nav-main #blog_link:hover #live-courses-link .indicator, #live-courses-link #g-nav-main #blog_link:hover .indicator { background-position: -27px -25px; } -.book, #g-nav-main #archive_link .icon, .book-active, #g-nav-main #archive_link:hover .icon { +.book, #g-nav-main #archive_link .icon, #g-nav-main #archive_link #live-courses-link .indicator, #live-courses-link #g-nav-main #archive_link .indicator, .book-active, #g-nav-main #archive_link:hover .icon, #g-nav-main #archive_link:hover #live-courses-link .indicator, #live-courses-link #g-nav-main #archive_link:hover .indicator { background-position: 0 -46px; width: 19px; height: 26px; } -.book-active, #g-nav-main #archive_link:hover .icon { +.book-active, #g-nav-main #archive_link:hover .icon, #g-nav-main #archive_link:hover #live-courses-link .indicator, #live-courses-link #g-nav-main #archive_link:hover .indicator { background-position: -24px -46px; } +.larrow-circle { + background-position: 0px -78px; + width: 24px; + height: 24px; } + +.rarrow-circle { + background-position: -26px -78px; + width: 24px; + height: 24px; } + +.dtriangle-small-white, #live-courses-link.s-active .indicator { + background-position: -2px -129px; + width: 8px; + height: 6px; } + +.rtriangle-small-white, #live-courses-link .indicator { + background-position: -12px -129px; + width: 6px; + height: 8px; } + .logo-brown { display: block; background: url(../img/sprite-schools.png) no-repeat -117px -78px; @@ -804,6 +832,16 @@ form .row { /* 5.`Notes ---------------------------------------------- */ +/* ---------------------------------------------------------------- + +[Table of contents] - modules. + + 0.General + 1.Overlays + +---------------------------------------------------------------- */ +/* 0.`General +---------------------------------------------- */ .link-bar { margin-left: -0.375em; } .link-bar li { @@ -832,5 +870,118 @@ form .row { .schools em { margin: 0 auto; } +/* 1.`Overlays +---------------------------------------------- */ +.live-course-slide { + width: 450px; + float: left; } + +#live-courses { + position: relative; + z-index: 20; } + +#live-courses-link { + display: block; + position: relative; + z-index: 50; } + #live-courses-link.s-active .indicator { + margin-top: -2px; } + #live-courses-link .indicator { + position: absolute; + right: 5px; + top: 50%; + margin-top: -2px; } + +#live-courses-overlay { + position: absolute; + right: 0; + top: 100%; + padding: 25px 75px 10px; + background-color: #323232; + -moz-box-shadow: 0 1px 4px black; + -webkit-box-shadow: 0 1px 4px black; + box-shadow: 0 1px 4px black; } + +#g-nav-user .live-course, +.live-course > a { + position: relative; + z-index: 30; + display: block; } + +.live-course > a p { + color: #aaa; + -webkit-transition: color 0.25s ease-in-out; + -moz-transition: color 0.25s ease-in-out; + -o-transition: color 0.25s ease-in-out; + -ms-transition: color 0.25s ease-in-out; + transition: color 0.25s ease-in-out; } +.live-course > a:hover p { + color: #fff; } + +.live-course-info { + width: 30%; + margin-right: 3%; + float: left; + line-height: 1.28571428571429em; + /* 18 / 14 */ } + +.live-course-description { + width: 66.667%; + float: left; } + .live-course-description p { + text-align: left; + color: #fff; } + +.live-feed-hours, +.live-feed-days { + color: #666; } + +#live-feed-modal-pag-controls { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } + #live-feed-modal-pag-controls .pag { + opacity: 0.4; } + #live-feed-modal-pag-controls .pag:hover { + opacity: 0.7; } + #live-feed-modal-pag-controls .pag.s-disabled { + opacity: 0.05; } + #live-feed-modal-pag-controls .pag-left, + #live-feed-modal-pag-controls .pag-right { + position: absolute; + top: 50%; + margin-top: -12px; } + #live-feed-modal-pag-controls .pag-left { + left: 20px; } + #live-feed-modal-pag-controls .pag-right { + right: 20px; } + +.modal-footer-controls { + position: absolute; + z-index: 10; + left: 0; + right: 0; + bottom: 0; + padding: 6px 20px; + background-color: #2a2a2a; } + .modal-footer-controls li { + float: left; } + +.modal-carousel-wrapper { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; + width: 450px; + height: 240px; } + +.modal-carousel { + width: 10000px; + height: 100%; } + .modal-carousel li { + width: 450px; } + /* media queries ============================================== */ diff --git a/public/assets/css/scss/partials/_modules.scss b/public/assets/css/scss/partials/_modules.scss index 90d876b..5b778d0 100644 --- a/public/assets/css/scss/partials/_modules.scss +++ b/public/assets/css/scss/partials/_modules.scss @@ -1,3 +1,16 @@ +/* ---------------------------------------------------------------- + +[Table of contents] - modules. + + 0.General + 1.Overlays + +---------------------------------------------------------------- */ + + +/* 0.`General +---------------------------------------------- */ + .link-bar { margin-left: $base/-4; @@ -44,3 +57,162 @@ margin: 0 auto; } } + + +/* 1.`Overlays +---------------------------------------------- */ + +.live-course-slide { + width: 450px; + float: left; + +} + +#live-courses { + position: relative; + z-index: 20; +} + +#live-courses-link { + display: block; + position: relative; + z-index: 50; + + &.s-active { + + .indicator { + margin-top: -2px; + @extend .dtriangle-small-white; + } + } + + .indicator { + position: absolute; + right: 5px; + top: 50%; + margin-top: -2px; + @extend .icon; + @extend .rtriangle-small-white; + } +} + +#live-courses-overlay { + position: absolute; + right: 0; + top: 100%; + padding: 25px 75px 10px; + background-color: #323232; + @include box-shadow(0, 1px, 4px, #000); +} + +#g-nav-user .live-course, +.live-course > a { + position: relative; + z-index: 30; + display: block; + @extend .group; +} + +.live-course > a { + + p { + color: #aaa; + @include transition( color ); + } + + &:hover { + + p { + color: #fff; + } + } +} + +.live-course-info { + width: 30%; + margin-right: 3%; + float: left; + line-height: 1.28571428571429em; /* 18 / 14 */ +} + +.live-course-description { + width: 100 - (100/3)*1%; + float: left; + + p { + text-align: left; + color: #fff; + } +} + +.live-feed-hours, +.live-feed-days { + color: #666; +} + +#live-feed-modal-pag-controls { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + + .pag { + opacity: 0.4; + + &:hover { + opacity: 0.7; + } + + &.s-disabled { + opacity: 0.05; + } + } + + .pag-left, + .pag-right { + position: absolute; + top: 50%; + margin-top: -12px; + } + + .pag-left { + left: 20px; + } + + .pag-right { + right: 20px; + } +} + +.modal-footer-controls { + position: absolute; + z-index: 10; + left: 0; + right: 0; + bottom: 0; + padding: 6px 20px; + background-color: #2a2a2a; + + li { + float: left; + } +} + +.modal-carousel-wrapper { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; + width: 450px; + height: 240px; +} + +.modal-carousel { + width: 10000px; + height: 100%; + + li { + width: 450px; + } +} diff --git a/public/assets/css/scss/partials/_sprites.scss b/public/assets/css/scss/partials/_sprites.scss index 4515fd1..967915d 100644 --- a/public/assets/css/scss/partials/_sprites.scss +++ b/public/assets/css/scss/partials/_sprites.scss @@ -62,6 +62,30 @@ background-position: -24px -46px; } +.larrow-circle { + background-position: -0px -78px; + width: 24px; + height: 24px; +} + +.rarrow-circle { + background-position: -26px -78px; + width: 24px; + height: 24px; +} + +.dtriangle-small-white { + background-position: -2px -129px; + width: 8px; + height: 6px; +} + +.rtriangle-small-white { + background-position: -12px -129px; + width: 6px; + height: 8px; +} + .logo-brown { display: block; background: url(../img/sprite-schools.png) no-repeat -117px -78px; diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss index c0d32ce..6f9ee23 100755 --- a/public/assets/css/scss/screen.scss +++ b/public/assets/css/scss/screen.scss @@ -169,25 +169,35 @@ body { #g-nav-user { @extend .grid-8; - padding: $base/4 $base/2 $base/2; + padding: 0 0 $base/2; text-align: right; @extend .small; - ul { + > ul { @extend .tight-line-height; - } - li { - display: inline; + > li { + float: right; - &.first, &.first a { - border: 0; - } - } + &.first, &.first a { + border: 0; + } - a { - padding: 0 $base/2; - color: $gold; + > a { + display: block; + padding: $base/4 $base/2; + color: $gold; + + &#live-courses-link { + padding-right: $base; + color: #fff; + + &.s-active { + background-color: #333333; + } + } + } + } } } @@ -258,6 +268,7 @@ body { #g-masthead-hr { position: absolute; + z-index: 10; margin-top: 0; margin-bottom: 0; @extend .grid-8; diff --git a/public/assets/img/finalsclub-sprite-icons.png b/public/assets/img/finalsclub-sprite-icons.png index 61395a6..cb64f13 100644 Binary files a/public/assets/img/finalsclub-sprite-icons.png and b/public/assets/img/finalsclub-sprite-icons.png differ diff --git a/public/assets/js/init.js b/public/assets/js/init.js index 5b6f35b..2544603 100755 --- a/public/assets/js/init.js +++ b/public/assets/js/init.js @@ -1,5 +1,99 @@ $(function() { - $loader = $('.loader'); + var mouseIsInside; + + + // + // live courses dropdown + // + + $('#live-courses').hover(function() { + mouseIsInside = true; + }, function() { + mouseIsInside = false; + }); + + $('#live-courses').delegate('#live-courses-link', 'click', function(e) { + e.preventDefault(); + var link = this; + + $(this).toggleClass('s-active').siblings('#live-courses-overlay').toggle(); + + $('body').bind('click', function() { + if ( !(mouseIsInside) ) { + closeModal(); + } + }); + + function closeModal() { + $(link).toggleClass('s-active').siblings('#live-courses-overlay').toggle(); + $('body').unbind('click'); + } + }); + + + // + // live courses carousel + // + + var + $pag = $('.modal-pag-controls'), + $wrapper = $('.modal-carousel-wrapper'), + $carousel = $wrapper.children('.modal-carousel'), + $prev = $pag.find('.pag-left'), + $next = $pag.find('.pag-right'), + carouselWidth = $wrapper.width(), + carouselHeight = $wrapper.height(); + slides = $carousel.children('.live-course-slide').length; + slidePos = 0; + + $prev.click(function(e) { + e.preventDefault(); + + if (slidePos > 0) { + slidePos--; + carouselBack(); + $next.removeClass('s-disabled'); + if (slidePos === 0) { + $(this).addClass('s-disabled'); + } + else { + $(this).removeClass('s-disabled'); + } + } + + }); + + $next.click(function(e) { + e.preventDefault(); + + if (slidePos < slides - 1) { + slidePos++; + carouselForward(); + $prev.removeClass('s-disabled'); + if (slidePos == slides - 1) { + $(this).addClass('s-disabled'); + } + else { + $(this).removeClass('s-disabled'); + } + } + }); + + + function carouselForward() { + console.log($carousel); + $carousel.animate( + { marginLeft: '-=' + carouselWidth }, + { easing: 'linear', duration: 'fast' } + ); + } + + function carouselBack() { + $carousel.animate( + { marginLeft: '+=' + carouselWidth }, + { easing: 'linear', duration: 'fast' } + ); + } }); diff --git a/public/index.html b/public/index.html index d950c62..3b354df 100644 --- a/public/index.html +++ b/public/index.html @@ -52,9 +52,151 @@ diff --git a/public/javascripts/main.js b/public/javascripts/main.js index efc41bd..26ea950 100644 --- a/public/javascripts/main.js +++ b/public/javascripts/main.js @@ -76,7 +76,6 @@ function tmpl_render() { }; function render(pageId, response) { - console.log(user); if (user.name) { $('.username').text(user.name).attr('href', '/profile'); $("#login_status").show(); @@ -115,7 +114,6 @@ function message(type, msg) { function checkUser(cb) { $.get('/checkuser', function(data) { - console.log(data); if (data.user) { user = data.user; } else {