Lay out the profile editing form better so it feels less janky.
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4566 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
parent
626fa4f27b
commit
ab03692a4c
@ -1,5 +1,5 @@
|
||||
{
|
||||
"type": "tildefriends-app",
|
||||
"emoji": "🐌",
|
||||
"previous": "&zyNDG83KbSp1GmOhuS5CtxRLT8Lt7N7Agk8gpLSZhco=.sha256"
|
||||
"previous": "&HrGonbL2IZBtoP3zh1glMUO16+PZ4/t0KFTpkNMYoPI=.sha256"
|
||||
}
|
@ -180,27 +180,27 @@ class TfProfileElement extends LitElement {
|
||||
html`<input type="button" value="Block" @click=${this.block}></input>`;
|
||||
}
|
||||
let edit_profile = this.editing ? html`
|
||||
<div style="flex: 1 0 50%">
|
||||
<div style="flex: 1 0 50%; display: flex; flex-direction: column">
|
||||
<div>
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" value=${this.editing.name} @input=${event => this.editing = Object.assign({}, this.editing, {name: event.srcElement.value})}></input>
|
||||
</div>
|
||||
<div>
|
||||
<div><label for="description">Description:</label></div>
|
||||
<textarea id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
|
||||
</div>
|
||||
<textarea style="flex: 1 0" id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
|
||||
<div>
|
||||
<label for="public_web_hosting">Public Web Hosting:</label>
|
||||
<input type="checkbox" id="public_web_hosting" value=${this.editing.public_web_hosting} @input=${event => this.editing = Object.assign({}, this.editing, {publicWebHosting: event.srcElement.checked})}></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="button" value="Attach Image" @click=${this.attach_image}></input>
|
||||
</div>
|
||||
</div>` : null;
|
||||
let image = typeof(profile.image) == 'string' ? profile.image : profile.image?.link;
|
||||
image = this.editing?.image ?? image;
|
||||
let description = this.editing?.description ?? profile.description;
|
||||
return html`<div style="border: 2px solid black; background-color: rgba(255, 255, 255, 0.2); padding: 16px">
|
||||
<tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<div style="display: flex; flex-direction: row; gap: 1em">
|
||||
${edit_profile}
|
||||
<div style="flex: 1 0 50%">
|
||||
<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>
|
||||
|
Loading…
Reference in New Issue
Block a user