CodeMyUI/film-reviewer.markdown

## film-reviewer.markdown

      
    Raw
  

              film-reviewer.markdown
            
          
    Film Reviewer

Hey guys! I decided to create this simple Film Review UI Concept! I hope you like it! Made using Angular JS! I got my inspiration from this Dribble shot - https://dribbble.com/shots/2335651-Hotel-profile-widget
A Pen by Jack Thomson on CodePen.
License.

  
## index.html
<html ng-app='filmReviewer' ng-cloak='true'>
  <div class='container'>
    <div class='card' ng-controller='filmController as vm'>
      <div class='card_controls'>
        <i class='material-icons' ng-click='vm.next()'>keyboard_arrow_right</i>
        <i class='material-icons' ng-click='vm.prev()'>keyboard_arrow_left</i>
        <div class='rating fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'>
          <p>{{film.rating}}</p>
        </div>
      </div>
      <div class='card_sub_information top-to-bottom' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'>
        <h1>{{film.title}}</h1>
        <p>{{film.genre}}</p>
        <button ng-if='film.booking'>Book {{film.title}}</button>
        <button ng-if='!film.booking'>Buy {{film.title}}</button>
      </div>
      <div class='card_overlay fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'>
        <div class="img-container">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{film.image}}.jpg" />
        </div>
        <div class='card_overlay__information fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films'>
          <h1>{{film.title}}</h1>
          <p>{{film.information}}</p>
          <i class='material-icons'>query_builder</i>
          <span>{{film.length}}</span>
        </div>
      </div>
    </div>
  </div>
</html>

## script.js
(function() {
  'use strict'

  angular
    .module('filmReviewer', ['ngAnimate'])
    .controller('filmController', filmController)

  function filmController() {
    var vm = this,
      index;

    vm.id = 1;
    vm.films = [{
      id: 1,
      title: 'Ex Machina',
      information: 'A young programmer is selected to participate in a ground-breaking experiment in synthetic intelligence by evaluating the human qualities of a breath-taking humanoid A.I',
      rating: 9.8,
      genre: 'Sci-fi',
      length: '1h 50min',
      image: 'ex-machina',
      booking: false
    }, {
      id: 2,
      title: 'Divergent',
      information: 'In a world divided by factions based on virtues, Tris learns shes Divergent and wont fit in. When she discovers a plot to destroy Divergents, Tris and the mysterious Four must find out what makes Divergents dangerous before its too late',
      rating: 7.9,
      genre: 'Adventure',
      length: '2h 20min',
      image: 'divergent',
      booking: true
    }, {
      id: 3,
      title: 'Deadpool',
      information: 'A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool',
      rating: 9.5,
      genre: 'Action',
      length: '1h 48min',
      image: 'deadpool',
      booking: true
    }];
    vm.next = next;
    vm.prev = prev;

    function next() {
      if (vm.id < vm.films.length) {
        vm.id++;
      } else {
        return false;
      }
    }

    function prev() {
      if (vm.id == 1) {
        return false;
      } else {
        vm.id--;
      }
    }

  }

})();

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>

## style.scss
// General Variables
$bg-color: #D8DBE2;
$accent-color: #58A4B0;
$primary-color: #373F51;
$secondary-color: #FFF;
$easing: cubic-bezier(0.680, -0.550, 0.265, 1.550) 1s 0s;

// Card Variables
$c-width: 30em;
$c-height: $c-width - 10;
$c-shadow: 10px 10px 20px darken($bg-color, 9%);

* {
  box-sizing: border-box;
  margin: 0; padding :0;
  font-family: 'Mallanna', sans-serif;
}

html {
  overflow: hidden;
}

