ssb: Tweaking profile card CSS.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 23m31s

This commit is contained in:
Cory McWilliams 2024-12-29 15:51:51 -05:00
parent 98f1700049
commit 4ecbb5234c
2 changed files with 27 additions and 21 deletions

View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🦀", "emoji": "🦀",
"previous": "&zUbiDsKYgSEnn5g5oDSQ1M5YwGqwHL+3cMO6a6zdCD8=.sha256" "previous": "&vLj0HMWc/ArlfAO112c0+JfXdszqkZxFIazUO6BaQEQ=.sha256"
} }

View File

@ -297,28 +297,34 @@ class TfProfileElement extends LitElement {
typeof profile.image == 'string' ? profile.image : profile.image?.link; typeof profile.image == 'string' ? profile.image : profile.image?.link;
image = this.editing?.image ?? image; image = this.editing?.image ?? image;
let description = this.editing?.description ?? profile.description; let description = this.editing?.description ?? profile.description;
return html`<div class="w3-container" style="box-sizing: border-box; border: 2px solid black; background-color: rgba(255, 255, 255, 0.2)"> return html`<div class="w3-card-4 w3-container w3-theme-d3" style="box-sizing: border-box">
<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)}) <header class="w3-container">
<input type="text" class="w3-input w3-border w3-theme-d1" readonly value=${this.id}></input> <p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})</p>
<button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button> </header>
<div style="display: flex; flex-direction: row; gap: 1em"> <div class="w3-container">
${edit_profile} <input type="text" class="w3-input w3-border w3-theme-d1" readonly value=${this.id}></input>
<div style="flex: 1 0 50%"> <button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button>
<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div> <div style="display: flex; flex-direction: row; gap: 1em">
<div>${unsafeHTML(tfutils.markdown(description))}</div> ${edit_profile}
<div style="flex: 1 0 50%">
<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>
<div>${unsafeHTML(tfutils.markdown(description))}</div>
</div>
</div>
<div>
Following ${profile.following} identities.
Followed by ${profile.followed} identities.
Blocking ${profile.blocking} identities.
Blocked by ${profile.blocked} identities.
</div> </div>
</div> </div>
<div> <footer class="w3-container">
Following ${profile.following} identities. <p>
Followed by ${profile.followed} identities. ${edit}
Blocking ${profile.blocking} identities. ${follow}
Blocked by ${profile.blocked} identities. ${block}
</div> </p>
<p> </footer>
${edit}
${follow}
${block}
</p>
</div>`; </div>`;
} }
} }