CodePen Embed - Control Unit


<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;
  }
}

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 is owned by Danny Pule on CodePen.

See more by @danny_pule on CodePen

External CSS

External JavaScript