myriation/keyoxide-web
1
0
Fork 0
forked from Mirrors/keyoxide-web
Code Pull requests Activity

Modified CSS and Add a function to detect lettered services names.

Browse source
This commit is contained in:
KiddyTheKid 2020-12-25 21:38:41 -05:00
parent f00a073ba8
commit 30a88560cc
2 changed files with 38 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
static/scripts.js
View file

@ -309,7 +309,7 @@ async function displayProfile(opts) {
// Generate feedback
feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
feedback += `<div class="profileDataItem__label"></div>`;
feedback += `<div class="profileDataItem__value">general information</div>`;
feedback += `<div class="profileDataItem__value">General information</div>`;
feedback += `</div>`;
feedback += `<div class="profileDataItem">`;
@ -328,15 +328,15 @@ async function displayProfile(opts) {
feedback += `</div>`;
feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
feedback += `<div class="profileDataItem__label"></div>`;
feedback += `<div class="profileDataItem__value">actions</div>`;
feedback += `<div class="profileDataItem__value">Actions</div>`;
feedback += `</div>`;
feedback += `<div class="profileDataItem profileDataItem--noLabel">`;
feedback += `<div class="profileDataItem__label"></div>`;
feedback += `<div class="profileDataItem__value"><a href="/verify/${opts.mode}/${opts.input}">verify signature</a></div>`;
feedback += `<div class="profileDataItem__value"><a href="/verify/${opts.mode}/${opts.input}">Verify signature</a></div>`;
feedback += `</div>`;
feedback += `<div class="profileDataItem profileDataItem--noLabel">`;
feedback += `<div class="profileDataItem__label"></div>`;
feedback += `<div class="profileDataItem__value"><a href="/encrypt/${opts.mode}/${opts.input}">encrypt message</a></div>`;
feedback += `<div class="profileDataItem__value"><a href="/encrypt/${opts.mode}/${opts.input}">Encrypt message</a></div>`;
feedback += `</div>`;
// Display feedback
@ -362,7 +362,7 @@ async function displayProfile(opts) {
feedback = "";
if (userMail) {
verifications.forEach((userId, i) => {
if (keyData.users[i].userId.email != userMail) {
if (keyData.users[i].userId.email !== userMail) {
return;
}
@ -372,7 +372,7 @@ async function displayProfile(opts) {
feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email} (primary)</div>`;
feedback += `</div>`;
if (userId.length == 0) {
if (userId.length === 0) {
feedback += `<div class="profileDataItem profileDataItem--noLabel">`;
feedback += `<div class="profileDataItem__label"></div>`;
feedback += `<div class="profileDataItem__value">No claims associated</div>`;
@ -391,7 +391,7 @@ async function displayProfile(opts) {
return;
}
feedback += `<div class="profileDataItem">`;
feedback += `<div class="profileDataItem__label">${claimData.serviceprovider.name}</div>`;
feedback += `<div class="profileDataItem__label">${capitalizeLetteredServices(claimData.serviceprovider.name)}</div>`;
feedback += `<div class="profileDataItem__value">`;
feedback += `<a class="proofDisplay" href="${claimData.profile.uri}" rel="me">${claimData.profile.display}</a>`;
if (claim.isVerified) {
@ -443,7 +443,7 @@ async function displayProfile(opts) {
return;
}
feedback += `<div class="profileDataItem">`;
feedback += `<div class="profileDataItem__label">${claimData.serviceprovider.name}</div>`;
feedback += `<div class="profileDataItem__label">${capitalizeLetteredServices(claimData.serviceprovider.name)}</div>`;
feedback += `<div class="profileDataItem__value">`;
feedback += `<a class="proofDisplay" href="${claimData.profile.uri}" rel="me">${claimData.profile.display}</a>`;
if (claim.isVerified) {
@ -1334,3 +1334,11 @@ if (elUtilProfileURL) {
elInput.dispatchEvent(new Event("input"));
}
function capitalizeLetteredServices(serviceName) {
var servName = serviceName.toLowerCase();
if (servName === 'dns' || servName === 'xmpp') {
return servName.toUpperCase();
}
return serviceName;
}

24
static/styles.css
View file

@ -75,7 +75,8 @@ footer a {
color: #777;
}
.container {
max-width: 720px;
/*max-width: 720px;*/
max-width: 770px;
width: 100%;
margin: 0 auto;
}
@ -279,6 +280,9 @@ select {
flex-direction: row;
align-items: center;
margin-bottom: 32px;
background-color: #c4e3f657;
padding: 15px;
border-radius: 15px;
}
#profileAvatar {
width: 100%;
@ -295,6 +299,12 @@ select {
overflow: hidden;
text-overflow: ellipsis;
}
#profileData {
background-color: #dceef957;
padding: 15px;
}
.profileDataItem {
position: relative;
display: flex;
@ -319,6 +329,7 @@ select {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.profileDataItem__value {
display: inline-block;
@ -378,10 +389,19 @@ a.proofQR:hover {
.profileDataItem__value {
min-height: 28px;
}
.profileDataItem--noLabel .profileDataItem__label {
.profileDataItem--noLabel .profileDataItem__label {
display: none;
}
#profileData .profileDataItem__value a:first-child {
max-width: 85%;
}
#profileData #profileProofs .profileDataItem__value a:first-child {
display: block;
}
input[type="text"] {
width: 100%;
}