From ce88d34c422853a1f3849aba6f226b1189ee23c2 Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Mon, 7 Oct 2013 16:44:47 -0700
Subject: [PATCH] Style pie chart area; move chart box to top of panel

---
 ui/index.jsp                   | 98 +++++++++++++++++-----------------
 ui/stylesheets/_dashboard.scss | 43 +++++++++++++--
 2 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/ui/index.jsp b/ui/index.jsp
index 5fd63b8c3a2..7d1d748c204 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -1226,6 +1226,54 @@ under the License.
 
       <!-- Admin dashboard -->
       <div class="dashboard admin">
+          <!-- Capacity / stats -->
+          <div class="dashboard-container head">
+              <div class="top">
+                  <div class="title">
+                      <span></span>
+                  </div>
+
+                  <div class="button fetch-latest">
+                      <span><fmt:message key="label.fetch.latest"/></span>
+                  </div>
+
+                  <div class="selects" style="display:none;">
+                      <div class="select">
+                          <label><fmt:message key="label.zone"/>:</label>
+                          <select>
+                          </select>
+                      </div>
+                      <div class="select">
+                          <label><fmt:message key="label.pods"/>:</label>
+                          <select>
+                          </select>
+                      </div>
+                  </div>
+              </div>
+
+              <!-- Zone stat charts -->
+              <div class="zone-stats">
+                  <ul data-item="zoneCapacities">
+                      <li concat-value="25">
+                          <div class="label">
+                              <fmt:message key="label.zone"/>: <span data-list-item="zoneName"></span>
+                          </div>
+                          <div class="pie-chart-container">
+                              <div class="percent-label"><span data-list-item="percent"></span>%</div>
+                              <div class="pie-chart" data-list-item="percent"></div>
+                          </div>
+                          <div class="info">
+                              <div class="name" data-list-item="type"></div>
+                              <div class="value">
+                                  <span class="used" data-list-item="used"></span>
+                                  <span class="divider">/</span>
+                                  <span class="total" data-list-item="total"></span>
+                              </div>
+                          </div>
+                      </li>
+                  </ul>
+              </div>
+          </div>
         <!-- General alerts-->
         <div class="dashboard-container sub alerts first">
           <div class="top">
@@ -1256,55 +1304,7 @@ under the License.
               </div>
             </li>
           </ul>
-        </div>
-        <!-- Capacity / stats -->
-        <div class="dashboard-container head">
-          <div class="top">
-            <div class="title">
-              <span></span>
-            </div>
-
-             <div class="button fetch-latest">
-               <span><fmt:message key="label.fetch.latest"/></span>
-              </div>
-
-            <div class="selects" style="display:none;">
-              <div class="select">
-                <label><fmt:message key="label.zone"/>:</label>
-                <select>
-                </select>
-              </div>
-              <div class="select">
-                <label><fmt:message key="label.pods"/>:</label>
-                <select>
-                </select>
-              </div>
-            </div>
-          </div>
-
-          <!-- Zone stat charts -->
-          <div class="zone-stats">
-            <ul data-item="zoneCapacities">
-              <li concat-value="25">
-                <div class="label">
-                  <fmt:message key="label.zone"/>: <span data-list-item="zoneName"></span>
-                </div>
-                <div class="pie-chart-container">
-                  <div class="percent-label"><span data-list-item="percent"></span>%</div>
-                  <div class="pie-chart" data-list-item="percent"></div>
-                </div>
-                <div class="info">
-                  <div class="name" data-list-item="type"></div>
-                  <div class="value">
-                    <span class="used" data-list-item="used"></span>
-                    <span class="divider">/</span>
-                    <span class="total" data-list-item="total"></span>
-                  </div>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
+        </div>        
       </div>
 
       <!-- User dashboard-->
diff --git a/ui/stylesheets/_dashboard.scss b/ui/stylesheets/_dashboard.scss
index f3a8df03b2f..64c1fd2ddc4 100644
--- a/ui/stylesheets/_dashboard.scss
+++ b/ui/stylesheets/_dashboard.scss
@@ -17,10 +17,19 @@
 
 // Admin dashboard
 .dashboard.admin {
+    padding: 10px;
+    
     .sub.alerts {
-        width: 50%;
-        float: left;
-        padding: 15px;
+        width: 48%;
+        margin-top: 25px;
+
+        &.first {
+            float: left;
+        }
+
+        &.last {
+            float: right;
+        }
 
         ul {
             height: 200px;
@@ -72,6 +81,26 @@
         }
     }
 
+    .head {
+        float: left;
+        border: 1px solid #cfcfcf;
+
+        .top {
+            @include csui-toolbar;
+
+            .title {
+                float: left;
+                margin-top: 8px;
+            }
+            
+            .fetch-latest {
+                @include csui-button;
+                
+                float: right;
+            }
+        }
+    }
+
     .zone-stats {
         @include row;
 
@@ -79,11 +108,13 @@
 
         ul {
             padding: 0;
+            max-height: 230px;
+            overflow: auto;
             
             li {
                 width: 200px;
                 height: 200px;
-                margin: 15px;
+                margin: 13px;
                 list-style: none;
                 float: left;
                 border: 1px solid #ccc;
@@ -101,6 +132,10 @@
                     width: 100px;
                     height: 100px;
 
+                    canvas.overlay {
+                        display: none;
+                    }
+
                     .percent-label {
                         position: absolute;
                         top: 30px;