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

[Joey Boggs]

Jason Guiditta wrote:
> 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;
>   
ack