From ad581ccb934aea21fea6df50ba5c41cfca0cf4e6 Mon Sep 17 00:00:00 2001
From: Andreas Granig <agranig@sipwise.com>
Date: Mon, 4 Apr 2011 12:32:25 +0000
Subject: [PATCH] Align to new design.

---
 root/tt/billing.tt      |  87 +++++++++++++----------------
 root/tt/bilprof_edit.tt | 118 ++++++++++++++++++++++------------------
 2 files changed, 104 insertions(+), 101 deletions(-)

diff --git a/root/tt/billing.tt b/root/tt/billing.tt
index 914732b..bf17766 100644
--- a/root/tt/billing.tt
+++ b/root/tt/billing.tt
@@ -5,46 +5,41 @@
             <a href="/billing/edit_product"><span class="button-add">Add</span></a>
         [% END %]
 
-        <div class="p1">
           [% IF messages.prodmsg %]<div class="success">[% messages.prodmsg %]</div>[% END %]
-          <table>
           [% IF products %]
-            <tr class="table_header">
-              <td>on sale</td>
-              <td>name</td>
-              <td />
-              <td />
-            </tr>
+          <ul class="cleanlist">
+            <li class="ui-state-default">
+              <div class="span-5">On Sale</div>
+              <div class="span-5">Name</div>
+              <div class="span-2">&nbsp;</div>
+              <div class="span-2 last">&nbsp;</div>
+            </li>
             [% id = 0 %]
             [% FOREACH product = products %]
-              <tr>
-                <td class="tdcenter">
-                  <input type="checkbox" class="checkbox" name="on_sale" disabled="disabled"
-                         [% IF product.data.on_sale %]checked="checked"[% END %] />
-                </td>
-                <td>[% product.data.name %]</td>
-                <td>
+              <li class="ui-state-default">
+                <div class="span-5"><input type="checkbox" class="checkbox" name="on_sale" disabled="disabled" [% IF product.data.on_sale %]checked="checked"[% END %] /></div>
+                <div class="span-5">[% product.data.name %]</div>
+                <div class="span-2">
                 [% UNLESS Catalyst.session.admin.read_only %]
                   <a href="/billing/edit_product?product=[% product.handle %]"><span class="button-edit">Edit</span></a>
+                [% ELSE %]&nbsp;
                 [% END %]
-                </td>
+                </div>
+                <div class="span-2 last">
                 <form action="/billing/do_delete_product" method="post">
                   <input type="hidden" name="product" value="[% product.handle %]" />
-                  <td>
                   [% UNLESS Catalyst.session.admin.read_only %]
                       <button class="button-delete" id="prodel[% id %]">Delete</button>
                   [% END %]
-                  </td>
                 </form>
-              </tr>
+                </div>
+              </li>
             [% id = id + 1 %]
             [% END %]
+            </ul>
           [% ELSE %]
-            <tr><td colspan="4">No products found in the database.</td></tr>
+            <div>No products found in the database.</div>
           [% END %]
-          </table>
-        </div>
-
       [% END %]
 
         <h3 id="bilprof">Billing Profiles</h3>
@@ -52,49 +47,45 @@
         [% UNLESS Catalyst.session.admin.read_only %]
             <a href="/billing/edit_bilprof"><span class="button-add">Add</span></a>
         [% END %]
+        <div class="hspace-20"></div>
 
-        <div class="p1">
-          [% IF messages.profmsg %]<div class="success">[% messages.profmsg %]</div>[% END %]
+        [% IF messages.profmsg %]<div class="success">[% messages.profmsg %]</div>[% END %]
 
-          <table>
           [% IF bilprofs %]
-            <tr class="table_header">
-              <td>name</td>
-              <td />
-              <td />
-              <td />
-              <td />
-            </tr>
+          <ul class="cleanlist">
+            <li class="ui-state-default">
+              <div class="span-17 last">Name</div>
+            </li>
             [% id = 0 %]
             [% FOREACH bilprof = bilprofs %]
