Skip to content

Commit

Permalink
Merge pull request #14 from TLI-Group-1/feature/details-page
Browse files Browse the repository at this point in the history 
Details page complete except the ability to update loan principal
  • Loading branch information
@Shalev-Lifshitz
Shalev-Lifshitz authored Dec 9, 2021
2 parents cd33ae4 + 7fdc37a commit 01f0afe
Show file tree
Hide file tree
Showing 9 changed files with 465 additions and 57 deletions.
142 changes: 129 additions & 13 deletions css/details.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ limitations under the License.
main {
width: 60rem;
max-width: 90%;
max-height: 60rem;
margin: 2rem auto 5rem auto;
margin: 2rem auto 3rem auto;

display: flex;
flex-direction: column;
Expand All @@ -35,15 +34,18 @@ header {
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
flex-wrap: wrap;
column-gap: 1em;
}

header div {
flex-grow: 1;
padding: 2rem 1rem 1rem 1rem;
}

header div.go-back {
flex-grow: 1;
padding-left: 2rem;
padding-top: 1rem;
min-width: 15rem;
Expand All @@ -56,6 +58,13 @@ header div.go-back {
align-items: center;
column-gap: 1rem;
}
@media (max-width: 600px) {
header div.go-back {
max-width: 100%;
width: 100%;
border-radius: 1.1rem 1.1rem 0 0;
}
}

header div.go-back img {
transition: all 250ms ease;
Expand All @@ -69,6 +78,19 @@ header div.go-back:hover img {
transform: translateX(-0.5rem);
}

header div.details-title {
padding-right: 2rem;
}
@media (max-width: 600px) {
header div.details-title {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}

header h1 {
color: #36cf9b;
}
Expand All @@ -84,34 +106,128 @@ header img {
main > nav {
flex-grow: 0;
padding: 1rem 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}

main > div {
height: 42rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
overflow: hidden;
}

@media (max-width: 670px) {
main > div {
height: auto;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
}

/* claimed loan offers sidebar styles */

main > div aside {
flex-grow: 1;
max-width: 20rem;
max-height: 60rem;
height: 100%;
min-width: 18rem;
flex: 1 1 auto;
border-radius: 0 0 0 1.1rem;
overflow-y: auto;
overscroll-behavior-y: contain;
}

@media (max-width: 670px) {
main > div aside {
max-height: 20rem;
}
}

.offer-selected, .offer-selected > * {
background-color: #1d2345 !important;
color: #ffffff;
}
.offer-selected .offer-loan-info {
color: #3ee3ac !important;
}

/* loan offer detail display styling */

main > div section {
flex-grow: 2;
border-radius: 0 0 1.1rem 0;
padding: 1rem;
max-width: 75%;
flex: 10 5 auto;
min-height: 30rem;
/* overflow-y: auto; */
border-radius: 0 0 1.1rem 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
row-gap: 2rem;
}

main > div section div {
word-wrap: anywhere;
max-height: 100%;
@media (max-width: 670px) {
main > div section {
border-radius: 0 0 1.1rem 1.1rem;
}
}

section div.loan-offer-details {
padding: 2rem;
border-radius: 0 0 1.1rem 0;
overflow-y: auto;
overscroll-behavior-y: contain;
display: flex;
flex-direction: column;
row-gap: 2rem;
}

section div.loan-offer-details h4 {
font-weight: 500;
color: #faa500;
}

div.loan-offer-details div.car-hero {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 15rem;
}

div.loan-offer-details div.car-hero img {
height: 100%;
width: auto;
border-radius: 1rem;
}

div.loan-offer-details ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
column-gap: 2rem;
row-gap: 1rem;
}

div.loan-offer-details ul li span {
font-weight: 500;
font-size: 1.2rem;
}

main > div section div.loan-offer-details input {
border-color: #ffffff;
margin: 0.5rem 0.5rem 0.5rem 0;
}

main > div section div.loan-offer-details button {
height: 2.4rem;
padding: 0.25em 1.5em;
border-radius: 1.2rem;
}
1 change: 1 addition & 0 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ section.sec-claimed-offers header img {
section.sec-claimed-offers ul.loan-offers {
max-height: 18rem;
overflow-y: auto;
overscroll-behavior-y: contain;
}

section.sec-claimed-offers a.round-empty-pill {
Expand Down
2 changes: 2 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ button {
border: none;
display: inline-flex;
justify-content: center;
align-items: center;
transition: all 250ms ease;
}

button:hover {
Expand Down
86 changes: 72 additions & 14 deletions details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@
<link rel="stylesheet" href="css/details.css">
<!-- Scripts -->
<script type="text/javascript" src="js/mustache-4.2.0.min.js" defer></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/main.js" defer></script>
<script type="text/javascript" src="js/api.js" defer></script>
<script type="text/javascript" src="js/details.js" defer></script>
</head>
<body>
<main class="card border-thin">
Expand All @@ -49,21 +50,10 @@ <h2>Your loan offer details</h2>
</nav>
<div>
<aside>
<ul class="loan-offers">
<li class="loan-offer-entry">
<a href="./details.html?offerSelected={offer_id}">
<img src="./assets/img/car-1.jpg" alt="">
<div class="loan-offer-summary">
<span class="offer-car-info">{{make}} {{model}} {{year}}</span>
<span class="offer-loan-info">${{mon_pay}}/mo {{term}} years {{apr}}%</span>
</div>
</a>
</li>

<ul class="loan-offers" id="loanOffersContainer">
</ul>
</aside>
<section class="region-dark">
<div id="demo_field"></div>
<section class="region-dark" id="offerDetailsContainer">
</section>
</div>
</main>
Expand Down Expand Up @@ -108,5 +98,73 @@ <h3>Powered by:</h3>
</aside>
<div class="footer-spacer"></div>
</footer>

<!-- Mustache templates below; rendered in JavaScript -->
<script type="text/html" id="tmpl_LoanOffer">
<li class="loan-offer-entry" name="{{offer_id}}">
<a href="./details.html?user_id={{user_id}}&offerSelected={{offer_id}}">
<img src="./assets/img/car-1.jpg" alt="">
<div class="loan-offer-summary">
<span class="offer-car-info">{{make}} {{model}} {{year}}</span>
<span class="offer-loan-info">${{payment_mo}}/mo &middot; {{loan_term}} months &middot; {{apr}}%</span>
</div>
</a>
</li>
</script>

<script type="text/html" id="tmpl_LoanDetails">
<div class="loan-offer-details">
<div class="car-hero">
<img src="./assets/img/car-1.jpg" alt="Car Hero Image">
</div>
<ul class="car-info">
<li class="car-info-pair">
<h4>Make:</h4>
<span>{{make}}</span>
</li>
<li class="car-info-pair">
<h4>Model:</h4>
<span>{{model}}</span>
</li>
<li class="car-info-pair">
<h4>Year:</h4>
<span>{{year}}</span>
</li>
<li class="car-info-pair">
<h4>Usage:</h4>
<span>{{kms}} km</span>
</li>
<li class="car-info-pair">
<h4>Retail price:</h4>
<span>&#36;{{price}}</span>
</li>
</ul>
<form id="form-update-principal" onsubmit="submitNewPrincipal(); return false;">
<label for="loan-principal"><h4>Loan principal:</h4></label>
<input class="round-empty-pill" type="number" name="loan-principal" value="{{principal}}">
<button type="submit" name="updatePrincipal" class="btn-green">
Update
</button>
</form>
<ul class="loan-info">
<li class="car-info-pair">
<h4>Interest rate:</h4>
<span>{{apr}}&#37;</span>
</li>
<li class="car-info-pair">
<h4>You pay:</h4>
<span>&#36;{{payment_mo}}/mo</span>
</li>
<li class="car-info-pair">
<h4>Loan term:</h4>
<span>{{loan_term}} months</span>
</li>
<li class="car-info-pair">
<h4>Total cost:</h4>
<span>&#36;{{total_sum}}</span>
</li>
</ul>
</div>
</script>
</body>
</html>
30 changes: 16 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,18 +77,9 @@ <h3>You need to:</h3>
<img src="./assets/icons/heart-filled-red-min.svg" alt="">
<h3>Your loan offers</h3>
</header>
<ul class="loan-offers">
<li class="loan-offer-entry">
<a href="./details.html?offerSelected={offer_id}">
<img src="./assets/img/car-1.jpg" alt="">
<div class="loan-offer-summary">
<span class="offer-car-info">{{make}} {{model}} {{year}}</span>
<span class="offer-loan-info">${{mon_pay}}/mo {{term}} years {{apr}}%</span>
</div>
</a>
</li>
<ul class="loan-offers" id="loanOffersContainer">
</ul>
<a class="round-empty-pill" href="./details.html">See all offer details</a>
<a id="offersDetailsLink" class="round-empty-pill" href="./details.html">See all offer details</a>
</section>
</aside>
<section>
Expand All @@ -98,9 +89,9 @@ <h3>Your loan offers</h3>
<img id="sortIcon" src="assets/icons/sort-top-down-min.svg" alt="Sort by" />
</button>
<select name="sortBy" id="sortBy" onchange="setSortBy();">
<option value="apr" selected>Interest rate</option>
<option value="price" selected>Retail price</option>
<option value="apr">Interest rate</option>
<option value="payment_mo">Monthly payment</option>
<option value="price">Retail price</option>
<option value="total_sum">Total cost</option>
<option value="term_length">Loan term length</option>
</select>
Expand Down Expand Up @@ -203,7 +194,7 @@ <h5>You pay:</h5>
</div>
<div class="car-info-pair">
<h5>Loan term:</h5>
<span class="green-text">{{loan_term}} years</span>
<span class="green-text">{{loan_term}} months</span>
</div>
<div class="car-info-pair">
<h5>Total cost:</h5>
Expand All @@ -221,5 +212,16 @@ <h5>Total cost:</h5>
<span class="btn-red bg-heart-empty claim-heart"></span>
</button>
</script>
<script type="text/html" id="tmpl_LoanOffer">
<li class="loan-offer-entry">
<a href="./details.html?user_id={{user_id}}&offerSelected={{offer_id}}">
<img src="./assets/img/car-1.jpg" alt="">
<div class="loan-offer-summary">
<span class="offer-car-info">{{make}} {{model}} {{year}}</span>
<span class="offer-loan-info">${{payment_mo}}/mo &middot; {{loan_term}} months &middot; {{apr}}%</span>
</div>
</a>
</li>
</script>
</body>
</html>
Loading

0 comments on commit 01f0afe

Please sign in to comment.