From 5315880cbb54b9ecfee227c98e4d59a9d954d781 Mon Sep 17 00:00:00 2001
From: lone-cloud <lonecloud604@pm.me>
Date: Mon, 28 Sep 2015 13:42:14 -0700
Subject: [PATCH] mobile responsiveness, styling

---
 app/components/bridge-controls.js             |  2 +-
 app/components/controls/group-control.js      |  1 -
 app/components/controls/light-control.js      |  2 +-
 app/components/controls/music-control.js      |  9 ++--
 app/components/mixins/music-control.js        |  5 +-
 app/styles/app.scss                           | 53 ++++++++++++-------
 app/templates/components/bridge-controls.hbs  |  4 +-
 .../components/controls/music-control.hbs     | 25 +++++----
 8 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/app/components/bridge-controls.js b/app/components/bridge-controls.js
index 24393e0..e3faffb 100644
--- a/app/components/bridge-controls.js
+++ b/app/components/bridge-controls.js
@@ -1,7 +1,7 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNames: ['container'],
+  classNames: ['container-fluid'],
   elementId: 'bridgeControls',
 
   bridgeIp: null,
diff --git a/app/components/controls/group-control.js b/app/components/controls/group-control.js
index 18f67e0..6637100 100644
--- a/app/components/controls/group-control.js
+++ b/app/components/controls/group-control.js
@@ -2,7 +2,6 @@ import Em from 'ember';
 
 export default Em.Component.extend({
   classNameBindings: ['groupControlDisplayed:on'],
-  classNames: ['innerControlFrame'],
   elementId: 'groupControls',
 
   tagName: null,
diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js
index ef74734..7fca415 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', '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',
 
diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js
index de8ce68..df02b3e 100644
--- a/app/components/controls/music-control.js
+++ b/app/components/controls/music-control.js
@@ -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');
diff --git a/app/components/mixins/music-control.js b/app/components/mixins/music-control.js
index 33fef1f..c3c03df 100644
--- a/app/components/mixins/music-control.js
+++ b/app/components/mixins/music-control.js
@@ -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'),
diff --git a/app/styles/app.scss b/app/styles/app.scss
index cdd5f36..3050da5 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -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;
+  }
+}
diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs
index 7340e80..432eec4 100644
--- a/app/templates/components/bridge-controls.hbs
+++ b/app/templates/components/bridge-controls.hbs
@@ -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>
 
diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs
index 9edbf4f..a48394e 100644
--- a/app/templates/components/controls/music-control.hbs
+++ b/app/templates/components/controls/music-control.hbs
@@ -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">