Merge pull request #1 from JakobST1n/controller-redesign

First shot at a redesign of the webapp

1 files changed, 73 insertions, 128 deletions

diff --git a/styles.css b/styles.css
index efd339b..9fb26ae 100644
--- a/styles.css
+++ b/styles.css
@@ -10,25 +10,50 @@ html, body {
 
 body {
     margin: 10px;
+    background-color: #454545;
+    color: white;
 }
 
-.info h1 {
+h1 {
+    font-size: 10px;
     margin: 0;
+    color: #9c9c9c;
 }
 
-.info-device {
-    margin: 0;
+.statusline-bottom {
+    position: absolute;
     display: flex;
+    bottom: 0;
+    left: 0;
+    height: 30px;
+    /* padding-left: 5px; */
+    width: calc(100%);
+    font-size: 12px;
+    margin: 0;
     align-items: center;
+
+    background-color: #333333;
+}
+
+.statusline-bottom i {
+    font-size: 12px;
+}
+
+.statusline-item {
+    display: none;
+    align-items: flex-start;
+    margin-left: 5px;
+    margin-right: 5px;
+
+    color: #b5b5b5;
 }
 
-.info-device i {
-    font-size: 18px;
+.connected .statusline-item {
+    display: flex;
 }
 
 .connection {
     display: flex;
-    align-items: flex-start;
     color: #c32222;
 }
 
@@ -50,23 +75,8 @@ body {
     text-transform: uppercase;
 }
 
-.battery {
-    display: none;
-    margin-left: 5px;
-    /* display: flex; */
-    align-items: start;
-    color: #4a4a4a;
-}
-
-.connected .battery {
-    display: flex;
-}
-
 .arm {
-    display: none;
     margin-left: 5px;
-    /* display: flex; */
-    align-items: start;
     color: #c32222;
 }
 
@@ -80,22 +90,12 @@ body {
     display: block;
 }
 
-.connected .arm {
-    display: flex;
-}
-
 .armed .arm {
     color: #008000;
 }
 
 .ping {
-    display: none;
-}
-
-.connected .ping {
-    display: block;
-    margin-left: 5px;
-    color: #4a4a4a;
+    margin-left: auto;
 }
 
 .ping i {
@@ -110,125 +110,70 @@ body {
   100% { opacity: 0; }
 }
 
-.options {
-    position: absolute;
-    display: flex;
-    bottom: 60px;
-    right: 60px;
-    flex-direction:column-reverse;
-}
-
-.options button {
+.acc-string {
     display: none;
-    margin-top: 5px;
-    border: 1px solid black;
-    background-color: #b5b5b5;
-    padding: 10px;
-    width: 120px;
+    position: absolute;
+    top: 60px;
+    left: calc(50% - 50px - 10px);
+    width: 100px;
+    text-align: center;
+    background-color: #272727;
+    padding: 0 10px;
+    border-radius: 10px;
+    font-size: 9px;
 }
 
-.armed .options button {
+.connected .acc-string {
     display: block;
 }
 
-#btn_connect { display: block; }
-.connected #btn_connect { display: none; }
-.connected #btn_disconnect { display: block; }
-.connected #btn_arm { display: block; }
-.armed #btn_arm { display: none; }
-
-.throttle {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 40px;
-    height: calc(100% - 70px);
-
-    margin: 0;
 
-    background-color: #b5b5b5;
-    border: 1px solid black;
-}
-
-.throttle-thumb {
-    width: 40px;
-    height: 1%;
+button {
     position: absolute;
-    bottom: 0;
-    background-color: green;
+    display: none;
+    margin-top: 5px;
+    border: none;
+    background-color: #333333;
+    color: #c3c3c3;
+    padding: 10px;
+    width: 120px;
 }
 
-.throttle-indicator {
-    position: absolute;
-    width: 40px;
-    height: 0px;
-    bottom: 0;
-    /* border: 4px solid black; */
+.armed button {
+    display: block;
 }
 
-.throttle-indicator:before {
-    content: " ";
-    background-color: black;
-    width: 20px;
-    height: 1px;
-    position: absolute;
-    left: 0;
+.button-center {
+    left: calc(50% - 60px);
 }
 
-.throttle-indicator:after {
-    content: " ";
-    background-color: black;
-    width: 20px;
-    height: 1px;
-    position: absolute;
-    right: 0;
+.button-center-bottom {
+    bottom: 40px;
 }
 
-.rudder {
-    position: absolute;
-    bottom: 10px;
-    left: 10px;
-    width: calc(100% - 70px);
-    height: 40px;
-    margin: 0;
-    background-color: #b5b5b5;
-    border: 1px solid black;
+.button-center-top {
+    top: 10px;
 }
 
-.rudder-labels {
-    position: absolute;
-}
+#btn_connect { display: block; }
+.connected #btn_connect { display: none; }
+.connected #btn_disconnect { display: block; }
+.connected #btn_arm { display: block; }
+.armed #btn_arm { display: none; }
 
-.rudder-thumb {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    height: 40px;
-    background-color: yellow;
-}
 
-.rudder-indicator {
+.joystick {
     position: absolute;
-    width: 0px;
-    height: 40px;
-    left: 50%;
-    bottom: 0;
+    width: 200px;
+    height: 200px;
+    top: calc(50% - 100px - 10px); /* 50% - half height - statusline height */
+    /* border: 1px solid pink; */
 }
 
-.rudder-indicator:before {
-    content: " ";
-    background-color: black;
-    width: 1px;
-    height: 20px;
-    position: absolute;
-    top: 0;
+.joystick-left {
+    left: calc(25% - 100px);
 }
 
-.rudder-indicator:after {
-    content: " ";
-    background-color: black;
-    width: 1px;
-    height: 20px;
-    position: absolute;
-    bottom: 0;
+.joystick-right {
+    left: calc(75% - 100px);
 }