ui: more mobile work

ui/index.html

@@ -22,33 +22,33 @@
 
   <script type="text/x-handlebars" data-template-name="dc">
     <div class="row">
-      <div class="col-md-12 col-sm-12 topbar">
+      <div class="col-md-12 col-sm-12 col-xs-12 topbar">
 
-        <div class="col-md-1 col-sm-2">
+        <div class="col-md-1 col-sm-2 col-xs-12">
           <a href="#"><div class="top-brand"></div></a>
         </div>
 
-        <div class="col-md-2 col-sm-3">
+        <div class="col-md-2 col-sm-3 col-xs-12">
-         {{#link-to 'services' class='btn btn-default'}}Services{{/link-to}}
+         {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3">
+        <div class="col-md-2 col-sm-3 col-xs-12">
-          {{#link-to 'nodes' class='btn btn-default'}}Nodes{{/link-to}}
+          {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3">
+        <div class="col-md-2 col-sm-3 col-xs-12">
-          {{#link-to 'kv' class='btn btn-default'}}Key/Value{{/link-to}}
+          {{#link-to 'kv' class='btn btn-default col-xs-12'}}Key/Value{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0">
+        <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-5 col-xs-6">
-            {{#link-to 'services'}}<button {{bind-attr class=":btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</button>{{/link-to}}
+            {{#link-to 'services'}}<button {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</button>{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3">
+        <div class="col-md-2 col-sm-3 col-xs-6">
-          <button type="button" {{bind-attr class=":btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </button>
+          <button type="button" {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </button>
 
           {{#if isDropdownVisible}}
-            <ul class="dropdown-menu" style="display:block;">
+            <ul class="dropdown-menu col-xs-12" style="display:block;">
               {{#each dc in dcs}}
                 <li {{action "toggle"}}>{{#link-to 'services' dc}}{{dc}}{{/link-to}}</li>
               {{/each}}
@@ -63,9 +63,10 @@
   </script>
 
   <script type="text/x-handlebars" id="services">
-    <div class="col-md-5">
+    <div {{ bind-attr class=":col-md-5 hasChild:hidden" }}>
 
       {{#each service in services}}
+
         <div class="row">
             {{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-link" }}
               <div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
@@ -81,8 +82,8 @@
                 <li>{{#link-to 'nodes.show' node class='subtle'}}{{node}}{{/link-to}}</li>
                 {{/each}}
               </ul>
-          </div>
           {{/link-to}}
+        </div>
 
       {{/each}}
 
@@ -127,6 +128,8 @@
         {{/link-to}}
 
       {{/each}}
+
+      {{#link-to "services" class="btn btn-default col-xs-12 visible-xs" }}All Services{{/link-to}}
   </script>
 
   <script type="text/x-handlebars" id="nodes">
@@ -210,6 +213,8 @@
         </div>
       {{/link-to}}
       {{/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

@@ -53,4 +53,20 @@ App.DcController = Ember.Controller.extend({
   }
 })
 
+//
+// path: /:dc/services
+//
+// The index is for choosing services.
+//
+App.ServicesController = Ember.ArrayController.extend({
+  needs: ['application']
+});
 
+//
+// path: /:dc/services/:name
+//
+// An individual service.
+//
+App.ServicesShowController = Ember.Controller.extend({
+  needs: ['services']
+});

ui/javascripts/app/routes.js

@@ -4,16 +4,6 @@
 //
 //
 App.BaseRoute = Ember.Route.extend({
-  //
-  // When activating the base route, if we don't have a datacenter set,
-  // transition the user to the index route to choose a datacenter.
-  //
-  activate: function() {
-    var controller = this.controllerFor('application');
-    if (controller.getDc === null) {
-      this.transitionTo('index');
-    };
-  }
 });
 
 //
@@ -58,10 +48,6 @@ App.DcRoute = App.BaseRoute.extend({
     controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
 
     controller.set('dcs', window.fixtures.dcs);
-  },
-
-  afterModel: function(dcs, transition) {
-    this.transitionTo('services');
   }
 });
 
@@ -98,16 +84,6 @@ App.ServicesShowRoute = App.BaseRoute.extend({
   //
   model: function(params) {
     return [App.Node.create(window.fixtures.services_full[params.name][0]), App.Node.create(window.fixtures.services_full[params.name][1])];
-  },
-
-  setupController: function(controller, model) {
-      controller.set('content', model);
-      //
-      // Since we have 2 column layout, we need to also display the
-      // list of services on the left. Hence setting the attribute
-      // {{services}} on the controller.
-      //
-      controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
   }
 });