Skip to content

Commit 9aba3b8

Browse files
hkalhkal
committed
Merge pull request #132 from cloudspace/67668954_video_loading_screen
67668954 video loading screen
2 parents 86e2ce7 + 35ffe0c commit 9aba3b8

File tree

9 files changed

+110
-85
lines changed

9 files changed

+110
-85
lines changed

‎app/data/VideoTest.mp4‎

6.98 MB
Binary file not shown.

‎app/data/VideoTestBig.mp4‎

7.08 MB
Binary file not shown.

‎app/index.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,18 +44,20 @@
4444
</script>
4545
<!-- Add your site or application content here -->
4646

47-
<div id="splash" role="splash" ui-view="splash">
47+
<div id="splash" role="splash">
4848
<a class='forkme' target='_blank' href='https://github.com/cloudspace/angular.crunchinator.com'>
4949
<img src='images/forkme_right_ribbon.png' alt='Fork me on GitHub' />
5050
</a>
51-
<div class='container'>
52-
<div class='row'>
53-
<div class='header-text'>
54-
<p class='tagline'>Slice, Filter &amp; Explore CrunchBase Data</p>
55-
</div>
51+
<div class='initializing'>
52+
<div class='header-text'>
53+
Slice, Filter &amp; Explore CrunchBase Data
5654
</div>
55+
<video autoplay="" preload="" width="720" height="450">
56+
<source src="data/VideoTest.mp4" type="video/mp4">
57+
</video>
5758
</div>
5859
</div>
60+
5961
<div id="main" role="main" ui-view="main">
6062
</div>
6163
<div id="about" role="about" ui-view="about">

