added carousel to dashboard page
This commit is contained in:
Tom Giannattasio
committed by
Carlos Andrés Rocha
Carlos Andrés Rocha
parent
9be89ab310
commit
423de1868d
@@ -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 {
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user