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

22
static/styles.css
View file

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