matty
/
peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dynamic table UI: 

* margin bottom
* add row button on left, to be more visible
This commit is contained in:
John Livingston 2024-06-13 15:21:31 +02:00
parent a1eada96e8
commit f1e9d1dfec
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/styles/configuration.scss
View File

@ -256,6 +256,9 @@ livechat-dynamic-table-form {
// We need this variable to be known at that time
$bs-green: #39cc0b;
display: block;
margin-bottom: 3rem;
table {
table-layout: fixed;
text-align: center;
@ -291,6 +294,10 @@ livechat-dynamic-table-form {
}
}
.dynamic-table-add-row-cell {
text-align: left;
}
.dynamic-table-add-row {
background-color: var(--bs-green);

5
client/common/lib/elements/dynamic-table-form.ts
View File

@ -283,10 +283,10 @@ export class DynamicTableFormElement extends LivechatElement {
if (this.maxLines && this._rowsById.length >= this.maxLines) {
return html``
}
// Note: the addRow button is in first column, so it won't be hidden if screen not wide enough.
return html`<tfoot>
<tr>
${Object.values(this.header).map(() => html`<td></td>`)}
<td>
<td class="dynamic-table-add-row-cell">
<button type="button"
class="peertube-button-link orange-button dynamic-table-add-row"
.title=${ptTr(LOC_ACTION_ADD_ENTRY) as any}
@ -295,6 +295,7 @@ export class DynamicTableFormElement extends LivechatElement {
${unsafeHTML(AddSVG)}
</button>
</td>
${Object.values(this.header).map(() => html`<td></td>`)}
</tr>
</tfoot>`
}