From 927d2a046f48b8b2109a5c0002302b9426db0de9 Mon Sep 17 00:00:00 2001 From: MarekWo Date: Wed, 24 Dec 2025 08:58:49 +0100 Subject: [PATCH] feat: Redesign UI for mobile with offcanvas menu and reduced message limit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change message byte limit from 200 to 140 bytes - Remove keyboard hint text to save space - Simplify navbar to show only notification bell and channel selector - Add slide-out offcanvas menu for less-used options: * Refresh Messages * Manage Channels * Message History (archive selector) * Settings - Increase font sizes in dropdowns and menu for better readability - Add icons and text labels to all menu items - Auto-close menu after selecting options - Update clipboard API to modern navigator.clipboard with fallback 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- .gitignore | 3 ++- app/static/css/style.css | 52 ++++++++++++++++++++++++++++++---------- app/static/js/app.js | 33 +++++++++++++++++++++---- app/templates/base.html | 52 +++++++++++++++++++++++++++++----------- app/templates/index.html | 5 ++-- 5 files changed, 110 insertions(+), 35 deletions(-) diff --git a/.gitignore b/.gitignore index 44d786e..1472f4a 100644 --- a/.gitignore +++ b/.gitignore @@ -81,4 +81,5 @@ Thumbs.db # ============================================ # Miscellaneous # ============================================ -.claude/ \ No newline at end of file +.claude/ +technotes/prompt-dms.md diff --git a/app/static/css/style.css b/app/static/css/style.css index 4b3b34b..1ab1720 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -151,6 +151,41 @@ main { background: #555; } +/* Channel selector and date selector - larger font size */ +#channelSelector, +#dateSelector { + font-size: 1rem; +} + +/* Offcanvas menu styling */ +.offcanvas { + width: 280px !important; +} + +.offcanvas-body .list-group-item { + padding: 1rem 0.75rem; + border: none; + border-bottom: 1px solid #dee2e6; + font-size: 1rem; +} + +.offcanvas-body .list-group-item:hover { + background-color: #f8f9fa; +} + +.offcanvas-body .list-group-item i { + color: #0d6efd; + min-width: 1.5rem; +} + +.offcanvas-body .list-group-item span { + font-weight: 500; +} + +.offcanvas-body .list-group-item .form-select { + font-size: 1rem; +} + /* Responsive Design */ @media (max-width: 768px) { .message { @@ -176,22 +211,15 @@ main { font-size: 0.7rem; } - /* Navbar: Hide "Refresh" text on mobile, show only icon */ - #refreshBtn .btn-text { - display: none; - } - /* Navbar: Reduce gap between elements */ .navbar .d-flex { gap: 0.25rem !important; } - /* Navbar: Smaller selectors on mobile */ - #channelSelector, - #dateSelector { - min-width: 80px !important; - font-size: 0.75rem; - padding: 0.25rem 0.5rem; + /* Navbar: Channel selector on mobile */ + #channelSelector { + min-width: 100px !important; + font-size: 0.9rem; } /* Navbar: Smaller buttons */ @@ -216,7 +244,7 @@ main { } /* Modal: Compact channel list */ - .list-group-item { + .modal .list-group-item { padding: 0.5rem; } diff --git a/app/static/js/app.js b/app/static/js/app.js index 18c4600..f660f18 100644 --- a/app/static/js/app.js +++ b/app/static/js/app.js @@ -74,12 +74,24 @@ function setupEventListeners() { document.getElementById('refreshBtn').addEventListener('click', async function() { await loadMessages(); await checkForUpdates(); + + // Close offcanvas menu after refresh + const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('mainMenu')); + if (offcanvas) { + offcanvas.hide(); + } }); // Date selector (archive selection) document.getElementById('dateSelector').addEventListener('change', function(e) { currentArchiveDate = e.target.value || null; loadMessages(); + + // Close offcanvas menu after selecting date + const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('mainMenu')); + if (offcanvas) { + offcanvas.hide(); + } }); // Cleanup contacts button @@ -536,7 +548,7 @@ function updateCharCounter() { // Count UTF-8 bytes, not Unicode characters const encoder = new TextEncoder(); const byteLength = encoder.encode(input.value).length; - const maxBytes = 200; + const maxBytes = 140; counter.textContent = `${byteLength} / ${maxBytes}`; @@ -1045,9 +1057,20 @@ async function shareChannel(index) { /** * Copy channel key to clipboard */ -function copyChannelKey() { +async function copyChannelKey() { const input = document.getElementById('shareChannelKey'); - input.select(); - document.execCommand('copy'); - showNotification('Channel key copied to clipboard!', 'success'); + try { + // Use modern Clipboard API + await navigator.clipboard.writeText(input.value); + showNotification('Channel key copied to clipboard!', 'success'); + } catch (error) { + // Fallback for older browsers + input.select(); + try { + document.execCommand('copy'); + showNotification('Channel key copied to clipboard!', 'success'); + } catch (fallbackError) { + showNotification('Failed to copy to clipboard', 'danger'); + } + } } diff --git a/app/templates/base.html b/app/templates/base.html index 8bc4cac..08ea4ba 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -29,34 +29,58 @@ mc-webui {% if device_name %} - - {{ device_name }} + - {{ device_name }} {% endif %}
-
- - - -
+ + +
{% block content %}{% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index 05e45cf..6fdc94c 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -86,9 +86,8 @@ -
- Shift+Enter: new line, Enter: send - 0 / 200 +
+ 0 / 140