mirror of
https://codeberg.org/keyoxide/keyoxide-web.git
synced 2024-12-22 23:09:29 -07:00
Improve accessibility
This commit is contained in:
Yarmo Mackenbach
parent
f930d96b5f
commit
30aac09032
4 changed files with 35 additions and 22 deletions
|
|
@ -62,6 +62,7 @@ class Claim extends HTMLElement {
|
|||
subsection_alert.setAttribute('class', 'subsection');
|
||||
const subsection_alert_icon = subsection_alert.appendChild(document.createElement('img'));
|
||||
subsection_alert_icon.setAttribute('src', '/static/img/alert-decagram.png');
|
||||
subsection_alert_icon.setAttribute('alt', '');
|
||||
const subsection_alert_text = subsection_alert.appendChild(document.createElement('div'));
|
||||
|
||||
const message = subsection_alert_text.appendChild(document.createElement('p'));
|
||||
|
|
@ -74,6 +75,7 @@ class Claim extends HTMLElement {
|
|||
subsection_links.setAttribute('class', 'subsection');
|
||||
const subsection_links_icon = subsection_links.appendChild(document.createElement('img'));
|
||||
subsection_links_icon.setAttribute('src', '/static/img/link.png');
|
||||
subsection_links_icon.setAttribute('alt', '');
|
||||
const subsection_links_text = subsection_links.appendChild(document.createElement('div'));
|
||||
|
||||
const profile_link = subsection_links_text.appendChild(document.createElement('p'));
|
||||
|
|
@ -98,6 +100,7 @@ class Claim extends HTMLElement {
|
|||
subsection_qr.setAttribute('class', 'subsection');
|
||||
const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
|
||||
subsection_qr_icon.setAttribute('src', '/static/img/qrcode.png');
|
||||
subsection_qr_icon.setAttribute('alt', '');
|
||||
const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
|
||||
|
||||
const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
|
||||
|
|
@ -112,12 +115,14 @@ class Claim extends HTMLElement {
|
|||
subsection_status.setAttribute('class', 'subsection');
|
||||
const subsection_status_icon = subsection_status.appendChild(document.createElement('img'));
|
||||
subsection_status_icon.setAttribute('src', '/static/img/decagram.png');
|
||||
subsection_status_icon.setAttribute('alt', '');
|
||||
const subsection_status_text = subsection_status.appendChild(document.createElement('div'));
|
||||
|
||||
const verification = subsection_status_text.appendChild(document.createElement('p'));
|
||||
if (claim.status === 'verified') {
|
||||
verification.innerHTML = `Claim verification has completed.`;
|
||||
subsection_status_icon.setAttribute('src', '/static/img/check-decagram.png');
|
||||
subsection_status_icon.setAttribute('alt', '');
|
||||
} else {
|
||||
verification.innerHTML = `Claim verification is in progress…`;
|
||||
return;
|
||||
|
|
@ -130,6 +135,7 @@ class Claim extends HTMLElement {
|
|||
subsection_result.setAttribute('class', 'subsection');
|
||||
const subsection_result_icon = subsection_result.appendChild(document.createElement('img'));
|
||||
subsection_result_icon.setAttribute('src', '/static/img/shield-search.png');
|
||||
subsection_result_icon.setAttribute('alt', '');
|
||||
const subsection_result_text = subsection_result.appendChild(document.createElement('div'));
|
||||
|
||||
const result = subsection_result_text.appendChild(document.createElement('p'));
|
||||
|
|
@ -143,6 +149,7 @@ class Claim extends HTMLElement {
|
|||
subsection_info.setAttribute('class', 'subsection');
|
||||
const subsection_info_icon = subsection_info.appendChild(document.createElement('img'));
|
||||
subsection_info_icon.setAttribute('src', '/static/img/information.png');
|
||||
subsection_info_icon.setAttribute('alt', '');
|
||||
const subsection_info_text = subsection_info.appendChild(document.createElement('div'));
|
||||
|
||||
const result_proxyUsed = subsection_info_text.appendChild(document.createElement('p'));
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ header {
|
|||
}
|
||||
header a.logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 0.8rem;
|
||||
font-size: 1.6rem;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -329,7 +330,9 @@ footer h1 {
|
|||
font-weight: bold;
|
||||
}
|
||||
footer a {
|
||||
display: inline-block;
|
||||
color: var(--purple-100);
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -408,8 +411,8 @@ form input[type="radio"] + label:hover {
|
|||
}
|
||||
form input[type="radio"]:checked + label {
|
||||
color: #fff;
|
||||
background-color: var(--purple-500);
|
||||
border: solid 2px var(--purple-500);
|
||||
background-color: var(--purple-600);
|
||||
border: solid 2px var(--purple-600);
|
||||
}
|
||||
|
||||
input[type="button"], input[type="submit"], button, a.button {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
extends templates/base.pug
|
||||
|
||||
block js
|
||||
script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8')
|
||||
script(type='application/javascript' src='/static/doip.js' charset='utf-8')
|
||||
script(type='application/javascript' src='/static/kx-claim.js' charset='utf-8')
|
||||
script(type='application/javascript' src='/static/scripts.js' charset='utf-8')
|
||||
script(type='application/javascript' defer src='/static/openpgp.min.js' charset='utf-8')
|
||||
script(type='application/javascript' defer src='/static/doip.min.js' charset='utf-8')
|
||||
script(type='application/javascript' defer src='/static/kx-claim.js' charset='utf-8')
|
||||
script(type='application/javascript' defer src='/static/scripts.js' charset='utf-8')
|
||||
|
||||
block content
|
||||
.demo.narrow
|
||||
|
|
@ -19,7 +19,7 @@ block content
|
|||
.inProgress
|
||||
.content
|
||||
.subsection
|
||||
img(src='/static/img/link.png')
|
||||
img(src='/static/img/link.png' alt='')
|
||||
div
|
||||
if (demoData.matches[0].profile.uri)
|
||||
p Profile link:
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
doctype html
|
||||
head
|
||||
meta(charset='utf-8')
|
||||
meta(name='viewport' content='width=device-width, initial-scale=1')
|
||||
meta(name='theme-color' content='#fff')
|
||||
link(rel='shortcut icon' href='/favicon.svg')
|
||||
title= (title ? title : 'Keyoxide')
|
||||
html(lang='en')
|
||||
head
|
||||
meta(charset='utf-8')
|
||||
meta(name='viewport' content='width=device-width, initial-scale=1')
|
||||
meta(name='theme-color' content='#fff')
|
||||
meta(name='description' content='Modern and secure platform to manage a decentralized identity based on cryptographic keys')
|
||||
link(rel='shortcut icon' href='/favicon.svg')
|
||||
title= (title ? title : 'Keyoxide')
|
||||
|
||||
include ../partials/header.pug
|
||||
|
||||
main
|
||||
.container
|
||||
block content
|
||||
|
||||
include ../partials/footer.pug
|
||||
|
||||
link(rel='stylesheet' href='/static/styles.css')
|
||||
link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css' integrity='sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=' crossorigin='anonymous')
|
||||
block css
|
||||
|
||||
include ../partials/header.pug
|
||||
|
||||
main
|
||||
.container
|
||||
block content
|
||||
|
||||
include ../partials/footer.pug
|
||||
|
||||
block js
|
||||
block js
|
||||
|
|
|
|||
Loading…
Reference in a new issue