From 9b58c951bfedb4141640cfb4e911e58e79126297 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Mon, 20 Apr 2015 14:13:27 -0400
Subject: [PATCH] Mobilification of super user panel

---
 static/css/core-ui.css          | 25 ++++++++++++++++++-------
 static/css/pages/super-user.css |  0
 static/partials/super-user.html | 30 ++++++++++++------------------
 3 files changed, 30 insertions(+), 25 deletions(-)
 create mode 100644 static/css/pages/super-user.css

diff --git a/static/css/core-ui.css b/static/css/core-ui.css
index 5e0a88e7c..cd65ecdfd 100644
--- a/static/css/core-ui.css
+++ b/static/css/core-ui.css
@@ -45,16 +45,10 @@
   height: 70px;
 }
 
-@media (max-width: 767px) {
-  .co-nav-title {
-    height: auto;
-    min-height: 70px;
-  }
-}
-
 .co-nav-title .co-nav-title-content {
   color: white;
   text-align: center;
+  white-space: nowrap;
 }
 
 .co-nav-title .co-nav-title-action {
@@ -73,6 +67,21 @@
   margin-right: 6px;
 }
 
+
+@media (max-width: 767px) {
+  .co-nav-title {
+    height: auto;
+    min-height: 70px;
+  }
+
+  .co-nav-title .co-nav-title-content {
+    max-height: 38px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 22px;
+  }
+}
+
 .co-tab-container {
   padding: 0px;
 }
@@ -103,6 +112,8 @@
 @media (max-width: 767px) {
   .co-tab-content {
     padding: 20px;
+    width: 100%;
+    display: block;
   }
 }
 
diff --git a/static/css/pages/super-user.css b/static/css/pages/super-user.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/static/partials/super-user.html b/static/partials/super-user.html
index 1e77afa06..1326462e8 100644
--- a/static/partials/super-user.html
+++ b/static/partials/super-user.html
@@ -1,4 +1,4 @@
-<div>
+<div class="super-user">
   <div class="cor-loader" ng-show="!configStatus"></div>
   <div class="page-content" quay-show="Features.SUPER_USERS && configStatus == 'ready'">
     <div ng-if="requiresRestart" class="alert alert-warning restart-required">
@@ -33,7 +33,7 @@
         <span class="cor-tab" tab-title="Internal Logs and Debugging" tab-target="#debug" tab-init="loadDebugServices()">
           <i class="fa fa-bug"></i>
         </span>
-        <span class="cor-tab" tab-title="Registry Settings" tab-target="#setup"
+        <span class="cor-tab hidden-xs" tab-title="Registry Settings" tab-target="#setup"
                               tab-init="loadConfig()">
           <i class="fa fa-cog"></i>
         </span>
@@ -114,29 +114,23 @@
             {{ usersError }}
           </div>
           <div ng-show="users">
-            <div class="side-controls">
-              <div class="result-count">
-                Showing {{(users | filter:search | limitTo:100).length}} of
-                {{(users | filter:search).length}} matching users
-              </div>
-              <div class="filter-input">
-                <input id="log-filter" class="form-control" placeholder="Filter Users" type="text" ng-model="search.$">
-              </div>
-              <button class="btn btn-primary" style="vertical-align: top; margin-left: 10px;"
-                      ng-click="showCreateUser()">
+            <div class="manager-header" header-title="Users">
+              <button class="create-button btn btn-primary" ng-click="showCreateUser()">
                 <i class="fa fa-plus" style="margin-right: 6px;"></i>Create User
               </button>
             </div>
 
-            <table class="table">
+            <div class="filter-box" collection="users" filter-model="search" filter-name="Users"></div>
+
+            <table class="cor-table">
               <thead>
-                <th style="width: 24px;"></th>
-                <th>Username</th>
-                <th>E-mail address</th>
-                <th style="width: 24px;"></th>
+                <td style="width: 24px;"></td>
+                <td>Username</td>
+                <td>E-mail address</td>
+                <td style="width: 24px;"></td>
               </thead>
 
-              <tr ng-repeat="current_user in (users | filter:search | orderBy:'username' | limitTo:100)"
+              <tr ng-repeat="current_user in (users | filter:search | orderBy:'username')"
                   class="user-row">
                 <td>
                   <span class="avatar" data="current_user.avatar" size="24"></span>