Skip to content

Commit 388d698

Browse files
author
K.C. Hunter
committed
Making our upcoming films directive.
1 parent 88aa088 commit 388d698

14 files changed

Lines changed: 281 additions & 59 deletions

File tree

‎gulpfile.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ var appJS = ['src/resources/js/general/app.js',
1717
'src/resources/js/general/configs.js',
1818
'src/resources/js/general/phases.directive.js',
1919
'src/resources/js/home/*.js',
20-
'src/resources/js/phases/*.js'];
20+
'src/resources/js/phases/*.js',
21+
'src/resources/js/upcomingfilms/*.js'];
2122

2223
/** tasks **/
2324
gulp.task('devDeps', function ()
@@ -34,6 +35,26 @@ gulp.task('devJS', function ()
3435
.pipe(gulp.dest('src'));
3536
});
3637

38+
/** style tasks **/
39+
gulp.task('sass', function ()
40+
{
41+
return gulp.src(['src/resources/css/styles.scss'])
42+
.pipe(sass().on('error', sass.logError))
43+
.pipe(gulp.dest('src/resources/css/'));
44+
});
45+
46+
gulp.task('devCSS', function ()
47+
{
48+
return gulp.src(['bower_components/bootstrap/dist/css/bootstrap.min.css', 'src/resources/css/styles.css'])
49+
.pipe(concat('mcu.css'))
50+
.pipe(gulp.dest('src/resources/css/'));
51+
});
52+
53+
gulp.task('buildStyles', function ()
54+
{
55+
runSequence('sass', 'devCSS');
56+
});
57+
3758
/** initialize **/
3859
gulp.task('default', function (callback)
3960
{
@@ -46,4 +67,5 @@ gulp.task('default', function (callback)
4667
gulp.task('watch', function ()
4768
{
4869
gulp.watch('src/resources/**/*.js', ['devJS']);
70+
gulp.watch('src/resources/**/*.scss', ['buildStyles'])
4971
});

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script src="mcu_deps.js"></script>
99
<script src="mcu.js"></script>
1010

11-
<link rel="stylesheet" href="resources/css/angularjstutorial.css">
11+
<link rel="stylesheet" href="resources/css/mcu.css">
1212
</head>
1313
<body data-ng-app="mcu">
1414

‎src/mcu.js‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
MCU.Version = "0.0.0";
1212
MCU.PartialsPath = "partials/";
1313
MCU.Service = {};
14-
MCU.Factory = {};
1514
MCU.Modules = {};
1615
MCU.Configs = {};
16+
MCU.Filters = {};
1717
MCU.Controllers = {};
1818
MCU.Directives = {};
1919

@@ -121,4 +121,46 @@
121121
return deferred.promise;
122122
}
123123
}]);
124-
}(MCU.Service = MCU.Service || {} ));
124+
}(MCU.Service = MCU.Service || {} ));
125+
(function (Controllers, undefined)
126+
{
127+
MCU.Modules.MCU.controller("upcomingfilmsController", ['$scope', 'phasesService',
128+
function ($scope, phasesService)
129+
{
130+
var promise = phasesService.getPhases();
131+
promise.then(function (data)
132+
{
133+
var allMovies = [];
134+
var phasesLength = data.data.MCU.Phases.length;
135+
136+
//get todays date
137+
var todaysDate = new Date();
138+
139+
//merge our arrays
140+
for(var i = 0; i < phasesLength; i++)
141+
{
142+
var phasesMovies = data.data.MCU.Phases[i].movies;
143+
for(var j = 0; j < phasesMovies.length; j++)
144+
{
145+
var movieDate = new Date(data.data.MCU.Phases[i].movies[j].date);
146+
if(movieDate > todaysDate)
147+
{
148+
allMovies.push(data.data.MCU.Phases[i].movies[j]);
149+
}
150+
}
151+
}
152+
$scope.films = allMovies;
153+
})
154+
}])
155+
}(MCU.Controllers = MCU.Controllers || {} ));
156+
(function (Directives, undefined)
157+
{
158+
MCU.Modules.MCU.directive("upcomingfilms", [ function ()
159+
{
160+
return {
161+
restrict: 'E',
162+
controller: 'upcomingfilmsController',
163+
templateUrl: MCU.PartialsPath + "/upcomingfilms.html"
164+
}
165+
}]);
166+
}(MCU.Directives = MCU.Directives || {} ));

‎src/partials/home.html‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,7 @@ <h1>Marvel Cinematic Universe Fan Page</h1>
55

