RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI enhancements

Browse Source
This commit is contained in:
sairaj mote 2023-01-19 02:30:49 +05:30
parent 582ebc1aba
commit a33b95af6a
4 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -1052,7 +1052,7 @@ ol li::before {
} }
.contact:not(.chat) { .contact:not(.chat) {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: "dp name"; grid-template-areas: "dp name" "dp .";
} }
.contact.chat, .contact.group { .contact.chat, .contact.group {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
@ -1098,6 +1098,10 @@ ol li::before {
font-weight: 500; font-weight: 500;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.contact__flo-address {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.6);
}
.contact .span-2 { .contact .span-2 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -1138,7 +1142,7 @@ ol li::before {
user-select: none; user-select: none;
} }
.selectable-contact:not(:last-of-type) { .selectable-contact:not(:last-of-type) {
margin-bottom: 0.2rem; margin-bottom: 0.5rem;
} }
.selectable-contact input { .selectable-contact input {
margin-left: auto; margin-left: auto;
@ -1629,6 +1633,9 @@ sm-chip .badge {
#contacts_container .contact { #contacts_container .contact {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
#contacts_container .contact:not(:last-of-type) {
margin-bottom: 0.5rem;
}
#chat_sections { #chat_sections {
display: grid; display: grid;
@ -2336,8 +2343,8 @@ sm-chip .badge {
margin: 0.5rem 0; margin: 0.5rem 0;
} }
sm-popup { sm-popup {
--width: 24rem; --width: 25rem;
--min-width: 24rem; --min-width: 25rem;
--border-radius: 0.5rem; --border-radius: 0.5rem;
} }
#multisig_tx_popup { #multisig_tx_popup {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
css/main.scss
View File

@ -1057,7 +1057,7 @@ ol {
&:not(.chat) { &:not(.chat) {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: "dp name"; grid-template-areas: "dp name" "dp .";
} }
&.chat, &.chat,
@ -1114,6 +1114,10 @@ ol {
font-weight: 500; font-weight: 500;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
&__flo-address {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.6);
}
.span-2 { .span-2 {
display: flex; display: flex;
@ -1156,7 +1160,7 @@ ol {
border-radius: 0.5rem; border-radius: 0.5rem;
user-select: none; user-select: none;
&:not(:last-of-type) { &:not(:last-of-type) {
margin-bottom: 0.2rem; margin-bottom: 0.5rem;
} }
input { input {
margin-left: auto; margin-left: auto;
@ -1677,6 +1681,9 @@ sm-chip {
#contacts_container { #contacts_container {
.contact { .contact {
padding: 0.5rem 0; padding: 0.5rem 0;
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
} }
} }
#chat_sections { #chat_sections {
@ -2424,8 +2431,8 @@ sm-chip {
} }
sm-popup { sm-popup {
--width: 24rem; --width: 25rem;
--min-width: 24rem; --min-width: 25rem;
--border-radius: 0.5rem; --border-radius: 0.5rem;
} }
#multisig_tx_popup { #multisig_tx_popup {

11
index.html
View File

@ -2438,6 +2438,7 @@
</div> </div>
${type === 'pipeline' ? html`<div class="tag">Multisig transaction</div>` : ''} ${type === 'pipeline' ? html`<div class="tag">Multisig transaction</div>` : ''}
<h4 class="name">${name}</h4> <h4 class="name">${name}</h4>
${type === 'contact' ? html`<p class="contact__flo-address wrap-around">${floID}</p>` : ''}
</div> </div>
` `
}, },
@ -2447,7 +2448,10 @@
return html` return html`
<label class="flex align-center selectable-contact interactive" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}> <label class="flex align-center selectable-contact interactive" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
<div class="initial flex align-center"> ${initial} </div> <div class="initial flex align-center"> ${initial} </div>
<h4 class="name">${name}</h4> <div class="grid gap-0-3">
<h4 class="name">${name}</h4>
<p class="contact__flo-address wrap-around">${floID}</p>
</div>
<input type="checkbox" autocomplete="off" value=${floID}/> <input type="checkbox" autocomplete="off" value=${floID}/>
</label> </label>
` `
@ -2458,7 +2462,10 @@
return html` return html`
<div class="flex align-center selectable-contact" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}> <div class="flex align-center selectable-contact" data-flo-id=${floID} style=${`--contact-color: var(${contactColor(floID)})`}>
<div class="initial flex align-center"> ${initial} </div> <div class="initial flex align-center"> ${initial} </div>
<h4 class="name">${name}</h4> <div class="grid gap-0-3">
<h4 class="name">${name}</h4>
<p class="contact__flo-address wrap-around">${floID}</p>
</div>
<button class="button button--small request-pubkey" ?disabled=${hasSentRequest}>${hasSentRequest ? 'Request sent' : 'Request'}</button> <button class="button button--small request-pubkey" ?disabled=${hasSentRequest}>${hasSentRequest ? 'Request sent' : 'Request'}</button>
</div> </div>
` `