<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/TylerK/pen/ncJpD" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400,700");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background: #ecf0f1;
font-family: 'Lato', sans-serif;
}
ul,
ol,
li {
list-style-type: none;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-weight: normal;
}
.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
-ms-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 450ms;
-moz-animation-duration: 450ms;
-o-animation-duration: 450ms;
-ms-animation-duration: 450ms;
animation-duration: 450ms;
}
.ui-card {
width: 300px;
height: 400px;
background: #fff;
border: 2px solid #dee5e7;
position: relative;
border-radius: 8px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
}
.ui-card .toggle {
position: absolute;
top: 10px;
right: 10px;
}
.ui-card section {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.ui-card .content {
left: 0;
}
.ui-card .toggle i {
color: #fff;
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-ms-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ui-card.sidebar-open .toggle i {
color: #22313f;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.ui-card .sidebar {
left: 100%;
background: #fff;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-ms-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
overflow: hidden;
}
.ui-card.sidebar-open .content {
left: -10%;
}
.ui-card.sidebar-open .sidebar {
left: 10%;
-webkit-box-shadow: 0px 0px 300px 100px rgba(0,0,0,0.7);
box-shadow: 0px 0px 300px 100px rgba(0,0,0,0.7);
}
.ui-card nav {
width: 90%;
padding-top: 40px;
}
.ui-card nav li {
border-bottom: 1px solid #ecf0f1;
}
.ui-card nav li i {
display: inline-block;
width: 30px;
}
.ui-card nav li a {
display: block;
padding: 20px;
padding-left: 30px;
color: #6c7a89;
}
.ui-card nav li a:hover {
border-left: 4px solid #3498db;
padding-left: 26px;
color: #22313f;
}
.ui-card .disconnect {
line-height: 117px;
left: 0px;
}
.ui-card .disconnect,
.ui-card .reauth {
width: 90%;
height: 117px;
text-align: center;
position: absolute;
bottom: 0px;
-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
-ms-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ui-card .btn {
font-size: 0.8em;
}
.ui-card .btn-disconnect {
color: #c0392b;
padding: 10px 30px;
}
.ui-card .btn-disconnect:hover {
color: #fff;
background-color: #c0392b;
border-radius: 6px;
}
.ui-card .reauth {
padding-top: 20px;
left: 100%;
}
.ui-card .reauth h3 {
font-size: 15px;
margin-bottom: 7px;
color: #c0392b;
}
.ui-card .reauth input {
border-radius: 4px;
border: 1px solid #b5bcc5;
padding: 5px;
margin-bottom: 7px;
}
.ui-card .reauth input:focus {
outline: none;
border: 2px solid #3498db;
margin-top: -1px;
margin-bottom: 6px;
}
.ui-card .btn-cancel {
color: #b5c5c9;
}
.ui-card .sidebar.reauth-toggled .disconnect {
left: -100%;
}
.ui-card .sidebar.reauth-toggled .reauth {
left: 0px;
}
.ui-card .masthead {
width: 100%;
height: 220px;
position: relative;
background: #22313f;
}
.ui-card .masthead h1 {
height: 220px;
color: #fff;
line-height: 200px;
text-align: center;
font-weight: 300;
font-size: 28px;
}
.ui-card .device-icon {
background: #3498db;
width: 90px;
height: 90px;
border-radius: 50%;
padding: 4.5%;
position: absolute;
left: 50%;
margin-left: -45px;
bottom: -45px;
text-align: center;
}
.ui-card .device-info {
width: 100%;
position: absolute;
top: 286px;
}
.ui-card .device-icon i {
color: #fff;
font-size: 66px;
}
.ui-card .device-space {
width: 100%;
height: 60px;
text-align: center;
}
.ui-card .device-space h3 {
color: #6c7a89;
font-size: 17px;
margin-bottom: 15px;
}
.ui-card .available-space {
background: #ecf0f1;
width: 80%;
margin: 0 auto;
height: 10px;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.ui-card .used-space--photos,
.ui-card .used-space--videos {
height: 100%;
position: absolute;
border-radius: 20px;
}
.ui-card .used-space--photos {
width: 70%;
background: #27ae60;
}
.ui-card .used-space--videos {
width: 30%;
background: #f39c12;
}
.ui-card .device-legend {
text-align: center;
font-size: 11px;
}
.ui-card .device-legend li {
display: inline-block;
margin-right: 20px;
color: #6c7a89;
}
.ui-card .device-legend li:last-child {
margin-right: 0px;
}
.ui-card .device-legend i {
display: inline-block;
position: relative;
top: -1px;
font-size: 9px;
margin-right: 3px;
}
.ui-card .device-legend i.photos {
color: #27ae60;
}
.ui-card .device-legend i.videos {
color: #f39c12;
}
@-moz-keyframes shake {
0% {
-webkit-transform: translateX(7px);
-moz-transform: translateX(7px);
-o-transform: translateX(7px);
-ms-transform: translateX(7px);
transform: translateX(7px);
}
15% {
-webkit-transform: translateX(-7px);
-moz-transform: translateX(-7px);
-o-transform: translateX(-7px);
-ms-transform: translateX(-7px);
transform: translateX(-7px);
}
30% {
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-o-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px);
}
45% {
-webkit-transform: translateX(-5px);
-moz-transform: translateX(-5px);
-o-transform: translateX(-5px);
-ms-transform: translateX(-5px);
transform: translateX(-5px);
}
60% {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-o-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
}
75% {
-webkit-transform: translateX(-3px);
-moz-transform: translateX(-3px);
-o-transform: translateX(-3px);
-ms-transform: translateX(-3px);
transform: translateX(-3px);
}
100% {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
}
@-webkit-keyframes shake {
0% {
-webkit-transform: translateX(7px);
-moz-transform: translateX(7px);
-o-transform: translateX(7px);
-ms-transform: translateX(7px);
transform: translateX(7px);
}
15% {
-webkit-transform: translateX(-7px);
-moz-transform: translateX(-7px);
-o-transform: translateX(-7px);
-ms-transform: translateX(-7px);
transform: translateX(-7px);
}
30% {
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-o-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px);
}
45% {
-webkit-transform: translateX(-5px);
-moz-transform: translateX(-5px);
-o-transform: translateX(-5px);
-ms-transform: translateX(-5px);
transform: translateX(-5px);
}
60% {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-o-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
}
75% {
-webkit-transform: translateX(-3px);
-moz-transform: translateX(-3px);
-o-transform: translateX(-3px);
-ms-transform: translateX(-3px);
transform: translateX(-3px);
}
100% {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
}
@-o-keyframes shake {
0% {
-webkit-transform: translateX(7px);
-moz-transform: translateX(7px);
-o-transform: translateX(7px);
-ms-transform: translateX(7px);
transform: translateX(7px);
}
15% {
-webkit-transform: translateX(-7px);
-moz-transform: translateX(-7px);
-o-transform: translateX(-7px);
-ms-transform: translateX(-7px);
transform: translateX(-7px);
}
30% {
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-o-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px);
}
45% {
-webkit-transform: translateX(-5px);
-moz-transform: translateX(-5px);
-o-transform: translateX(-5px);
-ms-transform: translateX(-5px);
transform: translateX(-5px);
}
60% {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-o-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
}
75% {
-webkit-transform: translateX(-3px);
-moz-transform: translateX(-3px);
-o-transform: translateX(-3px);
-ms-transform: translateX(-3px);
transform: translateX(-3px);
}
100% {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes shake {
0% {
-webkit-transform: translateX(7px);
-moz-transform: translateX(7px);
-o-transform: translateX(7px);
-ms-transform: translateX(7px);
transform: translateX(7px);
}
15% {
-webkit-transform: translateX(-7px);
-moz-transform: translateX(-7px);
-o-transform: translateX(-7px);
-ms-transform: translateX(-7px);
transform: translateX(-7px);
}
30% {
-webkit-transform: translateX(5px);
-moz-transform: translateX(5px);
-o-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px);
}
45% {
-webkit-transform: translateX(-5px);
-moz-transform: translateX(-5px);
-o-transform: translateX(-5px);
-ms-transform: translateX(-5px);
transform: translateX(-5px);
}
60% {
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-o-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
}
75% {
-webkit-transform: translateX(-3px);
-moz-transform: translateX(-3px);
-o-transform: translateX(-3px);
-ms-transform: translateX(-3px);
transform: translateX(-3px);
}
100% {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
}
</style></head><body>
<!-- React component container -->
<div id='device-cards'></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://codepen.io/chriscoyier/pen/yIgqi.js'></script><script src='https://fb.me/react-0.11.2.js'></script><script src='https://fb.me/JSXTransformer-0.11.2.js'></script>
<script >/** @jsx React.DOM */
//
// Main device wrapper
// NOTE: Holding menu toggle state here (eventually)
//--------------------------------------------------------
var DeviceCard = React.createClass({
render: function() {
return (
<div className='ui-card'>
<Device_section__info data={this.props.data} />
<Device_section__sideBarMenu />
<Device_action__toggleMenu />
</div>
);
}
});
//
// Device information section wrapper
//--------------------------------------------------------
var Device_section__info = React.createClass({
render: function() {
return (
<section className='content'>
<Device_section__mastHead data={this.props.data} />
<Device_section__freeSpace />
</section>
);
}
});
//
// Device side bar menu wrapper
//--------------------------------------------------------
var Device_section__sideBarMenu = React.createClass({
render: function() {
return (
<section className='sidebar'>
<nav>
<Device_section__sideBarNav />
<Device_section__sideBarRemoveConnection />
</nav>
</section>
);
}
});
//
// Device side bar nav list
//--------------------------------------------------------
var Device_section__sideBarNav = React.createClass({
render: function() {
return (
// TODO: Each item here should be visible based on flags
// I.e No photos? Should we show edit photos?
<ul>
<li>
<a href="#"><i className='fa fa-wifi'></i>Wireless Settings</a>
</li>
<li>
<a href="#"><i className='fa fa-info-circle'></i>Device Information</a>
</li>
<li>
<a href="#"><i className='fa fa-photo'></i>Edit Photos</a>
</li>
<li>
<a href="#"><i className='fa fa-video-camera'></i>Edit Videos</a>
</li>
</ul>
);
}
});
//
// Device side bar delete connection \ reauth
//--------------------------------------------------------
var Device_section__sideBarRemoveConnection = React.createClass({
render: function() {
return (
<span>
<div className='disconnect'>
<a href='#' className='btn btn-disconnect'>Disconnect Device</a>
</div>
<div className='reauth'>
<h3>Re-enter your password</h3>
<input type='password' />
<p>
<a href="#" className='btn btn-cancel js-reAuth'>Cancel</a>
</p>
</div>
</span>
);
}
});
//
// Device actions toggle switch
//--------------------------------------------------------
var Device_action__toggleMenu = React.createClass({
handleClick: function() {
// TODO: Do this in the React way.
$(this.getDOMNode()).closest('.ui-card').toggleClass('sidebar-open');
},
render: function() {
return (
<div className='toggle'>
<a href='#' onClick={this.handleClick}><i className="fa fa-cog"></i></a>
</div>
);
}
});
//
// Masthead
//
var Device_section__mastHead = React.createClass({
render: function() {
return (
<header className='masthead'>
<h1>{this.props.data.deviceName}</h1>
<div className='device-icon'>
<i className='fa fa-mobile-phone'></i>
</div>
</header>
);
}
});
//
// Free space module
//
var Device_section__freeSpace = React.createClass({
render: function() {
return (
// This is all static for now
// Todo: Populate this with data, and animate accordingly.
// Adding some actual values probably wouldn't hurt either.
<article className='device-info'>
<div className='device-space'>
<h3>Free Space</h3>
<div className='available-space'>
<div className="used-space--photos"></div>
<div className="used-space--videos"></div>
</div>
</div>
<ul className='device-legend'>
<li><i className="fa fa-circle videos"></i> Videos</li>
<li><i className="fa fa-circle photos"></i> Photos</li>
<li><i className="fa fa-circle available"></i> Available</li>
</ul>
</article>
);
}
});
//
// Fake and totally arbitrary data
//--------------------------------------------------------
var device_data = {
deviceType : 'iphone',
deviceName : 'iPhone 6',
availableSpace : 2048, // megabytes
photosTotalSpace : 768, // megabytes
videosTotalSpace : 384 // megabytes
}
//
// Render this ish
//--------------------------------------------------------
React.renderComponent(
<DeviceCard data={device_data}/>,
document.getElementById('device-cards')
);
//# sourceURL=pen.js
</script>
</body></html>
