Skip to content

Commit

Permalink
feature(loan): display loan information in a card
Browse files Browse the repository at this point in the history 
[Finishes #165839916]
  • Loading branch information
@chidimo
chidimo committed May 8, 2019
1 parent 2c347e0 commit f632bcd
Show file tree
Hide file tree
Showing 4 changed files with 167 additions and 187 deletions.
114 changes: 56 additions & 58 deletions UI/admin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,70 +61,68 @@ <h3>Orji Chidi <span style="color:green">&#x2714</span></h3>
</div>
</div>

<div class="major_grid">
<h3>Recent Loans</h3>
<div class="table_wrapper">
<table>
<tr>
<th>S/N</th>
<th>Application date</th>
<th>Status</th>
<th>Amount</th>
</tr>
<h3>Recent Loans</h3>
<div class="table_wrapper">
<table>
<tr>
<th>S/N</th>
<th>Application date</th>
<th>Status</th>
<th>Amount</th>
</tr>

<tr>
<td>1</td>
<td><time datetime="2019-01-01 08:00">01-01-2019</time></td>
<td>Pending</td>
<td>nil</td>
</tr>
<tr>
<td>1</td>
<td><time datetime="2019-01-01 08:00">01-01-2019</time></td>
<td>Pending</td>
<td>nil</td>
</tr>

<tr>
<td>2</td>
<td><time datetime="2019-01-01 08:00">01-01-2019</time></td>
<td style="color:green">Approved</td>
<td>50,000</td>
</tr>
<tr>
<td>2</td>
<td><time datetime="2019-01-01 08:00">01-01-2019</time></td>
<td style="color:green">Approved</td>
<td>50,000</td>
</tr>

<tr>
<td>3</td>
<td><time datetime="2019-01-01 08:00">01-01-2019</time></td>
<td style="color:red">Rejected</td>
<td>nil</td>
</tr>
</table>
</div>
<p><a href="loans.html" class="see_more">See All Loans</a></p>
<tr>
<td>3</td>
<td><time datetime="2019-01-01 08:00">01-01-2019</time></td>
<td style="color:red">Rejected</td>
<td>nil</td>
</tr>
</table>
</div>
<p><a href="loans.html" class="see_more">See All Loans</a></p>

<h3>Recent Users</h3>
<div class="table_wrapper">
<table>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Jackie Chan</td>
<td style="color:green">Verified</td>
</tr>
<h3>Recent Users</h3>
<div class="table_wrapper">
<table>
<tr>
<th>S/N</th>
<th>Name</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>Jackie Chan</td>
<td style="color:green">Verified</td>
</tr>

<tr>
<td>2</td>
<td>Marcus Rashford</td>
<td style="color:green">Verified</td>
</tr>
<tr>
<td>2</td>
<td>Marcus Rashford</td>
<td style="color:green">Verified</td>
</tr>

<tr>
<td>3</td>
<td>Jose Mourinho</td>
<td style="color:red">Not Verified</td>
</tr>
</table>
</div>
<p><a href="users.html" class="see_more">See All Users</a></p>
</div>
<tr>
<td>3</td>
<td>Jose Mourinho</td>
<td style="color:red">Not Verified</td>
</tr>
</table>
</div>
<p><a href="users.html" class="see_more">See All Users</a></p>
</section>

<footer>
Expand Down
64 changes: 33 additions & 31 deletions UI/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -331,15 +331,6 @@ footer {
width: 100%;
}

div.top_grid_container {
display: grid;
grid-template-columns: auto;
}

div.admin_actions_buttons {
margin: 0
}

form.modal_content {
width: 80%;
}
Expand All @@ -348,21 +339,6 @@ footer {
width: 100%;
}

div.admin_grid {
grid-gap: 10px;
grid-template-areas:
'admin_grid_item_1'
'admin_grid_item_2'
'admin_grid_item_3'
}

div.loan_grid {
grid-gap: 10px;
grid-template-areas:
'loan_grid_1'
'loan_grid_2'
}

div.user_card,
div.loan_card
{
Expand All @@ -372,6 +348,17 @@ footer {

@media (max-width: 450px) {

/* loan */
div.loan_card {
display: flex;
flex-direction: column;
}

div.loan_right_grid {
margin: 0;
text-align: center;
}

.user_photo,
hr.card_divider
{
Expand Down Expand Up @@ -429,6 +416,7 @@ footer {
.card {
padding: 10px;
max-width: 500px;
margin-bottom: 15px;
background-color: #f1f1f1;
border-radius: 10px;
box-shadow: 1px 3px ghostwhite;
Expand All @@ -454,11 +442,9 @@ footer {

.user_info {
margin: auto auto auto 5px;
/* overflow: scroll; */
}

.user_address {
margin-top: 15px;
margin-right: auto;
}

Expand All @@ -468,11 +454,6 @@ footer {
margin-bottom: 10px;
}

.top_grid_container {
margin-top: 5px;
padding: 10px;
}

.modal {
display: none;
position: fixed;
Expand Down Expand Up @@ -537,3 +518,24 @@ footer {
.reject {
background: #ff0000;
}

.loan_card {
display: grid;
grid-row-gap: 50px;
margin-right: auto;
font-weight: bold;
grid-template-columns: 30% 1% 68%;
}

.loan_left_grid {
font-size: 28px;
text-align: center;
}

.loan_left_grid p.status {
color: green;
}

.loan_right_grid {
margin: auto auto auto 5px;
}
80 changes: 33 additions & 47 deletions UI/loan.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,58 +50,44 @@
<h2 class="page_heading">Loan | <code>123456789</code> <span style="color:green">&#x2714</span></h2>

<div class="admin_actions_buttons">
<!--Approve and reject buttons will be visible only if the loan status is pending-->
<button
id="approve_loan_application"
class="button_1 shadowed_button approve"
>
Approve
</button>

<button
id="reject_loan_application"
class="button_1 shadowed_button reject"
>
Reject
</button>

<!--This button will only be visible for open loans-->
<button
id="post_payment_to_loan"
class="button_1 shadowed_button"
onclick="document.getElementById('loan_payment_modal').style.display='block'"
>
Post payment
</button>
</div>
<!--Approve and reject buttons will be visible only if the loan status is pending-->
<button
id="approve_loan_application"
class="button_1 shadowed_button approve"
>
Approve
</button>

<button
id="reject_loan_application"
class="button_1 shadowed_button reject"
>
Reject
</button>

<!--This button will only be visible for open loans-->
<button
id="post_payment_to_loan"
class="button_1 shadowed_button"
onclick="document.getElementById('loan_payment_modal').style.display='block'"
>
Post payment
</button>
</div>

<div class="major_grid">
<h3>Loan Details</h3>

<div class="mini_grid">
<p><b>Status</b></p>
<p>Pending</p>
<div class="loan_card card">
<div class="loan_left_grid">
<p class="amount">500,000</p>
<p class="status">Approved</p>
</div>

<div class="mini_grid">
<p><b>Amount</b></p>
<p>50,000</p>
</div>
<hr class="card_divider">

<div class="mini_grid">
<p><b>Interest</b></p>
<p>2,500</p>
</div>

<div class="mini_grid">
<p><b>Tenor</b></p>
<p>12 months</p>
</div>

<div class="mini_grid">
<p><b>Installments</b></p>
<p>4,375</p>
<div class="loan_right_grid">
<p class="interest">Interest: 25,000</p>
<p class="tenor">Tenor: 12 months</p>
<p class="installments">Installments: 43,750</p>
<p class="balance">Balance: 481,250</p>
</div>
</div>

Expand Down
Loading

0 comments on commit f632bcd

Please sign in to comment.