diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index ccd5650da405fe7aa1e05a3228e94f1bd120e496..cbc83ad91dde98748a3d7dd25de7358ce67ef032 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -124,6 +124,103 @@ } } } + + .news-carousel { + @include clearfix; + margin: 30px 10px 0; + border: 1px solid rgb(200,200,200); + background: rgb(252,252,252); + @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15)); + + * { + font-family: $sans-serif; + } + + header { + @include clearfix; + height: 50px; + } + + .page-dots { + float: right; + margin: 18px 15px 0 0; + + li { + float: left; + margin-left: 6px; + } + } + + .page-dot { + display: block; + width: 11px; + height: 11px; + border-radius: 11px; + background: $light-gray; + + &:hover { + background: #ccc; + } + + &.current { + background: $blue; + } + } + + h4 { + float: left; + margin-left: 15px; + font-size: 15px; + line-height: 48px; + font-weight: 700; + text-transform: uppercase; + } + + .pages { + position: relative; + } + + .page { + display: none; + position: absolute; + top: 0; + left: 0; + + &:first-child { + display: block; + } + } + + section { + padding: 0 10px; + } + + .news-image { + height: 125px; + margin-bottom: 15px; + + img { + width: 100%; + border: 1px solid $light-gray; + } + } + + h5 { + margin-bottom: 8px; + margin-left: 5px; + + a { + font-size: 16px; + font-weight: 700; + } + } + + .excerpt { + margin-left: 5px; + font-size: 13px; + padding-bottom: 40px; + } + } } .my-courses { diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 423f53aa35065f3c90d9c227f52e49c0e9434aa8..a7be387fc91670a1aabda17ace67f7d572748e01 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -14,6 +14,48 @@ <script type="text/javascript"> (function() { + var carouselPageHeight = 0; + var carouselIndex = 0; + var carouselDelay = 5000; + var carouselPages = $('.news-carousel .page').length; + + + $('.news-carousel .page').each(function() { + console.log($(this).outerHeight()); + carouselPageHeight = Math.max($(this).outerHeight(), carouselPageHeight); + }); + $('.news-carousel .pages').css('height', carouselPageHeight); + $('.news-carousel .page-dot').bind('click', setCarouselPage); + var carouselTimer = setInterval(nextCarouselPage, carouselDelay); + + function nextCarouselPage() { + carouselIndex = carouselIndex + 1 < carouselPages ? carouselIndex + 1 : 0; + setCarouselPage(null, carouselIndex); + } + + function setCarouselPage(e, index) { + console.log('set'); + var $pageToShow; + var transitionSpeed; + $('.news-carousel .page-dots').find('.current').removeClass('current'); + + if(e) { + clearInterval(carouselTimer); + carouselTimer = setInterval(nextCarouselPage, carouselDelay); + carouselIndex = $(this).closest('li').index(); + transitionSpeed = 250; + $pageToShow = $('.news-carousel .page').eq($(this).closest('li').index()); + $(this).addClass('current'); + } else { + transitionSpeed = 750; + $pageToShow = $('.news-carousel .page').eq(index); + $('.news-carousel .page-dot').eq(index).addClass('current'); + } + + $pageToShow.fadeIn(transitionSpeed); + $('.news-carousel .page').not($pageToShow).fadeOut(transitionSpeed); + } + $(".unenroll").click(function(event) { $("#unenroll_course_id").val( $(event.target).data("course-id") ); $("#unenroll_course_number").text( $(event.target).data("course-number") ); @@ -107,6 +149,51 @@ </li> </ul> </section> + + <article class="news-carousel"> + <header> + <h4>edX News</h4> + <nav class="page-dots"> + <ol> + <li><a href="#" class="page-dot current"></a></li> + <li><a href="#" class="page-dot"></a></li> + <li><a href="#" class="page-dot"></a></li> + </ol> + </nav> + </header> + <div class="pages"> + <section class="page"> + <div class="news-image"> + <a href="#"><img src="/static/content-berkeley-cs169x/images/course_image.jpg" /></a> + </div> + <h5><a href="#">BerkeleyX to offer Computer Graphics course</a></h5> + <div class="excerpt"> + <p>BerkeleyX will be offering CS184.1x: Foundations of Computer Graphics starting on November 5, 2012.</p> + <p><a href="#">Learn More ›</a></p> + </div> + </section> + <section class="page"> + <div class="news-image"> + <a href="#"><img src="/static/content-mit-6002x/images/course_image.jpg" /></a> + </div> + <h5><a href="#">MIT has a new class</a></h5> + <div class="excerpt"> + <p>BerkeleyX will be offering CS184.1x: Foundations of Computer Graphics starting on November 5, 2012.</p> + <p><a href="#">Learn More ›</a></p> + </div> + </section> + <section class="page"> + <div class="news-image"> + <a href="#"><img src="/static/6.00x/images/course_image.jpg" /></a> + </div> + <h5><a href="#">Look at this class, too!</a></h5> + <div class="excerpt"> + <p>BerkeleyX will be offering CS184.1x: Foundations of Computer Graphics starting on November 5, 2012.</p> + <p><a href="#">Learn More ›</a></p> + </div> + </section> + </div> + </article> </section> <section class="my-courses">