‎app/scripts/controllers/crunchinator.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
angular.module('crunchinatorApp.controllers')
44
.controller('CrunchinatorCtrl', [
5-
'$scope', '$location', '$q', 'Company', 'Category', 'Investor', 'FundingRound', 'ComponentData', 'Bitly',
6-
function CrunchinatorCtrl($scope, $location, $q, Company, Category, Investor, FundingRound, ComponentData, Bitly) {
5+
'$scope', '$rootScope', '$location', '$q', 'Company', 'Category', 'Investor', 'FundingRound', 'ComponentData', 'Bitly',
6+
function CrunchinatorCtrl($scope, $rootScope, $location, $q, Company, Category, Investor, FundingRound, ComponentData, Bitly) {
77
$scope.shouldScroll = false;
88

99
ComponentData.updateDataSets();
@@ -72,6 +72,7 @@ angular.module('crunchinatorApp.controllers')
7272
ComponentData.updateDataSets();
7373

7474
$scope.initiated = true;
75+
$rootScope.initiated = true;
7576

7677
//Smoother initial loading hide
7778
_.defer(function(){

‎app/scripts/directives/affix.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

3-
angular.module( 'crunchinatorApp.directives').directive( 'affix', ['$rootScope',
4-
function ($rootScope) {
3+
angular.module( 'crunchinatorApp.directives').directive( 'affix', [
4+
function () {
55
return {
66
restrict: 'A',
77
scope: {
@@ -34,10 +34,8 @@ angular.module( 'crunchinatorApp.directives').directive( 'affix', ['$rootScope',
3434
};
3535
}
3636

37-
$rootScope.$on('scrollFinish', function() {
38-
angular.element(element[0]).affix(config);
39-
scope.$digest();
40-
});
37+
angular.element(element[0]).affix(config);
38+
4139
}
4240
};
4341
}

‎app/scripts/directives/crunchNav.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,17 @@ angular.module('crunchinatorApp.directives').directive('crunchNav', ['$rootScope
4949
});
5050
}, true);
5151

52+
scope.chevron = function() {
53+
var $section = angular.element('#splash');
54+
$section.slideUp('slow', function(){
55+
scope.chevroned = true;
56+
angular.element('html, body').css({
57+
'overflow': 'visible',
58+
});
59+
scope.$digest();
60+
});
61+
};
62+
5263
scope.$parent.$watch('loading', function(newval) {
5364
scope.loading = newval;
5465
});

‎app/styles/main.less‎

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,27 @@
140140
}
141141
}
142142

143+
.Animation(@animation) {
144+
-webkit-animation: @animation;
145+
-moz-animation: @animation;
146+
-ms-animation: @animation;
147+
animation: @animation;
148+
}
149+
143150
/*
144151
Global Components
145152
*/
153+
@-webkit-keyframes bounce {
154+
0%, 2%, 5%, 8%, 100% { top: 0; }
155+
4% { top: -12px; }
156+
6% { top: -6px; }
157+
}
158+
159+
.bounce {
160+
position: relative;
161+
.Animation(bounce 20s infinite 1s);
162+
}
163+
146164
.brush .resize .limit {
147165
fill: @bright-blue;
148166
}
@@ -166,12 +184,14 @@
166184

167185
html {
168186
height: 100%;
187+
overflow: hidden;
169188
}
170189

171190
body {
172191
background-color: @dark-grey;
173192
background-image: url('/images/background-noise.png');
174193
height: 100%;
194+
overflow: hidden;
175195
}
176196

177197
/* Space out content a bit */
@@ -807,64 +827,34 @@ footer {
807827
background: url('/images/burner.jpg');
808828
background-size: cover;
809829
background-position: 50% 50%;
810-
text-align: center;
811830
height: 100%;
812831
overflow: hidden;
813832
margin-bottom: -64px;
833+
text-align: center;
814834

815835
.forkme {
816-
float: right;
817-
display:block;
818-
}
819-
820-
.header-text {
821-
color: white;
822-
text-align: center;
823836
position: absolute;
824-
top: 50%;
825-
left: 0;
826837
right: 0;
827-
margin-top: -25px;
828-
829-
p {
830-
font-family: @font-proxima-nova;
831-
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
832-
font-weight: 600;
838+
z-index: 100;
839+
}
833840

834-
&.tagline {
835-
font-size: 42px;
836-
line-height: 37px;
837-
padding-bottom: 0;
838-
}
839-
}
841+
.initializing {
842+
width: 100%;
843+
position: absolute;
844+
top: 50%;
845+
margin-top: -345px;
840846
}
841847

842-
a.watch-video:link,
843-
a.watch-video:visited,
844-
a.watch-video:active {
845-
margin: 0 auto;
848+
.header-text {
849+
color: white;
846850
text-align: center;
847-
border: solid 4px #fff;
848-
background: #fff;
849-
color: #2c3136;
850-
display: inline-block;
851+
margin-top: 50px;
852+
margin-bottom: 50px;
853+
font-size: 42px;
854+
line-height: 37px;
851855
font-family: @font-proxima-nova;
852-
font-size: 14px;
856+
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
853857
font-weight: 600;
854-
margin-bottom: 85px;
855-
margin-top: 70px;
856-
text-decoration: none !important;
857-
858-
span {
859-
display: block;
860-
padding: 10px 0 4px 0;
861-
}
862-
}
863-
864-
a.watch-video:hover {
865-
background-color: #e6e6e6;
866-
border: solid 4px #e6e6e6;
867-
text-shadow: 0 1px 0 #fff;
868858
}
869859
}
870860

@@ -912,6 +902,21 @@ footer {
912902
position: relative;
913903
}
914904

905+
i.fa-angle-double-down {
906+
font-size: 44px;
907+
margin: 0 40px;
908+
vertical-align: top;
909+
}
910+
911+
.movealong {
912+
font-size: 35px;
913+
line-height: 44px;
914+
}
915+
916+
a {
917+
text-decoration: none;
918+
}
919+
915920
.logo {
916921
position: absolute;
917922
left: 0;
@@ -1118,13 +1123,13 @@ footer {
11181123
}
11191124
}
11201125

1121-
h2.loading {
1126+
.loading {
11221127
font-size: 30px;
11231128
font-weight: 600;
11241129
margin: 0;
11251130
text-align: center;
1126-
line-height: 42px;
11271131
color: @bright-blue;
1132+
line-height: 42px;
11281133

11291134
text-shadow: 0 0 20px rgba(200, 200, 200, .5);
11301135
-webkit-animation: opacity-pulsate 2s linear;
@@ -1144,11 +1149,6 @@ h2.loading {
11441149
100% {opacity: 0.5;}
11451150
}
11461151

1147-
h2.initiate {
1148-
margin-left: 150px;
1149-
white-space: nowrap;
1150-
}
1151-
11521152
.special {
11531153
.head, .drag-handle {
11541154
background-color: #5a83a0;

‎app/views/crunch-nav.tpl.html‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,42 @@
33
<nav>
44
<div class='logo'>
55
<img ng-click="reset()" src="images/logo.png"/>
6-
<h1 ng-show="initiated"><a href="" ng-click="reset()">Crunchinator</a></h1>
6+
<h1 ng-show="initiated && chevroned"><a href="" ng-click="reset()">Crunchinator</a></h1>
77
</div>
88

9-
<div class='status'>
10-
<h2 class="loading" ng-show="loading">Crunching...</h2>
11-
<h2 class="loading initiate" ng-show="!initiated">Loading LOTS of data (10-20 seconds)...</h2>
12-
13-
<ul class="amount-counter" ng-show="initiated && !loading">
14-
<li><span class="amount-count">{{companyCount || 0}}</span> Companies</li>
15-
<li><span class="amount-count">{{investorCount || 0}}</span> Investors</li>
16-
</ul>
9+
<div ng-show='!chevroned'>
10+
<a href='' ng-click="chevron()" ng-show="initiated">
11+
<div>
12+
<i class="bounce fa fa-angle-double-down"></i>
13+
<span class='movealong'>Continue to the Crunchinator</span>
14+
<i class="bounce fa fa-angle-double-down"></i>
15+
</div>
16+
</a>
17+
<div ng-show="!initiated" class="loading" >Hang tight, we're crunching your bytes...</div>
1718
</div>
1819

20+
<div ng-show='chevroned'>
1921

20-
<div title='Share your results' ng-show="initiated" class="share">
21-
<p>Share Results: </p>
22-
<ul>
23-
<li class="facebook"><button fb-share><i class="fa fa-thumbs-up"></i>Share</button></li>
24-
<li class="twitter"><button twitter-share><i class="fa fa-twitter"></i>Tweet</button></li>
25-
<li class="email"><button email-share><i class="fa fa-envelope-o"></i>E-mail</button></li>
26-
</ul>
27-
</div>
28-
</nav>
22+
<div class='status'>
23+
<h2 class="loading" ng-show="loading">Crunching...</h2>
24+
25+
<ul class="amount-counter" ng-show="initiated && !loading">
26+
<li><span class="amount-count">{{companyCount || 0}}</span> Companies</li>
27+
<li><span class="amount-count">{{investorCount || 0}}</span> Investors</li>
28+
</ul>
29+
</div>
30+
31+
32+
<div title='Share your results' class="share">
33+
<p>Share Results: </p>
34+
<ul>
35+
<li class="facebook"><button fb-share><i class="fa fa-thumbs-up"></i>Share</button></li>
36+
<li class="twitter"><button twitter-share><i class="fa fa-twitter"></i>Tweet</button></li>
37+
<li class="email"><button email-share><i class="fa fa-envelope-o"></i>E-mail</button></li>
38+
</ul>
39+
</div>
40+
</nav>
41+
</div>
2942

3043
<div id="filters">
3144
<ul>

‎app/views/main.tpl.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div wait-then-scroll should-scroll="shouldScroll">
1+
<div>
22
<div crunch-nav
33
id="nav"
44
company-count="{{companies.dataForCompaniesList.length}}"

0 commit comments

Comments
 (0)