incomes partial formatted

SelenaSmall · Sep 20, 2015 · bee092f · bee092f
1 parent 957f870
commit bee092f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 32 deletions.
diff --git a/app/assets/stylesheets/mybudget.scss b/app/assets/stylesheets/mybudget.scss
@@ -37,7 +37,6 @@
 		padding-top: 20px;
 		padding-right: 20px;
 	}
-
 }
 
 .col-md-12 {
@@ -49,17 +48,48 @@
 	margin: 15px;
 }
 
+.col-md-3 {
+}
+
 .bordered-form {
 	margin-left: 50px;
 	margin-top: 20px;
 	margin-bottom: 20px;
 	padding: 20px;
-	padding-left: 40px;
-	padding-right: 40px;
+
 	background-color: #ADD6FF;
 	border-radius: 15px;
 	width: 750px;
 
+	.bordered-form-header {
+		font-size: -webkit-xxx-large;
+		text-align: left;
+		border-bottom: solid black 1px;
+
+		.bordered-form-header-note {
+			padding-left: 20;
+			font-size: 12px;
+		}
+	}
+
+	.bordered-form-footer {
+		font-size: -small;
+		text-align: left;
+		border-bottom: solid black 1px;
+
+		.bordered-form-footer-total {
+			text-align: right;
+			padding-left: 20;
+			font-size: 12px;
+		}
+	}
+
+	.bordered-form-new-item {
+		padding-top: 5px;
+		padding-bottom: 5px;
+		text-align: right;
+	}
+
 	.field-name {
 		padding-left: 40px;
 	}
@@ -77,23 +107,14 @@
 		text-align: right;
 	}
 
-	.total-output {
+	.bordered-form-total {
 		text-align: right;
-		padding-right: 20px;
 		font-style: bold;
-		font-size: 40px
+		font-size: 40px;
 	}
 
 	.actions {
 		padding-left: 472px;
     	font-size: 18px;
 	}
-
-	h2 {
-		font-size: 40px;
-		font-weight: inherit;
-		border-bottom: solid black 1px;
-		text-align: left;
-	}
-
 }
diff --git a/app/views/mybudgets/_incomes.html.erb b/app/views/mybudgets/_incomes.html.erb
@@ -1,18 +1,19 @@
 <div class="bordered-form" >
- <h2>Incomes</h2>
- <div> - this is going to be an incomes show page which will list all of the incomes and allow the user to add new income values as the week goes. In the long run this will help keep track of projections.</div>
-
- <%= link_to new_mybudget_income_path(@mybudget, @income), 
-  remote: true, id: "new-item-link", class: "btn btn-sm btn-default round" do %> New
- <%end%>
-
-
- <table class="table" >
-  <thead>
+ <table class="bordered-form-header">
    <tr>
-    <th>Incomes</th>
+    <td>Incomes</td>
+    <td class="bordered-form-header-note">Incomes show page will list all of the incomes and allow the user to add new income values throughout the week.
+    </td>
    </tr>
-  </thead>
+ </table>
+
+ <div class="bordered-form-new-item">
+  <%= link_to new_mybudget_income_path(@mybudget, @income), 
+    remote: true, id: "new-item-link", class: "btn btn-sm btn-default round" do %>Add Income
+  <%end%>
+ </div>
+
+ <table class="table">
   <tbody>
    <% @mybudget.incomes.each do |income| %>
     <tr>
@@ -23,11 +24,13 @@
     </tr>
    <% end %>
    <tr>
-   </tr>
-   <tr>
-     <td class="table-items">TOTAL INCOME</td> 
-     <td class="total-output"><%= Income.sum(:amount) %></td>
-   </tr>
   </tbody>
+  <tfoot class="bordered-form-total">
+    <tr>
+      <td>TOTAL INCOME</td> 
+      <td>$<%= Income.sum(:amount) %></td>
+      <td></td>
+    </tr>
+  </tfoot>
  </table>
-</div>
+ </div>