You can use it to submit Github tickets for Quasar v1+.
A Pen by Chuck Horton on CodePen.
Created
April 30, 2020 22:54
-
-
Save chuckh/e197ee54f11decdbf2cd4ba90b8845a3 to your computer and use it in GitHub Desktop.
Kukun Loan Page Example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="q-app"> | |
| <template> | |
| <q-layout view="hHh lpR fFf"> | |
| <q-header elevated class="bg-white text-black q-header"> | |
| <q-toolbar> | |
| <q-toolbar-title> | |
| <img class="nav-logo" src="https://fs.acornfinance.com/companies/logos/kukun-logo.svg"> | |
| </q-toolbar-title> | |
| <q-btn @click="loadApply">Load Apply</q-btn> | |
| <q-btn @click="loadOffers">Load Offers</q-btn> | |
| </q-toolbar> | |
| </q-header> | |
| <q-page-container> | |
| <q-page> | |
| <q-card flat> | |
| <iframe | |
| id="applyIframeId" | |
| ref="applyIframeRef" | |
| name="applyIframe" | |
| :src="iframeUrl" | |
| allowtransparency="true" | |
| @load="setIframeHeight('applyIframeId')" | |
| scrolling="auto" | |
| :class="iframeClass" | |
| > | |
| </iframe> | |
| </q-card> | |
| <section flat class="bg-grey-1 text-center vertical-middle our-lenders-section"> | |
| <h3 class="partnership">IN PARTNERSHIP WITH</h3> | |
| <img src="https://fs.acornfinance.com/logos/acorn-finance-logo-180x54.png" style="width: 180px"> | |
| <h3 class="partnership">Our Lenders</h3> | |
| <div class="q-gutter-sm"> | |
| <img src="https://fs.acornfinance.com/images/lightstream-logo276x96.png"> | |
| <img src="https://fs.acornfinance.com/images/bestegg-logo276x96.png"> | |
| <img src="https://fs.acornfinance.com/images/lendingpoint-logo276x96.png"> | |
| <img src="https://fs.acornfinance.com/images/upgrade-logo276x96.png"> | |
| <img src="https://fs.acornfinance.com/images/prosper-logo276x96.png"> | |
| <img src="https://fs.acornfinance.com/images/sofi-logo276x96.png"> | |
| </div> | |
| </section> | |
| </q-page> | |
| </q-page-container> | |
| <footer bordered class="bg-blue-grey-9 text-white q-footer"> | |
| <q-toolbar> | |
| <q-toolbar-title> | |
| KUKUN Footer | |
| </q-toolbar-title> | |
| Versioin {{$q.version}} | |
| </q-toolbar> | |
| </footer> | |
| </q-layout> | |
| </template> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let curDomain = window.location.hostname.split('.').slice(-2).join('.') | |
| if (curDomain === 'acornfinance.com') { | |
| document.domain = 'acornfinance.com' | |
| } | |
| new Vue({ | |
| el: "#q-app", | |
| data: function () { | |
| return { | |
| version: Quasar.version, | |
| iframeUrl: "https://qa.pr.acornfinance.com/app-page-1?dealerid=1001&hf=0", | |
| iframeClass: "iframe-desktop" | |
| }; | |
| }, | |
| methods: { | |
| loadApply() { | |
| this.iframeUrl = ""; | |
| this.iframeUrl = | |
| "https://qa.pr.acornfinance.com/app-page-1?dealerid=1001&hf=0"; | |
| this.$q.notify({ | |
| message: "<b>Loading Apply</b><br> " + this.iframeUrl, | |
| html: true, | |
| multiLine: true, | |
| position: "top", | |
| timeout: 5000, | |
| color: "blue" | |
| }); | |
| }, | |
| loadOffers() { | |
| this.iframeUrl = | |
| "https://pr.acornfinance.com/offers?dealerid=JL92Z&applicationid=68059&hf=0"; | |
| this.$q.notify({ | |
| message: "<b>Loading Offers</b><br> " + this.iframeUrl, | |
| html: true, | |
| multiLine: true, | |
| position: "top", | |
| timeout: 5000, | |
| color: "blue" | |
| }); | |
| }, | |
| receiveIframeMessage(event) { | |
| let message = event.data; | |
| if ( | |
| typeof message === "string" && | |
| message.substr(0, 13) === "Resize Height" | |
| ) { | |
| console.log("Resize Height", message); | |
| let newHeight = message.substr(14, 10); | |
| this.setIframeHeight("applyIframeId", newHeight); | |
| } else if ( | |
| typeof message === "string" && | |
| message.substr(0, 8) === "Continue" | |
| ) { | |
| console.log("Continue", message); | |
| this.hideForInput = true; | |
| this.$root.$emit("hide-tabs"); | |
| } | |
| }, | |
| // https://pr.acornfinance.com/app-page-1?dealerid=1001&hf=0 | |
| setIframeHeight(id, height) { | |
| var ifrm = document.getElementById(id); | |
| var doc = ifrm.contentDocument | |
| ? ifrm.contentDocument | |
| : ifrm.contentWindow.document; | |
| // var prevHeight = ifrm.style.height | |
| ifrm.style.height = "10px"; // reset to minimal height ... | |
| // IE opt. for bing/msn needs a bit added or scrollbar appears | |
| var newHeight = this.getDocHeight(doc) + 4; | |
| if (height > newHeight) { | |
| newHeight = height; | |
| } | |
| if (newHeight !== this.prevHeight) { | |
| ifrm.style.visibility = "hidden"; | |
| ifrm.style.height = newHeight + "px"; | |
| ifrm.style.visibility = "visible"; | |
| } | |
| // console.log('setIframeHeight', prevHeight, newHeight, height) | |
| }, | |
| onResize(size) { | |
| if ( | |
| window.location.protocol !== "https:" && | |
| window.location.hostname !== "localhost" | |
| ) { | |
| this.setIframeHeight("applyIframeId", 0); | |
| } | |
| if (this.$q.platform.is.desktop) { | |
| this.iframeClass = "iframe-desktop"; | |
| } else { | |
| this.iframeClass = "iframe-mobile"; | |
| } | |
| // console.log('Personal onResize', size, this.iframeClass) | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdn.jsdelivr.net/npm/vue"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .q-header { | |
| min-height: 64px; | |
| padding: 4px 16px; | |
| } | |
| .nav-logo { | |
| margin-top: 12px; | |
| } | |
| .q-btn { | |
| margin: 0 10px; | |
| } | |
| .iframe-desktop { | |
| min-height: 675px !important; | |
| width: 100%; | |
| margin: 0; | |
| border: none; | |
| } | |
| .iframe-mobile { | |
| min-height: 575px !important; | |
| width: 100%; | |
| margin: 0; | |
| border: none; | |
| } | |
| .partnership { | |
| font-size: 18px; | |
| text-align: center; | |
| } | |
| .our-lenders-section { | |
| padding: 30px; | |
| } | |
| .q-footer { | |
| min-height: 64px; | |
| padding: 8px 16px; | |
| font-size: 10px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css" rel="stylesheet" /> | |
| <link href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment