ref: refs/heads/master
commit d7ec41a87c153b94fd78fb5f01502bb95874bca0
Author: Robert Lihm
Date: Wed Jul 15 19:24:32 2009 +0200
Added basic styling and fixed HTML bugs
* changed main.rhtml HTML structure
* added basic CSS
* Fixed not XHTML conform tags
* closed open <div> tags
* added BG graphic
---
webclient/.gitignore | 3 +-
webclient/app/views/controlpanel/index.rhtml | 22 ++--
webclient/app/views/controlpanel/show_all.rhtml | 2 +-
webclient/app/views/hosts/index.html.erb | 4 +-
webclient/app/views/layouts/main.rhtml | 107 +++++++++---------
webclient/app/views/playground/index.rhtml | 12 +-
webclient/public/images/geckohead-grey.png | Bin 0 -> 1066 bytes
webclient/public/images/geckohead-grey_001.png | Bin 0 -> 1662 bytes
webclient/public/images/script.html | 16 +++
webclient/public/inc/printers.html | 12 +-
.../stylesheets/images/bg-head-gradient-blue.png | Bin 0 -> 371 bytes
.../images/bg-head-gradient-bluegrey.png | Bin 0 -> 389 bytes
.../stylesheets/images/bg-head-gradient-grey.png | Bin 0 -> 282 bytes
webclient/public/stylesheets/style.css | 118 +++++++++++++++++++-
webclient/public/stylesheets/yast.css | 13 ++-
15 files changed, 222 insertions(+), 87 deletions(-)
diff --git a/webclient/.gitignore b/webclient/.gitignore
index d702f0d..9992c2a 100644
--- a/webclient/.gitignore
+++ b/webclient/.gitignore
@@ -1,3 +1,4 @@
*~
db/*.sqlite3
-db/schema.rb
\ No newline at end of file
+db/schema.rb
+._*
diff --git a/webclient/app/views/controlpanel/index.rhtml b/webclient/app/views/controlpanel/index.rhtml
index bfb6e17..bedd50e 100644
--- a/webclient/app/views/controlpanel/index.rhtml
+++ b/webclient/app/views/controlpanel/index.rhtml
@@ -1,22 +1,22 @@
-<h3><img src="/images/monitoring.png" height="23" width="23" border="0"> <%= _("Status") %></h3>
+<h3><img src="/images/monitoring.png" height="23" width="23" border="0" /> <%= _("Status") %></h3>
<div id="status_patches_icon">
- 
height="32" width="32" border="0">
+ height="32" width="32" border="0" />
</div>
<div id="status_patches_msg">
- <a href="patch_updates"><%=@update_label%></a>
-</div>
-<br>
+ <a href="patch_updates"><%=@update_label%></a>
+</div>
+<br />
<div id="status_health_icon">
- <img src="/images/button_ok.png" height="32" width="32" border="0">
+ <img src="/images/button_ok.png" height="32" width="32" border="0" />
</div>
<div id="status_health_msg">
- <a href=""><%= _("Your system is healthy.") %></a>
-</div>
+ <a href=""><%= _("Your system is healthy.") %></a>
+</div>
<div id="favorites">
-<h3><img src="/images/yast-config.png" height="23" width="23" border="0"> <%= _("Configuration") %></h3>
+<h3><img src="/images/yast-config.png" height="23" width="23" border="0" /> <%= _("Configuration") %></h3>
<% line_counter = 0 %>
<% shortcuts_counter = 0 %>
@@ -26,7 +26,7 @@
<% logger.debug data.inspect %>
<% if line_counter*5 == shortcuts_counter %>
<% if line_counter > 0 %>
- </tr>
+ </tr>
<% end %>
<% line_counter +=1 %>
<tr>
@@ -52,4 +52,4 @@
<a href="controlpanel/show_all"><%= _("Show all modules") %></a>
</div>
-
+</div>
diff --git a/webclient/app/views/controlpanel/show_all.rhtml b/webclient/app/views/controlpanel/show_all.rhtml
index d4d181e..a7f0958 100644
--- a/webclient/app/views/controlpanel/show_all.rhtml
+++ b/webclient/app/views/controlpanel/show_all.rhtml
@@ -1,4 +1,4 @@
-<h2><img src="/images/yast-config.png" height="23" width="23" border="0"> <%= _("Configuration") %></h2>
+<h2><img src="/images/yast-config.png" height="23" width="23" border="0" /> <%= _("Configuration") %></h2>
<% @shortcut_groups.each do |name, shortcuts| %>
<h3><%= name %></h3>
diff --git a/webclient/app/views/hosts/index.html.erb b/webclient/app/views/hosts/index.html.erb
index feb6e34..68fbdc5 100644
--- a/webclient/app/views/hosts/index.html.erb
+++ b/webclient/app/views/hosts/index.html.erb
@@ -1,13 +1,13 @@
<div class="services-list">
- <label for="#services-list">Please choose a service:</label>
+ <label for="services-list">Please choose a service:</label>
<table id="services-list" class="list">
<tbody>
<% for host in @hosts %>
<tr class="host-item">
<td class="icon">
- <div class="container"><img src="/icons/yast-service-22.png"></div>
+ <div class="container"><img src="/icons/yast-service-22.png" alt="" /></div>
</td>
<td>
<div class="title"><%= link_to host.name, new_session_path(:hostid => "#{host.id}") %></div>
diff --git a/webclient/app/views/layouts/main.rhtml b/webclient/app/views/layouts/main.rhtml
index 7e4a5b2..28f7147 100644
--- a/webclient/app/views/layouts/main.rhtml
+++ b/webclient/app/views/layouts/main.rhtml
@@ -1,78 +1,79 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html>
-<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/stylesheets/yast.css" type="text/css" media="screen" title="default" charset="utf-8" />
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" media="screen" title="default" charset="utf-8" />
<link rel="stylesheet" href="/stylesheets/jquery.jqplot.css" type="text/css" media="screen" title="default" charset="utf-8" />
- <script type="text/javascript" language="javascript" charset="utf-8" src="/inc/jquery.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/inc/jquery.query.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/inc/jquery.timers.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/javascripts/jquery.jqplot.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/javascripts/plugin/jqplot.pieRenderer.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/javascripts/jquery.validate.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/inc/jquery.ui.custom.js"></script>
+
+ <script type="text/javascript" charset="utf-8" src="/inc/jquery.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/inc/jquery.query.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/inc/jquery.timers.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/javascripts/jquery.jqplot.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/javascripts/plugin/jqplot.pieRenderer.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/inc/jquery.ui.custom.js"></script>
<!--<script type="text/javascript" language="javascript" charset="utf-8" src="/inc/jquery.jqModal.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="/inc/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="/inc/jquery.ui.tabs.js"></script>-->
- <script type="text/javascript" language="javascript" charset="utf-8" src="/inc/shortcut.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/inc/yast.widgets.js"></script>
- <script type="text/javascript" language="javascript" charset="utf-8" src="/inc/yast.helpers.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/inc/shortcut.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/inc/yast.widgets.js"></script>
+ <script type="text/javascript" charset="utf-8" src="/inc/yast.helpers.js"></script>
<title>WebYaST</title>
</head>
- <body id="shell" bgcolor="#ffffff" onload="">
- <div id="appliance_logo">
- <img src="/images/suse-logo.png" alt="SUSE" height="120" width="120" border="0" />
- <div id="appliance_title">My Appliance</div>
-
- <% host = Host.find(session[:host]) rescue nil
- user = session[:user]
- if host.blank? || user.blank? -%>
-
- <div id="login_session">
- <%= link_to _("Login"), '/login' %>
- </div>
-
- <% else -%>
-
- <div id="logout_session">
- <div id="connectedHost">
- <div class="box">
- <p><%=_("Connected Host")%></p>
- <p><%=_("Name:")%> <%= host.name -%> <p>
- <%=_("User:")%> <%= user -%>
- </div>
- </div>
- <%= link_to _("Logout"), '/logout' %>
- </div>
- <% end -%>
-
- </div>
-
- <div class="content">
+ <body id="shell" onload="">
+
+ <div id="header">
+
+ <img src="/images/geckohead-grey.png" alt="SUSE" />
+
+ <h1>My Appliance</h1>
+
+ <div id="login-wrapper">
+ <% host = Host.find(session[:host]) rescue nil
+ user = session[:user]
+ if host.blank? || user.blank? -%>
+
+ <ul>
+ <li><%= link_to _("Login"), '/login' %></li>
+ </ul>
+
+ <% else -%>
+
+ <ul>
+ <li><strong><%=_("Connected Host")%></strong></li>
+ <li><strong><%=_("Name:")%></strong> <%= host.name -%></li>
+ <li><strong><%=_("User:")%></strong> <%= user -%></li>
+ <li><em><%= link_to _("Logout"), '/logout' %></em></li>
+ </ul>
+
+ <% end -%>
+ </div>
+ </div>
+
+ <div id="content" class="content">
<!-- show the flash messages -->
<% [:notice, :warning, :message, :error].each do |name| %>
<% if flash[name] %>
<%= "#{flash[name]}</div>" %>
+ <% end %>
<% end %>
- <% end %>
- <div id="progress" style="display:none;">
- <%= image_tag("/images/working.gif") %><%=_("...Wait...")%>
- </div>
+ <div id="progress" style="display:none;">
+ <%= image_tag("/images/working.gif") %><%=_("...Wait...")%>
+ </div>
<%= @content_for_layout %>
- </div>
- <br/>
- <br/>
- <div class="content">
+
+ </div>
+
+ <div id="footer" class="">
<div class="copy">© 2009 Novell, Inc.</div>
</div>
-</body>
+ </body>
</html>
\ No newline at end of file
diff --git a/webclient/app/views/playground/index.rhtml b/webclient/app/views/playground/index.rhtml
index b6e7e47..415f9bf 100644
--- a/webclient/app/views/playground/index.rhtml
+++ b/webclient/app/views/playground/index.rhtml
@@ -5,7 +5,7 @@
<form class="container" method="post" action="">
<div class="hbox">
<div class="printers-list">
- <label for="#printer-list">Configured printers</label>
+ <label for="printer-list">Configured printers</label>
<table id="printer-list" class="list printers">
<tbody>
@@ -54,7 +54,7 @@
<li><a href="#printers-bluetooth"><span>Bluetooth</span></a></li>
</ul>
<div id="printers-autodetected">
- <label for="#autodetected-printers"><span>Detected Printers:</span></label>
+ <label for="autodetected-printers"><span>Detected Printers:</span></label>
<table id="autodetected-printers" class="list printers">
<tbody>
@@ -80,7 +80,7 @@
<table class="widgets">
<tr>
- <td><label for="#printer-net-protocol">Protocol:</label></td>
+ <td><label for="printer-net-protocol">Protocol:</label></td>
<td>
<select name="printer-net-protocol" size="1" id="printer-net-protocol">
<option value="protocol-lpd">Unix Printing (LPD)</option>
@@ -90,15 +90,15 @@
</td>
</tr>
<tr>
- <td><label for="#printer-net-address">Address:</label></td>
+ <td><label for="printer-net-address">Address:</label></td>
<td><input type="text" id="printer-net-address" name="printer-net-address" value="" /></td>
</tr>
<tr>
- <td><label for="#printer-net-queue">Queue:</label></td>
+ <td><label for="printer-net-queue">Queue:</label></td>
<td><input type="text" id="printer-net-queue" name="printer-net-queue" value="" /></td>
</tr>
<tr>
- <td><label for="#printer-net-name">Name:</label></td>
+ <td><label for="printer-net-name">Name:</label></td>
<td><input type="text" id="printer-net-name" name="printer-net-name" value="" /></td>
</tr>
</table>
diff --git a/webclient/public/images/geckohead-grey.png b/webclient/public/images/geckohead-grey.png
new file mode 100644
index 0000000..f6df08c
Binary files /dev/null and b/webclient/public/images/geckohead-grey.png differ
diff --git a/webclient/public/images/geckohead-grey_001.png b/webclient/public/images/geckohead-grey_001.png
new file mode 100644
index 0000000..307a721
Binary files /dev/null and b/webclient/public/images/geckohead-grey_001.png differ
diff --git a/webclient/public/images/script.html b/webclient/public/images/script.html
new file mode 100644
index 0000000..8a3d44d
--- /dev/null
+++ b/webclient/public/images/script.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+ <title>script</title>
+
+</head>
+
+<body>
+
+
+</body>
+</html>
diff --git a/webclient/public/inc/printers.html b/webclient/public/inc/printers.html
index 27a8f08..70695d4 100644
--- a/webclient/public/inc/printers.html
+++ b/webclient/public/inc/printers.html
@@ -4,7 +4,7 @@
<form class="container" method="post" action="">
<div class="hbox">
<div class="printers-list">
- <label for="#printer-list">Configured printers</label>
+ <label for="printer-list">Configured printers</label>
<table id="printer-list" class="list printers">
<tbody>
@@ -53,7 +53,7 @@
<li><a href="#printers-bluetooth"><span>Bluetooth</span></a></li>
</ul>
<div id="printers-autodetected">
- <label for="#autodetected-printers"><span>Detected Printers:</span></label>
+ <label for="autodetected-printers"><span>Detected Printers:</span></label>
<table id="autodetected-printers" class="list printers">
<tbody>
@@ -79,7 +79,7 @@
<table class="widgets">
<tr>
- <td><label for="#printer-net-protocol">Protocol:</label></td>
+ <td><label for="printer-net-protocol">Protocol:</label></td>
<td>
<select name="printer-net-protocol" size="1" id="printer-net-protocol">
<option value="protocol-lpd">Unix Printing (LPD)</option>
@@ -89,15 +89,15 @@
</td>
</tr>
<tr>
- <td><label for="#printer-net-address">Address:</label></td>
+ <td><label for="printer-net-address">Address:</label></td>
<td><input type="text" id="printer-net-address" name="printer-net-address" value="" /></td>
</tr>
<tr>
- <td><label for="#printer-net-queue">Queue:</label></td>
+ <td><label for="printer-net-queue">Queue:</label></td>
<td><input type="text" id="printer-net-queue" name="printer-net-queue" value="" /></td>
</tr>
<tr>
- <td><label for="#printer-net-name">Name:</label></td>
+ <td><label for="printer-net-name">Name:</label></td>
<td><input type="text" id="printer-net-name" name="printer-net-name" value="" /></td>
</tr>
</table>
diff --git a/webclient/public/stylesheets/images/bg-head-gradient-blue.png b/webclient/public/stylesheets/images/bg-head-gradient-blue.png
new file mode 100644
index 0000000..0f9d8a9
Binary files /dev/null and b/webclient/public/stylesheets/images/bg-head-gradient-blue.png differ
diff --git a/webclient/public/stylesheets/images/bg-head-gradient-bluegrey.png b/webclient/public/stylesheets/images/bg-head-gradient-bluegrey.png
new file mode 100644
index 0000000..3d34e65
Binary files /dev/null and b/webclient/public/stylesheets/images/bg-head-gradient-bluegrey.png differ
diff --git a/webclient/public/stylesheets/images/bg-head-gradient-grey.png b/webclient/public/stylesheets/images/bg-head-gradient-grey.png
new file mode 100644
index 0000000..2aef3eb
Binary files /dev/null and b/webclient/public/stylesheets/images/bg-head-gradient-grey.png differ
diff --git a/webclient/public/stylesheets/style.css b/webclient/public/stylesheets/style.css
index 6ff61ea..93005c6 100644
--- a/webclient/public/stylesheets/style.css
+++ b/webclient/public/stylesheets/style.css
@@ -1,11 +1,125 @@
+/* == Used Colours ===========================================================
+Title Hex-Code Used-for Examples
+------------------------------------------------------------------------------
+Medium Blue: #06c
+Dark Grey: #333 Font
+Medium Grey: #666 Header Font
+Soft Light Grey: #0072ba Header BG
+BG Grey: #fcfcfc Body-BG
+=========================================================================== */
+
+/* == Basic setup ======================================================== */
html,
body {
background-color: #fcfcfc;
color: #333;
- font: 0.8em "lsLucida Grande", "Trebuchet MS", Verdana, sans-serif;
- width: 99%;
+ font: 1em "lsLucida Grande", "Trebuchet MS", Verdana, sans-serif;
+ width: 100%;
height: 99%;
margin: 0;
padding: 0;
}
+div {
+ display: block;
+}
+
+h1 {
+ font-size: 1.3em;
+}
+h2 {
+ font-size: 1.2em;
+}
+h3 {
+ font-size: 1.1em;
+}
+h4 {
+ font-size: 1em;
+}
+h5 {
+ font-size: 1em;
+}
+
+a {
+ text-decoration: none;
+}
+a:hover {
+ color: #06c;
+ text-decoration: underline;
+}
+img {
+ border: none;
+}
+/* == /Basic setup ======================================================== */
+
+/* == Basic Structure ===================================================== */
+
+/*#header,*/
+#content,
+#footer {
+ min-width: 450px;
+ width: auto;
+ max-width: 1000px;
+ overflow: hidden;
+ margin: 0 auto;
+ font-size: 0.8em;
+}
+
+#header {
+ width: 100%;
+ background: #0072ba url('images/bg-head-gradient-grey.png') repeat-x scroll 0 0;
+ border-bottom: 1px solid #39f;
+ border-bottom: 1px solid #06c;
+ height: 50px;
+}
+ #header h1,
+ #header img {
+ float: left;
+ }
+ #header h1 {
+ margin: 10px 1em;
+ }
+ #header img {
+ margin: 2px 1em 0;
+ }
+ #login-wrapper {
+ position: relative;
+ float: right;
+ }
+
+#content {
+ min-height: 600px;
+ margin-top: 2em;
+}
+#footer {
+
+}
+/* == /Basic Structure =================================================== */
+
+/* == Basic Styles ======================================================== */
+#header * {
+ color: #666;
+}
+
+#login-wrapper ul {
+ list-style: none outside;
+ margin: 5px 0 0;
+ font-size: 0.7em;
+}
+#login-wrapper ul * {
+
+}
+#login-wrapper li {
+ float: left;
+ margin: 0 0.5em;
+}
+#login-wrapper ul em {
+ font-weight: bold;
+}
+#login-wrapper li a {
+
+}
+#login-wrapper li a:hover {
+ color: #06c;
+}
+/* == /Basic Styles ======================================================== */
\ No newline at end of file
diff --git a/webclient/public/stylesheets/yast.css b/webclient/public/stylesheets/yast.css
index cd1381b..58091c7 100644
--- a/webclient/public/stylesheets/yast.css
+++ b/webclient/public/stylesheets/yast.css
@@ -1,17 +1,20 @@
+/* 2009-07-15 rlihm: gone
#appliance_logo {
position: absolute;
left: 50px;
top: 10px;
-}
+}*/
+/* 2009-07-15 rlihm: gone
#appliance_title {
font-weight: bold;
font-size: 3.5em;
position: fixed;
top: 30px;
left: 300px;
-}
+}*/
+/* rewrote this in style.css
#logout_session {
position: fixed;
right: 50px;
@@ -22,11 +25,11 @@
position: fixed;
right: 50px;
top: 10px;
-}
+}*/
.content {
-margin-left: 15.5em;
-margin-top: 10em;
+/*margin-left: 15.5em;*/
+/*margin-top: 10em;*/
}
.notifications {
--
To unsubscribe, e-mail: yast-commit+unsubscribe@opensuse.org
For additional commands, e-mail: yast-commit+help@opensuse.org
