<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <script src="https://wzrd.in/standalone/expect@latest"></script> -->
<!-- <script src="https://wzrd.in/standalone/deep-freeze@latest"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
$from: #D6AEBE;
$to: #2D3A62;
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
}
body {
background: tomato; // fallback for older browsers
background: -webkit-linear-gradient(135deg, $from, $to);
background: -o-linear-gradient(135deg, $from, $to);
background: -moz-linear-gradient(135deg, $from, $to);
background-image: linear-gradient(135deg, $from, $to);
}
$barColor: rgba(255,244,248,0.4);
$borderColor: rgba(224, 211, 212, 0.4);
.drone-control-app {
// background: tomato;
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; margin: auto;
height: 700px;
width: 400px;
.top-bar {
background: $barColor;
height: 80px;
width: 100%;
border-radius: 15px 15px 2px 2px;
margin-bottom: 2px;
border-top: 2px solid $borderColor;
border-left: 2px solid $borderColor;
position: relative;
.progress-bar {
background: rgba(108,79,102,0.3);
position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto;
border-radius: 4px;
height: 7px;
width: 120px;
box-shadow: inset 1px 1px 1px rgba(51,51,51,0.4);
border-bottom: 1px solid rgba(255,255,255,0.5);
}
i {
position: absolute;
top: 0;
margin: auto;
bottom: 0;
height: 2.3rem;
color: rgba(255,255,255,0.5);
font-size: 2.3rem;
&:first-of-type {
left: 30px;
}
&:last-of-type {
right: 26px;
}
}
}
.buttons-panel {
height: 320px;
width: 100%;
background: rgba(214,174,190,0.4);
border-top: 2px solid rgba(208, 181, 202, 0.4);
border-left: 2px solid rgba(208, 181, 202, 0.4);
margin-bottom: 2px;
border-radius: 2px;
}
.control-panel {
height: 208px;
width: 100%;
background: rgba(108,79,102,0.3);
border-top: 2px solid $borderColor;
border-left: 2px solid $borderColor;
margin-bottom: 2px;
border-radius: 2px;
position: relative;
.control {
border: 3px solid rgba(255,255,255,0.1);
position: absolute; top: 0; bottom: 0; margin: auto;
height: 170px; width: 170px;
border-radius: 50%;
&.left-control {
left: calc(50% - 180px);
}
&.right-control {
right: calc(50% - 180px);
}
i {
position: absolute;
color: rgba(255,255,255,0.2);
margin: auto;
width: 2.8rem;
height: 2.8rem;
font-size: 2.8rem;
&.top-arrow {
left: 0;right: 0; top: 0;
}
&.right-arrow {
right: 0; top: 0; bottom: 0;
}
&.bottom-arrow {
left: 0;right: 0; bottom: 0;
}
&.left-arrow {
left: 0; top: 0; bottom: 0;
}
}
}
}
.bottom-bar {
background: $barColor;
height: 80px;
width: 100%;
border-radius: 2px 2px 15px 15px;
border-top: 2px solid $borderColor;
border-left: 2px solid $borderColor;
}
}
View Compiled
console.clear(); // clear console
///////////////////////////////////////////////////////////////////////////////////////////////
const { connect } = ReactRedux;
const { combineReducers } = Redux; // get combineReducers function from Redux
const { Component } = React; // base Component for all components
const { Provider } = ReactRedux; // get Provider from external library
const {createStore} = Redux; // get createStore from Redux
////////////////////////////////////////
// ============ REDUCERS ============ //
////////////////////////////////////////
///////////////////
// initialUserState
const initialUserState = {
name: 'Mark Fluffalo',
job: 'Hampster'
}
///////////////
// user reducer
const user = (state = initialUserState, action) => {
return state;
}
/////////////////////
// initialSightsState
const initialSightsState = [
{
name: 'Tower of Pisa',
location: 'Pisa, Italy',
visited: true
},
{
name: 'Egyptian Pyramids',
location: 'Giza, Egypt',
visited: false
},
{
name: 'Grand Canyon',
location: 'Arizona, USA',
visited: false
}
]
/////////////////
// sights reducer
const sights = (state = initialSightsState, action) => {
return state;
}
///////////////////
// combine reducers
const sightAppData = combineReducers({ // combineReducers to create one master reducer
user,
sights
});
//////////////////////////////////////////
// ============ COMPONENTS ============ //
//////////////////////////////////////////
////////////////////////////////////
// SightSeer: presentation component
const DroneControl = ({user, sights}) => (
<div className="drone-control-app">
{/*<p>{user.name}</p>*/}
<div className="top-bar">
<i className="material-icons">track_changes</i>
<span className="progress-bar">
<span className="progress-bar-fill"></span>
</span>
<i className="material-icons">battery_charging_full</i>
</div>
<div className="buttons-panel">
</div>
<div className="control-panel">
<div className="control left-control">
<i className="top-arrow material-icons">keyboard_arrow_up</i>
<i className="right-arrow material-icons">keyboard_arrow_right</i>
<i className="bottom-arrow material-icons">keyboard_arrow_down</i>
<i className="left-arrow material-icons">keyboard_arrow_left</i>
</div>
<div className="control right-control">
<i className="top-arrow material-icons">keyboard_arrow_up</i>
<i className="right-arrow material-icons">keyboard_arrow_right</i>
<i className="bottom-arrow material-icons">keyboard_arrow_down</i>
<i className="left-arrow material-icons">keyboard_arrow_left</i>
</div>
</div>
<div className="bottom-bar">
</div>
</div>
);
///////////////////////////
// mapStateToSightSeerProps
const mapStateToSightSeerProps = (state) => {
console.log(state);
return {
user: state.user,
sights: state.sights
}
};
/////////////////////////////////
// FilterLink container component
const DroneControlApp = connect(
mapStateToSightSeerProps,
null
)(DroneControl);
// console.log(createStore(sightAppData).getState());
ReactDOM.render(
<Provider store={createStore(sightAppData)}>
<DroneControlApp />
</Provider>,
document.getElementById('root')
);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.