Skip to content

Commit

Permalink
Merge pull request #441 from bcgov/migrate-to-bootstrap
Browse files Browse the repository at this point in the history 
Migrate to bootstrap
  • Loading branch information
@Gavinok
Gavinok authored Mar 21, 2024
2 parents 59b055a + 7d32461 commit 27d0a3c
Showing 1 changed file with 71 additions and 133 deletions.
204 changes: 71 additions & 133 deletions oidc-controller/api/templates/verified_credentials.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
/>
<!-- Latest compiled and minified CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>

Expand All @@ -22,9 +22,10 @@
--big-font-size: 1.5rem;
--small-font-size: 1.8rem;
--font-family-sans-serif: Arial, Helvetica, sans-serif;
--primary: #003366;
--secondary: #6c757d;
--bs-primary: #000;
--bs-primary: #003366;
--bs-secondary: #335c85;
--bs-btn-disabled-color: #b2c1d1;
--bs-blue: #003366;
}
body {
color: #313132;
Expand All @@ -33,35 +34,24 @@
border: none;
font-family: var(--font-family-sans-serif);
}
.navbar {
border-radius: 0;
}
.header-branding {
background-color: var(--primary);
height: 7rem;
background-color: var(--bs-primary);
height: 5rem;
width: 100%;
border-style: none none solid none;
border-color: #fcba19;
box-shadow: 0px 3px 3px 0px #dedede;
}
.navbar-brand svg {
.header-branding svg {
position: relative;
height: 5rem;
}
.header {
display: flex;
justify-content: center;
align-items: center;
height: 4rem;
}
.header-desc {
display: grid;
grid-template-columns: 5rem 1fr;
width: 22rem;
}
.centered-header {
display: flex;
justify-content: center;
align-items: center;
max-width: 22rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.header-share {
display: grid;
Expand All @@ -70,34 +60,12 @@
margin-top: 1.5rem;
margin-bottom: 1.75rem;
}
.qr-code-desc {
text-align: left;
}
.qr-code {
display: flex;
justify-content: center;
position: relative;
margin-bottom: 1rem;
}
.qr-code-image {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.qr-code .border svg {
position: absolute;
left: 48px;
width: 330px;
height: 330px;
transform: scale(1.05) translate(6px, 8px);
margin-left: -10px;
margin-top: -10px;
}
.qr-code.pending svg rect {
animation: dash 20s linear infinite;
}
.qr-code img {
border-radius: 25px;
border: 5px dashed #003366;
Expand Down Expand Up @@ -132,32 +100,26 @@
font-size: var(--small-font-size);
font-weight: bold;
}

.description {
--bs-btn-hover-color: var(--bs-primary);
color: var(--bs-primary);
}
#refresh-button {
background: rgba(256, 256, 256, 0.5);
width: 100%;
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
display: none;
width: 100%;
}
#refresh-button:hover,
#refresh-button:focus,
#refresh-button:active {
opacity: 0.9;
}
#refresh-button .message {
font-size: var(--small-font-size);
font-weight: bold;
margin-bottom: 0.8rem;
}
.fake-button {
font-size: var(--big-font-size);
font-weight: 700;
letter-spacing: 1px;
background: white;
border-color: var(--primary);
}
.header-desc.success,
.header-desc.pending,
.header-desc.expired,
Expand All @@ -168,10 +130,6 @@
align-items: center;
padding: 1rem 2rem 1rem 0.5rem;
}
.header-desc.expired.expired-deep-link {
margin-left: 0;
width: 100%;
}
.header-desc.pending svg {
width: 2rem;
height: 2rem;
Expand All @@ -184,9 +142,6 @@
.header-desc.expired {
background-color: #f0f0f0;
}
.header-desc.expired-deep-link {
margin-bottom: 1.5rem;
}
.header-desc.failed {
background-color: #f2dede;
}
Expand All @@ -199,42 +154,22 @@
.header-desc.abandoned {
background-color: #f2dede;
}
.header-desc a {
line-height: 1rem;
}
.text-link {
display: none;
margin-top: 1rem;
margin-bottom: 1rem;
}
.text-link textarea {
border-radius: 5px;
display: block;
max-width: 100%;
resize: none;
width: 100%;
.disabled {
--bs-btn-disabled-bg: #b2c1d1;
--bs-btn-disabled-border-color: #b2c1d1;
}
.text-link label {
display: block;
.btn {
--bs-btn-hover-bg: #335c85;
--bs-btn-hover-border-color: #335c85;
}

/* BC Gov style buttons */
.btn-primary,
.btn-outline-primary {
font-size: var(--big-font-size);
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
margin-top: 1rem;
margin-bottom: 1.5rem;
}

.btn-primary {
background-color: var(--primary);
border-color: var(--bs-primary);
background-color: var(--bs-primary);
}
.btn-outline-primary {
color: var(--primary);
border-color: var(--primary);
color: var(--bs-primary);
border-color: var(--bs-primary);
--bs-btn-active-bg: #335c85;
}
/* Mobile device */
.mobile-device {
Expand All @@ -248,25 +183,25 @@
<div class="navbar-brand">{{add_asset("BCID_H_rgb_rev.svg")}}</div>
</nav>
<div class="container">
<h1 class="desktop-device desktop-header">
<h1 class="desktop-device desktop-header my-2">
Scan with a Digital Wallet
</h1>
<h1 class="mobile-device">Continue with:</h1>
<div class="header">
<h1 class="mobile-device my-1">Continue with:</h1>
<div class="d-flex flex-row justify-content-center">
<div class="header-desc success">
<div class="qr-code-image mw-90">
{{add_asset("circle-check.svg")}}
</div>
<div class="qr-code-desc">
<div class="text-start">
<b>Success!</b> You will be redirected shortly.
</div>
</div>

<div class="header-desc failed">
<div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
<div class="qr-code-desc">
<div class="text-start">
<b>Proof not accepted.</b>
<br/>
<br />
<a
href="javascript:window.location.reload(true)"
title="Please try again."
Expand All @@ -277,9 +212,9 @@ <h1 class="mobile-device">Continue with:</h1>

<div class="header-desc expired">
<div class="qr-code-image">{{add_asset("expired.svg")}}</div>
<div class="qr-code-desc">
<div class="text-start">
<b>Proof has expired.</b>
<br/>
<br />
<a
href="javascript:window.location.reload(true)"
title="Refresh Proof."
Expand All @@ -290,9 +225,9 @@ <h1 class="mobile-device">Continue with:</h1>

<div class="header-desc abandoned">
<div class="qr-code-image">{{add_asset("circle-x.svg")}}</div>
<div class="qr-code-desc">
<div class="text-start">
<b>Proof declined</b>
<br/>
<br />
<a
href="javascript:window.location.reload(true)"
title="Refresh QR code."
Expand All @@ -303,35 +238,35 @@ <h1 class="mobile-device">Continue with:</h1>

<div class="header-desc pending">
<div class="qr-code-image">{{add_asset("hourglass.svg")}}</div>
<div class="qr-code-desc">
<div class="text-start">
<b>Proof is pending.</b>
</div>
</div>
</div>
<!-- BC Wallet deep link if the user agent is a mobile device -->
<div class="mobile-device">
<a
id="deep-link-button"
href="{{wallet_deep_link}}"
type="submit"
class="btn btn-lg btn-block btn-primary"
title="Open BC Wallet"
target="_blank"
>
BC Wallet
</a>
<a
id="deep-link-button"
href="{{wallet_deep_link}}"
type="submit"
class="btn btn-lg btn-block btn-primary w-100 my-2"
title="Open BC Wallet"
target="_blank"
>
BC Wallet
</a>
<a
id="other-device-button"
class="btn btn-lg btn-default btn-block btn-outline-secondary btn-secondary"
class="btn btn-lg btn-default btn-block-secondary btn-outline-primary w-100 border-2 my-2"
title="Open BC Wallet"
>
BC Wallet on other device
</a>

<div class="centered-header">
<div class="d-flex flex-row justify-content-center">
<div class="header-share">
<div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
<div class="qr-code-desc">
<div class="text-start">
A request to share your information will be sent to your BC
Wallet
</div>
Expand All @@ -342,10 +277,10 @@ <h1 class="mobile-device">Continue with:</h1>

<!-- QR Code for desktop/other -->
<div class="desktop-device">
<div class="header">
<div class="header-desc intro">
<div class="d-flex flex-row justify-content-center">
<div class="header-desc intro my-2">
<div class="qr-code-image">{{add_asset("hand-qrcode.svg")}}</div>
<div class="qr-code-desc">
<div class="text-start">
Scanning this QR code will send you a request to share your
information
</div>
Expand All @@ -354,14 +289,14 @@ <h1 class="mobile-device">Continue with:</h1>
<div class="media qr-code">
<button
id="refresh-button"
class="btn btn-default qr-button secondary"
class="qr-button"
title="Refresh QR Code"
>
<div class="button-content">
<div class="btn btn-block btn-outline-primary fake-button">
<div class="icon">{{add_asset("refresh.svg")}}</div>
<div class="description">Refresh QR code</div>
</div>
<div
class="button-content btn fw-bolder btn-outline-primary bg-white fs-6 d-flex flex-row"
>
<div class="icon mx-1">{{add_asset("refresh.svg")}}</div>
<div class="description mx-1">Refresh QR code</div>
</div>
</button>
<div class="scanned-mask">
Expand All @@ -378,13 +313,14 @@ <h1 class="mobile-device">Continue with:</h1>
</div>

<!-- Add a input box with the url_to_message data -->
<div class="text-link">
<div id="text-link" style="display: none">
<label for="url_to_message">Presentation Exchange URL:</label>
<textarea
id="url_to_message"
rows="3"
disabed
value="{{url_to_message}}"
class="w-100"
>
{{url_to_message}}
</textarea>
Expand Down Expand Up @@ -414,10 +350,12 @@ <h1 class="mobile-device">Continue with:</h1>
return "Android";
}

if (/iPad|iPhone|iPod/.test(userAgent) ||
/Macintosh/.test(userAgent) && 'ontouchend' in document ||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
if (
/iPad|iPhone|iPod/.test(userAgent) ||
(/Macintosh/.test(userAgent) && "ontouchend" in document) ||
(navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ||
(navigator.vendor && navigator.vendor.indexOf("Apple") > -1)
) {
return "iOS";
}

Expand Down Expand Up @@ -576,7 +514,7 @@ <h1 class="mobile-device">Continue with:</h1>
* If the BC_ID is clicked on 10 times in a row, display the link textbox
*/
let counter = 0;
const textLinkDiv = document.querySelector(".text-link");
const textLinkDiv = document.querySelector("#text-link");
document.querySelector("#BC_ID").addEventListener("click", () => {
counter++;
if (counter === 10) {
Expand Down

0 comments on commit 27d0a3c

Please sign in to comment.