Some styling changes
This commit is contained in:
Egor Philippov
parent
6aaca5d4bb
commit
6fb420f988
6 changed files with 51 additions and 88 deletions
|
|
@ -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',
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,27 +1,29 @@
|
|||
{{#if ready}}
|
||||
<div id="settings">
|
||||
<span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl"}}>
|
||||
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups">{{paper-icon icon="group"}}</span>
|
||||
</span>
|
||||
<div class="row navigation">
|
||||
<div class="col-sm-6 col-sm-offset-3 col-xs-9">
|
||||
{{#each tabData as |tab|}}
|
||||
<span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}" {{action "toggleAppSettings"}}>
|
||||
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings">{{paper-icon icon="settings"}}</span>
|
||||
<div id="settings" class="col-sm-3 col-xs-3">
|
||||
<span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl"}}>
|
||||
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups">{{paper-icon icon="group"}}</span>
|
||||
|
||||
{{#if appSettingsDisplayed}}
|
||||
<div id="appSettings">
|
||||
<div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
|
||||
<div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
{{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
|
||||
</span>
|
||||
|
||||
{{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
|
||||
<span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}" {{action "toggleAppSettings"}}>
|
||||
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings">{{paper-icon icon="settings"}}</span>
|
||||
|
||||
<div class="navigation">
|
||||
{{#each tabData as |tab|}}
|
||||
<span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
|
||||
{{/each}}
|
||||
{{#if appSettingsDisplayed}}
|
||||
<div id="appSettings">
|
||||
<div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
|
||||
<div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
{{else}}
|
||||
{{#if bridgeFindFail}}
|
||||
<p>A hue bridge was not found on your network :( <br>
|
||||
<p>A hue bridge was not found on your network. <br>
|
||||
Enter one manually?</p>
|
||||
|
||||
<span id="bridgeInput">
|
||||
|
|
|
|||
|
|
@ -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"}}
|
||||
<p>Lights</p>
|
||||
<p>Power</p>
|
||||
{{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
|
||||
{{/paper-item}}
|
||||
|
||||
{{#paper-item class="item"}}
|
||||
{{#paper-item}}
|
||||
{{paper-icon icon="brightness-4"}}
|
||||
<p>Brightness</p>
|
||||
{{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"}}
|
||||
<p>Color</p>
|
||||
{{#paper-button raised=true class="color" action="toggleColorpicker"}}{{/paper-button}}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#paper-item class="item"}}
|
||||
{{#paper-item}}
|
||||
{{paper-icon icon="flare"}}
|
||||
<p>Strobe</p>
|
||||
{{#paper-switch checked=strobeOn disabled=trial}} {{strobeOnTxt}} {{/paper-switch}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="row">
|
||||
<div id="playerArea" class="col-xs-8 material-icons {{if playing "play-arrow" "pause"}} {{if playQueueEmpty "blockAnimation"}}" {{action "playerAreaPlay"}}>
|
||||
<div id="playerArea" class="col-sm-8 col-xs-12 material-icons {{if playing "play-arrow" "pause"}} {{if playQueueEmpty "blockAnimation"}}" {{action "playerAreaPlay"}}>
|
||||
|
||||
<div id="playerControls">
|
||||
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="playlist" class="col-xs-4">
|
||||
<div id="playlist" class="col-sm-4 col-xs-12">
|
||||
<input id="fileInput" type="file" accept="audio/*" multiple="true" />
|
||||
|
||||
<div id="playListControls">
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</div>
|
||||
|
||||
<div id="playerBottom" class="row">
|
||||
<span id="beatArea" class="col-xs-8">
|
||||
<div id="beatArea" class="col-sm-8 col-xs-12">
|
||||
<div id="vertDivider"></div>
|
||||
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}}
|
||||
|
||||
|
|
@ -83,14 +83,14 @@
|
|||
<div id="playerButtonGroup">
|
||||
{{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span id="beatSpeakerContainer" class="col-xs-4">
|
||||
<div id="beatContainer" class="col-sm-4 col-xs-12">
|
||||
{{#paper-switch checked=speakerViewed noink=true}} {{speakerLabel}} {{/paper-switch}}
|
||||
{{#liquid-if speakerViewed}}
|
||||
<div id="beatSpeaker">
|
||||
<span id="beatSpeakerCenterBackground"></span>
|
||||
<span id="beatSpeakerCenter" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}}></span>
|
||||
<div id="beatSpeakerContainer">
|
||||
<img src="assets/images/speaker-outer.png" id="beatSpeaker" />
|
||||
<img src="assets/images/speaker-inner.png" id="beatSpeakerCenter" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}} />
|
||||
</div>
|
||||
{{else}}
|
||||
<div id ="beatHistory">
|
||||
|
|
@ -99,5 +99,5 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
{{/liquid-if}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
Reference in a new issue