templates: spiff out the interface templates master
authorRimas Kudelis <rq@akl.lt>
Thu, 1 Jul 2010 01:17:28 +0000 (21:17 -0400)
committerJeff Layton <jlayton@redhat.com>
Thu, 1 Jul 2010 01:17:28 +0000 (21:17 -0400)
Its interface is really too plain (I know you know it). While I'm not
a graphic artist, I think I could help you with adapting Virtual Exim's
layout, which itself is an adaptation of the free layout from
http://www.bluerobot.com/web/layouts/ . I think I'm gonna do this anyway
on my setup, so I'll share the diff with you. Actually, we could maybe
make it even nicer by copying some other design.

templates/addform.tmpl
templates/delform.tmpl
templates/zoneform.tmpl

index 57c463f43d8ea9d239d8c7625e2923e95b699735..d316637eacc8c5eb08dabba1a7ed45654a0db9ca 100644 (file)
@@ -1,7 +1,9 @@
 <!-- addform.tmpl -->
 <tmpl_var js-head>
-<hr>
+<h1>Editing Zone: <tmpl_var zone></h1>
 <tmpl_var form-start>
+<fieldset>
+<legend>Add New Record</legend>
 <tmpl_var field-zone>
 <tmpl_var field-class>
 <table>
@@ -12,6 +14,7 @@
     <th>Class</th>
     <th>Type</th>
     <th>Content</th>
+    <th></th>
 </tr>
 <tr>
     <td><tmpl_var field-name></td>
@@ -20,9 +23,8 @@
     <td><tmpl_var class></td>
     <td><tmpl_var field-type></td>
     <td><tmpl_var field-content></td>
+    <td><tmpl_var form-submit><tmpl_var form-reset></td>
 </tr>
 </table>
-<p>
-<tmpl_var form-submit><tmpl_var form-reset>
+</fieldset>
 <tmpl_var form-end>
-
index c27c61057d278775da801911685b8cc9f2b4a7f1..16693b0e312f77db8048bbd79877c8b6ee920265 100644 (file)
@@ -1,20 +1,21 @@
 <!-- delform.tmpl -->
-<hr>
 <tmpl_var form-start>
+<fieldset>
+<legend>Manage Existing Records</legend>
 <tmpl_var field-zone> <tmpl_var field-class>
-<p>
 <tmpl_var form-submit><tmpl_var form-reset>
-<table border>
+<table>
 <tr>
-    <th>Delete?</th>
+    <th></th>
     <th>Record</th>
 </tr>
 <tmpl_loop loop-rr>
     <tr><td align="center"><input name="rr" type="checkbox" value="<tmpl_var escape=html value>"></td><td><tt><tmpl_var escape=html label></tt></td></tr>
 </tmpl_loop>
 </table>
-<p>
 <tmpl_var form-submit><tmpl_var form-reset>
+</fieldset>
 <tmpl_var form-end>
+</div>
 </body>
 </html>
index 44e6c73a4b45c81c5fd25313397842ad723c269c..9ec1876b3ca9c84d6d0d555cfae0ec52ef2fb86d 100644 (file)
@@ -1,7 +1,210 @@
-<!-- zoneform.tmpl -->
 <html>
+<!-- zoneform.tmpl -->
 <head>
 <title>DNSDusty</title>
