lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile responsiveness, styling

Browse source
This commit is contained in:
Egor Philippov 2015-09-28 13:42:14 -07:00
parent cb70092b85
commit 3d710e18ad
8 changed files with 62 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/bridge-controls.js
View file

@ -1,7 +1,7 @@
import Em from 'ember'; import Em from 'ember';
export default Em.Component.extend({ export default Em.Component.extend({
classNames: ['container'], classNames: ['container-fluid'],
elementId: 'bridgeControls', elementId: 'bridgeControls',
bridgeIp: null, bridgeIp: null,

1
app/components/controls/group-control.js
View file

@ -2,7 +2,6 @@ import Em from 'ember';
export default Em.Component.extend({ export default Em.Component.extend({
classNameBindings: ['groupControlDisplayed:on'], classNameBindings: ['groupControlDisplayed:on'],
classNames: ['innerControlFrame'],
elementId: 'groupControls', elementId: 'groupControls',
tagName: null, tagName: null,

2
app/components/controls/light-control.js
View file

@ -1,7 +1,7 @@
import Em from 'ember'; import Em from 'ember';
export default Em.Component.extend({ export default Em.Component.extend({
classNames: ['innerControlFrame', 'col-sm-8', 'col-sm-offset-2', 'col-xs-12'], classNames: ['col-lg-4', 'col-lg-offset-4', 'col-sm-6', 'col-sm-offset-3', 'col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
elementId: 'lightControl', elementId: 'lightControl',

9
app/components/controls/music-control.js
View file

@ -2,7 +2,7 @@ import Em from 'ember';
import musicControlMixin from '../mixins/music-control'; import musicControlMixin from '../mixins/music-control';
export default Em.Component.extend(musicControlMixin, { export default Em.Component.extend(musicControlMixin, {
classNames: ['innerControlFrame'], classNames: ['col-lg-6', 'col-lg-offset-3', 'col-sm-10', 'col-sm-offset-1', 'col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
onActiveChange: function(){ onActiveChange: function(){
@ -37,10 +37,6 @@ export default Em.Component.extend(musicControlMixin, {
} }
this.get('playQueue').removeAt(index); this.get('playQueue').removeAt(index);
//if(index === this.get('playQueuePointer')){
// this.get('dancer')
//}
}, },
defaultControls: function(){ defaultControls: function(){
var beatOptions = this.get('beatOptions'); var beatOptions = this.get('beatOptions');
@ -117,6 +113,9 @@ export default Em.Component.extend(musicControlMixin, {
this.send('goToSong', nextSong); this.send('goToSong', nextSong);
} }
}, },
toggleVisualizations: function() {
this.toggleProperty('visualizationsDisplayed');
},
fullscreen: function () {}, fullscreen: function () {},
seekChanged: function (position) { seekChanged: function (position) {
var dancer = this.get('dancer'); var dancer = this.get('dancer');

5
app/components/mixins/music-control.js
View file

@ -34,7 +34,7 @@ export default Em.Mixin.create({
frequency: { frequency: {
range: {min: 0, max: 10}, range: {min: 0, max: 10},
step: 1, step: 1,
defaultValue: [0,10], defaultValue: [0,4],
pips: { pips: {
mode: 'values', mode: 'values',
values: [0,2,4,6,8,10], values: [0,2,4,6,8,10],
@ -49,7 +49,7 @@ export default Em.Mixin.create({
threshold: 0.3, threshold: 0.3,
decay: 0.02, decay: 0.02,
frequency: [0,10], frequency: [0,4],
playQueuePointer: -1, playQueuePointer: -1,
playQueue: Em.A(), playQueue: Em.A(),
@ -62,6 +62,7 @@ export default Em.Mixin.create({
dragging: false, dragging: false,
draggingOverPlayListArea: false, draggingOverPlayListArea: false,
dragLeaveTimeoutHandle: null, dragLeaveTimeoutHandle: null,
visualizationsDisplayed: false,
playQueueEmpty: Em.computed.empty('playQueue'), playQueueEmpty: Em.computed.empty('playQueue'),
playQueueNotEmpty: Em.computed.notEmpty('playQueue'), playQueueNotEmpty: Em.computed.notEmpty('playQueue'),

53
app/styles/app.scss
View file

@ -25,6 +25,10 @@ body {
position: relative; position: relative;
} }
#settings {
text-align: right;
}
.settingsItem { .settingsItem {
margin-left: 15px; margin-left: 15px;
position: relative; position: relative;
@ -137,7 +141,7 @@ md-progress-linear {
#appSettings { #appSettings {
position: absolute; position: absolute;
background: white; background: white;
box-shadow: 5px 10px 15px 5px rgba(0,0,0,.3); box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
z-index: 2; z-index: 2;
width: 200px; width: 200px;
right: 0; right: 0;
@ -147,7 +151,6 @@ md-progress-linear {
cursor: pointer; cursor: pointer;
} }
md-list { md-list {
padding: 0; padding: 0;
} }
@ -158,7 +161,6 @@ md-list-item .md-no-style {
#bridgeControls { #bridgeControls {
position: relative; position: relative;
max-width: 1000px;
} }
.navigation { .navigation {
@ -205,12 +207,13 @@ md-list-item .md-no-style {
cursor: crosshair; cursor: crosshair;
} }
#loopAddition{ #loopAddition {
position: absolute; position: absolute;
left: 18px; left: 18px;
top: 13px; top: 13px;
font-size: 16px; font-size: 16px;
} }
// LIGHT GROUP // LIGHT GROUP
md-slider { md-slider {
cursor: pointer; cursor: pointer;
@ -227,7 +230,7 @@ md-slider.md-default-theme .md-thumb:after {
#groupControls { #groupControls {
display: none; display: none;
box-shadow: 5px 10px 15px 5px rgba(0,0,0,.3); box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
width: 300px; width: 300px;
top: 20px; top: 20px;
@ -243,6 +246,7 @@ md-slider.md-default-theme .md-thumb:after {
#groupControls.on { #groupControls.on {
display: block; display: block;
} }
.lightGroup { .lightGroup {
margin: 0 auto 0 auto; margin: 0 auto 0 auto;
.tooltip.top { .tooltip.top {
@ -398,7 +402,7 @@ md-switch.md-default-theme.md-checked .md-bar {
background-color: rgba(241, 43, 36, 0.5); background-color: rgba(241, 43, 36, 0.5);
} }
md-switch.md-default-theme.md-checked .md-thumb{ md-switch.md-default-theme.md-checked .md-thumb {
background-color: #F12B24; background-color: #F12B24;
} }
@ -588,13 +592,18 @@ md-switch.md-default-theme.md-checked .md-thumb{
} }
} }
.songArtist {
font-style: italic;
}
#playListArea.dragHereHighlight { #playListArea.dragHereHighlight {
background-color: white; background-color: white;
border: 5px dotted #5383ff; border: 5px dotted #5383ff;
} }
#playListArea.draggingOver { #playListArea.draggingOver {
background-color: darken(white, 5%); background-color: darken(white, 5%);
box-shadow: inset 0 0 20px 0 rgba(0,0,0,1); box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 1);
} }
#fileInput { #fileInput {
@ -604,9 +613,9 @@ md-switch.md-default-theme.md-checked .md-thumb{
} }
.playlistItem { .playlistItem {
height: 45px; min-height: 50px;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
padding: 5px; padding: 5px 20px 5px 5px;
position: relative; position: relative;
color: darken(white, 20%); color: darken(white, 20%);
.close { .close {
@ -622,6 +631,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
.playlistItem:hover { .playlistItem:hover {
background-color: lighten($playListBackgroundColor, 40%); background-color: lighten($playListBackgroundColor, 40%);
color: white;
.close { .close {
display: block; display: block;
} }
@ -629,8 +639,6 @@ md-switch.md-default-theme.md-checked .md-thumb{
#beatArea { #beatArea {
position: relative; position: relative;
float: none;
display: table-cell;
} }
#beatArea * .noUi-target { #beatArea * .noUi-target {
@ -642,7 +650,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
cursor: pointer; cursor: pointer;
} }
#beatArea * .noUi-vertical { #beatArea * .noUi-vertical {
height: 170px; height: 170px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 15px; margin-bottom: 15px;
@ -659,26 +667,23 @@ md-switch.md-default-theme.md-checked .md-thumb{
#playerBottom { #playerBottom {
color: white; color: white;
background-color: #5D5D5D; background-color: #5D5D5D;
display: table; width: 100%;
} }
#beatContainer { #beatContainer {
vertical-align: middle; vertical-align: middle;
padding: 0; padding: 0;
float: none;
display: table-cell;
md-switch { md-switch {
bottom: 0; bottom: 0;
position: absolute; position: absolute;
margin-left: 0; margin-left: 0;
z-index: 3; z-index: 3;
margin-bottom: 2px;
} }
} }
#beatContainer
#beatSpeaker { #beatSpeaker {
position:relative; position: relative;
padding: 0 5%; padding: 0 5%;
img { img {
width: 100%; width: 100%;
@ -708,6 +713,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
transform: scale(1.1); transform: scale(1.1);
} }
} }
#beatArea .lightGroup { #beatArea .lightGroup {
margin: 10px 20px 0 40px; margin: 10px 20px 0 40px;
float: right; float: right;
@ -731,6 +737,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
} }
#beatHistory { #beatHistory {
color: black;
height: 250px; height: 250px;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
@ -740,3 +747,13 @@ md-switch.md-default-theme.md-checked .md-thumb{
padding: 10px; padding: 10px;
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.1); box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.1);
} }
@media (min-width: 768px) {
#playerBottom {
display: table;
}
#beatArea, #beatContainer {
float: none;
display: table-cell;
}
}

4
app/templates/components/bridge-controls.hbs
View file

@ -1,12 +1,12 @@
{{#if ready}} {{#if ready}}
<div class="row navigation"> <div class="row navigation">
<div class="col-xs-6 col-xs-offset-3"> <div class="col-lg-4 col-lg-offset-4 col-xs-6 col-xs-offset-3">
{{#each tabData as |tab|}} {{#each tabData as |tab|}}
<span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span> <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}} {{/each}}
</div> </div>
<div class="col-xs-3"> <div id="settings" class="col-lg-1 col-sm-2 col-xs-3">
<span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}"> <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span> <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>

25
app/templates/components/controls/music-control.hbs
View file

@ -18,6 +18,9 @@
<div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div> <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
<span class="pull-right"> <span class="pull-right">
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
</span>
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}} data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
</span> </span>
@ -41,8 +44,14 @@
<div id="playListArea" class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}> <div id="playListArea" class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
{{#if (or playQueueEmpty dragging)}} {{#if (or playQueueEmpty dragging)}}
<div id="dragHere">Drag your music files here</div> <div id="dragHere">
{{paper-icon icon="library-music"}} {{#if dragging}}
Drag your music files here
{{else}}
Add your music files here
{{/if}}
</div>
{{paper-icon icon="library-music"}}
{{/if}} {{/if}}
{{#each playQueue as |item index|}} {{#each playQueue as |item index|}}
@ -88,13 +97,11 @@
<div id="beatContainer" class="col-sm-4 col-xs-12"> <div id="beatContainer" class="col-sm-4 col-xs-12">
{{#if speakerViewed}} {{#if speakerViewed}}
<div id="beatSpeakerContainer"> <div id="beatSpeaker">
<div id="beatSpeaker"> <img src="assets/images/speaker-outer.png" />
<img src="assets/images/speaker-outer.png" /> <div id="beatSpeakerCenter">
<div id="beatSpeakerCenter"> <img src="assets/images/speaker-inner.png" class="cursorPointer" {{action "clickSpeaker"}} />
<img src="assets/images/speaker-inner.png" class="cursorPointer" {{action "clickSpeaker"}} /> </div>
</div>
</div>
</div> </div>
{{else}} {{else}}
<div id ="beatHistory"> <div id ="beatHistory">