caranmegil/mosaic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update to edit page formatting

Browse Source
This commit is contained in:
William Moore 2023-06-06 16:45:39 -05:00
parent df36fe89c1
commit 1452667c63
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/edit.ts
View File

@ -5,7 +5,7 @@ import { customElement } from 'lit/decorators.js';
export class LavenderConfigure extends LitElement { export class LavenderConfigure extends LitElement {
static override styles = [ static override styles = [
css` css`
.centerit { .centerit {
text-align: center; text-align: center;
} }
@ -25,19 +25,31 @@ export class LavenderConfigure extends LitElement {
} }
.widgets { .widgets {
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-wrap: wrap;
flex-direction: row;
} }
.widgets >* { .widgets >* {
flex: 1 1 300px;
margin: .2em;
padding: .5em;
border: .1em solid black;
border-radius: .5em;
}
.widget-edit {
display: flex;
flex-direction: row;
}
.widget-edit >* {
margin: .2em; margin: .2em;
padding: .5em; padding: .5em;
width: 100%;
} }
input { input {
width: 50%; width: 100%;
padding: .5em; padding: .5em;
border-radius: .5em; border-radius: .5em;
} }
@ -88,16 +100,16 @@ export class LavenderConfigure extends LitElement {
${widgets.map((widget: any) => { ${widgets.map((widget: any) => {
return html` return html`
<div name="widget-edit"> <div name="widget-edit">
<div><span>Title</span><input type="text" name="titleEdit" value="${widget.title}"></div> <div><div>Title</div><input type="text" name="titleEdit" value="${widget.title}"></div>
<div><span>Href</span><input type="text" name="urlEdit" value="${widget.url}"></div> <div><div>Href</div><input type="text" name="urlEdit" value="${widget.url}"></div>
<div><span>Height</span><input type="text" name="urlHeight" value="${widget.height}"></div> <div><div>Height</div><input type="text" name="urlHeight" value="${widget.height}"></div>
</div> </div>
`; `;
})} })}
<div name="widget-edit"> <div name="widget-edit">
<div><span>Title </span><input type="text" name="titleEdit"></div > <div><div>Title </div><input type="text" name="titleEdit"></div >
<div><span>Href </span><input type="text" name="urlEdit"></div > <div><div>Href </div><input type="text" name="urlEdit"></div >
<div><span>Height</span><input type="text" name="urlHeight"></div> <div><div>Height</div><input type="text" name="urlHeight"></div>
</div> </div>
</div> </div>
<button class="button" @click="${() => this.save()}">Save</button> <button class="button" @click="${() => this.save()}">Save</button>