<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/lianglingjiang/pen/yMxryN?depth=everything&order=popularity&page=13&q=device&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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">* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
background: #eff2f7;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, 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;
}
.device-list {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 20px;
}
.ui-card {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 300px;
height: 360px;
background: #fff;
border: 1px solid #dfe5ef;
position: relative;
border-radius: 8px;
overflow: hidden;
margin: 20px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.07);
cursor: pointer;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.ui-card:hover {
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.15);
}
.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: #8492a6;
-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: #324057;
-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 #eff2f7;
font-weight: 200;
letter-spacing: 0.05em;
}
.ui-card nav li i {
display: inline-block;
width: 30px;
}
.ui-card nav li a {
display: block;
padding: 20px;
padding-left: 30px;
color: #8492a6;
border-left: 4px solid transparent;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
.ui-card nav li a:hover {
border-left: 4px solid #20a0ff;
padding-left: 26px;
color: #324057;
}
.ui-card .disconnect {
left: 0px;
}
.ui-card .disconnect,
.ui-card .reauth {
width: 90%;
height: 52px;
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: #ff4949;
padding: 10px 30px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
.ui-card .btn-disconnect:hover {
color: #fff;
background-color: #ff4949;
border-radius: 6px;
}
.ui-card .reauth {
padding-top: 20px;
left: 100%;
}
.ui-card .reauth h3 {
font-size: 15px;
margin-bottom: 7px;
color: #ff4949;
}
.ui-card .reauth input {
border-radius: 4px;
border: 1px solid #c2c9d3;
padding: 5px;
margin-bottom: 7px;
}
.ui-card .reauth input:focus {
outline: none;
border: 2px solid #20a0ff;
margin-top: -1px;
margin-bottom: 6px;
}
.ui-card .btn-cancel {
color: #aebdd7;
}
.ui-card .sidebar.reauth-toggled .disconnect {
left: -100%;
}
.ui-card .sidebar.reauth-toggled .reauth {
left: 0px;
}
.ui-card .masthead {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100px;
position: relative;
margin-top: 70px;
}
.ui-card .masthead h1 {
height: 100px;
color: #324057;
line-height: 72px;
text-align: center;
font-weight: 300;
font-size: 28px;
letter-spacing: 0.05em;
}
.ui-card .masthead .device-version {
text-align: center;
color: #8492a6;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.05em;
}
.ui-card .device-icon {
text-align: center;
}
.ui-card .device-info {
width: 100%;
margin-top: 30px;
position: absolute;
bottom: 50px;
}
.ui-card .device-icon i {
color: #324057;
font-size: 28px;
}
.ui-card .device-space {
width: 100%;
height: 60px;
text-align: center;
}
.ui-card .device-space h3 {
color: #8492a6;
font-size: 14px;
margin-bottom: 15px;
font-weight: 300;
letter-spacing: 0.05em;
}
.ui-card .available-space {
background: #eff2f7;
width: 80%;
margin: 0 auto;
height: 10px;
position: relative;
border-radius: 20px;
overflow: hidden;
}
.ui-card .used-space--photos,
.ui-card .used-space--videos,
.ui-card .used-space--system {
height: 100%;
position: absolute;
border-radius: 20px;
}
.ui-card .used-space--photos {
width: 70%;
background: #13ce66;
}
.ui-card .used-space--videos {
width: 30%;
background: #f7ba2a;
}
.ui-card .used-space--system {
background: #9b59b6;
}
.ui-card .device-legend {
text-align: center;
font-size: 11px;
letter-spacing: 0.04em;
font-weight: 200;
}
.ui-card .device-legend li {
display: inline-block;
margin-right: 15px;
color: #8492a6;
}
.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.system {
color: #9b59b6;
}
.ui-card .device-legend i.photos {
color: #13ce66;
}
.ui-card .device-legend i.videos {
color: #f7ba2a;
}
@-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>
<div id="device-cards"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.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 App = function (_React$Component) {
_inherits(App, _React$Component);
function App() {
_classCallCheck(this, App);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
App.prototype.render = function render() {
return React.createElement(
'ul',
{ className: 'device-list' },
this.props.data.map(function (device) {
return React.createElement(DeviceCard, { device: device });
})
);
};
return App;
}(React.Component);
var DeviceCard = function (_React$Component2) {
_inherits(DeviceCard, _React$Component2);
function DeviceCard() {
_classCallCheck(this, DeviceCard);
var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this));
_this2.state = {
isToggle: false
};
_this2.handleClick = _this2.handleClick.bind(_this2);
return _this2;
}
DeviceCard.prototype.handleClick = function handleClick(e) {
this.setState({ isToggle: !this.state.isToggle });
console.log('clicked: ' + this.state.isToggle);
};
DeviceCard.prototype.render = function render() {
return React.createElement(
'li',
{ className: this.state.isToggle ? 'ui-card sidebar-open' : 'ui-card' },
React.createElement(Device_section__info, { data: this.props.device }),
React.createElement(Device_section__sideBarMenu, null),
React.createElement(Device_action__toggleMenu, { toggleClick: this.handleClick })
);
};
return DeviceCard;
}(React.Component);
var Device_section__info = function (_React$Component3) {
_inherits(Device_section__info, _React$Component3);
function Device_section__info() {
_classCallCheck(this, Device_section__info);
return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}
Device_section__info.prototype.render = function render() {
return React.createElement(
'section',
{ className: 'content' },
React.createElement(Device_section__mastHead, { data: this.props.data }),
React.createElement(Device_section__freeSpace, { data: this.props.data })
);
};
return Device_section__info;
}(React.Component);
var Device_section__sideBarMenu = function (_React$Component4) {
_inherits(Device_section__sideBarMenu, _React$Component4);
function Device_section__sideBarMenu() {
_classCallCheck(this, Device_section__sideBarMenu);
return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));
}
Device_section__sideBarMenu.prototype.render = function render() {
return React.createElement(
'section',
{ className: 'sidebar' },
React.createElement(
'nav',
null,
React.createElement(Device_section__sideBarNav, null),
React.createElement(Device_section__sideBarRemoveConnection, null)
)
);
};
return Device_section__sideBarMenu;
}(React.Component);
var Device_section__sideBarNav = function (_React$Component5) {
_inherits(Device_section__sideBarNav, _React$Component5);
function Device_section__sideBarNav() {
_classCallCheck(this, Device_section__sideBarNav);
return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
}
Device_section__sideBarNav.prototype.render = function render() {
return React.createElement(
'ul',
null,
React.createElement(
'li',
null,
React.createElement(
'a',
{ href: '#' },
React.createElement('i', { className: 'fa fa-wifi' }),
'Wireless Settings'
)
),
React.createElement(
'li',
null,
React.createElement(
'a',
{ href: '#' },
React.createElement('i', { className: 'fa fa-info-circle' }),
'Device Information'
)
),
React.createElement(
'li',
null,
React.createElement(
'a',
{ href: '#' },
React.createElement('i', { className: 'fa fa-photo' }),
'Edit Photos'
)
),
React.createElement(
'li',
null,
React.createElement(
'a',
{ href: '#' },
React.createElement('i', { className: 'fa fa-video-camera' }),
'Edit Video'
)
)
);
};
return Device_section__sideBarNav;
}(React.Component);
var Device_section__sideBarRemoveConnection = function (_React$Component6) {
_inherits(Device_section__sideBarRemoveConnection, _React$Component6);
function Device_section__sideBarRemoveConnection() {
_classCallCheck(this, Device_section__sideBarRemoveConnection);
return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments));
}
Device_section__sideBarRemoveConnection.prototype.render = function render() {
return React.createElement(
'span',
null,
React.createElement(
'div',
{ className: 'disconnect' },
React.createElement(
'a',
{ href: '#', className: 'btn btn-disconnect' },
'Disconnect Device'
)
),
React.createElement(
'div',
{ className: 'reauth' },
React.createElement(
'h3',
null,
'Re-enter your password'
),
React.createElement('input', { type: 'password' }),
React.createElement(
'p',
null,
React.createElement(
'a',
{ href: '#', className: 'btn btn-cancel js-reAuth' },
'Cancel'
)
)
)
);
};
return Device_section__sideBarRemoveConnection;
}(React.Component);
var Device_action__toggleMenu = function (_React$Component7) {
_inherits(Device_action__toggleMenu, _React$Component7);
function Device_action__toggleMenu() {
_classCallCheck(this, Device_action__toggleMenu);
return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments));
}
Device_action__toggleMenu.prototype.render = function render() {
return React.createElement(
'div',
{ className: 'toggle' },
React.createElement(
'a',
{ href: '#', onClick: this.props.toggleClick },
React.createElement('i', { className: 'fa fa-cog' })
)
);
};
return Device_action__toggleMenu;
}(React.Component);
var Device_section__mastHead = function (_React$Component8) {
_inherits(Device_section__mastHead, _React$Component8);
function Device_section__mastHead() {
_classCallCheck(this, Device_section__mastHead);
return _possibleConstructorReturn(this, _React$Component8.apply(this, arguments));
}
Device_section__mastHead.prototype.render = function render() {
var typeicon;
switch (this.props.data.deviceType) {
case 'ios':
typeicon = 'fa fa-apple';
break;
case 'android':
typeicon = 'fa fa-android';
break;
case 'windows':
typeicon = 'fa fa-windows';
break;
}
return React.createElement(
'header',
{ className: 'masthead' },
React.createElement(
'div',
{ className: 'device-icon' },
React.createElement('i', { className: typeicon })
),
React.createElement(
'h1',
null,
this.props.data.deviceName
),
React.createElement(
'p',
{ className: 'device-version' },
this.props.data.sysVersion
)
);
};
return Device_section__mastHead;
}(React.Component);
var Device_section__freeSpace = function (_React$Component9) {
_inherits(Device_section__freeSpace, _React$Component9);
function Device_section__freeSpace() {
_classCallCheck(this, Device_section__freeSpace);
return _possibleConstructorReturn(this, _React$Component9.apply(this, arguments));
}
Device_section__freeSpace.prototype.render = function render() {
var widthPhoto = Math.round((this.props.data.photoTotalSpace + this.props.data.videoTotalSpace + this.props.data.systemSpace) / this.props.data.availableSpace * 100);
var widthVideo = Math.round((this.props.data.videoTotalSpace + this.props.data.systemSpace) / this.props.data.availableSpace * 100);
var widthSystem = Math.round(this.props.data.systemSpace / this.props.data.availableSpace * 100);
var usedSpacePhotoStyle = {
width: widthPhoto + '%'
};
var usedSpaceVideoStyle = {
width: widthVideo + '%'
};
var usedSpaceSystemStyle = {
width: widthSystem + '%'
};
return React.createElement(
'article',
{ className: 'device-info' },
React.createElement(
'div',
{ className: 'device-space' },
React.createElement(
'h3',
null,
'Storage Usage'
),
React.createElement(
'div',
{ className: 'available-space' },
React.createElement('div', { className: 'used-space--photos', style: usedSpacePhotoStyle }),
React.createElement('div', { className: 'used-space--videos', style: usedSpaceVideoStyle }),
React.createElement('div', { className: 'used-space--system', style: usedSpaceSystemStyle })
)
),
React.createElement(
'ul',
{ className: 'device-legend' },
React.createElement(
'li',
null,
React.createElement('i', { className: 'fa fa-circle system' }),
' Apps'
),
React.createElement(
'li',
null,
React.createElement('i', { className: 'fa fa-circle videos' }),
' Videos'
),
React.createElement(
'li',
null,
React.createElement('i', { className: 'fa fa-circle photos' }),
' Photos'
),
React.createElement(
'li',
null,
React.createElement('i', { className: 'fa fa-circle available' }),
' Available'
)
)
);
};
return Device_section__freeSpace;
}(React.Component);
var device_data = [{
deviceType: 'ios',
deviceName: 'iPhone 7 Plus',
sysVersion: '10.3',
availableSpace: 32768,
photoTotalSpace: 7453,
videoTotalSpace: 5643,
systemSpace: 4532
}, {
deviceType: 'android',
deviceName: 'Nexus 7',
sysVersion: '6.0.1',
availableSpace: 32768,
photoTotalSpace: 8960,
videoTotalSpace: 2394,
systemSpace: 4093
}, {
deviceType: 'android',
deviceName: 'Galaxy Note 8',
sysVersion: '7.0.0',
availableSpace: 32768,
photoTotalSpace: 4534,
videoTotalSpace: 10234,
systemSpace: 5943
}, {
deviceType: 'ios',
deviceName: 'iPad Pro',
sysVersion: '10.3',
availableSpace: 32768,
photoTotalSpace: 5534,
videoTotalSpace: 12234,
systemSpace: 3452
}, {
deviceType: 'windows',
deviceName: 'lumia 830',
sysVersion: '10.0.15063',
availableSpace: 32768,
photoTotalSpace: 2313,
videoTotalSpace: 4345,
systemSpace: 4532
}, {
deviceType: 'ios',
deviceName: 'iPhone 6s',
sysVersion: '10.3',
availableSpace: 32768,
photoTotalSpace: 4096,
videoTotalSpace: 6144,
systemSpace: 3072
}];
ReactDOM.render(React.createElement(App, { data: device_data }), document.getElementById('device-cards'));
//# sourceURL=pen.js
</script>
</body></html>
