[Ovirt-devel] [PATCH server] First step of detail pane UI cleanup.

[Jason Guiditta]

This patch implements layout fixes to clean up look of the
details pane throughout the site, so it looks more like
the design here:
http://ovirt.org/page/Summary_UX

Note that this does not include the actual rearrangement of
Hardware Pools summary pages.  Best place to see changes is
on the summary for a Resource Pool.
---
 src/app/views/layouts/selection.rhtml       |   15 +++++++++------
 src/app/views/resources/quick_summary.rhtml |    6 ++----
 src/public/stylesheets/components.css       |   11 +++++++----
 src/public/stylesheets/layout.css           |   11 +++--------
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/app/views/layouts/selection.rhtml b/src/app/views/layouts/selection.rhtml
index e7aefc2..1f313d7 100644
--- a/src/app/views/layouts/selection.rhtml
+++ b/src/app/views/layouts/selection.rhtml
@@ -1,8 +1,11 @@
-<div class="selection_left">
-  <div class="selection_title"><%= yield :title -%></div>
+<div class="selection_title"><%= yield :title -%></div>
 
   <% tools = yield :action_links -%> 
   <% if tools %>
+<!-- FIXME: for the love of pete, are we really using a list just to insert a separator??
+     This needs to be cleaned up as soon as somone has time.  It should be a horizontal list
+     for the links (tools), with this separator set as a left background on the first item.
+-->
     <ul class="selection_tools">
       <li>
         <%= image_tag "icon_separator.png", :style=>"vertical-align: middle;" %>
@@ -11,13 +14,13 @@
     </ul>
   <% end %>
   <div class="clear_row"/>
+  <div class="selection_left">
+    <%= yield  %>
+  </div>
 
-  <%= yield  %> 
-
-</div>
 <% right = yield :right -%> 
 <% if right %>
-  <div class="selection_right">  
+  <div class="selection_right">
     <%= right -%> 
   </div>
 <% end %>
diff --git a/src/app/views/resources/quick_summary.rhtml b/src/app/views/resources/quick_summary.rhtml
index 31c4033..0a01105 100644
--- a/src/app/views/resources/quick_summary.rhtml
+++ b/src/app/views/resources/quick_summary.rhtml
@@ -38,7 +38,6 @@
              }, 'json');
   }
 </script>
-
     <div id="vmpool_selection_id" style="display:none"><%= @pool.id %></div>
     <% resources = @pool.full_resources %>
     <div class="selection_key">
@@ -58,7 +57,6 @@
           <%= item[2]%><br>
         <% end %>
     </div>
-</div>
-<div class="selection_right">  
+<%- content_for :right do -%>
     <%= render_component :controller=> 'graph', :action => 'snapshot_graph', :id => @pool.id, :target => 'resource' %>
-</div>
+<% end -%>
\ No newline at end of file
diff --git a/src/public/stylesheets/components.css b/src/public/stylesheets/components.css
index 2313d1c..708eb0e 100644
--- a/src/public/stylesheets/components.css
+++ b/src/public/stylesheets/components.css
@@ -208,11 +208,14 @@
 }
 
 /* snapshot graphs on hardware / resource summary tab */
-#snapshot_graphs table {
-  width: 98%;
-}
 #snapshot_graphs th    { background: #EEEEEE; text-align: left; padding-left: 10px;border:1px solid #CCCCCC;}
-#snapshot_graphs td    { padding-left: 10px; background: #FFFFFF;border:1px solid #CCCCCC;}
+#snapshot_graphs td {
+  padding-left: 10px;
+  padding-right: 10px;
+  white-space: nowrap;
+  background: #FFFFFF;
+  border:1px solid #CCCCCC;
+}
 .snapshot_graph_container{
   width: 180px;
   height: 10px;
diff --git a/src/public/stylesheets/layout.css b/src/public/stylesheets/layout.css
index 987462d..981ff22 100644
--- a/src/public/stylesheets/layout.css
+++ b/src/public/stylesheets/layout.css
@@ -256,13 +256,11 @@ a { color:#000000; text-decoration: none;}
   background: #DEE7EB;
   border-top: #CCCCCC solid 1px;
   overflow: auto;
+  padding: 10px 10px 10px 15px;
 }
 
 .selection_left {
-  padding: 10px 10px 10px 15px;
-  height: 126px;
   float:left;
-  width: 40%;
 }
 
 .selection_title {
@@ -315,12 +313,9 @@ a { color:#000000; text-decoration: none;}
 }
 
 .selection_right {
-  width:55%;
   float: right;
-   padding-top: 10px;
-   /*background: #F0F0F0;*/
-   height: 140px;
- }
+  padding-right: 10px;
+}
  
  .selection_right_title {
    padding: 4px 4px 4px 6px;
-- 
1.6.0.6