+<style type="text/css">
+/* <!--
+  Layout and CSS tricks obtained from
+  http://www.bluerobot.com/web/layouts/
+
+  Notes:
+  ideally, CSS should be separated from content.
+  element identifiers were prefixed with "dusty" because of #content conflict
+*/
+
+body {
+       font-size: 10pt;
+       margin:0px;
+       padding:0px;
+       font-family:verdana, arial, helvetica, sans-serif;
+       color:#333;
+       background-color:white;
+       }
+h1 {
+       margin:0px 0px 15px 0px;
+       padding:0px;
+       font-size:28px;
+       line-height:28px;
+       font-weight:900;
+       color:#ccc;
+       }
+p {
+       font:11px/20px verdana, arial, helvetica, sans-serif;
+       margin:0px 0px 16px 0px;
+       padding:0px;
+       }
+#dustyContent>p {margin:0px;}
+#dustyContent>p+p {text-indent:30px;}
+
+a {
+       color:#09c;
+       font-size:11px;
+       text-decoration:none;
+       font-weight:600;
+       font-family:verdana, arial, helvetica, sans-serif;
+       }
+
+p.alpha {
+       padding-bottom: 2em;
+}
+
+a.alpha {
+       font-size: 110%;
+}
+
+table,tr,td,th {
+       border: hidden;
+       font-size: 10pt;
+       text-align: left;
+}
+
+td.check {
+       text-align: center;
+}
+
+td.button {
+       padding-top: 1em;
+       text-align: center;
+}
+
+td.trash {
+       padding-right: 3px;
+}
+
+div.row {
+       clear: both;
+       padding-top: 10px;
+}
+
+div.button {
+       clear: both;
+       padding-top: 10px;
+       text-align:     center;
+}
+
+div.row span.label {
+       float: left;
+       width: 125px;
+       text-align: right;
+}
+
+div.row span.formw {
+       position: relative;
+       width: 300px;
+       text-align: left;
+}
+
+.textfield {
+       border-color: #000000;
+       border-width: 1px;
+}
+
+a:link {color:#09c;}
+a:visited {color:#07a;}
+a:hover {background-color:#eee;}
+
+#dustyHeader {
+       font-size: 12pt;
+       margin:50px 0px 10px 0px;
+       padding:10px 0px 2px 20px;
+       /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
+       height:40px; /* 14px + 17px + 2px = 33px */
+       border-style:solid;
+       border-color:black;
+       border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
+       line-height:11px;
+       background-color:#eee;
+       voice-family: "\"}\"";
+       voice-family:inherit;
+       height:28px; /* the correct height */
+       }
+body>#dustyHeader {height:28px;}
+
+#dustyHeader>a:link, #dustyHeader>a:visited {
+       font-family:verdana, arial, helvetica, sans-serif;
+       font-size: 12pt;
+       color: #000;
+}
+
+#dustyHeader>a:hover {
+       font-family:verdana, arial, helvetica, sans-serif;
+       font-size: 12pt;
+       color: #09c;
+}
+#dustyContent {
+       margin: 0px 50px 50px 250px;
+       padding:10px;
+       overflow: auto;
+       }
+
+#forms {
+       margin: 15px 200px 50px 250px;
+       width: 450px;
+       border: 1px dashed #999;
+       padding: 10px;
+       overflow: visible;
+}
+
+#dustyCentered {
+       position:absolute;
+       left:50%;
+       width:500px;
+       margin-top:50px;
+       margin-left:-266px;
+       padding:15px;
+       border:1px dashed #333;
+       background-color:#eee;
+}
+
+#dustyMenu {
+       position:absolute;
+       top:100px;
+       left:20px;
+       width:172px;
+       padding:10px;
+       background-color:#eee;
+       border:1px dashed #999;
+       line-height:17px;
+/* Again, the ugly brilliant hack. */
+       voice-family: "\"}\"";
+       voice-family:inherit;
+       width:150px;
+       }
+/* Again, "be nice to Opera 5". */
+body>#dustyMenu {width:150px;}
+
+#dustyStatus {
+       position: absolute;
+       bottom: 2em;
+       font-weight: bold;
+       left: 10%;
+       text-align: center;
+       border: 1px dashed #999;
+       padding-top: .5em;
+       padding-bottom: .5em;
+       padding-left: 2em;
+       padding-right: 2em;
+/* Again, the ugly brilliant hack. */
+       voice-family: "\"}\"";
+       voice-family:inherit;
+       width:500px;
+}
+/* Again, "be nice to Opera 5". */
+body>#dustyStatus {width:500px;}
+
+img.trash {
+       border:0;
+       width:10px;
+       height:16px
+}
+img.check {
+       border:0;
+       width:13px;
+       height:12px
+}
+/* -->
+</style>
+
 <script type="text/javascript">
 var message = "<tmpl_var message>";
 if ( message.length != 0 ) {
@@ -11,11 +214,12 @@ if ( message.length != 0 ) {
 <tmpl_var js-head>
 </head>
 <body>
-<h1 align=center>DNSDusty</h1>
-<p>
+<h1 id="dustyHeader"><a href="http://www.poochiereds.net/dnsdusty/">DNSDusty</a></h1>
+<div id="dustyMenu">
 <tmpl_var form-start>
 <tmpl_var field-zone><tmpl_var field-class>
-<p>
 <tmpl_var form-submit>
 <tmpl_var form-end>
+</div>
+<div id="dustyContent">