From 2de1c21023be0d1518d3d2ac663d00a7c20c8944 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Mon, 23 Sep 2019 13:29:46 +0200 Subject: FUNCT Add first draft for settings screen --- src/config.xml | 6 ++-- src/index.html | 66 ++++++++++++++++++++++++++++------------ src/index.js | 9 +----- src/js/app.js | 29 ------------------ src/js/sliders.js | 56 ---------------------------------- src/styles/fonts/icomoon.eot | Bin 1412 -> 1976 bytes src/styles/fonts/icomoon.svg | 9 ++++-- src/styles/fonts/icomoon.ttf | Bin 1248 -> 1812 bytes src/styles/fonts/icomoon.woff | Bin 1324 -> 1888 bytes src/styles/main.scss | 69 +++++++++++++----------------------------- src/styles/style.css | 33 ++++++++++++++------ 11 files changed, 103 insertions(+), 174 deletions(-) delete mode 100644 src/js/app.js delete mode 100644 src/js/sliders.js (limited to 'src') diff --git a/src/config.xml b/src/config.xml index 9a21f67..4e3f71c 100644 --- a/src/config.xml +++ b/src/config.xml @@ -1,9 +1,9 @@ - - MIXER + + SETTINGS - HTML5 MIXER demo + HTML5 SETTINGS demo Igalia, S.L. APL 2.0 diff --git a/src/index.html b/src/index.html index 6b2ed01..9798f94 100644 --- a/src/index.html +++ b/src/index.html @@ -23,26 +23,54 @@

- Mixer + Settings

-
- + +
+ +
+
+ Date & Time +
+ + +
+ +
+
+ Bluetooth +
+
+ +
+ + +
+ +
+
+ Wifi +
+
+ +
+ + +
+ +
+
+ Wired +
+ + +
+ +
+
+ Version info +
+
diff --git a/src/index.js b/src/index.js index fa62684..962b5a6 100644 --- a/src/index.js +++ b/src/index.js @@ -16,13 +16,6 @@ /* JS */ import './js/AFB.js'; -import { init } from './js/app'; -import { increase, decrease, change } from './js/sliders'; /* CSS */ -import './styles/app.scss'; - -window.increase = increase; -window.decrease = decrease; -window.change = change; -init(); \ No newline at end of file +import './styles/app.scss'; \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js deleted file mode 100644 index 773e5b0..0000000 --- a/src/js/app.js +++ /dev/null @@ -1,29 +0,0 @@ -import Mustache from 'mustache'; -import { init as init_sliders } from './sliders'; - -var template; - -function render_sliders(sliders) { - var sliderContainer = document.getElementById('SliderContainer'); - for( var i=0; i - - + + + + + + + \ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf index 520b0ff..1c80635 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 d1c4591..035641c 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 01373eb..22dd899 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,45 +2,6 @@ display: none; } -input[type=range] { - -webkit-appearance: none; - width: 100%; - margin: 13.8px 0; - background: transparent; - z-index: 1000; -} - -input[type=range]:focus { - outline: none; -} - -input[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 8.4px; - cursor: pointer; - background: transparent; -} - -input[type=range]::-webkit-slider-thumb { - height: 64px; - width: 64px; - border-radius: 32px; - background: #FFFFFF; - cursor: pointer; - -webkit-appearance: none; - margin-top: -14px; - z-index: 0; -} - -progress { - -webkit-appearance: none; - height: 16px; - width: 100%; - margin-top: -12px; - z-index: -1000; - display: block; -} - ::-webkit-progress-bar { background: map-get($colors, grey); } @@ -93,7 +54,7 @@ body { display: flex; flex-direction: column; flex-wrap: wrap; - justify-content: space-around; + justify-content: center; height: 100%; .header { @@ -103,25 +64,37 @@ body { .entry { height: 120px; + line-height: 120px; + border-bottom: 1px solid map-get($colors, grey); - .label { - margin: 10px 0; + &:last-child { + border-bottom: none2; } - .button { + .icon { width: 10%; position: relative; float: left; text-align: center; - height: 80px; - line-height: 80px; } - .slider { - width: 78%; + .label { position: relative; float: left; - margin: 0 1%; + text-align: left; + width: 80%; + } + + .control { + width: 10%; + position: relative; + float: left; + text-align: right; + font-size: 5rem; + + .icon-toggle_on { + color: map-get($colors, primary); + } } } } diff --git a/src/styles/style.css b/src/styles/style.css index e86165c..0bd7eb9 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?41hzv3'); - src: url('fonts/icomoon.eot?41hzv3#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?41hzv3') format('truetype'), - url('fonts/icomoon.woff?41hzv3') format('woff'), - url('fonts/icomoon.svg?41hzv3#icomoon') format('svg'); + 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'); font-weight: normal; font-style: normal; font-display: block; @@ -25,9 +25,24 @@ -moz-osx-font-smoothing: grayscale; } -.icon-volume-increase:before { - content: "\ea2b"; +.icon-time:before { + content: "\e900"; } -.icon-volume-decrease:before { - content: "\ea2c"; +.icon-bluetooth:before { + content: "\e901"; +} +.icon-wifi:before { + content: "\e902"; +} +.icon-ethernet:before { + content: "\e903"; +} +.icon-speed:before { + content: "\e904"; +} +.icon-toggle_off:before { + content: "\e905"; +} +.icon-toggle_on:before { + content: "\e906"; } -- cgit 1.2.3-korg