Added Google Analytics, removed footer, added movies per #2, added keyboard navigation per #3, improved mobile styles

pschfr · pschfr · commit 70cd947858c9 · 2017-07-07T16:44:05.000-04:00
diff --git a/harp.json b/harp.json
@@ -3,18 +3,23 @@
 		"title": "Watchlist",
 		"githubURL": "https://github.com/pschfr/watchlist",
 		"movies": {
+			"The Hills Have Eyes": { "watched": false },
+			"EuroTrip": { "watched": true },
+			"The Purge: Anarchy": { "watched": false },
+			"The Visit": { "watched": false },
+			"Edward Scissorhands": { "watched": false },
 			"Miss Peregrine's Home for Peculiar Children": { "watched": false },
-			"Fear.com": { "watched": false },
+			"FearDotcom": { "watched": false },
 			"The Belko Experiment": { "watched": true },
 			"Logan": { "watched": false },
 			"Get Out": { "watched": true },
 			"Beauty and the Beast": { "watched": false },
 			"The Animatrix": { "watched": true },
 			"The Matrix": { "watched": false },
-			"Oliver and Company": { "watched": false },
+			"Oliver and Company": { "watched": true },
 			"Dreamgirls": { "watched": false },
 			"The Five Heartbeats": { "watched": false },
-			"Blade": { "watched": false },
+			"Blade": { "watched": true },
 			"Cats Don't Dance": { "watched": true },
 			"The Boy in the Striped Pajamas": { "watched": false },
 			"The Lovely Bones": { "watched": false },
@@ -37,13 +42,13 @@
 			"Idiocracy": { "watched": true },
 			"Beetlejuice": { "watched": true },
 			"Step Brothers": { "watched": true },
-			"AI": { "watched": true },
+			"A.I. Artificial Intelligence": { "watched": true },
 			"Queen of the Damned": { "watched": true },
 			"Final Destination": { "watched": true },
 			"Ex Machina": { "watched": true },
 			"American Hustle": { "watched": true },
 			"Josie and the Pussycats": { "watched": true },
-			"Harold and Kumar": { "watched": true },
+			"Harold and Kumar Go to White Castle": { "watched": true },
 			"I, Robot": { "watched": true },
 			"Scary Movie": { "watched": true },
 			"Hostel II": { "watched": true },
diff --git a/public/_layout.jade b/public/_layout.jade
@@ -11,5 +11,6 @@ html(lang="en")
 		!= partial("_partials/_header")
 		!= yield
 		!= partial("_partials/_modal")
-		!= partial("_partials/_footer")
 		script(src=(environment == "production" ? "/watchlist/js/app.js" : "/js/app.js"))
+		if environment === "production"
+			!= partial("_partials/analytics")
diff --git a/public/_partials/_analytics.jade b/public/_partials/_analytics.jade
@@ -0,0 +1,8 @@
+script.
+	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+	ga('create', 'UA-76037357-3', 'auto');
+	ga('send', 'pageview');
diff --git a/public/_partials/_footer.jade b/public/_partials/_footer.jade
diff --git a/public/_partials/_header.jade b/public/_partials/_header.jade
@@ -1,9 +1,11 @@
-header
-	nav.navbar.navbar-inverse.navbar-fixed-top
-		.container-fluid
-			.row
-				.col-xs-12
-					h1 #{title}
-						span.pull-right
-							a(href="#{githubURL}" target="_blank")
-								img(src=(environment == 'production' ? '/watchlist/svg/github.svg' : 'svg/github.svg'))
+nav.navbar.navbar-inverse.navbar-fixed-top
+	.container-fluid
+		.row
+			.col-xs-12
+				h1 #{title}
+					span.pull-right
+						a(href="https://www.themoviedb.org/" title="Data provided by The Movie Database" target="_blank" tabindex="-1")
+							img(src=(environment == 'production' ? '/watchlist/svg/tmdb.svg' : 'svg/tmdb.svg'))
+						| 
+						a(href="#{githubURL}" title="View the source on GitHub" target="_blank" tabindex="-1")
+							img(src=(environment == 'production' ? '/watchlist/svg/github.svg' : 'svg/github.svg'))
diff --git a/public/js/app.coffee b/public/js/app.coffee
@@ -21,6 +21,11 @@ listMovies = () ->
 				localStorage.removeItem(event.target.name)
 				event.target.parentElement.title = ''
 		)
