-Subproject commit 155383492f576d1e0875f67a5228d680345fdcb5
+Subproject commit 3ee3af3ffc3d0cca4453bf3a4c79e399a803fa51
-Subproject commit 1bb6216617bd659391702d7ac88ecb5ffaa3b8f4
+Subproject commit 9534f9f1a1bf7b232231b3889e6030218704751d
.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
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;
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 {
#g-masthead-hr {
position: absolute;
+ z-index: 10;
margin-top: 0;
margin-bottom: 0;
top: 100%;
/* 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;
---------------------------------------------------------------- */
/* A1.`Setup
---------------------------------------------- */
-.icon,
+.icon, #live-courses-link .indicator,
.sprite {
text-indent: -9999px;
line-height: 0;
.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;
/* 5.`Notes
---------------------------------------------- */
+/* ----------------------------------------------------------------
+
+[Table of contents] - modules.
+
+ 0.General
+ 1.Overlays
+
+---------------------------------------------------------------- */
+/* 0.`General
+---------------------------------------------- */
.link-bar {
margin-left: -0.375em; }
.link-bar li {
.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
============================================== */
+/* ----------------------------------------------------------------
+
+[Table of contents] - modules.
+
+ 0.General
+ 1.Overlays
+
+---------------------------------------------------------------- */
+
+
+/* 0.`General
+---------------------------------------------- */
+
.link-bar {
margin-left: $base/-4;
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;
+ }
+}
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;
#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;
+ }
+ }
+ }
+ }
}
}
#g-masthead-hr {
position: absolute;
+ z-index: 10;
margin-top: 0;
margin-bottom: 0;
@extend .grid-8;
$(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' }
+ );
+ }
});
<nav id="g-nav-user">
<ul>
- <li class="first"><a href="#" class="username"></a></li>
- <li><a href="/register" id="register_link">Register</a></li>
+ <li id="live-courses">
+ <a href="#" id="live-courses-link">(12) Live Courses<span class="indicator"></span></a>
+ <div id="live-courses-overlay" style="display: none;">
+ <div class="modal-carousel-wrapper">
+ <ul class="modal-carousel">
+ <li class="live-course-slide">
+ <ul>
+ <li class="live-course">
+ <a href="#">
+ <div class="live-course-info">
+ <div>
+ <span class="live-feed-school">Harvard</span>
+ <span class="live-feed-course">Math 132</span>
+ </div>
+ <div>
+ <span class="live-feed-hours">11:30am - 12:30pm</span>
+ <span class="live-feed-days">MWF</span>
+ </div>
+ </div>
+ <div class="live-course-description">
+ <p>
+ Topology II: Smooth Manifolds, and some other text about that can stretch onto as many lines as
+ </p>
+ </div>
+ </a>
+ </li>
+ <li class="live-course">
+ <a href="#">
+ <div class="live-course-info">
+ <div>
+ <span class="live-feed-school">Harvard</span>
+ <span class="live-feed-course">Math 132</span>
+ </div>
+ <div>
+ <span class="live-feed-hours">11:30am - 12:30pm</span>
+ <span class="live-feed-days">MWF</span>
+ </div>
+ </div>
+ <div class="live-course-description">
+ <p>
+ Topology II: Smooth Manifolds, and some other text about that can stretch onto as many lines as
+ </p>
+ </div>
+ </a>
+ </li>
+ <li class="live-course">
+ <a href="#">
+ <div class="live-course-info">
+ <div>
+ <span class="live-feed-school">Harvard</span>
+ <span class="live-feed-course">Math 132</span>
+ </div>
+ <div>
+ <span class="live-feed-hours">11:30am - 12:30pm</span>
+ <span class="live-feed-days">MWF</span>
+ </div>
+ </div>
+ <div class="live-course-description">
+ <p>
+ Topology II: Smooth Manifolds, and some other text about that can stretch onto as many lines as
+ </p>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </li>
+ <li class="live-course-slide">
+ <ul>
+ <li class="live-course">
+ <a href="#">
+ <div class="live-course-info">
+ <div>
+ <span class="live-feed-school">Harvard</span>
+ <span class="live-feed-course">Math 132</span>
+ </div>
+ <div>
+ <span class="live-feed-hours">11:30am - 12:30pm</span>
+ <span class="live-feed-days">MWF</span>
+ </div>
+ </div>
+ <div class="live-course-description">
+ <p>
+ Topology II: Smooth Manifolds, and some other text about that can stretch onto as many lines as
+ </p>
+ </div>
+ </a>
+ </li>
+ <li class="live-course">
+ <a href="#">
+ <div class="live-course-info">
+ <div>
+ <span class="live-feed-school">Harvard</span>
+ <span class="live-feed-course">Math 132</span>
+ </div>
+ <div>
+ <span class="live-feed-hours">11:30am - 12:30pm</span>
+ <span class="live-feed-days">MWF</span>
+ </div>
+ </div>
+ <div class="live-course-description">
+ <p>
+ Topology II: Smooth Manifolds, and some other text about that can stretch onto as many lines as
+ </p>
+ </div>
+ </a>
+ </li>
+ <li class="live-course">
+ <a href="#">
+ <div class="live-course-info">
+ <div>
+ <span class="live-feed-school">Harvard</span>
+ <span class="live-feed-course">Math 132</span>
+ </div>
+ <div>
+ <span class="live-feed-hours">11:30am - 12:30pm</span>
+ <span class="live-feed-days">MWF</span>
+ </div>
+ </div>
+ <div class="live-course-description">
+ <p>
+ Topology II: Smooth Manifolds, and some other text about that can stretch onto as many lines as
+ </p>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ <div class="modal-pag-controls" id="live-feed-modal-pag-controls">
+ <ul>
+ <li><a href="#" class="pag pag-left icon larrow-circle s-disabled"></a></li>
+ <li><a href="#" class="pag pag-right icon rarrow-circle"></a></li>
+ </ul>
+ </div>
+ <footer class="modal-footer-controls">
+ <ul>
+ <li><a href="#">See all courses</a></li>
+ </ul>
+ </footer>
+ </div>
+ </li>
<li class="last"><a href="/login" id="login_link">Login</a></li>
+ <li><a href="/register" id="register_link">Register</a></li>
+ <li class="first"><a href="#" class="username"></a></li>
</ul>
</nav>
};
function render(pageId, response) {
- console.log(user);
if (user.name) {
$('.username').text(user.name).attr('href', '/profile');
$("#login_status").show();
function checkUser(cb) {
$.get('/checkuser', function(data) {
- console.log(data);
if (data.user) {
user = data.user;
} else {
projects / oweals / finalsclub.git / commitdiff
