Commit 2cc278a4 authored by Alix Guillard's avatar Alix Guillard Committed by Tomas Hlavacek

Improve look and feel by means of CSS.

Use CSS for whole page formating.
Rework forms (including the autogenerated parts).
Change table color generation mechanism.
parent 5a3e8201
1;2c.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(images/close.png) no-repeat}
.tclose:hover {background-position:0 -30px}
#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}
#bluemask {background:#4195aa}
#frameless {padding:0}
#frameless .tclose {left:6px}
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
font-family:Helvetica, Arial, SansSerif;
font-size:1.1em;
}
#header {
padding:0.8em;
background:#333840;
box-shadow: #333840 0 0 4px 4px;
/*
background:#caecfb;
box-shadow: #caecfb 0 4px 4px;
*/
}
/* FDDD99 */
#header H1 {
font-size:1.4em;
margin:0 0 0 10%;
color:white;
/* text-shadow: 1px 1px 0 #caecfb; */
}
#header span, #header span a {
color:white;
text-decoration:none;
font-weight:bold;
}
p {
padding:0.4em;
}
.form
{
width:800px;
margin:0 auto;
}
.form fieldset {
border:0;
}
.form select#commandselect {
min-width:300px;
max-width:500px;
}
.form label {
text-align: right;
padding-right: 20px;
line-height:32px;
display: block;
float: left;
width:300px;
}
.form input, .form select {
display: block;
min-width:300px;
float: left;
font-size:16px;
padding:5px;
border-radius: 6px 6px 6px 6px;
border: 1px solid #888888;
background: #E5E5E5; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F6F6F6', endColorstr='#E0E0E0'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#F6F6F6), to(#E0E0E0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #F6F6F6, #E0E0E0); /* for firefox 3.6+ */
}
.form input:hover, form select:hover, .form input[type=text], .form input[type=text].out{
background: -moz-linear-gradient(top, #FFFFFF, #F0F0F0); /* for firefox 3.6+ */
}
.form input[type=text]:hover, .form input[type=text].hover {
background: -moz-linear-gradient(top, #FFFFFF, #FCFCFC); /* for firefox 3.6+ */
border: 1px solid #333333;
}
.form br
{
clear: left;
}
#result {
padding:0.8em;
margin:0.1em;
border:0; //1px dotted black;
}
#result hr {
border:0;
border-bottom:1px dotted black;
width:100%;
height:1px;
}
#result pre {
padding:5px;
border:1px solid #FDDD99;
background: #FFFFDD;
font-size:0.9em;
}
#result table {
border-collapse:collapse;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #333;
background: #FFFFDD;
}
#result table {
border-top:1px solid #333;
}
#result table tr th {
background-color:#CACACA;
font-weight:bold;
padding:5px 12px 5px 12px;
}
#result table tr td {
padding:4px 12px 4px 12px;
border:0;
font-size:0.9em;
}
/*
WHITE = 'FFFFFF'
RED = 'FF0000'
GREEN = '00FF00'
BLUE = '0000FF'
YELLOW = 'FFFF00'
BLACK = '000000'
*/
#result table tr td.white {
background-color:#FFF;
}
#result table tr td.red {
background-color:#FF0000;
}
#result table tr td.green {
background-color:#00FF00;
}
#result table tr td.blue {
background-color:#0000FF;
}
#result table tr td.yellow {
background-color:#FFFF00;
}
#result table tr td.black {
background-color:#000;
}
#result table tr td. {
background-color:#;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -41px; /* the bottom margin is the negative value of the footer's height */
}
.push {
height:40px;
}
#footer {
background:#333840;
box-shadow:0 -4px 4px 2px #333840;
color:white;
margin:0;
padding:0;
position: relative;
width: 100%;
height:40px;
}
#footer p {
margin:0;
padding:0.8em;
font-size:0.8em;
}
\ No newline at end of file
......@@ -3,7 +3,8 @@
xmlns:py="http://genshi.edgewall.org/">
<head>
<title>Universal Looking Glass</title>
<link rel="stylesheet" href="ulg.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" />
<py:if test="defined('refresh')">
<meta http-equiv="refresh" content="$refresh" py:if="defined('refresh') and (refresh>0)" />
</py:if>
......@@ -20,15 +21,12 @@
document.getElementById("paramsect").innerHTML=' \
<py:for each="pidx,param in enumerate(routers[ridx].listCommands()[cidx].getParamSpecs())">
<tr height="10"></tr> \
<tr> \
<th align="left"> \
<label for="param${pidx}"> \
${pidx+3}. ${param.getName()}: \
</th> \
</label> \
<py:choose>
<py:when test="param.getType() == 'select'">
<td align="left"> \
<select name="param${pidx}"> \
<select name="param${pidx}" id="param${pidx}"> \
<py:for each="paridx,partuple in enumerate(param.getOptions())">
<py:choose>
<py:when test="default_routerid == ridx and default_commandid == cidx and defined('default_params') and partuple[0] == default_params[pidx]">
......@@ -49,22 +47,18 @@
</py:choose>
</py:for>
</select> \
</td> \
</py:when>
<py:otherwise>
<td align="left"> \
<py:choose>
<py:when test="default_routerid == ridx and default_commandid == cidx and defined('default_params') and pidx &lt; len(default_params)">
<input type="text" name="param${pidx}" value="${default_params[pidx]}" /> \
<input type="text" name="param${pidx}" id="param${pidx}" value="${default_params[pidx]}" onfocus="this.className='hover'" onblur="this.className='out'" /> \
</py:when>
<py:otherwise>
<input type="text" name="param${pidx}" value="${param.getDefault()}" /> \
<input type="text" name="param${pidx}" id="param${pidx}" value="${param.getDefault()}" onfocus="this.className='hover'" onblur="this.className='out'" /> \
</py:otherwise>
</py:choose>
</td> \
</py:otherwise>
</py:choose>
</tr> \
</py:for>';
}
</py:for>
......@@ -99,6 +93,7 @@
<script>
window.onload=updateFormCommands;
</script>
<div id="wrapper">
<div id="header">
<py:choose>
<py:when test="defaults.header">
......@@ -113,55 +108,56 @@
<form action="${getFormURL()}" method="post">
<input type="hidden" name="sessionid" value="$default_sessionid" py:if="defined('default_sessionid') and (default_sessionid)" />
<input type="hidden" name="resrange" value="$resrange" py:if="defined('resrange')" />
<table summary="Form settings">
<tbody>
<tr>
<th align="left">1. Router selection:</th>
<td>
<select id="routerselect" name="routerid" onchange="updateFormCommands()">
<py:for each="ridx,rtr in enumerate(routers)">
<py:choose>
<py:when test="ridx == default_routerid">
<option value="$ridx" selected="selected">
${rtr.getName()}
</option>
</py:when>
<py:otherwise>
<option value="$ridx">
${rtr.getName()}
</option>
</py:otherwise>
</py:choose>
</py:for>
</select>
</td>
</tr>
<tr height="10"></tr>
<tr>
<th align="left" valign="top">2. Command selection:</th>
<td align="left">
<div class="form">
<fieldset>
<legend></legend>
<label for="routerselect">1. Router selection:</label>
<select id="routerselect" name="routerid" onchange="updateFormCommands()">
<py:for each="ridx,rtr in enumerate(routers)">
<py:choose>
<py:when test="ridx == default_routerid">
<option value="$ridx" selected="selected">
${rtr.getName()}
</option>
</py:when>
<py:otherwise>
<option value="$ridx">
${rtr.getName()}
</option>
</py:otherwise>
</py:choose>
</py:for>
</select>
</fieldset>
<fieldset>
<label for="commandselect">2. Command selection:</label>
<select id="commandselect" name="commandid" onchange="updateFormParams()">
</select>
</td>
</tr>
</tbody>
<tbody id="paramsect">
</tbody>
<tbody>
<tr height="10"></tr>
<tr>
<th><br/></th>
<td>
</fieldset>
<fieldset>
<div id="paramsect"> <!-- TODO: change dynamic display -->
</div>
</fieldset>
<fieldset>
<label>&nbsp;</label>
<input type="submit" value="Submit" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
</form>
<py:choose>
<py:when test="defined('result') or defined('refresh')">
<div id="result">
<hr/>
<py:choose>
<py:when test="defined('result') and result">
${result}
......@@ -201,9 +197,10 @@
</div>
</py:when>
</py:choose>
<div class="push"></div>
</div>
<div id="footer">
<hr/>
<p class="legales" align="right"><small>(c) 2012 Tomas Hlavacek</small></p>
<p class="legales" align="right"><small>&copy; (CC-BY) 2012 Tomas Hlavacek</small></p>
</div>
</body>
</html>
......@@ -9,13 +9,13 @@
<table border="1">
<tr>
<py:for each="thidx,th in enumerate(table_header)">
<th bgcolor="#C0C0C0">${th}</th>
<th>${th}</th>
</py:for>
</tr>
<py:for each="tridx,tr in enumerate(table)">
<tr>
<py:for each="tdidx,td in enumerate(tr)">
<td bgcolor="${td[1]}">${td[0]}</td>
<td class="${td[1]}">${td[0]}</td>
</py:for>
</tr>
</py:for>
......
......@@ -85,12 +85,12 @@ class PersistentStorage(object):
return self.data
class TableDecorator(object):
WHITE = '#FFFFFF'
RED = '#FF0000'
GREEN = '#00FF00'
BLUE = '#0000FF'
YELLOW = '#FFFF00'
BLACK = '#000000'
WHITE = 'white'
RED = 'red'
GREEN = 'green'
BLUE = 'blue'
YELLOW = 'yellow'
BLACK = 'black'
def __init__(self, table, table_header, table_headline=None, before=None, after=None):
self.table = table
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment