Jason Guiditta
2009-Apr-13 19:41 UTC
[Ovirt-devel] [PATCH server] First step of detail pane UI cleanup.
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
Mohammed Morsi
2009-Apr-13 22:57 UTC
[Ovirt-devel] [PATCH server] First step of detail pane UI cleanup.
Looks good, so ACK, with a comment below. 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. > +--> >Does it being a list break anything specifically? I think a list is fine, we're not only using it for a separator but we're styling it in the css to appear horizontal / have the same effect you described. We'd need the same css for the divs if we we're to remove the list plus the exception for the first. So not sure if this comment should go in. Other than that, the patch looks good, the details pane output looks just like Jeremy's screenshot. -Mo
Joey Boggs
2009-Apr-16 18:04 UTC
[Ovirt-devel] [PATCH server] First step of detail pane UI cleanup.
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