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

35
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,13 @@ select {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
#profileData {
background-color: #dceef957;
padding: 15px;
border-radius: 15px;
}
.profileDataItem { .profileDataItem {
position: relative; position: relative;
display: flex; display: flex;
@ -319,6 +330,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;
@ -335,6 +347,16 @@ select {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; 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 { a.proofUrl {
color: #777; color: #777;
} }
@ -395,9 +417,18 @@ noscript p {
.profileDataItem__value { .profileDataItem__value {
min-height: 28px; min-height: 28px;
} }
.profileDataItem--noLabel .profileDataItem__label { .profileDataItem--noLabel .profileDataItem__label {
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%;