From 1d34ede6029fb6f854ec6c2d0082baf685185998 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 22 Aug 2014 17:14:26 -0700
Subject: [PATCH] ui: mobile fixes for acl

---
 ui/index.html                     | 11 ++++++++---
 ui/javascripts/app/controllers.js |  2 ++
 ui/styles/_buttons.scss           | 14 ++++++++++++++
 ui/styles/base.scss               | 14 --------------
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index dfb89f9a36..9d584a0432 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -43,8 +43,13 @@
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
           <p class="bold">Access Denied</p>
-          <p>Your ACL token, <code>foobarbaz</code>, does not
+          {{#if aclToken}}
+          <p>Your ACL token, <code>{{aclToken}}</code>, does not
           have the appropriate permissions to perform the expected action.</p>
+          {{else}}
+          <p>The default agent token does not
+          have the appropriate permissions to perform the expected action.</p>
+          {{/if}}
           <p>Learn more in the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
         </div>
       </div>
@@ -130,7 +135,7 @@
           {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-2 col-xs-6 col-md-offset-0 col-sm-offset-4 col-xs-offset-1">
           <a {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
 
           {{#if isDropdownVisible}}
@@ -143,7 +148,7 @@
 
         </div>
 
-        <div class="col-md-1 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
+        <div class="col-md-1 col-sm-2 col-xs-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
           {{#link-to 'settings' class='btn btn-default col-xs-6 icon'}}<span class="wrap">&#9881;</span>{{/link-to}}
         </div>
       </div>
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index e364bbd1d6..d14ebbc805 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -5,8 +5,10 @@ App.ApplicationController = Ember.ObjectController.extend({
 });
 
 App.DcController = Ember.Controller.extend({
+  needs: ["application"],
   // Whether or not the dropdown menu can be seen
   isDropdownVisible: false,
+  aclToken: Ember.computed.alias("application.settings.token"),
 
   datacenter: function() {
     return this.get('content');
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
index 179c3a2b1e..2c4ad7c553 100644
--- a/ui/styles/_buttons.scss
+++ b/ui/styles/_buttons.scss
@@ -106,3 +106,17 @@
     }
 
 }
+
+.topbar {
+  .btn.icon {
+    min-width: 50px;
+    font-size: 30px;
+    height: 33px;
+    padding: 0;
+    .wrap {
+      position: absolute;
+      top: -8px;
+      left: 14px;
+    }
+  }
+}
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 7a74a95f7e..10db88faae 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -99,20 +99,6 @@ a {
     background-color: $gray-background;
 }
 
-.topbar {
-  .btn.icon {
-    min-width: 50px;
-    font-size: 30px;
-    height: 33px;
-    padding: 0;
-    .wrap {
-      position: absolute;
-      top: -8px;
-      left: 14px;
-    }
-  }
-}
-
 .action-bar {
   min-height: 50px;
   padding-top: 10px;