+		# Press `Enter` when focused on an input to open the modal
+		input.addEventListener('keyup', (event) ->
+			if (event.keyCode == 13)
+				document.querySelector('label[for="' + event.target.id + '"]').click()
+		)
 
 # Search The Movie Database - https://www.themoviedb.org/
 searchTMDb = (query) ->
@@ -37,29 +42,32 @@ searchTMDb = (query) ->
 				document.getElementById('details').innerHTML = results[0].overview
 				document.getElementById('rating').innerHTML = results[0].vote_average
 				# Format date properly
-				release_date = new Date(results[0].release_date)
+				release_date = new Date(results[0].release_date.replace(/-/g, "/"))
 				monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"]
 				document.getElementById('date').innerHTML = monthNames[release_date.getMonth()] + ' ' + release_date.getDate() + ', ' + release_date.getFullYear()
 				# Append poster
-				document.getElementById('poster').src = 'https://image.tmdb.org/t/p/w500/' + results[0].poster_path
+				document.getElementById('poster').src = 'https://image.tmdb.org/t/p/w500' + results[0].poster_path
 				# Background image
-				document.getElementById('panel').style.backgroundImage = 'url("https://image.tmdb.org/t/p/w1280/' + results[0].backdrop_path + '")'
+				document.getElementById('panel').style.backgroundImage = 'url("https://image.tmdb.org/t/p/w1280' + results[0].backdrop_path + '")'
 				# Finds genre based on ID
 				document.getElementById('genres').innerHTML = ''
 				for genreID in results[0].genre_ids
 					lookupGenre(genreID)
 				# Toggles overlay open
 				document.getElementById('overlay').classList.add('open')
+				document.body.style.overflow = 'hidden'
 			else
 				document.getElementById('title').innerHTML = query
 				document.getElementById('details').innerHTML = 'No results&hellip;'
 				document.getElementById('rating').innerHTML = ''
 				document.getElementById('date').innerHTML = ''
 				document.getElementById('poster').src = ''
 				document.getElementById('overlay').classList.add('open')
+				document.body.style.overflow = 'hidden'
 			# Bind click event to close overlay
 			document.getElementById('overlay').addEventListener('click', (event) ->
 				document.getElementById('overlay').classList.remove('open')
+				document.body.style.overflow = null
 			)
 	xhr.send(null)
 
@@ -82,5 +90,11 @@ findGenres = () ->
 lookupGenre = (genreID) ->
 	document.getElementById('genres').innerHTML += '<span class="genre">' + localStorage.getItem('genre' + genreID) + '</span>'
 
+# Press `Esc` to close modal
+document.onkeyup = (event) ->
+	if (event.keyCode == 27)
+		document.getElementById('overlay').classList.remove('open')
+
+# Run everything on load
 findGenres()
 listMovies()
diff --git a/public/main.sass b/public/main.sass
@@ -1,105 +1,112 @@
-@import 'sass/_bootstrap.scss'
 @import 'sass/_mixins_variables.sass'
-
-html
-	position: relative
-	min-height: 100%
+@import 'sass/_bootstrap.scss'
 
 body
-	font-family: $sans-font-family
-	color: $dark-color
-	margin-top: $footer-height * 2
-	margin-bottom: $footer-height
+	margin-top: 7rem
 
 .navbar
 	color: $light-color
-	margin-bottom: 0
+	h1
+		margin: 10px 0
+		font-size: $medium-margin
 	span
