<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/philiphultgren/pen/ryrXRd?depth=everything&order=popularity&page=63&q=movie&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">.ease, .menu, a.menu-transform.active span.line-sm:before, a.menu-transform.active span.line-md:before, .cd-timeline-content span.edit, .edit-select {
-webkit-transition: 300ms ease-in-out all;
transition: 300ms ease-in-out all;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0px;
color: #323232;
background: #f7f5ec;
}
h1 {
color: #323232;
text-transform: uppercase;
font-size: 20px;
line-height: 50px;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: 700px;
background: rgba(0, 0, 0, 0.5);
height: 100%;
display: block;
z-index: 100;
content: " ";
}
.header {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
width: 100%;
z-index: 50;
background-color: #ff7058;
height: 60px;
border-bottom: 2px solid #f1543f;
color: #ff7058;
}
.menu {
-webkit-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px -2px rgba(0, 0, 0, 0.3);
width: 200px;
position: absolute;
left: -300px;
top: 0px;
z-index: 200;
background: white;
border-right: 2px solid #ff7058;
}
.menu.active {
left: 0px;
}
span.forward {
bottom: 0px;
}
span.back {
top: 60px;
}
span.forward, span.back {
display: none;
width: 100%;
position: absolute;
right: 0px;
height: 50px;
background: #ff7058;
}
span.forward.active, span.back.active {
display: block;
}
span.forward:hover i, span.back:hover i {
background: #f1543f;
}
span.forward i, span.back i {
line-height: 50px;
color: white;
font-size: 30px;
width: 100%;
background: #ff7058;
text-align: center;
display: block;
cursor: pointer;
margin: 0 auto;
}
ul {
margin: 0px;
padding: 0px;
height: 700px;
}
ul li {
list-style: none;
display: block;
}
ul li i {
padding-right: 10px;
}
ul li a {
display: block;
cursor: pointer;
text-align: left;
padding: 10px 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
border-radius: 4px;
color: #f1543f;
text-decoration: none !important;
display: block;
text-align: center;
border: 2px solid white;
background-color: white;
}
ul li a:hover {
border: 2px solid #f1543f;
color: #f1543f;
}
.btn-update, .menu-btn {
position: absolute !important;
left: 320px;
top: 15px;
z-index: 300;
height: 700px;
}
.btn-update.active, .active.menu-btn {
left: 215px;
}
@-webkit-keyframes remove-line-after {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
100% {
width: 0px;
top: -20px;
}
}
@-moz-keyframes remove-line-after {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
100% {
width: 0px;
top: -20px;
}
}
@-o-keyframes remove-line-after {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
100% {
width: 0px;
top: -20px;
}
}
@keyframes remove-line-after {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
100% {
width: 0px;
top: -20px;
}
}
@-webkit-keyframes remove-line-before {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
75% {
width: 10px;
top: 0px;
}
100% {
width: 0px;
top: -20px;
}
}
@-moz-keyframes remove-line-before {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
75% {
width: 10px;
top: 0px;
}
100% {
width: 0px;
top: -20px;
}
}
@-o-keyframes remove-line-before {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
75% {
width: 10px;
top: 0px;
}
100% {
width: 0px;
top: -20px;
}
}
@keyframes remove-line-before {
0% {
width: 13.33333px;
top: 0px;
}
50% {
width: 20px;
top: -7px;
}
75% {
width: 10px;
top: 0px;
}
100% {
width: 0px;
top: -20px;
}
}
.menu-btn {
position: relative;
top: 16px;
display: inline-block;
float: left;
position: relative;
width: 44px;
height: 28.66667px;
cursor: pointer;
padding: 0;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
background-color: #FFFFFF;
width: 44px;
height: 2px;
}
.menu-btn span {
position: relative;
display: inline-block;
float: left;
margin-top: 13.33333px;
}
.menu-btn span:before, .menu-btn span:after {
content: "";
position: absolute;
left: 0;
}
.menu-btn span:before {
top: -13.33333px;
}
.menu-btn span:after {
top: 13.33333px;
}
.menu-btn.active span {
background-color: transparent;
}
.menu-btn.active span:before, .menu-btn.active span:after {
top: 0;
}
.menu-btn.active span:before {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
}
.menu-btn.active span:after {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
}
/* Ninja Button Active */
.hide {
display: none;
}
.show {
display: block;
}
.transform-container {
width: 60px;
height: 60px;
background: transparent;
margin: 0px;
padding: 0px;
position: absolute;
right: 0px;
display: block;
cursor: pointer;
}
a.menu-transform {
position: absolute;
top: 0px;
right: 0px;
width: 40px;
height: 40px;
cursor: pointer;
display: block;
}
a.menu-transform.active span.line-sm:before {
right: 0px;
top: 0px;
width: 28px;
height: 2px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
}
a.menu-transform.active span.line-md:before {
right: 0px;
top: 0px;
width: 28px;
height: 2px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
}
a.menu-transform.active span.line-lg {
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
opacity: 0;
}
a.menu-transform span.line-sm:before, a.menu-transform span.line-md:before, a.menu-transform span.line-lg:before {
content: "";
position: absolute;
right: 0;
background: white;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
a.menu-transform span.line-sm:before {
right: 0px;
top: 10px;
width: 25px;
height: 2px;
}
a.menu-transform span.line-md:before {
right: 0px;
top: -10px;
width: 28px;
height: 2px;
}
a.menu-transform span.line-lg:before {
opacity: 1;
width: 32px;
height: 2px;
right: 0px;
top: 0px;
}
.side-bar {
overflow: hidden;
position: fixed;
background: #ff7058;
right: 0px;
z-index: 9999;
top: 80px;
max-height: 300px;
min-height: 300px;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
height: 200px;
width: 60px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.side-bar.active {
min-height: 500px;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
}
.side-bar .menu-transform {
top: 30px;
right: 15px;
}
.side-container {
overflow: hidden;
position: absolute;
top: 100px;
right: 0px;
}
.side-items {
color: #fff;
position: relative;
top: 0px;
overflow: hidden;
padding-left: 13px !important;
padding-right: 13px !important;
}
.side-items > .item {
cursor: pointer;
float: left;
position: relative;
padding: 4px;
padding-top: 15px;
}
.side-items > .item > span {
border: 1px solid #fff;
border-radius: 50%;
background: white;
display: block;
position: relative;
font-size: 80%;
width: 2em;
line-height: 2em;
height: 2em;
text-align: center;
}
.side-items > .item.-selected {
cursor: pointer;
float: left;
position: relative;
padding: 4px;
padding-top: 15px;
}
.side-items > .item.-selected > span {
border-radius: 50%;
background: #f1543f;
display: block;
position: relative;
}
.side-items > .item.-completed > span {
background: #50D2C2;
border-color: #50D2C2;
}
.side-items > .item.-completed.-selected {
border-color: #f1543f;
}
.side-items > .item + .item:before {
background: #fff;
content: " ";
display: block;
height: 30px;
left: 16px;
top: -3px;
width: 1px;
display: block;
position: absolute;
}
.side-items > .item.-completed + .item:before,
.side-items > .item + .item.-completed:before {
background: #50D2C2;
}
.cd-container {
width: 90%;
max-width: 1170px;
margin: 0 auto;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
#cd-timeline {
position: relative;
padding: 2em 0;
margin-top: 2em;
margin-bottom: 2em;
}
#cd-timeline::before {
/* this is the vertical line */
content: '';
position: absolute;
top: 0;
left: 18px;
height: 100%;
width: 4px;
background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
#cd-timeline {
margin-top: 3em;
margin-bottom: 3em;
}
#cd-timeline::before {
left: 50%;
margin-left: -2px;
}
}
.cd-timeline-block {
float: left;
width: 100%;
transition: transform 0.5s;
position: relative;
margin: 2em 0;
}
.cd-timeline-block:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-block {
margin: 4em 0;
}
.cd-timeline-block:first-child {
margin-top: 0;
}
.cd-timeline-block:last-child {
margin-bottom: 0;
}
}
.cd-timeline-img {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
}
span.icon {
padding: 14px 16px;
height: 50px;
width: 50px;
display: block;
}
span.icon .fa {
color: white;
}
.cd-timeline-img.cd-picture {
background: #f1543f;
}
.cd-timeline-img.cd-movie {
background: #c03b44;
}
.cd-timeline-img.cd-location {
background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
.cd-timeline-img {
left: 50%;
margin-left: -25px;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.cssanimations .cd-timeline-img.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-img.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-1 0.6s;
-moz-animation: cd-bounce-1 0.6s;
animation: cd-bounce-1 0.6s;
}
}
@-webkit-keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes cd-bounce-1 {
0% {
opacity: 0;
-moz-transform: scale(0.5);
}
60% {
opacity: 1;
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
}
}
@keyframes cd-bounce-1 {
0% {
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.cd-timeline-content {
position: relative;
margin-left: 60px;
background: white;
border-radius: 0.25em;
padding: 1em;
transition: transform 0.5s;
box-shadow: 0 3px 0 #d7e4ed;
}
.cd-timeline-content:after {
content: "";
display: table;
clear: both;
}
.cd-timeline-content h2 {
color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 13px;
font-size: 0.8125rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
display: inline-block;
}
.cd-timeline-content p {
margin: 1em 0;
line-height: 1.6;
}
.cd-timeline-content .cd-read-more {
float: right;
padding: .8em 1em;
background: #acb7c0;
text-decoration: none;
color: white;
border-radius: 0.25em;
}
.cd-timeline-content .cd-read-more:hover {
background: #6e8191;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
background-color: #bac4cb;
}
.cd-timeline-content .cd-date {
float: left;
padding: .8em 0;
opacity: .7;
}
.cd-timeline-content::before {
content: '';
position: absolute;
top: 16px;
right: 100%;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
.cd-timeline-content h2 {
font-size: 20px;
font-size: 1.25rem;
}
.cd-timeline-content p {
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
font-size: 14px;
font-size: 0.875rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-timeline-content {
margin-left: 0;
padding: 1.6em;
width: 45%;
}
.cd-timeline-content::before {
top: 24px;
left: 100%;
border-color: transparent;
border-left-color: white;
}
.cd-timeline-content .cd-read-more {
float: left;
}
.cd-timeline-content .cd-date {
position: absolute;
width: 100%;
left: 122%;
top: 6px;
font-size: 16px;
font-size: 1rem;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content::before {
top: 24px;
left: auto;
right: 100%;
border-color: transparent;
border-right-color: white;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
float: right;
}
.cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
left: auto;
right: 122%;
text-align: right;
}
.cssanimations .cd-timeline-content.is-hidden {
visibility: hidden;
}
.cssanimations .cd-timeline-content.bounce-in {
visibility: visible;
-webkit-animation: cd-bounce-2 0.6s;
-moz-animation: cd-bounce-2 0.6s;
animation: cd-bounce-2 0.6s;
}
}
@media only screen and (min-width: 1170px) {
/* inverse bounce effect on even content blocks */
.cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
-webkit-animation: cd-bounce-2-inverse 0.6s;
-moz-animation: cd-bounce-2-inverse 0.6s;
animation: cd-bounce-2-inverse 0.6s;
}
}
@-webkit-keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2 {
0% {
opacity: 0;
-moz-transform: translateX(-100px);
}
60% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2 {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
-o-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-ms-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-moz-transform: translateX(100px);
}
60% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
-moz-transform: translateX(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
-moz-transform: translateX(100px);
-ms-transform: translateX(100px);
-o-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
}
.cd-timeline-content:hover span.edit {
opacity: 1;
}
.cd-timeline-content span.edit {
-webkit-animation-delay: 2s;
animation-delay: 2s;
opacity: 0;
position: absolute;
right: 20px;
display: block;
padding: 7px 10px;
background: #6e8191;
border-radius: 3px;
text-align: center;
line-height: 20px;
color: white;
cursor: pointer;
}
.edit-control {
display: block;
padding: 7px 15px;
border-radius: 3px;
color: white;
transition: all .2s ease-in-out;
}
.edit-control:hover {
color: white;
}
.edit-select {
-webkit-box-shadow: -2px 3px 11px 1px rgba(0, 0, 0, 0.22);
-moz-box-shadow: -2px 3px 11px 1px rgba(0, 0, 0, 0.22);
box-shadow: -2px 3px 11px 1px rgba(0, 0, 0, 0.22);
/* add extends */
/* set opacity */
opacity: 0;
/* set display */
display: none;
/* set color */
background: white;
color: #424242;
/* set position */
z-index: 9999;
position: absolute;
top: -50px;
left: 320px;
float: left;
cursor: pointer;
text-align: left;
padding: 15px;
min-width: 180px;
border-radius: 4px;
line-height: 20px;
}
.edit-select ul {
padding: 0px;
list-style: none;
margin: 0px;
display: inline-block;
}
.edit-select ul li {
border-radius: 3px;
background: #fff;
text-decoration: none;
display: inline-block;
margin-left: 5px;
}
.edit-select ul li.selected {
transform: scale(1.2);
-webkit-box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 0.08);
box-shadow: 2px 0px 6px 0px rgba(0, 0, 0, 0.08);
border-width: 0;
}
.edit-select:before {
content: "";
position: absolute;
bottom: -10px;
left: 80px;
width: 0px;
height: 0px;
border-width: 12px 15px 0px 12px;
border-style: solid;
border-color: #fff transparent transparent transparent;
z-index: 1;
}
.slider-title {
color: red;
font-weight: 600;
text-align: center;
}
.icon__unique {
vertical-align: middle;
font-size: 40px;
}
.icon__container {
border: 1px solid #ccc;
border-radius: 6px;
display: inline-block;
margin: 60px;
padding: 10px;
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.9/react.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.0/react-redux.js'></script><script src='https://unpkg.com/react-router-dom/umd/react-router-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js'></script><script src='https://www.gstatic.com/firebasejs/3.0.5/firebase.js'></script>
<script >'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _ReactRedux = ReactRedux;
var Provider = _ReactRedux.Provider;
var _Redux = Redux;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var combineReducers = _Redux.combineReducers;
var _ReactRouterDOM = ReactRouterDOM;
var BrowserRouter = _ReactRouterDOM.BrowserRouter;
var Route = _ReactRouterDOM.Route;
var Link = _ReactRouterDOM.Link;
var Switch = _ReactRouterDOM.Switch;
var cards = [{ index: 1, title: "React", date: 'April 30 2017', selected: false, text: 'Example Text', link: '#0' }, { index: 2, title: "SCSS", date: 'April 29 2017', selected: false, text: 'Update text', link: '#0' }, { index: 3, title: "Javascript", date: 'April 28 2017', selected: false, text: 'More text', link: '#0' }, { index: 4, title: "Javascript", date: 'April 27 2017', selected: false, text: 'More text', link: '#0' }];
var HeaderBar = function (_React$Component) {
_inherits(HeaderBar, _React$Component);
function HeaderBar() {
_classCallCheck(this, HeaderBar);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
HeaderBar.prototype.render = function render() {
return React.createElement(
'div',
{ className: 'header' },
this.props.children
);
};
return HeaderBar;
}(React.Component);
var CardGen = function (_React$Component2) {
_inherits(CardGen, _React$Component2);
function CardGen() {
_classCallCheck(this, CardGen);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
CardGen.prototype.renderCards = function renderCards() {
console.log('this is card size:', this.props.cards.length, 'this is selected item:', this.props.selectedItem);
var style = {
marginTop: 100,
transform: 'translate(0, -' + 100 / this.props.cards.length * this.props.selectedItem + '%)',
height: 'calc( ' + 100 * this.props.cards.length + '% - ' + 3 * this.props.cards.length + 'em)'
};
var className = "cd-timeline-block";
return this.props.cards.map(function (card, i) {
return React.createElement(
'div',
{ key: i, style: style, className: className },
React.createElement(
'div',
{ className: 'cd-timeline-img cd-picture' },
React.createElement(
'span',
{ className: 'icon' },
React.createElement('i', { className: 'fa fa-code' })
)
),
React.createElement(
'span',
{ style: { display: 'none' }, className: 'icon__container' },
React.createElement('i', { className: 'fa fa-code icon__unique' })
),
React.createElement(
'div',
{ className: 'cd-timeline-content' },
React.createElement(
'h2',
null,
card.title
),
React.createElement(
'p',
null,
card.text
),
React.createElement(
'a',
{ href: card.link, className: 'cd-read-more' },
'Read more'
),
React.createElement(
'span',
{ className: 'cd-date' },
card.date
)
)
);
});
};
CardGen.prototype.render = function render() {
var style = {
transform: 'translate(0, -' + 100 / this.props.cards.length * this.props.selectedItem + '%)',
height: 'calc( ' + 100 * this.props.cards.length + '% - ' + 3 * this.props.cards.length + 'em)'
};
return React.createElement(
'section',
{ id: 'cd-timeline', style: style, className: 'cd-container' },
this.renderCards()
);
};
return CardGen;
}(React.Component);
var SideMenu = function (_React$Component3) {
_inherits(SideMenu, _React$Component3);
function SideMenu(props) {
_classCallCheck(this, SideMenu);
var _this3 = _possibleConstructorReturn(this, _React$Component3.call(this, props));
_this3.state = {
sideMenu: false,
selected: 0
};
return _this3;
}
SideMenu.prototype.onPressSideMenu = function onPressSideMenu() {
this.setState({
sideMenu: !this.state.sideMenu
});
};
SideMenu.prototype.renderSideMenu = function renderSideMenu() {
var activeMenu = 'menu-transform';
if (this.state.sideMenu == true) {
activeMenu += ' active';
} else {
activeMenu = 'menu-transform';
}
return React.createElement(
'div',
{
className: 'transform-container',
onClick: this.onPressSideMenu.bind(this) },
React.createElement(
'a',
{ className: activeMenu },
React.createElement('span', { className: 'line-md' }),
React.createElement('span', { className: 'line-lg' }),
React.createElement('span', { className: 'line-sm' })
)
);
};
SideMenu.prototype.renderItems = function renderItems() {
var _this4 = this;
var data = this.props.data;
var className = 'item';
return data.map(function (item, index) {
if (_this4.props.selectedItem === index) {
className += " -selected";
} else {
className = 'item';
}
return React.createElement(
'li',
{
key: index,
className: className,
onClick: function onClick() {
return _this4.props.onPressItem(item, index);
} },
React.createElement(
'span',
null,
item.index
)
);
});
};
SideMenu.prototype.renderButtons = function renderButtons() {
var selected = this.state.selected;
var data = this.props.data;
var classBack = 'back';
if (selected < data.length) {
classBack += ' active';
} else {
classBack = 'back';
}
var classForward = 'forward';
if (selected >= data.length) {
classForward = 'forward';
} else {
classForward = 'forward active';
}
return React.createElement(
'div',
null,
React.createElement(
'span',
{ className: classBack, onClick: this.handleBack.bind(this) },
React.createElement('i', { className: 'fa fa-angle-up', 'aria-hidden': 'true' })
),
React.createElement(
'span',
{ className: classForward, onClick: this.handleForward.bind(this) },
React.createElement('i', { className: 'fa fa-angle-down', 'aria-hidden': 'true' })
)
);
};
SideMenu.prototype.handleForward = function handleForward() {
this.setState({
selected: this.state.selected += 1
});
var selected = this.state.selected;
var data = this.props.data;
};
SideMenu.prototype.handleBack = function handleBack() {
this.setState({
selected: this.state.selected -= 1
});
var selected = this.state.selected;
var data = this.props.data;
var increment = 50;
var classDown = {
top: '+`{increment}`'
};
};
SideMenu.prototype.render = function render() {
var activeSideBar = 'side-bar';
if (this.state.sideMenu == true) {
activeSideBar += ' active';
} else {
activeSideBar = 'side-bar';
}
return React.createElement(
'div',
{ className: activeSideBar },
this.renderSideMenu(),
React.createElement(
'div',
{ className: 'side-container' },
React.createElement(
'ul',
{ className: 'side-items' },
this.renderItems()
)
),
this.renderButtons()
);
};
return SideMenu;
}(React.Component);
var Menu = function (_React$Component4) {
_inherits(Menu, _React$Component4);
function Menu(props) {
_classCallCheck(this, Menu);
var _this5 = _possibleConstructorReturn(this, _React$Component4.call(this, props));
_this5.state = {
menu: _this5.props.menu
};
return _this5;
}
Menu.prototype.onPressLogin = function onPressLogin() {
this.props.history.push('/home');
};
Menu.prototype.renderOverlay = function renderOverlay() {
return React.createElement('div', {
onClick: this.props.onPressOverlay.bind(this),
className: this.state.menu && this.state.menu === true ? 'overlay' : 'hide' });
};
Menu.prototype.renderMenu = function renderMenu() {
var className = "menu-btn";
if (this.state.menu === true) {
className += " active";
}
return React.createElement(
'div',
null,
React.createElement(
'a',
{
onClick: this.props.onPressMenu.bind(this),
className: className },
React.createElement('span', null)
)
);
};
Menu.prototype.renderNav = function renderNav() {
var className = "menu";
if (this.state.menu === true) {
className += " active";
}
return React.createElement(
'div',
null,
React.createElement(
'div',
{ className: className },
this.renderMenu(),
React.createElement(
'ul',
null,
React.createElement(
'li',
null,
React.createElement(
'a',
{ onClick: this.onPressLogin.bind(this) },
React.createElement('i', { className: 'fa fa-unlock-alt', 'aria-hidden': 'true' }),
'Login'
)
),
React.createElement(
'li',
null,
React.createElement(
'a',
{ href: 'url' },
React.createElement('i', { className: 'fa fa-pencil-square-o', 'aria-hidden': 'true' }),
'Sign Up'
)
)
),
React.createElement('div', { className: 'triangle' })
)
);
};
Menu.prototype.render = function render() {
return React.createElement(
'div',
null,
this.renderNav(),
this.renderOverlay()
);
};
return Menu;
}(React.Component);
var Home = function (_React$Component5) {
_inherits(Home, _React$Component5);
function Home() {
_classCallCheck(this, Home);
return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
}
Home.prototype.render = function render() {
return React.createElement(
'div',
{ className: 'row' },
React.createElement(
'div',
{ className: 'col-md-12' },
React.createElement(
'span',
{ style: { position: 'fixed', top: 20, left: 20, zIndex: 9999 } },
'hi'
)
)
);
};
return Home;
}(React.Component);
var App = function (_React$Component6) {
_inherits(App, _React$Component6);
function App(props) {
_classCallCheck(this, App);
var _this7 = _possibleConstructorReturn(this, _React$Component6.call(this, props));
_this7.state = {
menu: false,
selectedItem: 0
};
_this7.onPressItem = _this7.onPressItem.bind(_this7);
return _this7;
}
App.prototype.onPressOverlay = function onPressOverlay() {
this.setState({
menu: !this.state.menu
});
};
App.prototype.onPressMenu = function onPressMenu() {
console.log('menu state', this.state.menu);
this.setState({
menu: !this.state.menu
});
};
App.prototype.onPressItem = function onPressItem(item, index) {
this.setState({
selectedItem: index
});
console.log('log get onPressItem side-menu', this.state.selectedItem);
};
App.prototype.render = function render() {
return React.createElement(
'div',
null,
React.createElement(
HeaderBar,
null,
React.createElement(Menu, {
history: this.props.history,
menu: this.state.menu,
onPressMenu: this.onPressMenu,
onPressOverlay: this.onPressOverlay
})
),
React.createElement(SideMenu, {
data: cards,
onPressItem: this.onPressItem,
selectedItem: this.state.selectedItem }),
React.createElement(CardGen, {
cards: cards,
selectedItem: this.state.selectedItem })
);
};
return App;
}(React.Component);
/* Create Reducers and combine them */
var rootReducer = combineReducers({
state: function state() {
var _state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
return _state;
}
});
var reducers = rootReducer;
var createStoreWithMiddleware = applyMiddleware()(createStore);
var Root = function (_React$Component7) {
_inherits(Root, _React$Component7);
function Root() {
_classCallCheck(this, Root);
return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments));
}
Root.prototype.render = function render() {
return React.createElement(
Provider,
{ store: createStoreWithMiddleware(reducers) },
React.createElement(
BrowserRouter,
null,
React.createElement(
'div',
null,
React.createElement(
Switch,
null,
React.createElement(Route, { path: '/', component: App }),
React.createElement(Route, { path: '/home', component: Home })
)
)
)
);
};
return Root;
}(React.Component);
ReactDOM.render(React.createElement(Root, null), document.getElementById('app'));
//# sourceURL=pen.js
</script>
</body></html>
