Skip to content
This repository was archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
Making the detail page look a little nicer
Browse files Browse the repository at this point in the history
  • Loading branch information
david.anderson committed Apr 13, 2016
1 parent b0c868a commit e1e7e2c
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 63 deletions.
17 changes: 16 additions & 1 deletion money-tracker-online/src/main/webapp/WEB-INF/jsp/common/style-includes.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Expand All @@ -13,6 +14,18 @@
background-color:#EEE;
}
.push-top-soft{
padding-top:5px;
}
.push-bottom-soft{
padding-bottom:5px;
}
.push-bottom-hard{
padding-bottom:10px;
}
.pageHeading{
padding-bottom: 10px;
}
Expand All @@ -22,6 +35,8 @@
}
.striped-list .row.listing-item:nth-child(even){
background-color:gray;
background-color:whitesmoke;
padding-top:5px;
padding-bottom:5px;
}
</style>
122 changes: 95 additions & 27 deletions money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/detail.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,113 @@
<head>
<title></title>

<%@include file="../common/style-includes.jsp"%>
<%@include file="../common/style-includes.jsp" %>
</head>
<body>
<div class="pageWrapper container">
<div class="pageHeading">
<div class="row">
Tracker Breakdown
</div>
</div>

<div class="pageBody">
<div class="pageWrapper">
<%--<jsp:include page="../common/nav-bar.jsp"/>--%>

<div class="row">
Starting Amount: ${tracker.moneyForTheMonth}
</div>
<div class="row">
Total spent: ${tracker.moneyForTheMonth - tracker.totalRemaining}
</div>
<div class="row">
Balance: ${tracker.totalRemaining}
<div class="pageBody">

<div class="container">
<div class="panel">
<div class="panel-body">
<div class="row">
<div class="col-xs-2"><a href="/money-tracker-online/money-tracker">Home</a></div>
<div class="col-xs-8">
<div class="text-center h4">Total Remaining:</div>
<div class="text-center h3">${tracker.totalRemaining}</div>
</div>
</div>
</div>
</div>

<div class="row">
<a class="button" href="<c:url value="/money-tracker/${tracker.uuid}/add-transaction"/>">Add Transaction</a>
<div class="panel">
<div class="panel-body">
<div class="striped-list">
<div class="listing-item row">
<div class="col-xs-6">Total Spent:</div>
<div class="col-xs-6">${tracker.moneyForTheMonth - tracker.totalRemaining}</div>
</div>
<div class="listing-item row">
<div class="col-xs-6">Initial Amount:</div>
<div class="col-xs-6">${tracker.moneyForTheMonth}</div>
</div>
</div>
</div>
</div>

<div class="row">
Transaction Breakdown:
<c:forEach items="${tracker.transactionHistory}" var="transactionListing">
<div>${transactionListing.key} - Total Spent: ${tracker.getMoneySpentOn(transactionListing.key)}</div>
<ul>
<c:forEach items="${transactionListing.value}" var="transaction">
<li>${transaction.amount}</li>
<div class="panel">
<div class="panel-body">
<div class="row push-bottom-hard text-center">
<div class="col-xs-2">
<a class="transactionTrigger" href="#">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<div class="col-xs-8">
<a class="transactionTrigger" href="#">
<span class="triggerText h5">Show Transaction History</span>
</a>
</div>
<div class="col-xs-2">
<a class="transactionTrigger" href="#">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>

<div class="striped-list" id="transactionHistory" style="display:none;">
<c:forEach items="${tracker.transactionHistory}" var="transactionListing">
<div class="listing-item row">
<div class="col-xs-12">
${transactionListing.key} : ${tracker.getMoneySpentOn(transactionListing.key)}
</div>
</div>
<c:forEach items="${transactionListing.value}" var="transaction">
<div class="listing-item row">
<div class="col-xs-offset-2">${transaction.amount}</div>
</div>
</c:forEach>
</c:forEach>
</ul>
</div>
</div>
</div>

</c:forEach>
<div class="panel">
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<a class="btn btn-default" style="width:100%" href="<c:url value="/money-tracker/${tracker.uuid}/add-transaction"/>">Add Transaction</a>
</div>
</div>
</div>
</div>

</div>


</div>

</div>
<script type="text/javascript">
$(document).ready(function(){
$('a.transactionTrigger').on('click', function(){
if(!$(this).hasClass('toggled')){
$('#transactionHistory').slideDown();
$(this).addClass('toggled');
$('.transactionTrigger .glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
$('.transactionTrigger .triggerText').html('Hide Transaction History');
}else{
$('#transactionHistory').slideUp();
$(this).removeClass('toggled');
$('.transactionTrigger .glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
$('.transactionTrigger .triggerText').html('Show Transaction History');
}
})
})
</script>

</body>
</html>
78 changes: 43 additions & 35 deletions money-tracker-online/src/main/webapp/WEB-INF/jsp/money-tracker/list.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,59 +5,67 @@
<title></title>

<%@include file="../common/style-includes.jsp" %>
<style>
.row.listing-item:nth-of-type(odd) {
background: #e0e0e0;
}
</style>

</head>
<body>

<div class="pageWrapper">
<jsp:include page="../common/nav-bar.jsp"/>
<div class="pageWrapper">
<jsp:include page="../common/nav-bar.jsp"/>

<div class="pageBody">
<div class="pageBody">

<div class="container panel">
<div class="panel-body">
<h2>Your Money Trackers</h2>
<div class="striped-list">
<div class="row listing-item">
<div class="col-xs-4">
Date Created
</div>
<div class="col-xs-4">
Starting Amount
</div>
<div class="col-xs-4">
Total Remaining
</div>
<div class="container panel">
<div class="panel-body">
<h2>Your Money Trackers</h2>

<div class="striped-list">
<div class="row listing-item">
<div class="col-xs-4">
Date Created
</div>
<div class="col-xs-4">
Starting Amount
</div>
<div class="col-xs-4">
Total Remaining
</div>
<c:forEach items="${user.moneyTrackers}" var="tracker">
</div>
<c:forEach items="${user.moneyTrackers}" var="tracker">
<div class="row listing-item">
<a href="/money-tracker-online/money-tracker/${tracker.uuid}">
<div class="row listing-item">
<div class="col-xs-4">
${tracker.dateTimeCreated}
</div>
<div class="col-xs-4">
${tracker.moneyForTheMonth}
</div>
<div class="col-xs-4">
${tracker.totalRemaining}
</div>

<div class="col-xs-4">
${tracker.dateTimeCreated}
</div>
<div class="col-xs-4">
${tracker.moneyForTheMonth}
</div>
<div class="col-xs-4">
${tracker.totalRemaining}
</div>
</a>
</c:forEach>
</div>


<div class="row">
<div class="col-md-2 push-top-hard">
<a class="btn btn-default" href="<c:url value='/money-tracker/create'/>">New Tracker</a>
</div>
</c:forEach>
</div>


<div class="row">
<div class="col-md-2 push-top-hard">
<a class="btn btn-default" href="<c:url value='/money-tracker/create'/>">New Tracker</a>
</div>
</div>
</div>

</div>

</div>

</div>

</body>
</html>

0 comments on commit e1e7e2c

Please sign in to comment.