From 56514d2337ab5b1d2d8f3666c211e2e04f73bd68 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Wed, 27 Nov 2019 14:00:37 +0100 Subject: FUNCT Added bluetooth screen --- src/styles/app.scss | 4 +- src/styles/fonts/icomoon.eot | Bin 2300 -> 2348 bytes src/styles/fonts/icomoon.svg | 5 ++- src/styles/fonts/icomoon.ttf | Bin 2136 -> 2184 bytes src/styles/fonts/icomoon.woff | Bin 2212 -> 2260 bytes src/styles/main.scss | 88 ++++++++++++++++++++++++++++-------------- src/styles/portrait.scss | 4 ++ src/styles/style.css | 17 ++++---- 8 files changed, 80 insertions(+), 38 deletions(-) (limited to 'src/styles') diff --git a/src/styles/app.scss b/src/styles/app.scss index d97030b..c69ad19 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,5 +1,6 @@ $colors: ( primary: #00ADDC, + secondary: #223340, font: #FFFFFF, grey: #848286 ); @@ -7,4 +8,5 @@ $colors: ( @import "style.css"; @import "main.scss"; @import "portrait.scss"; -@import "landscape.scss"; \ No newline at end of file +@import "landscape.scss"; +@import "~@fortawesome/fontawesome-free/css/all.min.css"; \ No newline at end of file diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot index fb55d1c..ba1208c 100755 Binary files a/src/styles/fonts/icomoon.eot and b/src/styles/fonts/icomoon.eot differ diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg index 6fedeea..809d2c2 100755 --- a/src/styles/fonts/icomoon.svg +++ b/src/styles/fonts/icomoon.svg @@ -14,9 +14,10 @@ - - + + + \ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf index ec51acb..f79ee84 100755 Binary files a/src/styles/fonts/icomoon.ttf and b/src/styles/fonts/icomoon.ttf differ diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff index ca1195e..f21dee2 100755 Binary files a/src/styles/fonts/icomoon.woff and b/src/styles/fonts/icomoon.woff differ diff --git a/src/styles/main.scss b/src/styles/main.scss index 6b917d1..84d877c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -26,7 +26,6 @@ body { a { color: map-get($colors, font); text-decoration: none; - font-size: 2.5rem; } .button { @@ -51,33 +50,44 @@ body { } .page { - display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; height: 100%; overflow: hidden; + position: relative; &.hide { display: none; } .header { - text-align: center; - margin: 0; + text-align: left; + margin: 50px 0; + + .backButton { + padding-right: 20px; + font-size: 1em; + } } .container { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; - flex-grow: 2; + overflow-y: scroll; + height: 1040px; .entry { - height: 120px; - line-height: 120px; - border-bottom: 1px solid map-get($colors, grey); + $entryHeight: 120px; + height: $entryHeight; + line-height: $entryHeight; + border-bottom: 9 solid map-get($colors, grey); + + &:nth-last-child(1) { + margin-bottom: 90px; + } + + &.secondary { + $entryHeight: 90px; + } &:last-child { border-bottom: none; @@ -85,6 +95,7 @@ body { .icon { width: 10%; + height: $entryHeight; position: relative; float: left; text-align: center; @@ -95,9 +106,20 @@ body { float: left; text-align: left; width: 75%; + height: $entryHeight; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + .title { + height: 2*$entryHeight/3; + line-height: 2*$entryHeight/3; + } + .subtitle { + height: $entryHeight/3; + line-height: $entryHeight/3; + font-size: 0.75em; + } } .control { @@ -105,46 +127,56 @@ body { position: relative; float: left; text-align: right; - font-size: 5rem; + height: $entryHeight; & > * { - height: 120px; - line-height: 120px; + height: $entryHeight; + line-height: $entryHeight; } &.enabled { - .icon-toggle_on { + .on { display: block; color: map-get($colors, primary); } - .icon-toggle_off { + .off { display: none; } } - .icon-toggle_on { + .on { display: none; } - .icon-toggle_off { + .off { display: block; } } } } - - - .confirm { + .footer { position: absolute; - bottom: 5%; + bottom: 0; text-align: center; - height: 120px; - line-height: 120px; - width: 90%; - background: map-get($colors, primary); - border-radius: 20px; + height: 80px; + line-height: 80px; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + align-content: stretch; + + .button { + flex-grow: 1; + background: map-get($colors, secondary); + + &.active { + background: map-get($colors, primary); + } + } } } diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index eff553c..4016600 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -2,6 +2,10 @@ html { background-image: url('../images/vertical_background.png'); + background-position: top center; + background-repeat: no-repeat; + background-color: transparent; + height: 992px; } body { diff --git a/src/styles/style.css b/src/styles/style.css index e656a4e..d947765 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?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'); + src: url('fonts/icomoon.eot?wt3pj6'); + src: url('fonts/icomoon.eot?wt3pj6#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?wt3pj6') format('truetype'), + url('fonts/icomoon.woff?wt3pj6') format('woff'), + url('fonts/icomoon.svg?wt3pj6#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -34,10 +34,10 @@ .icon-bluetooth:before { content: "\e901"; } -.icon-keyboard_arrow_down:before { +.icon-arrow_down:before { content: "\e907"; } -.icon-keyboard_arrow_up:before { +.icon-arrow_up:before { content: "\e908"; } .icon-computer:before { @@ -46,6 +46,9 @@ .icon-phone:before { content: "\e90b"; } +.icon-arrow_back:before { + content: "\e90c"; +} .icon-wifi:before { content: "\e902"; } -- cgit 1.2.3-korg