66
<div class="filmsContainer container">
77
<div class="col-xs-12 col-sm-8">
8-
<h1>Upcoming Films</h1>
9-
10-
<div class="col-xs-12 col-sm-6 col-md-4 upcomingFilmsBox">
11-
<h1>Avengers: Age of Ultron</h1>
12-
<img src="resources/img/thumbnails/age-of-ultron.jpg" alt="Age of Ultron Thumbnail" />
13-
14-
<h2>When Tony Stark (Robert Downey Jr.) jumpstarts a dormant peacekeeping program, things go terribly awry, forcing him, Thor (Chris Hemsworth), the Incredible Hulk (Mark Ruffalo) and the rest of the Avengers to reassemble. As the fate of Earth hangs in the balance, the team is put to the ultimate test as they battle Ultron (James Spader), a technological terror hell-bent on human extinction. Along the way, they encounter two mysterious and powerful newcomers, Pietro and Wanda Maximoff.</p>
15-
</div>
16-
17-
<div class="col-xs-12 col-sm-6 col-md-4 upcomingFilmsBox">
18-
<h1>Avengers: Age of Ultron</h1>
19-
<img src="resources/img/thumbnails/age-of-ultron.jpg" alt="Age of Ultron Thumbnail" />
20-
21-
<h2>When Tony Stark (Robert Downey Jr.) jumpstarts a dormant peacekeeping program, things go terribly awry, forcing him, Thor (Chris Hemsworth), the Incredible Hulk (Mark Ruffalo) and the rest of the Avengers to reassemble. As the fate of Earth hangs in the balance, the team is put to the ultimate test as they battle Ultron (James Spader), a technological terror hell-bent on human extinction. Along the way, they encounter two mysterious and powerful newcomers, Pietro and Wanda Maximoff.</p>
22-
</div>
23-
24-
<div class="col-xs-12 col-sm-6 col-md-4 upcomingFilmsBox">
25-
<h1>Avengers: Age of Ultron</h1>
26-
<img src="resources/img/thumbnails/age-of-ultron.jpg" alt="Age of Ultron Thumbnail" />
27-
28-
<h2>When Tony Stark (Robert Downey Jr.) jumpstarts a dormant peacekeeping program, things go terribly awry, forcing him, Thor (Chris Hemsworth), the Incredible Hulk (Mark Ruffalo) and the rest of the Avengers to reassemble. As the fate of Earth hangs in the balance, the team is put to the ultimate test as they battle Ultron (James Spader), a technological terror hell-bent on human extinction. Along the way, they encounter two mysterious and powerful newcomers, Pietro and Wanda Maximoff.</p>
29-
</div>
8+
<upcomingfilms></upcomingfilms>
309
</div>
3110

3211
<div class="col-xs-12 col-sm-4">

‎src/partials/upcomingfilms.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<h1>Upcoming Films</h1>
2+
<div data-ng-repeat="film in films | orderBy: 'date' | limitTo: 3" class="col-xs-12 col-sm-6 col-md-4 upcomingFilmsBox">
3+
<img src="{{film.thumbnail}}" alt="{{film.title}}" />
4+
<h1>{{film.title}}</h1>
5+
<h2>{{film.date}}</h2>
6+
7+
<h2>{{film.synopsis}}</h2>
8+
</div>

‎src/resources/css/mcu.css‎

Lines changed: 65 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/resources/css/styles.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
html, body {
2+
width: 100%;
3+
height: 100%;
4+
padding: 0;
5+
margin: 0; }
6+
7+
a {
8+
-webkit-transition: all 0.5s;
9+
transition: all 0.5s; }
10+
11+
.mainContainer {
12+
height: 100%; }
13+
14+
footer {
15+
background: black;
16+
padding: 20px 0;
17+
color: white;
18+
bottom: 0;
19+
height: 60px; }
20+
21+
.jumbotron {
22+
margin-bottom: 0%;
23+
margin-top: 50px;
24+
width: 100%;
25+
height: auto;
26+
min-height: 300px;
27+
color: white;
28+
text-shadow: black 0.3em 0.3em 0.3em;
29+
background: url("../img/marvel_masthead.png");
30+
background-color: #333; }
31+
.jumbotron h1 {
32+
width: 50%;
33+
margin: 10% 10px 10px 50%; }
34+
35+
.filmsContainer .upcomingFilmsBox {
36+
height: 900px;
37+
overflow: hidden;
38+
display: block;
39+
margin: 0 0 12px 0; }
40+
.filmsContainer .upcomingFilmsBox h1 {
41+
font-size: 2.55em; }
42+
.filmsContainer .upcomingFilmsBox h2 {
43+
font-size: 0.88em;
44+
line-height: 1.55em; }
45+
.filmsContainer .upcomingFilmsBox img {
46+
width: 100%;
47+
height: auto;
48+
overflow: hidden;
49+
padding: 4px;
50+
border: 1px solid #dadada; }
51+
.filmsContainer .upcomingFilmsBox:hover {
52+
cursor: pointer; }
53+
.filmsContainer .upcomingFilmsBox:hover img {
54+
-webkit-transition: all 0.5s;
55+
transition: all 0.5s;
56+
border-color: red; }
57+
.filmsContainer .upcomingFilmsBox:hover h1 {
58+
-webkit-transition: all 0.5s;
59+
transition: all 0.5s;
60+
color: red; }

‎src/resources/css/styles.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ footer {
3030
min-height: 300px;
3131
color: white;
3232
text-shadow: black 0.3em 0.3em 0.3em;
33-
background: url("../img/marvel_masterhead.png");
33+
background: url("../img/marvel_masthead.png");
3434
background-color: #333;
3535
h1 {
3636
width: 50%;
@@ -40,6 +40,10 @@ footer {
4040

4141
.filmsContainer {
4242
.upcomingFilmsBox {
43+
height: 900px;
44+
overflow: hidden;
45+
display: block;
46+
margin: 0 0 12px 0;
4347
h1 {
4448
font-size: 2.55em;
4549
}

‎src/resources/img/thumbnails/ant-man.jpg‎

24.3 KB
Loading

‎src/resources/img/thumbnails/blankthumbnail.png‎

1.75 KB
Loading

0 commit comments

Comments
 (0)