From 9f193a206160eb59a4dd525fa3d45c11eb3dc78e Mon Sep 17 00:00:00 2001
From: Immanuel Onyeka <immanuel@onyeka.ca>
Date: Sat, 5 Nov 2022 20:44:43 -0400
Subject: [PATCH] Add borrower hint tooltip
---
.gitignore | 1 +
assets/image/icon/question-circle.svg | 4 ++++
assets/main.css | 31 +++++++++++++++++++++++++++
components/new.vue | 23 +++++++++++++++-----
components/sidebar.vue | 2 +-
5 files changed, 55 insertions(+), 6 deletions(-)
create mode 100644 assets/image/icon/question-circle.svg
diff --git a/.gitignore b/.gitignore
index 5b30f50..fd025d2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ skouter
*.sw[poqa]
.env
assets/app.js
+package-lock.json
diff --git a/assets/image/icon/question-circle.svg b/assets/image/icon/question-circle.svg
new file mode 100644
index 0000000..2650396
--- /dev/null
+++ b/assets/image/icon/question-circle.svg
@@ -0,0 +1,4 @@
+<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-question-circle" fill="#DFE3E8" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+ <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+</svg>
diff --git a/assets/main.css b/assets/main.css
index bbf1efd..f66c311 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -7,6 +7,7 @@
--text-lightest: #A1A7AD;
--outline: #DFE3E8;
--brand: #0f6b4b;
+ --shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
body {
@@ -208,6 +209,7 @@ section.inputs {
flex-flow: column;
max-width: 250px;
row-gap: 15px;
+ position: relative;
}
section.radios h3 {
@@ -224,6 +226,7 @@ svg.close {
top: 10px;
height: 50px;
width: 50px;
+ cursor: pointer;
color: var(--text);
}
@@ -242,3 +245,31 @@ div.sidebar-toggle svg {
color: var(--text);
cursor: pointer;
}
+
+div.hint {
+ position: absolute;
+ top: 10px;
+ right: 15%;
+ /* margin: auto; */
+}
+
+div.hint img {
+ width: 25px;
+ height: 25px;
+}
+
+div.hint .tooltip {
+ position: absolute;
+ width: 150px;
+ right: -2em;
+ background: white;
+ color: grey;
+ padding: 10px;
+ border-radius: 3px;
+ box-shadow: var(--shadow);
+ visibility: hidden;
+}
+
+div.hint:hover .tooltip {
+ visibility: visible;
+}
diff --git a/components/new.vue b/components/new.vue
index 26bfa89..19a6ee6 100644
--- a/components/new.vue
+++ b/components/new.vue
@@ -29,16 +29,26 @@ fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
</section>
<section class="form inputs">
+
+<div class="hint">
+ <img class="icon" src="/assets/image/icon/question-circle.svg" alt="">
+ <div class="tooltip">
+ <p>Assumes borrower is not self employed, not bankrupt in the past 7
+ years, a citizen, and intends to occupy the property.</p>
+ </div>
+</div>
+
<h3>Borrower</h3>
<label>Number of Borrowers</label>
<input :value="loans[sel].borrowers"
@input="(e) => loans.forEach(l => l.borrowers = strip(e))">
<label>Credit Score</label>
<input :value="loans[sel].creditScore"
-@input="(e) => loans[sel].creditScore = strip(e)">
+@input="(e) => loans.forEach(l => l.creditScore = strip(e))">
<label>Monthly Income ($)</label>
<input :value="loans[sel].mIncome"
-@input="(e) => loans[sel].mIncome = strip(e)">
+@input="(e) => loans.forEach(l => l.mIncome = strip(e))">
+
</section>
<section class="radios form">
@@ -150,13 +160,16 @@ function setAmount(e) {
loan.ltv = Math.round(amount / loan.price * 100)
}
+// Updates the property price for all loans
function setPrice(e) {
- let loan = this.loans[this.sel]
let value = strip(e)
- loan.price = value
+ this.loans.forEach(l => {
+ l.price = value
+ l.amount = Math.round(l.ltv / 100 * value)
+ })
+
e.target.value = value
- loan.amount = Math.round(loan.ltv / 100 * value)
}
function setDti(e) {
diff --git a/components/sidebar.vue b/components/sidebar.vue
index 5b92f62..ba2ae41 100644
--- a/components/sidebar.vue
+++ b/components/sidebar.vue
@@ -23,7 +23,7 @@ fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0
<img
src="/assets/image/mintberry.jpg">
-<a href="" :class="active == 1 ? 'active' : ''">
+<a href="#" :class="active == 1 ? 'active' : ''">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"> <path
fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0