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

Merge pull request 'js-and-css-improvement' (#62) from KiddyTheKid/web:js-and-css-impromement into dev

Browse source 
Reviewed-on: https://codeberg.org/keyoxide/web/pulls/62
This commit is contained in:
Yarmo Mackenbach 2021-01-13 13:09:44 +01:00
commit c4a172e527
2 changed files with 50 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
static/scripts.js
View file

@ -346,7 +346,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">`;
@ -365,15 +365,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/${keyUriMode}/${keyUriId}">verify signature</a></div>`;
feedback += `<div class="profileDataItem__value"><a href="/verify/${keyUriMode}/${keyUriId}">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/${keyUriMode}/${keyUriId}">encrypt message</a></div>`;
feedback += `<div class="profileDataItem__value"><a href="/encrypt/${keyUriMode}/${keyUriId}">Encrypt message</a></div>`;
feedback += `</div>`;
// Display feedback
@ -415,7 +415,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) {
@ -447,7 +447,7 @@ async function displayProfile(opts) {
feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
feedback += `<div class="profileDataItem__label"></div>`;
// feedback += `<div class="profileDataItem__value"><a href="mailto:${keyData.users[i].userId.email}">${keyData.users[i].userId.email}</a> (primary)</div>`;
feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email} (primary)</div>`;
feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email} <small class="primary">primary</small></div>`;
feedback += `</div>`;
if (userId.length == 0) {
@ -469,7 +469,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) {
@ -496,7 +496,7 @@ async function displayProfile(opts) {
feedback += `<div class="profileDataItem__value">${keyData.users[i].userId.email}</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>`;
@ -521,7 +521,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) {
@ -1438,3 +1438,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;
}

33
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,13 @@ select {
overflow: hidden;
text-overflow: ellipsis;
}
#profileData {
background-color: #dceef957;
padding: 15px;
border-radius: 15px;
}
.profileDataItem {
position: relative;
display: flex;
@ -319,6 +330,7 @@ select {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.profileDataItem__value {
display: inline-block;
@ -335,6 +347,16 @@ select {
overflow: hidden;
text-overflow: ellipsis;
}
.profileDataItem__value small {
color: white;
background: #2178ff;
border-radius: 6px;
padding: 2.8px 5px;
font-size: 0.65em;
vertical-align: middle;
}
a.proofUrl {
color: #777;
}
@ -399,6 +421,15 @@ noscript p {
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%;
}