fuck paper content

app/components/controls/group-control.js

@@ -1,7 +1,7 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNames: ['innerControlFrame', 'groupPanel'],
+  classNames: ['innerControlFrame', 'groupControl'],
 
   tagName: null,
 

app/components/controls/light-control.js

@@ -1,7 +1,6 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-
   classNames: ['innerControlFrame'],
 
   activeLights: [],

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: ['container-fluid', 'innerControlFrame'],
+  classNames: ['innerControlFrame'],
 
   actions: {
     defaultControls: function(){

app/components/huegasm-app.js

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

app/styles/app.scss

@@ -1,12 +1,8 @@
-// TODO: more elegant way to disable the automatic colapsing?
-$locked-breakpoint: 800px !important;
-
 @import 'ember-paper';
 @import 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';
 @import 'ember-modal-dialog/ember-modal-structure';
 @import 'ember-modal-dialog/ember-modal-appearance';
 
-
 $playerBackColor: #F12B24;
 $playerHeight: 400px;
 $playerBeatAreaHeight: 320px;
@@ -76,7 +72,6 @@ md-progress-circular {
 }
 
 md-content {
-  margin: 0 auto 0 auto;
   max-width: 1000px;
 }
 
@@ -85,6 +80,10 @@ md-content {
   position: relative;
 }
 
+.groupControl {
+
+}
+
 .navigation {
   margin: 0 auto 0 auto;
   padding: 30px 0 30px 0;
@@ -115,7 +114,7 @@ md-content {
   overflow: visible;
 }
 
-.groupPanel {
+.groupControl {
   //border-right: 1px solid black;
 }
 

app/templates/components/bridge-controls.hbs

@@ -1,30 +1,20 @@
 {{#if ready}}
-  {{#paper-nav-container class="ember-app"}}
 
-    {{#paper-sidenav class="md-sidenav-left md-whiteframe-z2" flex-layout="column" flex=true locked-open="lg"}}
+  {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
+  
+  <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}}
+  </div>
 
-      {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData}}
+  {{#if lightsTabSelected class="tabSwitch"}}
-    {{/paper-sidenav}}
+    {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial}}
+  {{/if}}
 
-    {{#paper-sidenav-toggle class="menu-sidenav-toggle"}}
+  {{#if musicTabSelected class="tabSwitch"}}
-      {{paper-icon icon="menu" size="lg"}}
+    {{controls/music-control apiURL=apiURL lightsData=lightsData  activeLights=activeLights}}
-    {{/paper-sidenav-toggle}}
+  {{/if}}
 
-    {{#paper-content flex-layout="column" flex=true}}
-        <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}}
-        </div>
-
-        {{#if lightsTabSelected class="tabSwitch"}}
-          {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial}}
-        {{/if}}
-
-        {{#if musicTabSelected class="tabSwitch"}}
-          {{controls/music-control apiURL=apiURL lightsData=lightsData  activeLights=activeLights}}
-        {{/if}}
-    {{/paper-content}}
-  {{/paper-nav-container}}
   {{huegasm-footer}}
 {{/if}}

app/templates/components/controls/group-control.hbs

@@ -1,14 +1,12 @@
-{{#paper-content}}
+<h3 class="sideNavTitle">Light Groups<span data-toggle="tooltip" data-placement="top auto" title="Add Group" class="addButton pull-right cursorPointer" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}}</span></h3>
-    <h3 class="sideNavTitle">Light Groups<span data-toggle="tooltip" data-placement="top auto" title="Add Group" class="addButton pull-right cursorPointer" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}}</span></h3>
 
-    {{#paper-list}}
+{{#paper-list}}
-      {{#each groupsArrData as |group|}}
+  {{#each groupsArrData as |group|}}
-        {{#paper-item class=group.rowClass}}
+    {{#paper-item class=group.rowClass}}
-          <div class="groupSelect cursorPointer" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="bottom auto" title="Remove Group" class="removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
+      <div class="groupSelect cursorPointer" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="bottom auto" title="Remove Group" class="removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
-        {{/paper-item}}
+    {{/paper-item}}
-      {{/each}}
+  {{/each}}
-    {{/paper-list}}
+{{/paper-list}}
-{{/paper-content}}
 
 {{modals/add-group-modal lightsData=lightsData groupsData=groupsData isShowingAddGroupsModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData
 action="toggleAddGroupsModal"}}