IN PROGRESS: UI suggestion for dashboard

[PrestonKorn]

I suggest making the section of the money accounts a bit easier to quickly read. Currently it looks like this;

I propose something like this:

It would be a matter of changing the code from

<ul class="list-unstyled">
  <li>
     Scout Name $6.17 |
     <a href="/manage/money_accounts/104772">Details</a> |
     <a href="/manage/money_accounts/104772/deposit_money">Deposit Funds</a></li>
</ul>

to

<ul class="list-unstyled">
    <li>Balance: $6.17</li>
    <li><a href="/manage/money_accounts/104772">Details</a></li>
    <li><a href="/manage/money_accounts/104772/deposit_money">Deposit Funds</a></li>
</ul>

[dave]

Thanks @PrestonKorn. I’ll push it live later tonight with some other things.

[PrestonKorn]

I have some more tuning suggestions for this section. I see you changed it to a DL list which gives it some varied spacing. Might I suggest the following?

For the money account section

<style>
.mAccount {
	border-bottom: thin dotted lightgrey;
	margin: 3px 0px;
}
.MoneyScoutBalance {
	font-weight: bold;
}

</style>

<ul class="list-unstyled">
    <li class="mAccount MoneyScoutBalance">Balance: $6.17</li>
    <li class="mAccount MoneyScoutDetails"><a href="/manage/money_accounts/104772">Details</a></li>
    <li class="mAccount MoneyScoutDeposit"><a href="/manage/money_accounts/104772/deposit_money">Deposit Funds</a></li>
</ul>

and for the membership application section

<style>
.appLi {
	border-bottom: thin dotted lightgrey;
	margin: 3px 0px;
}
.appLi a {
	white-space: nowrap;
}
</style>

<ul class="list-unstyled">
	<li class="appLi">
		<a target="_blank" href="/manage/bsa_youth_applications/705963.pdf?parent_id=319106">David Korn
		<i class="fa fa-print"></i></a></li>
	<li class="appLi">
		<a target="_blank" href="/manage/bsa_youth_applications/705963.pdf?parent_id=319077">Mailynn Korn
		<i class="fa fa-print"></i></a></li>
	<li class="appLi">
		<a target="_blank" href="/manage/bsa_youth_applications/705963.pdf?parent_id=319078">Preston Korn
		<i class="fa fa-print"></i></a></li>
</ul>

[dave]

@PrestonKorn Money account names don’t always match the user’s name. It’s generally true with youth, but not adults. Should we only hide the name if it matches?

Also, some adults have multiple accounts they manage, like this:

[PrestonKorn]

That’s a good point. I didn’t realize that. Hiding the one that has the same name sounds like a great idea. I like this look for multiple. You could just hide the MoneyScoutTitle class if it’s the same name. Does that one always come up first in the order of the data returned? If not, could it be? Because it would be a little confusing if it changed and was in the middle of the list sometimes.

Note: Had to remove the padding in the td container so this includes that td. I also got rid of the ul and just went to div. Also took the dotted line off the last item.

<td style="padding:0px;">

<style>
.mAccount {
	border-bottom: thin dotted lightgrey;
	margin: 3px 0px;
}
.mAccount:last-child{
    border: 0;
}
.MoneyScoutBalance {
	font-weight: bold;
	margin-left: 15px;
}
.MoneyScoutDetails {
	margin-left: 15px;
}
.MoneyScoutDeposit {
	margin-left: 15px;
}
.MoneyScoutTitle {
	color: #000000;
    background-color: #dee2e6;
	width: 100%;
	padding: 5px 10px;
}

</style>

<div class="MoneyScoutSection">
    <!--- <div class="MoneyScoutTitle">Hermione Granger</div> --->
    <div class="mAccount MoneyScoutBalance">Balance: $6.17</div>
    <div class="mAccount MoneyScoutDetails"><a href="/manage/money_accounts/104772">Details</a></div>
    <div class="mAccount MoneyScoutDeposit"><a href="/manage/money_accounts/104772/deposit_money">Deposit Funds</a></div>
</div>
<div class="MoneyScoutSection">
    <div class="MoneyScoutTitle">20013-2014 Patriot Budget</div>
    <div class="mAccount MoneyScoutBalance">Balance: $273.15</div>
    <div class="mAccount MoneyScoutDetails"><a href="/manage/money_accounts/104772">Details</a></div>
    <div class="mAccount MoneyScoutDeposit"><a href="/manage/money_accounts/104772/deposit_money">Deposit Funds</a></div>
</div>
<div class="MoneyScoutSection">
    <div class="MoneyScoutTitle">My Rainy Day Account</div>
    <div class="mAccount MoneyScoutBalance">Balance: $67.21</div>
    <div class="mAccount MoneyScoutDetails"><a href="/manage/money_accounts/104772">Details</a></div>
    <div class="mAccount MoneyScoutDeposit"><a href="/manage/money_accounts/104772/deposit_money">Deposit Funds</a></div>
</div>

</td>