-              <tr>
-                <td>[% bilprof.data.name %]</td>
-                <td>
+              <li class="ui-state-default">
+                <div class="span-9">[% bilprof.data.name %]</div>
+                <div class="span-2">
                 [% UNLESS Catalyst.session.admin.read_only %]
                   <a href="/billing/edit_bilprof?bilprof=[% bilprof.handle %]"><span class="button-edit">Edit</span></a>
+                [% ELSE %]&nbsp;
                 [% END %]
-                </td>
+                </div>
                 <form action="/billing/do_delete_bilprof" method="post">
                   <input type="hidden" name="bilprof" value="[% bilprof.handle %]" />
-                  <td>
+                  <div class="span-2">
                   [% UNLESS Catalyst.session.admin.read_only %]
                       <button class="button-delete" id="bildel[% id %]">Delete</button>
+                  [% ELSE %]&nbsp;
                   [% END %]
-                  </td>
+                  </div>
                 </form>
-                <td>
+                <div class="span-2">
                   <a href="/billing/search_fees?bilprof=[% bilprof.handle %]"><span class="button-cart">Edit Fees</span></a>
-                </td>
-                <td>
+                </div>
+                <div class="span-2 last">
                   <a href="/billing/show_peaktimes?bilprof=[% bilprof.handle %]"><span class="button-clock">Edit Peak Times</span></a>
-                </td>
-              </tr>
+                </div>
+              </li>
             [% id = id + 1 %]
             [% END %]
+            </ul>
           [% ELSE %]
-            <tr><td colspan="5">No billing profiles found in the database.</td></tr>
+            <div>No billing profiles found in the database.</div>
           [% END %]
-          </table>
-
-        </div>
 
diff --git a/root/tt/bilprof_edit.tt b/root/tt/bilprof_edit.tt
index ed9ec30..dce65b7 100644
--- a/root/tt/bilprof_edit.tt
+++ b/root/tt/bilprof_edit.tt
@@ -5,87 +5,99 @@
         [% END %]
 
         <a href="/billing#bilprof"><span class="button-cancel">Cancel</span></a>
+        <div class="hspace-20"></div>
 
-        <div class="p1">
           <form action="do_edit_bilprof" method="post">
           <input type="hidden" name="bilprof" value="[% handle %]" />
-            <table>
-              <tr>
-                <td class="tdkey">handle:</td>
+            <ul class="cleanlist">
+              <li class="ui-state-default">
+                <div class="span-3">Handle:</div>
+                <div class="span-6">
                 [% IF handle %]
-                <td>[% bilprof.handle %]</td>
+                [% bilprof.handle %]</div><div class="span-6 last">&nbsp;</div>
                 [% ELSE %]
-                <td>
                   <input type="text" name="handle" title="alphanumeric characters and underscore only"
                          value="[% bilprof.handle %]" />
-                  unique identifier string
-                </td>
+                  </div><div class="span-6 last">unique identifier string</div>
                 [% END %]
-              </tr>
-              [% IF messages.handle %]<tr><td /><td><div class="error">[% messages.handle %]</div></td></tr>[% END %]
-              <tr>
-                <td class="tdkey">name:</td>
-                <td>
+              </li>
+              [% IF messages.handle %]<div class="error">[% messages.handle %]</div>[% END %]
+              <li class="ui-state-default">
+                <div class="span-3">Name:</div>
+                <div class="span-6">
                   <input type="text" name="name" title="free-form string"
                          value="[% bilprof.data.name %]" />
+                </div>
+                <div class="span-6 last">
                   human readable profile name
-                </td>
-              </tr>
-              [% IF messages.name %]<tr><td /><td><div class="error">[% messages.name %]</div></td></tr>[% END %]
-              <tr>
-                <td class="tdkey">interval charge:</td>
-                <td>
+                </div>
+              </li>
+              [% IF messages.name %]<div class="error">[% messages.name %]</div>[% END %]
+              <li class="ui-state-default">
+                <div class="span-3">Interval Charge:</div>
+                <div class="span-6">
                   <input type="text" name="interval_charge" title="float, specifying Euro"
                          value="[% bilprof.data.interval_charge %]" />
