FUNCT Implement bluetooth screen

6 files changed, 87 insertions, 33 deletions

diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot
index 060e952..fb55d1c 100755
--- a/src/styles/fonts/icomoon.eot
+++ b/src/styles/fonts/icomoon.eot
diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg
index ee686b7..6fedeea 100755
--- a/src/styles/fonts/icomoon.svg
+++ b/src/styles/fonts/icomoon.svg
@@ -14,4 +14,9 @@
 <glyph unicode="&#xe904;" glyph-name="speed" d="M512 256.667q-34 0-60 25t-26 59q0 36 26 62l362 240-242-362q-24-24-60-24zM870 572.667q28-44 48-112t20-120q0-118-56-212-26-44-74-44h-592q-48 0-74 44-56 94-56 212 0 176 125 301t303 125q52 0 119-20t111-48l-80-52q-72 36-152 36-140 0-241-100t-101-242q0-92 46-170h592q46 78 46 170 0 82-36 154z" />
 <glyph unicode="&#xe905;" glyph-name="toggle_off" d="M298 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" />
 <glyph unicode="&#xe906;" glyph-name="toggle_on" d="M726 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" />
+<glyph unicode="&#xe907;" glyph-name="keyboard_arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" />
+<glyph unicode="&#xe908;" glyph-name="keyboard_arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" />
+<glyph unicode="&#xe909;" glyph-name="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
+<glyph unicode="&#xe90a;" glyph-name="computer" d="M854 298.667v426h-684v-426h684zM598 170.667v42h-172v-42h172zM938 170.667h86v-86h-1024v86h86v640h852v-640z" />
+<glyph unicode="&#xe90b;" glyph-name="phone" d="M736 170.667v598h-448v-598h448zM598 42.667v42h-172v-42h172zM682 896.667q52 0 90-38t38-90v-684q0-52-38-90t-90-38h-340q-52 0-90 38t-38 90v684q0 52 38 90t90 38h340z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf
index 1c80635..ec51acb 100755
--- a/src/styles/fonts/icomoon.ttf
+++ b/src/styles/fonts/icomoon.ttf
diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff
index 035641c..ca1195e 100755
--- a/src/styles/fonts/icomoon.woff
+++ b/src/styles/fonts/icomoon.woff
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 518bdc2..6b917d1 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -53,9 +53,10 @@ body {
     .page {
         display: flex;
         flex-direction: column;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         justify-content: center;
         height: 100%;
+        overflow: hidden;
 
         &.hide {
             display: none;
@@ -66,42 +67,75 @@ body {
             margin: 0;
         }
 
-        .entry {
-            height: 120px;
-            line-height: 120px;
-            border-bottom: 1px solid map-get($colors, grey);
+        .container {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            justify-content: center;
+            flex-grow: 2;
 
-            &:last-child {
-                border-bottom: none2;
-            }
+            .entry {
+                height: 120px;
+                line-height: 120px;
+                border-bottom: 1px solid map-get($colors, grey);
 
-            .icon {
-                width: 10%;
-                position: relative;
-                float: left;
-                text-align: center;
-            }
+                &:last-child {
+                    border-bottom: none;
+                }
 
-            .label {
-                position: relative;
-                float: left;
-                text-align: left;
-                width: 80%;
-            }
+                .icon {
+                    width: 10%;
+                    position: relative;
+                    float: left;
+                    text-align: center;
+                }
 
-            .control {
-                width: 10%;
-                position: relative;
-                float: left;
-                text-align: right;
-                font-size: 5rem;
+                .label {
+                    position: relative;
+                    float: left;
+                    text-align: left;
+                    width: 75%;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
 
-                .icon-toggle_on {
-                    color: map-get($colors, primary);
+                .control {
+                    width: 15%;
+                    position: relative;
+                    float: left;
+                    text-align: right;
+                    font-size: 5rem;
+
+                    & > * {
+                        height: 120px;
+                        line-height: 120px;
+                    }
+
+                    &.enabled {
+                        .icon-toggle_on {
+                            display: block;
+                            color: map-get($colors, primary);
+                        }
+
+                        .icon-toggle_off {
+                            display: none;
+                        }
+                    }
+
+                    .icon-toggle_on {
+                        display: none;
+                    }
+
+                    .icon-toggle_off {
+                        display: block;
+                    }
                 }
             }
         }
 
+
+
         .confirm {
             position: absolute;
             bottom: 5%;
diff --git a/src/styles/style.css b/src/styles/style.css
index 0bd7eb9..e656a4e 100755
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?h6r2e7');
-  src:  url('fonts/icomoon.eot?h6r2e7#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?h6r2e7') format('truetype'),
-    url('fonts/icomoon.woff?h6r2e7') format('woff'),
-    url('fonts/icomoon.svg?h6r2e7#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?6brftk');
+  src:  url('fonts/icomoon.eot?6brftk#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?6brftk') format('truetype'),
+    url('fonts/icomoon.woff?6brftk') format('woff'),
+    url('fonts/icomoon.svg?6brftk#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,12 +25,27 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-clear:before {
+  content: "\e909";
+}
 .icon-time:before {
   content: "\e900";
 }
 .icon-bluetooth:before {
   content: "\e901";
 }
+.icon-keyboard_arrow_down:before {
+  content: "\e907";
+}
+.icon-keyboard_arrow_up:before {
+  content: "\e908";
+}
+.icon-computer:before {
+  content: "\e90a";
+}
+.icon-phone:before {
+  content: "\e90b";
+}
 .icon-wifi:before {
   content: "\e902";
 }