mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-03-28 17:42:45 +01:00
refactor: Remove redundant navbars from modals and optimize screen space usage
After testing the modal implementation on Android PWA, removed duplicate navigation elements and optimized layout to maximize screen real estate. Changes to DM modal: - Removed navbar with back button and "DM" title (duplicates modal header) - Moved conversation selector to top of content as clean dropdown bar - Changed main container from dynamic height to fixed 100vh Changes to Contact Management modals: - Removed navbar with home button from contacts_base.html - Removed navbar_content blocks from all contact pages (manage, pending, existing) - Removed padding/margins from base container (px-3 py-4 → p-0) - Removed row gutters (added g-0 class) - Removed col width constraint (col-lg-8 mx-auto → col-12) - Added padding back to individual page content (p-3) for readability Changes to modal close buttons: - Replaced small X icon (btn-close) with proper button - Added "Close" text with X icon for better visibility on mobile - Used btn-outline-light styling for consistency with green/blue headers Result: - Modals now fill entire available screen space without margins - No duplicate headers or navigation elements - Clearer, more intuitive close action with labeled button - Better mobile experience with larger touch targets 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
@@ -2,20 +2,8 @@
|
||||
|
||||
{% block title %}Existing Contacts - mc-webui{% endblock %}
|
||||
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-person-lines-fill"></i> Existing Contacts
|
||||
<span class="badge counter-badge counter-ok rounded-pill" id="contactsCounter" style="display: none;">0 / 350</span>
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" id="refreshExistingBtn" title="Refresh">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div id="existingPageContent">
|
||||
<div id="existingPageContent" class="p-3">
|
||||
<!-- Back Buttons -->
|
||||
<div class="back-buttons">
|
||||
<button class="btn btn-outline-secondary" onclick="navigateTo('/contacts/manage');">
|
||||
|
||||
@@ -2,19 +2,8 @@
|
||||
|
||||
{% block title %}Contact Management Settings - mc-webui{% endblock %}
|
||||
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-person-check"></i> Contact Management
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" onclick="navigateTo('/');" title="Home">
|
||||
<i class="bi bi-house"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div id="managePageContent">
|
||||
<div id="managePageContent" class="p-3">
|
||||
<!-- Page Header -->
|
||||
<div class="mb-4">
|
||||
<h2 class="mb-1">
|
||||
|
||||
@@ -2,20 +2,8 @@
|
||||
|
||||
{% block title %}Pending Contacts - mc-webui{% endblock %}
|
||||
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-hourglass-split"></i> Pending Contacts
|
||||
<span class="badge bg-light text-dark rounded-pill" id="pendingCountBadge" style="display: none;">0</span>
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" id="refreshPendingBtn" title="Refresh">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div id="pendingPageContent">
|
||||
<div id="pendingPageContent" class="p-3">
|
||||
<!-- Back Buttons -->
|
||||
<div class="back-buttons">
|
||||
<button class="btn btn-outline-secondary" onclick="navigateTo('/contacts/manage');">
|
||||
|
||||
@@ -358,27 +358,11 @@
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<div class="container-fluid">
|
||||
{% block navbar_content %}
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-person-check"></i> Contact Management
|
||||
</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-light btn-sm" onclick="navigateTo('/');" title="Home">
|
||||
<i class="bi bi-house"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<div class="container-fluid px-3 py-4">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-8 mx-auto">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-12">
|
||||
{% block page_content %}
|
||||
<!-- Content will be provided by child templates -->
|
||||
{% endblock %}
|
||||
|
||||
@@ -60,29 +60,18 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar for DM page -->
|
||||
<nav class="navbar navbar-dark bg-success">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<a href="/" class="btn btn-outline-light btn-sm" title="Back to Channels">
|
||||
<i class="bi bi-arrow-left"></i>
|
||||
</a>
|
||||
<span class="navbar-brand mb-0 h1">
|
||||
<i class="bi bi-envelope"></i> DM
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<select id="dmConversationSelector" class="form-select form-select-sm" style="width: auto; min-width: 120px;" title="Select conversation">
|
||||
<option value="">Select chat...</option>
|
||||
<!-- Conversations loaded dynamically via JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
<div class="container-fluid d-flex flex-column" style="height: 100%;">
|
||||
<div class="container-fluid d-flex flex-column" style="height: 100vh;">
|
||||
<!-- Conversation Selector Bar -->
|
||||
<div class="row border-bottom bg-light">
|
||||
<div class="col-12 p-2">
|
||||
<select id="dmConversationSelector" class="form-select" title="Select conversation">
|
||||
<option value="">Select chat...</option>
|
||||
<!-- Conversations loaded dynamically via JavaScript -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Messages Container -->
|
||||
<div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
|
||||
<div class="col-12" style="height: 100%;">
|
||||
|
||||
@@ -122,7 +122,9 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-success text-white">
|
||||
<h5 class="modal-title"><i class="bi bi-envelope"></i> Direct Messages</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
||||
<i class="bi bi-x-lg"></i> Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<iframe id="dmFrame" src="/dm" style="width: 100%; height: 100%; border: none;"></iframe>
|
||||
@@ -137,7 +139,9 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-primary text-white">
|
||||
<h5 class="modal-title"><i class="bi bi-person-check"></i> Contact Management</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">
|
||||
<i class="bi bi-x-lg"></i> Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<iframe id="contactsFrame" src="/contacts/manage" style="width: 100%; height: 100%; border: none;"></iframe>
|
||||
|
||||
Reference in New Issue
Block a user