view and style updates for mbulat#7

app/assets/javascripts/plutus/application.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require_tree .

app/assets/stylesheets/plutus/application.css

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+*/

app/assets/stylesheets/plutus/main.css.scss

@@ -0,0 +1,86 @@
+.plutus_container {
+
+  /* CSS from http://wptheming.com/2011/01/simple-table-css3/ */
+
+  margin:0;
+  padding:0;
+  border:0;
+  font-family: "Helvetica Neue",Arial, Helvetica, sans-serif;
+
+  /*
+  Pretty Table Styling
+  CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/
+  */
+
+  table {
+    overflow:hidden;
+    border:1px solid #d3d3d3;
+    background:#fefefe;
+    width:70%;
+    margin:5% auto 0;
+    -moz-border-radius:5px; /* FF1+ */
+    -webkit-border-radius:5px; /* Saf3-4 */
+    border-radius:5px;
+    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  }
+
+  th, td {padding:10px 18px 10px; }
+
+  th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
+
+  td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
+
+  tr.even td {background:#f6f6f6;}
+
+  td.first, th.first {text-align:left}
+
+  td.last {border-right:none;}
+
+  /*
+  Background gradients are completely unnessary but a neat effect.
+  */
+
+  td {
+    background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
+    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
+  }
+
+  tr.even td {
+    background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
+    background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
+  }
+
+  th {
+    background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
+    background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
+  }
+
+  /*
+  I know this is annoying, but we need dditional styling so webkit will recognize rounded corners on background elements.
+  Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius
+  
+  And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it.
+  */
+
+  tr:first-child th.first {
+    -moz-border-radius-topleft:5px;
+    -webkit-border-top-left-radius:5px; /* Saf3-4 */
+  }
+
+  tr:first-child th.last {
+    -moz-border-radius-topright:5px;
+    -webkit-border-top-right-radius:5px; /* Saf3-4 */
+  }
+
+  tr:last-child td.first {
+    -moz-border-radius-bottomleft:5px;
+    -webkit-border-bottom-left-radius:5px; /* Saf3-4 */
+  }
+
+  tr:last-child td.last {
+    -moz-border-radius-bottomright:5px;
+    -webkit-border-bottom-right-radius:5px; /* Saf3-4 */
+  }
+
+}

app/views/plutus/accounts/index.html.erb

@@ -1,3 +1,4 @@
+<div class="plutus_container">
 <h1>Listing Accounts</h1>
 
 <table>
@@ -12,9 +13,9 @@
 
 <% @accounts.each do |account| %>
   <tr class="<%= cycle("even", "odd") -%>">
-    <td><%=h account.id %></td>
+    <td><%=link_to(account.id, account_path(account.id)) %></td>
     <td><%=h account.name %></td>
-    <td><%=h account.type %></td>
+    <td><%=h account.type.sub('Plutus::','') %></td>
     <td><%=h account.credits_balance %></td>
     <td><%=h account.debits_balance %></td>
     <td><%=h account.balance %></td>
@@ -25,3 +26,4 @@
 <br />
 
 <h3>Go to <%= link_to 'Transactions', transactions_path %></h3>
+</div>

app/views/plutus/accounts/show.html.erb

@@ -1,3 +1,4 @@
+<div class="plutus_container">
 <h1><%=h @account.name %> Account</h1>
 
 <table>
@@ -13,7 +14,7 @@
   <tr class="odd">
     <td><%=h @account.id %></td>
     <td><%=h @account.name %></td>
-    <td><%=h @account.type %></td>
+    <td><%=h @account.type.sub('Plutus::','') %></td>
     <td><%=h @account.credits_balance %></td>
     <td><%=h @account.debits_balance %></td>
     <td><%=h @account.balance %></td>
@@ -26,19 +27,13 @@
   <tr>
     <th class="nobg">ID</th>
     <th>Description</th>
-    <th>Credit Account</th>
-    <th>Debit Account</th>
-    <th>Amount</th>
     <th>Date</th>
   </tr>
 
 <% @account.credit_transactions.each do |transaction| %>
   <tr class="<%= cycle("even", "odd") -%>">
     <td><%=h transaction.id %></td>
     <td><%=h transaction.description %></td>
-    <td><%=h transaction.credit_account.name %></td>
-    <td><%=h transaction.debit_account.name %></td>
-    <td><%=h transaction.amount %></td>
     <td><%=h transaction.created_at %></td>
   </tr>
 <% end %>
@@ -50,20 +45,15 @@
   <tr>
     <th class="nobg">ID</th>
     <th>Description</th>
-    <th>Credit Account</th>
-    <th>Debit Account</th>
-    <th>Amount</th>
     <th>Date</th>
   </tr>
 
-<% @account.debit_transactions.each do |transaction| %>
+<% @account.debit_transactions.each do |tr| %>
   <tr class="<%= cycle("even", "odd") -%>">
-    <td><%=h transaction.id %></td>
-    <td><%=h transaction.description %></td>
-    <td><%=h transaction.credit_account.name %></td>
-    <td><%=h transaction.debit_account.name %></td>
-    <td><%=h transaction.amount %></td>
-    <td><%=h transaction.created_at %></td>
+    <td><%=h tr.id %></td>
+    <td><%=h tr.description %></td>
+    <td><%=h tr.created_at %></td>
   </tr>
 <% end %>
-</table>
+</table>
+</div>