body {
  background: $bg-color;
  transform:translate3d(0,0,0);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5em;
  margin-left: 5em;
  height: 100vh;
}
.card {
  background: $secondary-color;
  width: $c-width;
  height: $c-height;
  position: relative;
  box-shadow: $c-shadow;
  &_controls {
    position: absolute;
    right: 0;
    i {
      background: $primary-color;
      color: #FFF;
      font-size: 2.4em;
      width: 2.09em;
      height: 2.05em;
      line-height: 2em;
      text-align: center;
      display: block;
      cursor: pointer;
      font-style: normal;
    }
    .rating {
      background: $accent-color;
      color: #FFF;
      font-size: 2.4em;
      width: 2.09em;
      height: 2.05em;
      line-height: 2em;
      overflow: hidden;
      position: absolute;
      text-align: center;
      cursor: pointer;
      font-style: normal;
      cursor: default;
      p {
        font-size: 0.7em;
      }
    }
  }
  &_sub_information {
    position: absolute;
    bottom: 0;
    height: 26.4%;
    width: 100%;
    padding: 1em;
    h1 {
      color: $primary-color;
      font-size: 1.2em;
    }
    p {
      margin: -0.8em 0;
      color: lighten($primary-color, 12%);
    }
    button {
      background: $accent-color;
      color: #FFF;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.6em;
      border: none;
      padding: 1em 1.5em;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      margin: 2.5em 1.7em;
      outline: none;
    }
  }
  &_overlay {
    background-size: cover;
    position: absolute;
    width: $c-width;
    height: $c-height;
    transform: translateX($c-width / -6) translateY($c-height / -3.8);
    .img-container {
      display: inline-block;
      overflow: hidden;
      position: absolute;
      z-index: -1;
      height: $c-height;
    }
    img {
      display: block;
      width: 100%;;
      height: 100%;
      object-fit: cover;
      animation: zoom ease-in 20s forwards;
    }
    &__information {
      background: rgba(0, 0, 0, 0.5);
      height: 100%;
      padding: 1em;
      z-index: 1;
      h1, p, i, span {
        color: rgba(255, 255, 255, 1);
      }
      i {
        margin: 0.9em 0;
        border-radius: 100%;
        cursor: default;
        font-size: 1.4em;
        vertical-align: middle;
      }
      span {
        font-size: 0.9em;
      }
    }
  }
}

// Animations
@keyframes rock {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

// Fade In
.fade-in.ng-enter, .fade-in.ng-leave {
  transition: opacity $easing;
}

.fade-in.ng-enter,
.fade-in.ng-leave.ng-leave-active {
  opacity: 0;
}

.fade-in.ng-leave,
.fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}

// Top To Bottom
.top-to-bottom.ng-enter, .top-to-bottom.ng-leave {
  transition: all $easing;
}

.top-to-bottom.ng-enter,
.top-to-bottom.ng-leave.ng-leave-active {
  opacity: 0;
  transform: translateY(1em);
}

