From 6fb420f98818d2fff1ad468e21898f7325569a92 Mon Sep 17 00:00:00 2001 From: Egor Philippov Date: Thu, 24 Sep 2015 14:52:42 -0700 Subject: [PATCH] Some styling changes --- app/components/controls/light-control.js | 2 +- app/styles/app.scss | 67 ++++--------------- app/templates/components/bridge-controls.hbs | 40 +++++------ app/templates/components/bridge-finder.hbs | 2 +- .../components/controls/light-control.hbs | 10 +-- .../components/controls/music-control.hbs | 18 ++--- 6 files changed, 51 insertions(+), 88 deletions(-) diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js index e23e173..4aed906 100644 --- a/app/components/controls/light-control.js +++ b/app/components/controls/light-control.js @@ -1,7 +1,7 @@ import Em from 'ember'; export default Em.Component.extend({ - classNames: ['innerControlFrame'], + classNames: ['innerControlFrame', 'col-sm-8', 'col-sm-offset-2', 'col-xs-12'], classNameBindings: ['active::hidden'], elementId: 'lightControl', diff --git a/app/styles/app.scss b/app/styles/app.scss index 6f63c3c..798c372 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -5,18 +5,11 @@ $playerBackColor: #F12B24; $playerHeight: 400px; -$playerBeatAreaHeight: 320px; $playListBackgroundColor: #1E1E1E; $playerDefaultIconColor: #BBBBBB; $footerHeight: 40px; // BRIDGE FINDER -* { - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - html { min-height: 100%; height: auto; @@ -33,10 +26,6 @@ body { } #settings { - cursor: pointer; - position: absolute; - right: 15px; - margin-top: 30px; } .settingsItem { @@ -69,7 +58,7 @@ body { background: darken(white, 20%); } -.settingsItem.on md-icon.md-default-theme { +.settingsItem.on md-icon.md-default-theme.group { color: #F12B24 !important; } @@ -165,7 +154,7 @@ md-list-item .md-no-style { .navigation { text-align: center; - padding: 30px 0 30px 0; + padding: 30px 0; } .navigationItem { @@ -183,11 +172,6 @@ md-list-item .md-no-style { text-decoration: underline; } -#lightControl { - max-width: 500px; - margin: auto; -} - .color { border: 1px solid rgba(0, 0, 0, 0.5); } @@ -230,8 +214,8 @@ md-slider.md-default-theme .md-thumb:after { #groupControls.on { width: 300px; - top: 55px; - right: 48px; + top: 20px; + right: 0; position: absolute; display: block; z-index: 2; @@ -623,7 +607,6 @@ md-switch.md-default-theme.md-checked .md-thumb{ #beatArea { position: relative; - height: $playerBeatAreaHeight; } #beatArea * .noUi-target { @@ -650,16 +633,18 @@ md-switch.md-default-theme.md-checked .md-thumb{ } #playerBottom { + display: flex; + align-items: center; + justify-content: center; color: white; background-color: #5D5D5D; } -#beatSpeakerContainer { - height: $playerBeatAreaHeight; +#beatContainer { padding: 0; } -#beatSpeakerContainer md-switch { +#beatContainer md-switch { bottom: 0; position: absolute; margin-left: 0; @@ -667,36 +652,12 @@ md-switch.md-default-theme.md-checked .md-thumb{ } #beatSpeaker { - position: relative; margin: 10px auto 0 auto; - border-radius: 50%; - width: 280px; - height: 280px; - background-image: url('images/speaker-outer.png'); - //border: 1px solid white; - //background: black; - #beatSpeakerCenter { - width: 188px; - height: 186px; - position: absolute; - top: 17%; - left: 17%; - border-radius: 50%; - //border: 3px solid brown; - //background: orange; - background-image: url('images/speaker-inner.png'); - } - //#beatSpeakerCenter::before { - // position: absolute; - // top: 28%; - // left: 28%; - // width: 80px; - // height: 80px; - // content: ''; - // background-color: black; - // border: 1px solid white; - // border-radius: 50%; - //} + width: 100%; +} + +#beatSpeakerCenter { + } .pop { diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs index f942d59..363e243 100644 --- a/app/templates/components/bridge-controls.hbs +++ b/app/templates/components/bridge-controls.hbs @@ -1,27 +1,29 @@ {{#if ready}} -
- - {{paper-icon icon="group"}} - +
+
+ {{#each tabData as |tab|}} + {{tab.name}} + {{/each}} +
- - {{paper-icon icon="settings"}} +
+ + {{paper-icon icon="group"}} - {{#if appSettingsDisplayed}} -
-
Switch bridge
-
Clear application settings
-
- {{/if}} - -
+ {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}} + - {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}} + + {{paper-icon icon="settings"}} -
- {{#each tabData as |tab|}} - {{tab.name}} - {{/each}} + {{#if appSettingsDisplayed}} +
+
Switch bridge
+
Clear application settings
+
+ {{/if}} + +
{{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}} diff --git a/app/templates/components/bridge-finder.hbs b/app/templates/components/bridge-finder.hbs index c84acf6..2ad6a9e 100644 --- a/app/templates/components/bridge-finder.hbs +++ b/app/templates/components/bridge-finder.hbs @@ -26,7 +26,7 @@
{{else}} {{#if bridgeFindFail}} -

A hue bridge was not found on your network :(
+

A hue bridge was not found on your network.
Enter one manually?

diff --git a/app/templates/components/controls/light-control.hbs b/app/templates/components/controls/light-control.hbs index e9481aa..bbd9bed 100644 --- a/app/templates/components/controls/light-control.hbs +++ b/app/templates/components/controls/light-control.hbs @@ -3,19 +3,19 @@ {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontalLightGroup"}} {{/paper-item}} - {{#paper-item class="item"}} + {{#paper-item}} {{paper-icon icon="power-settings-new"}} -

Lights

+

Power

{{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}} {{/paper-item}} - {{#paper-item class="item"}} + {{#paper-item}} {{paper-icon icon="brightness-4"}}

Brightness

{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}} {{/paper-item}} - {{#paper-item class="item"}} + {{#paper-item}} {{paper-icon icon="color-lens"}}

Color

{{#paper-button raised=true class="color" action="toggleColorpicker"}}{{/paper-button}} @@ -26,7 +26,7 @@ {{/if}} - {{#paper-item class="item"}} + {{#paper-item}} {{paper-icon icon="flare"}}

Strobe

{{#paper-switch checked=strobeOn disabled=trial}} {{strobeOnTxt}} {{/paper-switch}} diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs index 34aba5e..18452f1 100644 --- a/app/templates/components/controls/music-control.hbs +++ b/app/templates/components/controls/music-control.hbs @@ -1,5 +1,5 @@
-
+
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} @@ -24,7 +24,7 @@
-
+
@@ -59,7 +59,7 @@
- +
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}} @@ -83,14 +83,14 @@
{{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
- +
- +
{{#paper-switch checked=speakerViewed noink=true}} {{speakerLabel}} {{/paper-switch}} {{#liquid-if speakerViewed}} -
- - +
+ +
{{else}}
@@ -99,5 +99,5 @@ {{/each}}
{{/liquid-if}} - +
\ No newline at end of file