Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit a0dbeee

Browse files
alexwolfenaomiblack
alexwolfe
authored and
naomiblack
committed
banner(scrolling): add scrolling to the banner
1 parent f4c4aee commit a0dbeee

File tree

5 files changed

+175
-101
lines changed

5 files changed

+175
-101
lines changed

‎public/_includes/_hero-home.jade

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ header(class="background-sky l-relative")
66
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started
77

88

9-
banner(image="/resources/images/logos/angular2/angular.svg" text="Angular 2.0 Final Release Now Live!" button="Learn More")
9+
announcement-bar
1010
.announcement-bar-slide.clearfix
11-
img(src="/resources/images/logos/angular2/angular.svg")
11+
img(src="/resources/images/logos/angular2/angular.svg" width="40")
1212
p Angular 2.0 Final Release Now Live!
1313
a(href="http://angularjs.blogspot.com/2016/09/angular2-final.html" target="_blank" class="button " + "md-button") Learn More
1414

1515
.announcement-bar-slide.clearfix
1616
img(src="/resources/images/logos/ng-europe/ng-europe-logo.png")
1717
p Join us for <strong>ng-europe in Paris</strong>, France this October!
18-
a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now
18+
a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now

‎public/_includes/_scripts-include.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ script(src="/resources/js/directives/cheatsheet.js")
2828
script(src="/resources/js/directives/api-list.js")
2929
script(src="/resources/js/directives/bio.js")
3030
script(src="/resources/js/directives/bold.js")
31-
script(src="/resources/js/directives/banner.js")
31+
script(src="/resources/js/directives/announcement-bar.js")
3232
script(src="/resources/js/directives/code.js")
3333
script(src="/resources/js/directives/copy.js")
3434
script(src="/resources/js/directives/code-tabs.js")

‎public/resources/css/module/_announcement-bar.scss

Lines changed: 99 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,73 @@ $announcement-bar-width: 752px;
2020
*/
2121

2222
#{$announcement-bar} {
23-
background: $white;
2423
bottom: 0;
25-
box-sizing: border-box;
26-
color: $blue-grey-500;
27-
height: $announcement-bar-height;
2824
left: 50%;
2925
margin-bottom: -($announcement-bar-height / 2);
3026
margin-left: -($announcement-bar-width / 2);
27+
position: absolute;
28+
width: $announcement-bar-width;
29+
30+
@include respond-to('mobile') {
31+
height: auto;
32+
margin: 0;
33+
position: static;
34+
text-align: center;
35+
width: auto;
36+
}
37+
}
38+
39+
// SLIDES CONTAINER
40+
#{$announcement-bar}-slides {
41+
background: $white;
42+
box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
43+
box-sizing: border-box;
44+
color: $blue-grey-500;
45+
height: $announcement-bar-height;
3146
overflow: hidden;
47+
position: relative;
48+
width: $announcement-bar-width;
49+
50+
@include respond-to('mobile') {
51+
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
52+
height: 240px;
53+
margin: 0;
54+
padding: ($unit * 4) ($unit * 6);
55+
text-align: center;
56+
width: auto;
57+
}
58+
}
59+
60+
// INDIVIDUAL SLIDE
61+
#{$announcement-bar}-slide {
62+
bottom: 0;
63+
box-sizing: border-box;
64+
height: $announcement-bar-height;
65+
left: 0;
66+
margin-bottom: -$announcement-bar-height;
67+
opacity: 0;
3268
padding: $unit * 4;
3369
position: absolute;
70+
right: 0;
71+
transition: all .8s;
3472
width: $announcement-bar-width;
73+
z-index: $layer-1;
74+
75+
@include respond-to('mobile') {
76+
height: auto;
77+
margin: 0;
78+
padding:0;
79+
width: auto;
80+
transition: opacity .8s;
81+
visibility: hidden;
82+
}
3583

3684
img, p {
3785
float: left;
86+
87+
@include respond-to('mobile') {
88+
float: none;
89+
}
3890
}
3991

4092
img {
@@ -66,56 +118,57 @@ $announcement-bar-width: 752px;
66118
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
67119
color: $blue-500;
68120
}
121+
122+
@include respond-to('mobile') {
123+
float: none;
124+
display: block;
125+
margin-top: $unit * 2;
126+
}
69127
}
70128

71129

