ui: show and hide list view on mobile

ui/index.html

@@ -245,7 +245,7 @@
 
   <script type="text/x-handlebars" id="services">
     <div class="row">
-      <div class="col-md-6 col-lg-5 padded-right-middle">
+      <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
         {{view App.ActionBarView }}
 
         {{#if filteredContent}}
@@ -294,10 +294,6 @@
       <div class="border-left hidden-xs hidden-sm">
       </div>
 
-      <div class="visible-xs visible-sm">
-        <hr>
-      </div>
-
       <div class="col-md-6 col-lg-7 border-left scrollable">
         <div class="row padded-border">
           {{outlet}}
@@ -307,6 +303,11 @@
   </script>
 
   <script type="text/x-handlebars" id="service">
+      <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
+        {{#link-to "services" class="btn btn-default btn-block" }}Back to all services{{/link-to}}
+        <hr>
+      </div>
+
       <h3 class="no-margin">{{ model.0.Service.Service }}</h3>
       <hr>
 
@@ -342,7 +343,7 @@
 
   <script type="text/x-handlebars" id="nodes">
     <div class="row">
-      <div class="col-md-6 col-lg-5 padded-right-middle">
+      <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
         {{view App.ActionBarView }}
 
           {{#if filteredContent}}
@@ -390,10 +391,6 @@
       <div class="border-left hidden-xs hidden-sm">
       </div>
 
-      <div class="visible-xs visible-sm">
-        <hr>
-      </div>
-
       <div class="col-md-6 col-lg-7 border-left scrollable">
         <div class="row padded-border">
           {{outlet}}
@@ -403,8 +400,14 @@
   </script>
 
   <script type="text/x-handlebars" id="node">
+      <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
+        {{#link-to "nodes" class="btn btn-default btn-block" }}Back to all nodes{{/link-to}}
+        <hr>
+      </div>
+
       <h3 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h3>
       <hr>
+      {{foobar}}
 
       <h5>Service Tags</h5>
       {{#if model.nodeTags}}
@@ -451,8 +454,6 @@
         </div>
 
       {{/each}}
-
-      {{#link-to "nodes" class="btn btn-default col-xs-12 visible-xs" }}All Nodes{{/link-to}}
   </script>
 
   <script type="text/x-handlebars" id="index">

ui/javascripts/app/controllers.js

@@ -1,3 +1,9 @@
+App.ApplicationController = Ember.ObjectController.extend({
+  updateCurrentPath: function() {
+    App.set('currentPath', this.get('currentPath'));
+  }.observes('currentPath')
+});
+
 App.DcController = Ember.Controller.extend({
   // Whether or not the dropdown menu can be seen
   isDropdownVisible: false,
@@ -230,7 +236,7 @@ App.KvEditController = KvBaseController.extend({
 });
 
 ItemBaseController = Ember.ArrayController.extend({
-  needs: ["dc"],
+  needs: ["dc", "application"],
   queryParams: ["filter", "status", "condensed"],
   dc: Ember.computed.alias("controllers.dc"),
   condensed: true,
@@ -238,6 +244,12 @@ ItemBaseController = Ember.ArrayController.extend({
   status: "any status", // default
   statuses: ["any status", "passing", "failing"],
 
+  isShowingItem: function() {
+    var currentPath = this.get('controllers.application.currentPath');
+    console.log(currentPath);
+    return (currentPath === "dc.nodes.show" || currentPath === "dc.services.show");
+  }.property('controllers.application.currentPath'),
+
   filteredContent: function() {
     var filter = this.get('filter');
     var status = this.get('status');
@@ -270,7 +282,6 @@ App.NodesController = ItemBaseController.extend({
   items: Ember.computed.alias("nodes"),
 });
 
-
 App.ServicesController = ItemBaseController.extend({
   items: Ember.computed.alias("services"),
 });

ui/javascripts/app/router.js

@@ -1,5 +1,6 @@
 window.App = Ember.Application.create({
-  rootElement: "#app"
+  rootElement: "#app",
+  currentPath: ''
 });
 
 

ui/styles/base.scss

@@ -13,12 +13,6 @@
 //   }
 // }
 
-// @media (min-width: 970px) { // + 22
-//   .container {
-//     width: 970px;
-//   }
-// }
-
 @media (min-width: 1120px) { // + 30
   .container {
     width: 1100px;
@@ -47,11 +41,12 @@ a {
   height: 50px;
 }
 
-.border-left {
-  border-left: 1px $gray-background solid;
-
-  .padded-border{
-    padding-left: 30px;
+@media (min-width: 991px) {
+  .border-left {
+    border-left: 1px $gray-background solid;
+    .padded-border{
+      padding-left: 30px;
+    }
   }
 }
 .padded-right-middle {