ref: refs/heads/master
commit 69a7a1fba580882edbc461cc7c6e0754260c6ac7
Author: Robert Lihm
Date: Thu Jul 16 15:38:10 2009 +0200
Changed look of Configuration-Overview
* added mouseover for Elements
* replaced table with div
---
webclient/app/views/controlpanel/index.rhtml | 21 +++++++-------
webclient/app/views/controlpanel/show_all.rhtml | 34 -----------------------
webclient/public/javascripts/script.js | 9 +++++-
webclient/public/stylesheets/style.css | 23 +++++++++++++--
4 files changed, 38 insertions(+), 49 deletions(-)
diff --git a/webclient/app/views/controlpanel/index.rhtml b/webclient/app/views/controlpanel/index.rhtml
index 4570a64..352b4bb 100644
--- a/webclient/app/views/controlpanel/index.rhtml
+++ b/webclient/app/views/controlpanel/index.rhtml
@@ -20,36 +20,35 @@
<% line_counter = 0 %>
<% shortcuts_counter = 0 %>
-<div class="table">
+<div class="list-row overview">
- <table class="listing" cellpadding="0" cellspacing="0">
<% @shortcuts.each do |name, data| %>
<% logger.debug data.inspect %>
<% if line_counter*5 == shortcuts_counter %>
<% if line_counter > 0 %>
- </tr>
+ </div>
<% end %>
<% line_counter +=1 %>
- <tr>
+ <div class="highlight-bg">
<% end %>
- <td>
+ <!-- <div> -->
<% link_to (data['url']) do %>
<img src="<%= data['icon'] %>"/>
- <div>
+ <p>
<%= data['title'] %>
- </div>
+ </p>
<% end %>
- </td>
+ <!-- </div> -->
<% shortcuts_counter +=1 %>
<% end %>
<% if line_counter*5 != shortcuts_counter-1 %>
- </tr>
+ </div>
<% end %>
- </table>
-
</div>
+
+
<div class="content">
<a href="controlpanel/show_all"><%= _("Show all modules") %></a>
</div>
diff --git a/webclient/app/views/controlpanel/show_all.rhtml b/webclient/app/views/controlpanel/show_all.rhtml
index d492a78..f0f096b 100644
--- a/webclient/app/views/controlpanel/show_all.rhtml
+++ b/webclient/app/views/controlpanel/show_all.rhtml
@@ -1,64 +1,30 @@
<h2><img src="/images/yast-config.png" height="23" width="23" border="0" /> <%= _("Configuration") %></h2>
<% @shortcut_groups.each do |name, shortcuts| %>
- <!-- <h3><%= name %></h3> -->
<% line_counter = 0 %>
<% shortcuts_counter = 0 %>
<div class="list-row highlight-bg">
<h3><%= name %></h3>
- <!-- <table class="listing" cellpadding="0" cellspacing="0"> -->
<% shortcuts.each do |data| %>
<% if line_counter*5 == shortcuts_counter %>
<% if line_counter > 0 %>
- <!-- </tr> -->
</div>
<% end %>
<% line_counter +=1 %>
- <!-- <tr> -->
<div>
<% end %>
- <!-- <td> -->
<div>
<img src="<%= data['icon'] %>"/>
<p>
<%= link_to data['title'], data['url'] %>
</p>
</div>
- <!-- </td> -->
<% shortcuts_counter +=1 %>
<% end %>
<% if line_counter*5 != shortcuts_counter-1 %>
- <!-- </tr> -->
</div>
<% end %>
- <!-- </table> -->
-
- <!--
-
- <table class="listing" cellpadding="0" cellspacing="0">
- <% shortcuts.each do |data| %>
- <% if line_counter*5 == shortcuts_counter %>
- <% if line_counter > 0 %>
- </tr>
- <% end %>
- <% line_counter +=1 %>
- <tr>
- <% end %>
- <td>
- <img src="<%= data['icon'] %>"/>
- <div>
- <%= link_to data['title'], data['url'] %>
- </div>
- </td>
- <% shortcuts_counter +=1 %>
- <% end %>
- <% if line_counter*5 != shortcuts_counter-1 %>
- </tr>
- <% end %>
- </table>
-
- -->
</div>
<% end %>
diff --git a/webclient/public/javascripts/script.js b/webclient/public/javascripts/script.js
index 6d84c72..d9517f4 100644
--- a/webclient/public/javascripts/script.js
+++ b/webclient/public/javascripts/script.js
@@ -1,3 +1,10 @@
$(document).ready(function() {
- // Stuff to do as soon as the DOM is ready;
+
+ // Change BG Colour on mouseover and change it back on mouse out
+ $('.highlight-bg').mouseover(function() {
+ $(this).addClass('grey-bg'); // add class for highlighting
+ }).mouseout(function() {
+ $(this).removeClass('grey-bg'); // remove class for highlighting
+ });
+
});
diff --git a/webclient/public/stylesheets/style.css b/webclient/public/stylesheets/style.css
index b3fda2c..7e665c2 100644
--- a/webclient/public/stylesheets/style.css
+++ b/webclient/public/stylesheets/style.css
@@ -58,7 +58,7 @@ img {
#footer {
min-width: 450px;
width: auto;
- max-width: 1000px;
+ max-width: 960px;
overflow: hidden;
margin: 0 auto;
font-size: 0.8em;
@@ -137,6 +137,7 @@ img {
margin-top: 0;
text-indent: 10px;
}
+.list-row.overview div a,
.list-row div div {
float: left;
margin: 0 25px 0 0;
@@ -144,11 +145,27 @@ img {
text-align: center;
}
-
.list-row {
border-bottom: 1px dotted #ccc;
}
-
+ .list-row.overview > div {
+ overflow: hidden;
+ padding: 1em 0;
+ }
+ .list-row.overview div a {
+ display: block;
+ padding: 1em 0 0;
+ margin: 0 10px;
+ border: 2px dashed transparent;
+ height: 9em;
+ }
+ .list-row.overview div a:hover {
+ border-color: #999;
+ background: #eee;
+ text-decoration: none;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ }
/* == Helper Styles ======================================================= */
.grey-bg {
--
To unsubscribe, e-mail: yast-commit+unsubscribe@opensuse.org
For additional commands, e-mail: yast-commit+help@opensuse.org