72-
#{$announcement-bar}-slide {
73-
bottom: 0;
74-
box-sizing: border-box;
75-
height: $announcement-bar-height;
76-
left: 0;
77-
margin-bottom: -$announcement-bar-height;
78-
opacity: 0;
79-
padding: $unit * 4;
80-
position: absolute;
81-
right: 0;
82-
transition: all .8s;
83-
width: $announcement-bar-width;
84-
z-index: $layer-1;
85-
86-
&.is-visible {
87-
margin-bottom: 0;
88-
opacity: 1;
89-
z-index: $layer-2;
130+
&.is-visible {
131+
margin-bottom: 0;
132+
opacity: 1;
133+
z-index: $layer-2;
134+
135+
@include respond-to('mobile') {
136+
position: static;
137+
visibility: visible;
90138
}
91139
}
140+
}
141+
142+
// NAV BAR
143+
#{$announcement-bar} nav {
144+
bottom: -($unit * 5);
145+
color: $blue-grey-500;
146+
left: 0;
147+
position: absolute;
148+
right: 0;
149+
text-align: center;
150+
z-index: $layer-1;
151+
152+
button {
153+
background: $blue-grey-50;
154+
border: none;
155+
border-radius: 100px;
156+
height: $unit + 4;
157+
margin: 0 ($unit / 2);
158+
outline: none;
159+
overflow: hidden;
160+
text-indent: -3000px;
161+
width: $unit + 4;
162+
163+
&.is-selected,
164+
&.selected {
165+
background: $blue-grey-100;
166+
}
167+
}
168+
}
92169

93170

94-
/*
95-
* Mobile Styles
96-
*
97-
*/
98171

99-
@include respond-to('mobile') {
100-
height: auto;
101-
margin: 0;
102-
padding: ($unit * 4) ($unit * 6);
103-
position: static;
104-
text-align: center;
105-
width: auto;
106172

107-
&.shadow-2 {
108-
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
109-
}
110173

111-
img, p {
112-
float: none;
113-
}
114174

115-
.button {
116-
float: none;
117-
display: block;
118-
margin-top: $unit * 2;
119-
}
120-
}
121-
}

‎public/resources/js/directives/announcement-bar.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/*eslint no-unused-vars: "angularIO" */
2+
3+
/*
4+
* Announcement Bar Banner Directive
5+
*
6+
* A rotating announcement banners used to display
7+
* important updates and news.
8+
*/
9+
10+
angularIO.directive('announcementBar', ['$interval', function($interval) {
11+
return {
12+
restrict: 'E',
13+
scope: {},
14+
transclude: true,
15+
replace: true,
16+
template:
17+
'<div class="announcement-bar">' +
18+
'<div class="announcement-bar-slides" ng-transclude></div>' +
19+
'<nav class="announcement-bar-nav">'+
20+
'<button ng-class="{ selected: currentSlide === key }" ng-repeat="(key, slide) in slides" ng-click="changeSlide($event, key)">{{key}}</button>' +
21+
'</nav>' +
22+
'</div>',
23+
24+
link: function(scope, element, attrs) {
25+
// REGISTER ELEMENTS
26+
scope.slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
27+
var slideLenth = scope.slides.length;
28+
29+
// SHOW FIRST SLIDE
30+
scope.currentSlide = 0;
31+
angular.element(scope.slides[0]).addClass('is-visible');
32+
33+
34+
/*
35+
* Change Slide Using Nav
36+
*
37+
*/
38+
39+
scope.changeSlide = function(event, slideNum) {
40+
// CANCEL TIMEOUT AND CHANGE SLIDE
41+
$interval.cancel(scope.timeoutId)
42+
scope.slides.removeClass('is-visible');
43+
angular.element(scope.slides[slideNum]).addClass('is-visible');
44+
scope.currentSlide = slideNum;
45+
};
46+
47+
48+
/*
49+
* Start Slideshow Cyle
50+
*
51+
*/
52+
53+
scope.timeoutId = $interval(function() {
54+
// INCREMENT
55+
scope.currentSlide = scope.currentSlide + 1;
56+
57+
// HIDE ALL SLIDES
58+
scope.slides.removeClass('is-visible');
59+
60+
// RESET ON LAST SLIDE
61+
if((scope.currentSlide) > (slideLenth - 1)) {
62+
scope.currentSlide = 0;
63+
}
64+
65+
// SHOW SLIDE
66+
angular.element(scope.slides[scope.currentSlide]).addClass('is-visible');
67+
}, 5000);
68+
}
69+
};
70+
}]);
71+
72+

‎public/resources/js/directives/banner.js

Lines changed: 0 additions & 51 deletions
This file was deleted.

0 commit comments

Comments
 (0)