-		img
-			margin-top: -3px
-			height: 36px
-
-footer
-	position: absolute
-	bottom: 0
-	width: 100%
-	height: $footer-height
-	background-color: transparentize($light-color, 0.75)
-	p
-		margin-bottom: 0
-		line-height: $footer-height
-	a
-		color: inherit
+		a
+			margin-left: $tiny-margin
+			img
+				margin-top: -3px
+				height: $medium-margin
 
 .movie
-	position: relative
-	background-color: lighten($dark-color, 85%)
+	background-color: lighten($text-color, 85%)
 	display: inline-block
 	margin: 0 0 7px
 	padding: 4px 6px 6px 4px
 	border-radius: 8px
-	transition: all 0.15s
+	transition: all 0.25s
 	input[type="checkbox"], label
 		vertical-align: middle
 		cursor: pointer
 	input[type="checkbox"]
 		margin: 0 3px 0 0
 	label
-		display: inline
 		margin: 0
 		font-weight: normal
 		user-select: none
 	&[title="watched"]
 		opacity: 0.5
 
 #overlay
-	position: absolute
+	position: fixed
 	top: 0
-	left: 0
 	width: 100%
 	height: 100%
-	display: none
+	display: flex
+	align-items: center
+	visibility: hidden
+	opacity: 0
+	transition: all 0.75s 0.125s
 	#modal
-		flex: none
-		.panel-body
-			max-height: 450px
+		.panel
 			margin-bottom: 0
-			color: $light-color
-			background-size: cover
-			a
-				color: inherit
-			.overlay
-				position: fixed
-				top: 0
-				left: 0
-				width: 100%
-				height: 100%
-				background-color: transparentize($dark-color, 0.25)
-			#genres
-				margin-bottom: $medium-margin
-				.genre
-					background-color: darken($light-color, 0.5)
-					color: $dark-color
-					margin-right: $tiny-margin
-					padding: $tiny-margin
-					border-radius: $tiny-margin
-					font-weight: bold
-					text-transform: uppercase
-		img
-			max-height: 420px
-			width: 100%
-			object-fit: contain
-			&#star
-				width: 16px
-				margin-top: -$tiny-margin
-				margin-right: $tiny-margin
-		.row
-			display: flex
-			align-items: center
-			p
-				margin-bottom: $small-margin
-				&#details
+			.row
+				display: flex
+				align-items: center
+				p
+					margin-bottom: 0
+					&#details
+						margin-bottom: $medium-margin
+			.panel-body
+				max-height: 450px
+				color: $light-color
+				background-size: cover
+				#title
+					margin-top: 0
+				a
+					color: inherit
+				.overlay
+					position: fixed
+					top: 0
+					left: 0
+					width: 100%
+					height: 100%
+					background-color: transparentize($text-color, 0.25)
+				#genres
 					margin-bottom: $medium-margin
+					.genre
+						background-color: darken($light-color, 0.5)
+						color: $text-color
+						margin-right: $tiny-margin
+						padding: $tiny-margin
+						border-radius: $tiny-margin
+						font-weight: bold
+						text-transform: uppercase
+				img
+					max-height: 420px
+					width: 100%
+					object-fit: contain
+					&#star
+						width: 16px
+						margin-top: -$tiny-margin
+						margin-right: $tiny-margin
 	&.open
-		display: flex
-		align-items: center
+		visibility: visible
+		opacity: 1
+
+@include media-query($medium-width)
+	#overlay
+		#modal
+			width: 100%
+			.panel
+				.panel-body
+					max-height: none
+					img
+						max-height: 210px
+					#title
+						font-size: 24px
+						margin-top: 20px
+					#genres, #details
+						margin-bottom: $medium-margin / 2
+				.row
+					display: block
+					.col-xs-4, .col-xs-8
+						width: 100%
diff --git a/public/sass/_bootstrap.scss b/public/sass/_bootstrap.scss
@@ -1,4 +1,4 @@
-/*!
+/*
  * Bootstrap v3.3.7 (http://getbootstrap.com)
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
diff --git a/public/sass/_mixins_variables.sass b/public/sass/_mixins_variables.sass
@@ -6,10 +6,10 @@
 	@media screen and (max-width: $width)
 		@content
 
-$sans-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
-$serif-font-family: 'Palatino Linotype', 'Georgia', serif
+// See https://getbootstrap.com/customize/#less-variables
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
 
-$dark-color:  hsl(0, 0%, 05%)
+$text-color:  hsl(0, 0%, 05%)
 $light-color: hsl(0, 0%, 95%)
 $muted-color: #777
 
@@ -18,8 +18,6 @@ $medium-width: 768px
 $large-width:  992px
 $extra-width: 1200px
 
-$footer-height: 4rem
-
 $tiny-margin:    5px
 $small-margin:  15px
 $medium-margin: 30px
diff --git a/public/sass/bootstrap/_normalize.scss b/public/sass/bootstrap/_normalize.scss
@@ -1,4 +1,4 @@
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
 //
 // 1. Set default font family to sans-serif.
diff --git a/public/svg/tmdb.svg b/public/svg/tmdb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.02 174.22"><path fill="#fff" d="M2868.25,2996c15.29,0,25.63-10.34,25.63-25.63v-107.7c0-15.29-10.34-25.63-25.63-25.63H2759.5c-15.29,0-25.63,10.34-25.63,25.63v148.58L2747,2996h0V2862.67a12.5,12.5,0,0,1,12.48-12.48h108.75a12.5,12.5,0,0,1,12.48,12.48v107.7a12.5,12.5,0,0,1-12.48,12.48H2777L2763.86,2996l-0.08-.1" transform="translate(-2733.87 -2837.04)"/><path fill="#fff" d="M2790.55,2920.27h-12.32v41.36h12.32C2818.08,2961.63,2818.08,2920.27,2790.55,2920.27Zm0,33.09h-4v-24.82h4C2806.63,2928.54,2806.63,2953.35,2790.55,2953.35Z" transform="translate(-2733.87 -2837.04)"/><polygon fill="#fff" points="54.28 75.41 62.55 75.41 62.55 42.32 72.84 42.32 72.84 34.11 43.98 34.11 43.98 42.32 54.28 42.32 54.28 75.41"/><polygon fill="#fff" points="94.98 52.27 80.67 34.11 78.01 34.11 78.01 76.1 86.4 76.1 86.4 53.02 94.98 64.13 103.57 53.02 103.51 76.1 111.9 76.1 111.9 34.11 109.29 34.11 94.98 52.27"/><path fill="#fff" d="M2842.79,2940.95c2.6-1.79,3.7-5,3.82-8.16,0.17-7.29-4.4-12.55-11.74-12.55H2818.5v41.42h16.37a12.3,12.3,0,0,0,12.2-12.44A10,10,0,0,0,2842.79,2940.95Zm-16-12.44h7.35c2.37,0,3.82,1.85,3.82,4.16a3.87,3.87,0,0,1-3.82,4.17h-7.35v-8.33Zm7.35,24.87h-7.35v-8.27h7.35a4.06,4.06,0,0,1,4.16,4.11A4.11,4.11,0,0,1,2834.18,2953.38Z" transform="translate(-2733.87 -2837.04)"/></svg>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/*!`
	`1`	`+/*`
`2`	`2`	`* Bootstrap v3.3.7 (http://getbootstrap.com)`
`3`	`3`	`* Copyright 2011-2016 Twitter, Inc.`
`4`	`4`	`* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/! normalize.css v3.0.3 \| MIT License \| github.com/necolas/normalize.css /`
	`1`	`+/* normalize.css v3.0.3 \| MIT License \| github.com/necolas/normalize.css */`
`2`	`2`
`3`	`3`	`//`
`4`	`4`	`// 1. Set default font family to sans-serif.`