CSS, ugh.

This commit is contained in:
Cory McWilliams 2024-04-21 15:24:23 -04:00
parent 628716ec28
commit 53b4cbbf8c
2 changed files with 20 additions and 15 deletions

View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🐌", "emoji": "🐌",
"previous": "&VsajulCFc9qmOy/hTlOD3q4ilEz3MP2a31u6DRnz4aA=.sha256" "previous": "&ZzbNtP8BDZn8NVjZEdmzD+D9cqZRUSEDg40zm7JQZ6o=.sha256"
} }

View File

@ -24,21 +24,26 @@ class TfReactionsModalElement extends LitElement {
render() { render() {
let self = this; let self = this;
return this.votes?.length ? html` return this.votes?.length ? html`
<div class="w3-modal w3-animate-opacity" style="display: block"> <div class="w3-modal w3-animate-opacity" style="display: block; box-sizing: border-box">
<div class="w3-modal-content w3-card-4 w3-theme-d1"> <div class="w3-modal-content w3-card-4 w3-theme-d1">
<header class="w3-container"> <div class="w3-container w3-padding">
<h2>Reactions</h2> <header class="w3-container">
<span class="w3-button w3-display-topright" @click=${this.clear}>&times;</span> <h2>Reactions</h2>
</header> <span class="w3-button w3-display-topright" @click=${this.clear}>&times;</span>
<ul class="w3-theme-dark w3-container w3-ul"> </header>
${this.votes.map(x => html` <ul class="w3-theme-dark w3-container w3-ul">
<li class="w3-bar"> ${this.votes.map(x => html`
<span class="w3-bar-item">${x?.content?.vote?.expression}</span> <li class="w3-bar">
<tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user> <span class="w3-bar-item">${x?.content?.vote?.expression}</span>
<span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span> <tf-user class="w3-bar-item" id=${x.author} .users=${this.users}></tf-user>
</li> <span class="w3-bar-item w3-right">${new Date(x?.timestamp).toLocaleString()}</span>
`)} </li>
</ul> `)}
</ul>
<footer class="w3-container w3-padding">
<button class="w3-button" @click=${this.clear}>Close</button>
</footer>
</div>
</div> </div>
</div>` : undefined; </div>` : undefined;
} }