cory/tildefriends
5
6
Fork 2
Code Issues 28 Pull Requests Actions Releases 39 Wiki Activity

Lay out the profile editing form better so it feels less janky.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4566 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2023-10-21 21:31:46 +00:00
parent 626fa4f27b
commit ab03692a4c
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/ssb/tf-profile.js
View File

@@ -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>
<div><label for="description">Description:</label></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>
<input type="button" value="Attach Image" @click=${this.attach_image}></input>
<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>