banner(scrolling): add scrolling to the banner
This commit is contained in:
Alex Wolfe
Naomi Black
parent
f4c4aee706
commit
a0dbeee18a
|
|
@ -6,13 +6,13 @@ header(class="background-sky l-relative")
|
|||
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started
|
||||
|
||||
|
||||
banner(image="/resources/images/logos/angular2/angular.svg" text="Angular 2.0 Final Release Now Live!" button="Learn More")
|
||||
announcement-bar
|
||||
.announcement-bar-slide.clearfix
|
||||
img(src="/resources/images/logos/angular2/angular.svg")
|
||||
img(src="/resources/images/logos/angular2/angular.svg" width="40")
|
||||
p Angular 2.0 Final Release Now Live!
|
||||
a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More
|
||||
|
||||
.announcement-bar-slide.clearfix
|
||||
img(src="/resources/images/logos/ng-europe/ng-europe-logo.png")
|
||||
p Join us for <strong>ng-europe in Paris</strong>, France this October!
|
||||
a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now
|
||||
a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now
|
||||
|
|
@ -28,7 +28,7 @@ script(src="/resources/js/directives/cheatsheet.js")
|
|||
script(src="/resources/js/directives/api-list.js")
|
||||
script(src="/resources/js/directives/bio.js")
|
||||
script(src="/resources/js/directives/bold.js")
|
||||
script(src="/resources/js/directives/banner.js")
|
||||
script(src="/resources/js/directives/announcement-bar.js")
|
||||
script(src="/resources/js/directives/code.js")
|
||||
script(src="/resources/js/directives/copy.js")
|
||||
script(src="/resources/js/directives/code-tabs.js")
|
||||
|
|
|
|||
|
|
@ -20,21 +20,73 @@ $announcement-bar-width: 752px;
|
|||
*/
|
||||
|
||||
#{$announcement-bar} {
|
||||
background: $white;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
color: $blue-grey-500;
|
||||
height: $announcement-bar-height;
|
||||
left: 50%;
|
||||
margin-bottom: -($announcement-bar-height / 2);
|
||||
margin-left: -($announcement-bar-width / 2);
|
||||
overflow: hidden;
|
||||
padding: $unit * 4;
|
||||
position: absolute;
|
||||
width: $announcement-bar-width;
|
||||
|
||||
@include respond-to('mobile') {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
position: static;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// SLIDES CONTAINER
|
||||
#{$announcement-bar}-slides {
|
||||
background: $white;
|
||||
box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
color: $blue-grey-500;
|
||||
height: $announcement-bar-height;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: $announcement-bar-width;
|
||||
|
||||
@include respond-to('mobile') {
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
height: 240px;
|
||||
margin: 0;
|
||||
padding: ($unit * 4) ($unit * 6);
|
||||
text-align: center;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// INDIVIDUAL SLIDE
|
||||
#{$announcement-bar}-slide {
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: $announcement-bar-height;
|
||||
left: 0;
|
||||
margin-bottom: -$announcement-bar-height;
|
||||
opacity: 0;
|
||||
padding: $unit * 4;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: all .8s;
|
||||
width: $announcement-bar-width;
|
||||
z-index: $layer-1;
|
||||
|
||||
@include respond-to('mobile') {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
width: auto;
|
||||
transition: opacity .8s;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
img, p {
|
||||
float: left;
|
||||
|
||||
@include respond-to('mobile') {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -66,56 +118,57 @@ $announcement-bar-width: 752px;
|
|||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
color: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#{$announcement-bar}-slide {
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: $announcement-bar-height;
|
||||
left: 0;
|
||||
margin-bottom: -$announcement-bar-height;
|
||||
opacity: 0;
|
||||
padding: $unit * 4;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: all .8s;
|
||||
width: $announcement-bar-width;
|
||||
z-index: $layer-1;
|
||||
|
||||
&.is-visible {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
z-index: $layer-2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Mobile Styles
|
||||
*
|
||||
*/
|
||||
|
||||
@include respond-to('mobile') {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: ($unit * 4) ($unit * 6);
|
||||
position: static;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
|
||||
&.shadow-2 {
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
}
|
||||
|
||||
img, p {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.button {
|
||||
@include respond-to('mobile') {
|
||||
float: none;
|
||||
display: block;
|
||||
margin-top: $unit * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-visible {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
z-index: $layer-2;
|
||||
|
||||
@include respond-to('mobile') {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAV BAR
|
||||
#{$announcement-bar} nav {
|
||||
bottom: -($unit * 5);
|
||||
color: $blue-grey-500;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
z-index: $layer-1;
|
||||
|
||||
button {
|
||||
background: $blue-grey-50;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
height: $unit + 4;
|
||||
margin: 0 ($unit / 2);
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-indent: -3000px;
|
||||
width: $unit + 4;
|
||||
|
||||
&.is-selected,
|
||||
&.selected {
|
||||
background: $blue-grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
/*eslint no-unused-vars: "angularIO" */
|
||||
|
||||
/*
|
||||
* Announcement Bar Banner Directive
|
||||
*
|
||||
* A rotating announcement banners used to display
|
||||
* important updates and news.
|
||||
*/
|
||||
|
||||
angularIO.directive('announcementBar', ['$interval', function($interval) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {},
|
||||
transclude: true,
|
||||
replace: true,
|
||||
template:
|
||||
'<div class="announcement-bar">' +
|
||||
'<div class="announcement-bar-slides" ng-transclude></div>' +
|
||||
'<nav class="announcement-bar-nav">'+
|
||||
'<button ng-class="{ selected: currentSlide === key }" ng-repeat="(key, slide) in slides" ng-click="changeSlide($event, key)">{{key}}</button>' +
|
||||
'</nav>' +
|
||||
'</div>',
|
||||
|
||||
link: function(scope, element, attrs) {
|
||||
// REGISTER ELEMENTS
|
||||
scope.slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
|
||||
var slideLenth = scope.slides.length;
|
||||
|
||||
// SHOW FIRST SLIDE
|
||||
scope.currentSlide = 0;
|
||||
angular.element(scope.slides[0]).addClass('is-visible');
|
||||
|
||||
|
||||
/*
|
||||
* Change Slide Using Nav
|
||||
*
|
||||
*/
|
||||
|
||||
scope.changeSlide = function(event, slideNum) {
|
||||
// CANCEL TIMEOUT AND CHANGE SLIDE
|
||||
$interval.cancel(scope.timeoutId)
|
||||
scope.slides.removeClass('is-visible');
|
||||
angular.element(scope.slides[slideNum]).addClass('is-visible');
|
||||
scope.currentSlide = slideNum;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Start Slideshow Cyle
|
||||
*
|
||||
*/
|
||||
|
||||
scope.timeoutId = $interval(function() {
|
||||
// INCREMENT
|
||||
scope.currentSlide = scope.currentSlide + 1;
|
||||
|
||||
// HIDE ALL SLIDES
|
||||
scope.slides.removeClass('is-visible');
|
||||
|
||||
// RESET ON LAST SLIDE
|
||||
if((scope.currentSlide) > (slideLenth - 1)) {
|
||||
scope.currentSlide = 0;
|
||||
}
|
||||
|
||||
// SHOW SLIDE
|
||||
angular.element(scope.slides[scope.currentSlide]).addClass('is-visible');
|
||||
}, 5000);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
/*eslint no-unused-vars: "angularIO" */
|
||||
|
||||
/*
|
||||
* Announcement Bar Banner Directive
|
||||
*
|
||||
* A rotating announcement banners used to display
|
||||
* important updates and news.
|
||||
*/
|
||||
|
||||
angularIO.directive('banner', ['$interval', function($interval) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
transclude: true,
|
||||
compile: function(tElement, attrs) {
|
||||
var template =
|
||||
'<div class="announcement-bar shadow-2 clearfix" ng-transclude></div>';
|
||||
|
||||
// UPDATE ELEMENT WITH NEW TEMPLATE
|
||||
tElement.html(template);
|
||||
|
||||
// RETURN ELEMENT
|
||||
return function(scope, element, attrs) {
|
||||
var slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
|
||||
var slideLenth = slides.length;
|
||||
var currentSlide = 1;
|
||||
|
||||
// SHOW FIRST SLIDE
|
||||
angular.element(slides[0]).addClass('is-visible');
|
||||
|
||||
|
||||
// START SLIDESHOW CYCLE
|
||||
var timeoutId = $interval(function() {
|
||||
|
||||
if((currentSlide + 1) <= slideLenth) {
|
||||
slides.removeClass('is-visible');
|
||||
angular.element(slides[currentSlide]).addClass('is-visible');
|
||||
}
|
||||
else {
|
||||
// RESET ON LAST SLIDE
|
||||
currentSlide = 0;
|
||||
slides.removeClass('is-visible');
|
||||
angular.element(slides[currentSlide]).addClass('is-visible');
|
||||
}
|
||||
|
||||
// INCREMENT
|
||||
currentSlide = currentSlide + 1;
|
||||
}, 5000);
|
||||
};
|
||||
}
|
||||
};
|
||||
}]);
|
||||
Loading…
Reference in New Issue