UI: Font Awesome icons, Material touches, 3-line collapse button
Swap all emoji icons for Font Awesome (sidebar, homepage tiles, profile/chat/ list/settings/relay actions); add Roboto font + card elevation hover for a Material feel. Replace the bottom 'Collapse' pill with a 3-line (fa-bars) toggle in the sidebar header; remove the old collapse pill CSS/JS. Copy buttons toggle FA check/copy via innerHTML. Plain text status (✓/✗) and back arrows kept. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -90,7 +90,7 @@
|
||||
{% if profile.address %}
|
||||
<div class="addr-row">
|
||||
<button class="btn btn-ghost copy-btn" title="Copy address"
|
||||
onclick="copyAddr(this, '{{ profile.address | e }}')">📋</button>
|
||||
onclick="copyAddr(this, '{{ profile.address | e }}')"><i class="fa-solid fa-copy"></i></button>
|
||||
<a class="addr-link" href="{{ profile.address }}" target="_blank" rel="noopener" id="address-text">{{ profile.address }}</a>
|
||||
</div>
|
||||
<div class="qr-wrap">
|
||||
@@ -114,7 +114,7 @@
|
||||
<p class="muted" style="margin-bottom:12px;">Auto-generated listing page for this directory bot.</p>
|
||||
<div class="addr-row">
|
||||
<button class="btn btn-ghost copy-btn" title="Copy URL"
|
||||
onclick="copyAddr(this, location.origin + '/directory/{{ safe }}/index.html')">📋</button>
|
||||
onclick="copyAddr(this, location.origin + '/directory/{{ safe }}/index.html')"><i class="fa-solid fa-copy"></i></button>
|
||||
<a class="addr-link" href="/directory/{{ safe }}/index.html" target="_blank" rel="noopener">/directory/{{ safe }}/index.html</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -148,11 +148,11 @@
|
||||
<td>
|
||||
<div class="flex gap-8" style="justify-content:flex-end;">
|
||||
<a class="msg-btn" style="text-decoration:none;"
|
||||
href="/profile/{{ profile.id }}/chat/direct/{{ c.contactId }}">💬 Chat</a>
|
||||
href="/profile/{{ profile.id }}/chat/direct/{{ c.contactId }}"><i class="fa-solid fa-comments"></i> Chat</a>
|
||||
<button class="msg-btn" title="Clear conversation"
|
||||
onclick="clearChat('direct', {{ c.contactId }}, '{{ c.localDisplayName | e }}')">🧹 Clear</button>
|
||||
onclick="clearChat('direct', {{ c.contactId }}, '{{ c.localDisplayName | e }}')"><i class="fa-solid fa-broom"></i> Clear</button>
|
||||
<button class="msg-btn msg-btn-danger" title="Delete contact"
|
||||
onclick="deleteContact({{ c.contactId }}, '{{ c.localDisplayName | e }}')">🗑 Delete</button>
|
||||
onclick="deleteContact({{ c.contactId }}, '{{ c.localDisplayName | e }}')"><i class="fa-solid fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -188,7 +188,7 @@
|
||||
<button class="msg-btn" onclick="joinGroup({{ gid }}, this)">Join</button>
|
||||
{% else %}
|
||||
<a class="msg-btn" style="text-decoration:none;"
|
||||
href="/profile/{{ profile.id }}/chat/group/{{ gid }}">💬 {{ 'Broadcast' if g.is_channel else 'Chat' }}</a>
|
||||
href="/profile/{{ profile.id }}/chat/group/{{ gid }}"><i class="fa-solid fa-comments"></i> {{ 'Broadcast' if g.is_channel else 'Chat' }}</a>
|
||||
<button class="msg-btn" onclick="getGroupLink({{ gid }}, this)">Link</button>
|
||||
<button class="msg-btn msg-btn-danger" onclick="leaveGroup({{ gid }}, '{{ name | e }}', this)">Leave</button>
|
||||
{% if is_owner %}
|
||||
@@ -282,7 +282,7 @@
|
||||
<div class="flex-between" style="margin-bottom:16px;">
|
||||
<h2 style="margin:0;">Members — <span id="members-channel-name" style="color:var(--accent);"></span></h2>
|
||||
<button class="btn btn-ghost" style="padding:4px 10px;font-size:13px;"
|
||||
onclick="document.getElementById('members-dialog').close()">✕</button>
|
||||
onclick="document.getElementById('members-dialog').close()"><i class="fa-solid fa-xmark"></i></button>
|
||||
</div>
|
||||
<div id="members-list" style="max-height:320px;overflow-y:auto;">
|
||||
<p class="muted">Loading…</p>
|
||||
@@ -371,8 +371,8 @@ async function sendMsg() {
|
||||
|
||||
function copyAddr(btn, addr) {
|
||||
navigator.clipboard.writeText(addr).then(() => {
|
||||
btn.textContent = '✓';
|
||||
setTimeout(() => btn.textContent = '📋', 1500);
|
||||
btn.innerHTML = '<i class="fa-solid fa-check"></i>';
|
||||
setTimeout(() => btn.innerHTML = '<i class="fa-solid fa-copy"></i>', 1500);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user