Merge pull request #17 from ucfcs/feature/full-width-style

'full-width'

Author: RandyT97

duct-drone-app/src/App.css

@@ -1,20 +1,8 @@
-.container {
-	position: relative;
-	height: 100%;
-	width: 100%;
-} 
-.Sidebar {
-	margin-top:150px;
-}
-#action-bar{
-	height: 30%;
-}
 #feed {
 	display: block;
 	border-width: 2px;
-	height:500px;
+	height:50%;
 	width:100%;
-	margin-top: 10px;
 	border-style: solid;
 	color:#007bff;
     border-radius: 10px;
@@ -24,6 +12,6 @@
 }
 .swap-area {
   width: 100%;
-  height: 300px;
+  height: 100%;
   text-align: center;
 }

duct-drone-app/src/App.jsx

@@ -118,12 +118,11 @@ class App extends Component {
 
       <div onKeyPress={(e) => console.log(e.key)}>
         <Router>
-          <Container>
-            <Row style={{ height: '100%', width: '100%', border: 'black' }}>
-              <Col><div className="Sidebar"><Sidebar /></div></Col>
-              <Col xs={8}>
+          <Container fluid={true}>
+            <Row style={{ height: '100%', width: '100%' }}>
+              <Col><div><Sidebar /></div></Col>
+              <Col xs={10}>
                 <div id="feed" />
-                <div id="action-bar">
                   <Switch>
                   <Route path="/" exact component={Control} />
                   <Route path="/logs/" render={() => 
@@ -134,7 +133,6 @@ class App extends Component {
                   } />
                   </Switch>
                   <Navigation />
-                </div>
               </Col>
               <Col />
             </Row>

duct-drone-app/src/Control.css

@@ -1,5 +1,3 @@
-#analog-wrapper{
-  position: relative;
-  padding-top: 25%;
-  padding-bottom: 25%;
+.ReactNipple {
+  height: 40%;
 }

duct-drone-app/src/Control.jsx

@@ -16,7 +16,7 @@ class Control extends React.Component {
   render() {
     const isActive = true;
     return (
-      <div id="analog-wrapper">
+      <>
         <ReactNipple
                     // supports all nipplejs options
                     // see https://github.com/yoannmoinet/nipplejs#options
@@ -28,7 +28,8 @@ class Control extends React.Component {
                     // see https://github.com/yoannmoinet/nipplejs#start
           onMove={(evt, data) => console.log(evt, data)}
         />
-      </div>
+      </>
+
     );
   }
 }