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';
export default Em.Component.extend({
classNames: ['container'],
classNames: ['container-fluid'],
elementId: 'bridgeControls',
bridgeIp: null,

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

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

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

@ -1,7 +1,7 @@
import Em from 'ember';
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'],
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';
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'],
onActiveChange: function(){
@ -37,10 +37,6 @@ export default Em.Component.extend(musicControlMixin, {
}
this.get('playQueue').removeAt(index);
//if(index === this.get('playQueuePointer')){
// this.get('dancer')
//}
},
defaultControls: function(){
var beatOptions = this.get('beatOptions');
@ -117,6 +113,9 @@ export default Em.Component.extend(musicControlMixin, {
this.send('goToSong', nextSong);
}
},
toggleVisualizations: function() {
this.toggleProperty('visualizationsDisplayed');
},
fullscreen: function () {},
seekChanged: function (position) {
var dancer = this.get('dancer');

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

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

53
app/styles/app.scss
View file

@ -25,6 +25,10 @@ body {
position: relative;
}
#settings {
text-align: right;
}
.settingsItem {
margin-left: 15px;
position: relative;
@ -137,7 +141,7 @@ md-progress-linear {
#appSettings {
position: absolute;
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;
width: 200px;
right: 0;
@ -147,7 +151,6 @@ md-progress-linear {
cursor: pointer;
}
md-list {
padding: 0;
}
@ -158,7 +161,6 @@ md-list-item .md-no-style {
#bridgeControls {
position: relative;
max-width: 1000px;
}
.navigation {
@ -205,12 +207,13 @@ md-list-item .md-no-style {
cursor: crosshair;
}
#loopAddition{
#loopAddition {
position: absolute;
left: 18px;
top: 13px;
font-size: 16px;
}
// LIGHT GROUP
md-slider {
cursor: pointer;
@ -227,7 +230,7 @@ md-slider.md-default-theme .md-thumb:after {
#groupControls {
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;
width: 300px;
top: 20px;
@ -243,6 +246,7 @@ md-slider.md-default-theme .md-thumb:after {
#groupControls.on {
display: block;
}
.lightGroup {
margin: 0 auto 0 auto;
.tooltip.top {
@ -398,7 +402,7 @@ md-switch.md-default-theme.md-checked .md-bar {
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;
}
@ -588,13 +592,18 @@ md-switch.md-default-theme.md-checked .md-thumb{
}
}
.songArtist {
font-style: italic;
}
#playListArea.dragHereHighlight {
background-color: white;
border: 5px dotted #5383ff;
}
#playListArea.draggingOver {
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 {
@ -604,9 +613,9 @@ md-switch.md-default-theme.md-checked .md-thumb{
}
.playlistItem {
height: 45px;
min-height: 50px;
font-family: 'Open Sans', sans-serif;
padding: 5px;
padding: 5px 20px 5px 5px;
position: relative;
color: darken(white, 20%);
.close {
@ -622,6 +631,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
.playlistItem:hover {
background-color: lighten($playListBackgroundColor, 40%);
color: white;
.close {
display: block;
}
@ -629,8 +639,6 @@ md-switch.md-default-theme.md-checked .md-thumb{
#beatArea {
position: relative;
float: none;
display: table-cell;
}
#beatArea * .noUi-target {
@ -642,7 +650,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
cursor: pointer;
}
#beatArea * .noUi-vertical {
#beatArea * .noUi-vertical {
height: 170px;
margin-top: 20px;
margin-bottom: 15px;
@ -659,26 +667,23 @@ md-switch.md-default-theme.md-checked .md-thumb{
#playerBottom {
color: white;
background-color: #5D5D5D;
display: table;
width: 100%;
}
#beatContainer {
vertical-align: middle;
padding: 0;
float: none;
display: table-cell;
md-switch {
bottom: 0;
position: absolute;
margin-left: 0;
z-index: 3;
margin-bottom: 2px;
}
}
#beatContainer
#beatSpeaker {
position:relative;
position: relative;
padding: 0 5%;
img {
width: 100%;
@ -708,6 +713,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
transform: scale(1.1);
}
}
#beatArea .lightGroup {
margin: 10px 20px 0 40px;
float: right;
@ -731,6 +737,7 @@ md-switch.md-default-theme.md-checked .md-thumb{
}
#beatHistory {
color: black;
height: 250px;
background-color: white;
border-radius: 10px;
@ -740,3 +747,13 @@ md-switch.md-default-theme.md-checked .md-thumb{
padding: 10px;
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}}
<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|}}
<span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}}
</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 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>
<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"
data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
</span>
@ -41,8 +44,14 @@
<div id="playListArea" class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
{{#if (or playQueueEmpty dragging)}}
<div id="dragHere">Drag your music files here</div>
{{paper-icon icon="library-music"}}
<div id="dragHere">
{{#if dragging}}
Drag your music files here
{{else}}
Add your music files here
{{/if}}
</div>
{{paper-icon icon="library-music"}}
{{/if}}
{{#each playQueue as |item index|}}
@ -88,13 +97,11 @@
<div id="beatContainer" class="col-sm-4 col-xs-12">
{{#if speakerViewed}}
<div id="beatSpeakerContainer">
<div id="beatSpeaker">
<img src="assets/images/speaker-outer.png" />
<div id="beatSpeakerCenter">
<img src="assets/images/speaker-inner.png" class="cursorPointer" {{action "clickSpeaker"}} />
</div>
</div>
<div id="beatSpeaker">
<img src="assets/images/speaker-outer.png" />
<div id="beatSpeakerCenter">
<img src="assets/images/speaker-inner.png" class="cursorPointer" {{action "clickSpeaker"}} />
</div>
</div>
{{else}}
<div id ="beatHistory">