RanchiMall/certify
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bug fixes and UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-12-05 00:51:58 +05:30
parent fb13c81991
commit 71e382d150
4 changed files with 115 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/main.css
View File

@ -60,6 +60,14 @@ button {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-0-5 {
gap: 0.5rem;
}
.align-items-center {
align-items: center;
}
@ -76,6 +84,10 @@ button {
hyphens: auto;
}
.margin-left-auto {
margin-left: auto;
}
.observe-empty-state:empty {
display: none;
}
@ -155,6 +167,30 @@ button {
margin-top: 1rem;
}
.button {
display: flex;
align-items: center;
padding: 0.4rem 0.8rem;
text-decoration: none;
border-radius: 3rem;
margin-left: auto;
font-weight: 500;
color: var(--accent-color);
gap: 0.3rem;
}
.button--primary {
background-color: var(--accent-color);
color: white;
}
.button--primary .icon {
fill: white;
}
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
filter: saturate(0);
}
.cert-card {
display: grid;
gap: 0.6rem;
@ -173,15 +209,6 @@ button {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.9);
}
.cert-card a {
padding: 0.6rem 1rem;
text-decoration: none;
background-color: var(--accent-color);
color: white;
border-radius: 3rem;
margin-left: auto;
font-weight: 500;
}
.cert-card .tag {
padding: 0.3rem 0.5rem;
border-radius: 0.3rem;

2
css/main.min.css vendored
View File

@ -1 +1 @@
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto slab",serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: rgb(231, 44, 55);--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: rgb(91, 33, 255);--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--secondary-color: #d60739;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}button{padding:1rem;font-size:inherit;background-color:var(--accent-color);border:none;border-radius:.3rem;color:#fff;font-weight:500;cursor:pointer}.capitalize{text-transform:capitalize}.flex{display:flex}.align-items-center{align-items:center}.space-between{justify-content:space-between}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem}#home>*{width:min(100%,56rem);margin:0 auto}#home h1{padding:1rem;padding-top:10vmax;font-size:max(1.8rem,4vw);text-align:center;color:var(--accent-color)}@-webkit-keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}#home header{width:100%;background-color:rgba(var(--text-color), 0.06);padding-bottom:3rem;margin-bottom:-2rem}#cert_sec{padding:1.5rem;font-family:"intern"}#search_certificates{position:-webkit-sticky;position:sticky;top:1rem;width:min(24rem,100% - 2rem);margin:0 auto;--border-radius: 0.5rem;border-radius:.5rem;--padding: 1rem 1.2rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);border:solid thin rgba(var(--text-color), 0.2)}#issued_cert_list{display:flex;flex-direction:column;gap:.5rem;padding:1rem;padding-bottom:4rem;margin-top:1rem}.cert-card{display:grid;gap:.6rem;padding:1rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.cert-card h4{font-size:1.2rem}.cert-card time{font-size:.9rem;color:rgba(var(--text-color), 0.8)}.cert-card p{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.cert-card a{padding:.6rem 1rem;text-decoration:none;background-color:var(--accent-color);color:#fff;border-radius:3rem;margin-left:auto;font-weight:500}.cert-card .tag{padding:.3rem .5rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.9);background-color:rgba(var(--text-color), 0.06);margin-right:auto}.cert-card .tag::first-letter{text-transform:uppercase}@media(max-width: 768px){.cert-card{margin:0 -1rem;gap:1rem}}.hidden{display:none !important}
*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto slab",serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: rgb(231, 44, 55);--secondary-color: #ffac2e;--text-color: 34, 34, 34;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: rgb(91, 33, 255);--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1)}body[data-theme=dark]{--accent-color: #92a2ff;--secondary-color: #d60739;--text-color: 200, 200, 200;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}button{padding:1rem;font-size:inherit;background-color:var(--accent-color);border:none;border-radius:.3rem;color:#fff;font-weight:500;cursor:pointer}.capitalize{text-transform:capitalize}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-0-5{gap:.5rem}.align-items-center{align-items:center}.space-between{justify-content:space-between}.wrap-around{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.margin-left-auto{margin-left:auto}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}#loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1rem}#home>*{width:min(100%,56rem);margin:0 auto}#home h1{padding:1rem;padding-top:10vmax;font-size:max(1.8rem,4vw);text-align:center;color:var(--accent-color)}@-webkit-keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}@keyframes gradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}#home header{width:100%;background-color:rgba(var(--text-color), 0.06);padding-bottom:3rem;margin-bottom:-2rem}#cert_sec{padding:1.5rem;font-family:"intern"}#search_certificates{position:-webkit-sticky;position:sticky;top:1rem;width:min(24rem,100% - 2rem);margin:0 auto;--border-radius: 0.5rem;border-radius:.5rem;--padding: 1rem 1.2rem;background-color:rgba(var(--foreground-color), 1);box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);border:solid thin rgba(var(--text-color), 0.2)}#issued_cert_list{display:flex;flex-direction:column;gap:.5rem;padding:1rem;padding-bottom:4rem;margin-top:1rem}.button{display:flex;align-items:center;padding:.4rem .8rem;text-decoration:none;border-radius:3rem;margin-left:auto;font-weight:500;color:var(--accent-color);gap:.3rem}.button--primary{background-color:var(--accent-color);color:#fff}.button--primary .icon{fill:#fff}.button:disabled{opacity:.5;cursor:not-allowed;filter:saturate(0)}.cert-card{display:grid;gap:.6rem;padding:1rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.cert-card h4{font-size:1.2rem}.cert-card time{font-size:.9rem;color:rgba(var(--text-color), 0.8)}.cert-card p{font-size:.9rem;color:rgba(var(--text-color), 0.9)}.cert-card .tag{padding:.3rem .5rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.9);background-color:rgba(var(--text-color), 0.06);margin-right:auto}.cert-card .tag::first-letter{text-transform:uppercase}@media(max-width: 768px){.cert-card{margin:0 -1rem;gap:1rem}}.hidden{display:none !important}

41
css/main.scss
View File

@ -57,6 +57,12 @@ button {
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.gap-0-5 {
gap: 0.5rem;
}
.align-items-center {
align-items: center;
}
@ -69,6 +75,9 @@ button {
word-break: break-word;
hyphens: auto;
}
.margin-left-auto {
margin-left: auto;
}
.observe-empty-state:empty {
display: none;
@ -136,6 +145,29 @@ button {
padding-bottom: 4rem;
margin-top: 1rem;
}
.button {
display: flex;
align-items: center;
padding: 0.4rem 0.8rem;
text-decoration: none;
border-radius: 3rem;
margin-left: auto;
font-weight: 500;
color: var(--accent-color);
gap: 0.3rem;
&--primary {
background-color: var(--accent-color);
color: white;
.icon {
fill: white;
}
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
filter: saturate(0);
}
}
.cert-card {
display: grid;
gap: 0.6rem;
@ -153,15 +185,6 @@ button {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.9);
}
a {
padding: 0.6rem 1rem;
text-decoration: none;
background-color: var(--accent-color);
color: white;
border-radius: 3rem;
margin-left: auto;
font-weight: 500;
}
.tag {
padding: 0.3rem 0.5rem;
border-radius: 0.3rem;

62
index.html
View File

@ -260,40 +260,40 @@
}
const render = {
issuedCertCard(details) {
const { floData, txid, name, floId, certType, time } = details
const { floData, txid, name, floId, certType, time, verificationLink } = details
return html`
<li class="cert-card">
<div class="flex align-items-center space-between">
<h4 class="capitalize">${name.toLowerCase()}</h4>
<span class="tag">${certType.toLowerCase()}</span>
<time>${getFormattedTime(time, 'date-only')}</time>
</div>
<h4 class="capitalize">${name.toLowerCase()}</h4>
<p class="wrap-around">${floId}</p>
<div class="flex align-items-center space-between">
<span class="tag">${certType.toLowerCase()}</span>
<a href=${`#/home/download?id=${txid}`}>Download</a>
</div>
<div class="flex align-items-center gap-0-5 margin-left-auto">
<a href=${verificationLink} target="_blank" class="button">Verify</a>
<button class="download-button button button--primary" data-txid=${txid}>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
Download
</button>
</div>
</li>
`;
},
certificate(txid) {
const { floData, time, name, floId, certType, isNewer, certPara } = floGlobals.validCerts.get(txid)
certificate(txid, downloadButton) {
const { floData, time, name, floId, certType, isNewer, certPara, verificationLink } = floGlobals.validCerts.get(txid)
let paraSplitWord
let certificateVerification = ''
switch (certType) {
case "CERTIFICATE OF INTERNSHIP":
certificateVerification = 'internCertificate';
paraSplitWord = 'worked'
break;
case "CERTIFICATE OF EMPLOYMENT":
certificateVerification = 'employeeCertificate';
paraSplitWord = 'was employed'
break;
case "CERTIFICATE OF VOLUNTEERSHIP":
certificateVerification = 'volunteerCertificate';
paraSplitWord = 'was employed'
break;
case "CERTIFICATE OF PARTICIPATION":
certificateVerification = 'participationCertificate';
paraSplitWord = 'participated'
break;
}
@ -338,7 +338,7 @@
certPdf.text("Scan to verify this certificate", 700, 850, { align: 'center' });
// jspdf add svg
let svgNode = QRCode({
msg: `https://www.ranchimall.net/verify/?${certificateVerification}=${txid}`,
msg: verificationLink,
dim: 160
});
const svgData = new XMLSerializer().serializeToString(svgNode);
@ -352,6 +352,10 @@
const imgData = canvas.toDataURL('image/png');
certPdf.addImage(imgData, 'PNG', 620, 670, 160, 160);
certPdf.save(`RanchiMall ${certType.toLowerCase()} for ${name}.pdf`);
if (downloadButton) {
downloadButton.disabled = false;
downloadButton.lastChild.textContent = "Download";
}
};
}
}
@ -362,7 +366,7 @@
floBlockchainAPI.readAllTxs('FFCpiaZi31TpbYw5q5VNk8qJMeDiTLgsrE').then(res => {
// res.unshift({ floData: 'CERTIFICATE OF INTERNSHIP|FPFeL5PXzW9bGosUjQYCxTHSMHidnygvvd|Sairaj mote|worked as an intern on projects for RanchiMall from 11th September 2020 to 2nd February 2021: Twitter Marketing and Peer-to-Peer Content Collaboration on FLO Blockchain. She contributed mostly to Twitter marketing and also collaborated with other content writers on writing articles for RanchiMall Times. She performed well under the guidance of the RIBC team of RanchiMall.', time: Date.now() })
for (tx of res) {
const { vin, vout, time, floData } = tx
const { vin, vout, time, floData, txid } = tx
if (!vin.some(i => i.addr === floGlobals.RM_CertificateIssuer_id)) continue;
if (!vout.some(o => [floGlobals.RMincorporationID, floGlobals.RIBC_id].includes(o.scriptPubKey.addresses[0]))) continue;
if (!floData.startsWith('CERTIFICATE OF')) continue;
@ -373,12 +377,28 @@
[certType, floId, name, certPara] = floData.split('|')
} else {
floId = floData.match(/\b\w{30,36}\b/)?.[0].trim()
name = getBetween(floData, 'certifies that', 'FLO ID').trim()
name = getBetween(floData, 'certifies that', 'FLO ID').replace(/(,|\s)+$/, '')
certType = getFirstThreeWords(floData).trim()
isNewer = false
}
if (!floId) continue;
floGlobals.validCerts.set(tx.txid, { name, ...tx, floId, certType, isNewer, certPara })
let certificateVerification = ''
switch (certType) {
case "CERTIFICATE OF INTERNSHIP":
certificateVerification = 'internCertificate';
break;
case "CERTIFICATE OF EMPLOYMENT":
certificateVerification = 'employeeCertificate';
break;
case "CERTIFICATE OF VOLUNTEERSHIP":
certificateVerification = 'volunteerCertificate';
break;
case "CERTIFICATE OF PARTICIPATION":
certificateVerification = 'participationCertificate';
break;
}
const verificationLink = `https://www.ranchimall.net/verify/?${certificateVerification}=${txid}`
floGlobals.validCerts.set(txid, { name, ...tx, floId, certType, isNewer, certPara, verificationLink })
}
resolve()
}).catch(err => {
@ -386,6 +406,16 @@
})
})
}
getRef('issued_cert_list').addEventListener('click', e => {
if (e.target.closest('.download-button')) {
const downloadButton = e.target.closest('.download-button')
downloadButton.disabled = true;
downloadButton.lastChild.textContent = 'downloading...';
setTimeout(() => {
render.certificate(downloadButton.dataset.txid, downloadButton)
}, 300);
}
})
</script>
</body>