.top-to-bottom.ng-leave,
.top-to-bottom.ng-enter.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
}
	<html ng-app='filmReviewer' ng-cloak='true'>
	<div class='container'>
	<div class='card' ng-controller='filmController as vm'>
	<div class='card_controls'>
	<i class='material-icons' ng-click='vm.next()'>keyboard_arrow_right</i>
	<i class='material-icons' ng-click='vm.prev()'>keyboard_arrow_left</i>
	<div class='rating fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'>
	<p>{{film.rating}}</p>
	</div>
	</div>
	<div class='card_sub_information top-to-bottom' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'>
	<h1>{{film.title}}</h1>
	<p>{{film.genre}}</p>
	<button ng-if='film.booking'>Book {{film.title}}</button>
	<button ng-if='!film.booking'>Buy {{film.title}}</button>
	</div>
	<div class='card_overlay fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films track by $index'>
	<div class="img-container">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/{{film.image}}.jpg" />
	</div>
	<div class='card_overlay__information fade-in' ng-if='vm.id == film.id' ng-repeat='film in vm.films'>
	<h1>{{film.title}}</h1>
	<p>{{film.information}}</p>
	<i class='material-icons'>query_builder</i>
	<span>{{film.length}}</span>
	</div>
	</div>
	</div>
	</div>
	</html>
	(function() {
	'use strict'

	angular
	.module('filmReviewer', ['ngAnimate'])
	.controller('filmController', filmController)

	function filmController() {
	var vm = this,
	index;

	vm.id = 1;
	vm.films = [{
	id: 1,
	title: 'Ex Machina',
	information: 'A young programmer is selected to participate in a ground-breaking experiment in synthetic intelligence by evaluating the human qualities of a breath-taking humanoid A.I',
	rating: 9.8,
	genre: 'Sci-fi',
	length: '1h 50min',
	image: 'ex-machina',
	booking: false
	}, {
	id: 2,
	title: 'Divergent',
	information: 'In a world divided by factions based on virtues, Tris learns shes Divergent and wont fit in. When she discovers a plot to destroy Divergents, Tris and the mysterious Four must find out what makes Divergents dangerous before its too late',
	rating: 7.9,
	genre: 'Adventure',
	length: '2h 20min',
	image: 'divergent',
	booking: true
	}, {
	id: 3,
	title: 'Deadpool',
	information: 'A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool',
	rating: 9.5,
	genre: 'Action',
	length: '1h 48min',
	image: 'deadpool',
	booking: true
	}];
	vm.next = next;
	vm.prev = prev;

	function next() {
	if (vm.id < vm.films.length) {
	vm.id++;
	} else {
	return false;
	}
	}

	function prev() {
	if (vm.id == 1) {
	return false;
	} else {
	vm.id--;
	}
	}

	}

	})();
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-animate.min.js"></script>
	// General Variables
	$bg-color: #D8DBE2;
	$accent-color: #58A4B0;
	$primary-color: #373F51;
	$secondary-color: #FFF;
	$easing: cubic-bezier(0.680, -0.550, 0.265, 1.550) 1s 0s;

	// Card Variables
	$c-width: 30em;
	$c-height: $c-width - 10;
	$c-shadow: 10px 10px 20px darken($bg-color, 9%);

	* {
	box-sizing: border-box;
	margin: 0; padding :0;
	font-family: 'Mallanna', sans-serif;
	}

	html {
	overflow: hidden;
	}

	body {
	background: $bg-color;
	transform:translate3d(0,0,0);
	}

	.container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2.5em;
	margin-left: 5em;
	height: 100vh;
	}
	.card {
	background: $secondary-color;
	width: $c-width;
	height: $c-height;
	position: relative;
	box-shadow: $c-shadow;
	&_controls {
	position: absolute;
	right: 0;
	i {
	background: $primary-color;
	color: #FFF;
	font-size: 2.4em;
	width: 2.09em;
	height: 2.05em;
	line-height: 2em;
	text-align: center;
	display: block;
	cursor: pointer;
	font-style: normal;
	}
	.rating {
	background: $accent-color;
	color: #FFF;
	font-size: 2.4em;
	width: 2.09em;
	height: 2.05em;
	line-height: 2em;
	overflow: hidden;
	position: absolute;
	text-align: center;
	cursor: pointer;
	font-style: normal;
	cursor: default;
	p {
	font-size: 0.7em;
	}
	}
	}
	&_sub_information {
	position: absolute;
	bottom: 0;
	height: 26.4%;
	width: 100%;
	padding: 1em;
	h1 {
	color: $primary-color;
	font-size: 1.2em;
	}
	p {
	margin: -0.8em 0;
	color: lighten($primary-color, 12%);
	}
	button {
	background: $accent-color;
	color: #FFF;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.6em;
	border: none;
	padding: 1em 1.5em;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	margin: 2.5em 1.7em;
	outline: none;
	}
	}
	&_overlay {
	background-size: cover;
	position: absolute;
	width: $c-width;
	height: $c-height;
	transform: translateX($c-width / -6) translateY($c-height / -3.8);
	.img-container {
	display: inline-block;
	overflow: hidden;
	position: absolute;
	z-index: -1;
	height: $c-height;
	}
	img {
	display: block;
	width: 100%;;
	height: 100%;
	object-fit: cover;
	animation: zoom ease-in 20s forwards;
	}
	&__information {
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	padding: 1em;
	z-index: 1;
	h1, p, i, span {
	color: rgba(255, 255, 255, 1);
	}
	i {
	margin: 0.9em 0;
	border-radius: 100%;
	cursor: default;
	font-size: 1.4em;
	vertical-align: middle;
	}
	span {
	font-size: 0.9em;
	}
	}
	}
	}

	// Animations
	@keyframes rock {
	0% {
	transform: rotate(0deg);
	}
	50% {
	transform: rotate(15deg);
	}
	100% {
	transform: rotate(0deg);
	}
	}

	@keyframes zoom {
	from {
	transform: scale(1);
	}
	to {
	transform: scale(1.5);
	}
	}

	// Fade In
	.fade-in.ng-enter, .fade-in.ng-leave {
	transition: opacity $easing;
	}

	.fade-in.ng-enter,
	.fade-in.ng-leave.ng-leave-active {
	opacity: 0;
	}

	.fade-in.ng-leave,
	.fade-in.ng-enter.ng-enter-active {
	opacity: 1;
	}

	// Top To Bottom
	.top-to-bottom.ng-enter, .top-to-bottom.ng-leave {
	transition: all $easing;
	}

	.top-to-bottom.ng-enter,
	.top-to-bottom.ng-leave.ng-leave-active {
	opacity: 0;
	transform: translateY(1em);
	}

	.top-to-bottom.ng-leave,
	.top-to-bottom.ng-enter.ng-enter-active {
	opacity: 1;
	transform: translateY(0);
	}