adam/mc-webui
1
0
Fork 0
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-08-07 01:03:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: Make message action buttons icon-only with uniform size

Browse Source 
- Remove text labels from Reply and Map buttons
- Add consistent 36x36px square buttons with icons only
- Add tooltips for accessibility
- Prepare for adding more action buttons in the future

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-01-16 07:59:18 +01:00
parent 6cb777e90c
commit f00234af88
2 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/style.css
+15
View File
@@ -716,3 +716,18 @@ main {
.leaflet-bottom {
z-index: 1000;
}
/* =============================================================================
Message Action Buttons
============================================================================= */
/* Icon-only action buttons on message bubbles */
.btn-msg-action {
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
app/static/js/app.js
+5 -5
View File
@@ -583,13 +583,13 @@ function createMessageElement(msg) {
<p class="message-content">${processMessageContent(msg.content)}</p>
${metaInfo ? `<div class="message-meta">${metaInfo}</div>` : ''}
${!msg.is_own ? `
<div class="mt-1">
<button class="btn btn-outline-secondary btn-sm btn-reply" onclick="replyTo('${escapeHtml(msg.sender)}')">
<i class="bi bi-reply"></i> Reply
<div class="mt-1 d-flex gap-1">
<button class="btn btn-outline-secondary btn-msg-action" onclick="replyTo('${escapeHtml(msg.sender)}')" title="Reply">
<i class="bi bi-reply"></i>
</button>
${contactsGeoCache[msg.sender] ? `
<button class="btn btn-outline-primary btn-sm ms-1" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})">
<i class="bi bi-geo-alt"></i> Map
<button class="btn btn-outline-primary btn-msg-action" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})" title="Show on map">
<i class="bi bi-geo-alt"></i>
</button>
` : ''}
</div>