+                </div>
+                <div class="span-6 last">
                   base fee charged per billing interval
-                </td>
-              </tr>
-              [% IF messages.charge %]<tr><td /><td><div class="error">[% messages.charge %]</div></td></tr>[% END %]
-              <tr>
-                <td class="tdkey">interval free time:</td>
-                <td>
+                </div>
+              </li>
+              [% IF messages.charge %]<div class="error">[% messages.charge %]</div>[% END %]
+              <li class="ui-state-default">
+                <div class="span-3">Interval Free Time:</div>
+                <div class="span-6">
                   <input type="text" name="interval_free_time" title="integer, specifying seconds"
                          value="[% bilprof.data.interval_free_time %]" />
+                </div>
+                <div class="span-6 last">
                   included time per billing interval
-                </td>
-              </tr>
-              [% IF messages.free_time %]<tr><td /><td><div class="error">[% messages.free_time %]</div></td></tr>[% END %]
-              <tr>
-                <td class="tdkey">interval free cash:</td>
-                <td>
+                </div>
+              </li>
+              [% IF messages.free_time %]<div class="error">[% messages.free_time %]</div>[% END %]
+              <li class="ui-state-default">
+                <div class="span-3">Interval Free Cash:</div>
+                <div class="span-6">
                   <input type="text" name="interval_free_cash" title="float, specifying Euro"
                          value="[% bilprof.data.interval_free_cash %]" />
+                </div>
+                <div class="span-6 last">
                   included money per billing interval
-                </td>
-              </tr>
-              [% IF messages.free_cash %]<tr><td /><td><div class="error">[% messages.free_cash %]</div></td></tr>[% END %]
-              <tr>
-                <td class="tdkey">currency:</td>
-                <td>
+                </div>
+              </li>
+              [% IF messages.free_cash %]<div class="error">[% messages.free_cash %]</div>[% END %]
+              <li class="ui-state-default">
+                <div class="span-3">Currency:</div>
+                <div class="span-6">
                   <input type="text" name="currency" title="string, will be used on invoices and webinterfaces"
                          value="[% bilprof.data.currency %]" />
+                </div>
+                <div class="span-6 last">
                   currency symbol or ISO code
-                </td>
-              </tr>
-              [% IF messages.currency %]<tr><td /><td><div class="error">[% messages.currency %]</div></td></tr>[% END %]
-              <tr>
-                <td class="tdkey">VAT rate:</td>
-                <td>
+                </div>
+              </li>
+              [% IF messages.currency %]<div class="error">[% messages.currency %]</div>[% END %]
+              <li class="ui-state-default">
+                <div class="span-3">VAT Rate:</div>
+                <div class="span-6">
                   <input type="text" name="vat_rate" title="integer, specifying the percentage"
                          value="[% bilprof.data.vat_rate %]" />
+                </div>
+                <div class="span-6 last">
                   %
-                </td>
-              </tr>
-              [% IF messages.vat_rate %]<tr><td /><td><div class="error">[% messages.vat_rate %]</div></td></tr>[% END %]
-              <tr>
-                <td class="tdkey">VAT included:</td>
-                <td>
+                </div>
+              </li>
+              [% IF messages.vat_rate %]<div class="error">[% messages.vat_rate %]</div>[% END %]
+              <li class="ui-state-default">
+                <div class="span-3">VAT Included:</div>
+                <div class="span-6">
                   <input type="checkbox" class="checkbox" name="vat_included" title="check if fees are inclusive VAT"
                          [% IF bilprof.data.vat_included %]checked="checked"[% END %] />
-                </td>
-              </tr>
-            </table>
+                </div>
+                <div class="span-6 last">&nbsp;</div>
+              </li>
+            </ul>
+            <div class="hspace-20"></div>
             <button name="submit" class="button-save">Save</button>
           </form>
-        </div>