iarv/mc-webui
1
0
Fork 1
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-03-28 17:42:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(dm): Fix mobile menu link and page height issues

Browse Source 
- Change DM menu link from <a> to <button> with onclick for better
  mobile compatibility (fixes link not working on some devices)
- Add proper flexbox layout styles for DM page viewport height
- Use 100dvh (dynamic viewport height) for mobile browsers
- Add flex-shrink: 0 to form and status bar to prevent overflow
- Reduce padding in form and status bar for more compact mobile view

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2025-12-26 08:11:56 +01:00
parent 2788b92687
commit 6f351f8bc1
2 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/templates/base.html
View File

@@ -63,13 +63,13 @@
<i class="bi bi-broadcast-pin" style="font-size: 1.5rem;"></i>
<span>Manage Channels</span>
</button>
<a href="/dm" class="list-group-item list-group-item-action d-flex align-items-center gap-3" data-bs-dismiss="offcanvas">
<button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="window.location.href='/dm';">
<i class="bi bi-envelope" style="font-size: 1.5rem;"></i>
<div class="d-flex flex-grow-1 justify-content-between align-items-center">
<span>Direct Messages</span>
<span id="dmMenuBadge" class="badge bg-success rounded-pill" style="display: none;">0</span>
</div>
</a>
</button>
<div class="list-group-item">
<div class="d-flex align-items-center gap-3 mb-2">
<i class="bi bi-calendar3" style="font-size: 1.5rem;"></i>

38
app/templates/dm.html
View File

@@ -57,6 +57,32 @@
max-width: 100%;
}
}
/* DM page layout - ensure proper height on mobile */
html, body {
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile */
margin: 0;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
.dm-page-container {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
</style>
</head>
<body>
@@ -82,9 +108,9 @@
<!-- Main Content -->
<main>
<div class="container-fluid d-flex flex-column" style="height: 100%;">
<div class="container-fluid dm-page-container">
<!-- Messages Container -->
<div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
<div class="row flex-grow-1 overflow-hidden" style="min-height: 0; flex: 1;">
<div class="col-12" style="height: 100%;">
<div id="dmMessagesContainer" class="messages-container h-100 overflow-auto p-3">
<div id="dmMessagesList">
@@ -100,9 +126,9 @@
</div>
<!-- Send Message Form -->
<div class="row border-top bg-light">
<div class="row border-top bg-light" style="flex-shrink: 0;">
<div class="col-12">
<form id="dmSendForm" class="p-3">
<form id="dmSendForm" class="p-2">
<div class="emoji-picker-container">
<div class="input-group">
<input type="text"
@@ -129,9 +155,9 @@
</div>
<!-- Status Bar -->
<div class="row border-top">
<div class="row border-top" style="flex-shrink: 0;">
<div class="col-12">
<div class="p-2 small text-muted d-flex justify-content-between align-items-center">
<div class="p-1 small text-muted d-flex justify-content-between align-items-center">
<span id="dmStatusText">
<i class="bi bi-circle-fill text-secondary"></i> Ready
</span>