styling

app/pods/components/hue-controls/component.js

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

app/pods/components/hue-controls/template.hbs

@@ -1,5 +1,5 @@
 {{#if ready}}
-  <div class="row navigation">
+  <div class="row navigation antiDimmer">
     <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>
@@ -17,7 +17,7 @@
         <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings" {{action "toggleAppSettings"}}>{{paper-icon icon="settings"}}</span>
 
         {{#if appSettingsDisplayed}}
-          <div id="appSettings">
+          <div id="appSettings" class="antiDimmer">
             <div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
             <div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
           </div>

app/pods/components/lights-tab/component.js

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

app/pods/components/music-tab/template.hbs

@@ -24,6 +24,9 @@
       {{/if}}
 
       <span class="pull-right">
+            <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
+                  data-title="Dim background on play" {{action "toggleDimming"}}>{{paper-icon icon="brightness-high"  class="playerControllIcon"}}
+            </span>
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
                   data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}
             </span>
@@ -101,7 +104,7 @@
 
 {{#if playerBottomDisplayed}}
   <div id="playerBottom" class="row antiDimmer {{if dimmerOn "dimmerFriendly"}}">
-    <div id="beatArea" class="col-lg-8 col-xs-12">
+    <div id="beatArea" class="col-sm-7 col-xs-12">
       <div class="row">
         <div class="beatOption col-xs-3">
           <div class="text-center">{{threshold}}</div>
@@ -162,7 +165,7 @@
       </div>
     </div>
 
-    <div id="beatContainer" class="col-lg-4 col-xs-12">
+    <div id="beatContainer" class="col-sm-5 col-xs-12">
       {{#if speakerViewed}}
         <div class="bezel">
           <div class="rivet1"></div>

app/styles/app.scss

@@ -7,6 +7,7 @@ $playerBackColor: #F12B24;
 $playerHeight: 400px;
 $playerDefaultIconColor: #BBBBBB;
 $footerHeight: 40px;
+$playerBottomHeight: 390px;
 
 // BRIDGE FINDER
 html {
@@ -25,6 +26,7 @@ body {
 }
 
 #settings {
+  padding-right: 0;
   text-align: right;
 }
 
@@ -158,6 +160,7 @@ md-list-item .md-no-style {
 }
 
 #hueControls {
+  max-width: 1200px;
   position: relative;
 }
 
@@ -669,6 +672,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
 }
 
 #beatArea {
+  height: $playerBottomHeight;
   position: relative;
   padding-top: 20px;
 }
@@ -710,8 +714,8 @@ md-switch.md-default-theme.md-checked .md-thumb {
 }
 
 #beatContainer {
-  vertical-align: middle;
-  padding: 0 10px;
+  padding: 0;
+  height: $playerBottomHeight;
   md-switch {
     bottom: 0;
     position: absolute;
@@ -737,27 +741,16 @@ md-switch.md-default-theme.md-checked .md-thumb {
 #beatHistory {
   border: 1px solid #C5C5C5;
   color: black;
-  height: 300px;
+  height: 90%;
   background-color: white;
   border-radius: 10px;
   width: 285px;
-  margin: 0 auto 20px auto;
+  margin: 10px auto 20px auto;
   overflow: auto;
   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;
-  }
-}
-
-
 // FANCY SPEAKER
 /* Variables */
 $centersize: 100px;
@@ -877,6 +870,8 @@ $vibrateblur1:1px;
   position: relative;
   background-color: #A8A8A8;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
+  top: 50%;
+  transform: translateY(-50%);
 }
 .rivet1 {
   @extend %rivet;