Redesign earnings/spendings list on dashboard view
MODIFY
public/style.css
public/style.css
@@ -85,6 +85,19 @@ body {
border-radius: 8px;
}
+ul.box {
+ list-style: none;
+}
+
+ul.box li {
+ padding: 24px;
+ border-bottom: 1px solid #E5E9F2;
+}
+
+ul.box li:last-child {
+ border-bottom: none;
+}
+
.box.spacing-large {
padding: 40px;
}
@@ -211,6 +224,10 @@ form.test input[type=submit]:hover {
/* Spacing */
+.spacing-top-nano {
+ margin-top: 8px;
+}
+
.spacing-top-small {
margin-top: 16px;
}

MODIFY
resources/views/dashboard/index.blade.php
resources/views/dashboard/index.blade.php
</div>
</div>
</div>
- <h2 class="spacing-top-large spacing-bottom-medium">Earnings</h2>
- <table class="box spacing-large">
- <tbody>
+ <div class="row spacing-top-large">
+ <div class="column">
+ <h2 class="spacing-bottom-medium">Earnings</h2>
+ <ul class="box">
@foreach ($earnings as $earning)
- <tr>
- <td>{{ $earning->description }}</td>
- <td>{{ $currency->symbol }} {{ $earning->amount }}</td>
- </tr>
+ <li>
+ <div class="row">
+ <div class="column">
+ <a href="#">{{ $earning->description }}</a>
+ <p class="spacing-top-nano">{{ date('jS', strtotime($earning->date)) }}</p>
+ </div>
+ <div class="column align-right align-middle">
+ <h3 class="color-green">{{ $currency->symbol }} {{ $earning->amount }}</h3>
+ </div>
+ </div>
+ </li>
@endforeach
- </tbody>
- </table>
- <h2 class="spacing-top-large spacing-bottom-medium">Spendings</h2>
- <table class="box spacing-large">
- <tbody>
+ </ul>
+ </div>
+ <div class="column">
+ <h2 class="spacing-bottom-medium">Spendings</h2>
+ <ul class="box">
@foreach ($spendings as $spending)
- <tr>
- <td>{{ $spending->description }}</td>
- <td>{{ $currency->symbol }} {{ $spending->amount }}</td>
- </tr>
+ <li>
+ <div class="row">
+ <div class="column">
+ <a href="#">{{ $spending->description }}</a>
+ <p class="spacing-top-nano">{{ $spending->tag->name }} &middot; {{ date('jS', strtotime($spending->date)) }}</p>
+ </div>
+ <div class="column align-right align-middle">
+ <h3 class="color-red">{{ $currency->symbol }} {{ $spending->amount }}</h3>
+ </div>
+ </div>
+ </li>
@endforeach
- </tbody>
- </table>
+ </ul>
+ </div>
+ </div>
<h2 class="spacing-top-large spacing-bottom-medium">Budgets</h2>
<table class="box spacing-large">
<tbody>

Redesign earnings/spendings list on dashboard view