mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-08-07 01:03:15 +02:00
refactor(contacts): Implement multi-page Contact Management with advanced sorting
Split Contact Management into 3 dedicated pages for improved mobile usability: - /contacts/manage - Settings & navigation hub (manual approval + cleanup) - /contacts/pending - Full-screen pending contacts view - /contacts/existing - Full-screen existing contacts with search/filter/sort New Features: - Advanced sorting: Name (A-Z/Z-A) & Last advert (newest/oldest) - URL-based sort state (?sort=name&order=asc) - Activity indicators: 🟢 active, 🟡 recent, 🔴 inactive - Changed terminology: "Last seen" → "Last advert" (more accurate) - Cleanup tool moved from Settings modal to Contact Management page Technical Changes: - Created contacts_base.html standalone template - Split contacts.html into 3 specialized templates - Refactored contacts.js for multi-page support with page detection - Added 2 new Flask routes: /contacts/pending, /contacts/existing - Removed cleanup section from base.html Settings modal Mobile-first design: Each page has full-screen space with touch-friendly navigation and back buttons. 🤖 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
@@ -244,19 +244,6 @@
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Contact Management</h6>
|
||||
<hr>
|
||||
<div class="mb-3">
|
||||
<label for="inactiveHours" class="form-label">Remove contacts inactive for:</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="inactiveHours" value="48" min="1">
|
||||
<span class="input-group-text">hours</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" id="cleanupBtn">
|
||||
<i class="bi bi-trash"></i> Clean Inactive Contacts
|
||||
</button>
|
||||
<hr>
|
||||
<h6>Device Information</h6>
|
||||
<div id="deviceInfo" class="small text-muted">
|
||||
Loading...
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
{% extends "contacts_base.html" %}
|
||||
|
||||
{% 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">
|
||||
<!-- Back Buttons -->
|
||||
<div class="back-buttons">
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/contacts/manage';">
|
||||
<i class="bi bi-arrow-left"></i> Contact Management
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/';">
|
||||
<i class="bi bi-house"></i> Home
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Toolbar -->
|
||||
<div class="search-toolbar">
|
||||
<input type="text" class="form-control" id="searchInput" placeholder="Search by name or public key...">
|
||||
</div>
|
||||
|
||||
<!-- Filter and Sort Toolbar -->
|
||||
<div class="filter-sort-toolbar">
|
||||
<!-- Type Filter -->
|
||||
<select class="form-select" id="typeFilter" style="max-width: 150px;">
|
||||
<option value="ALL">All Types</option>
|
||||
<option value="CLI">CLI</option>
|
||||
<option value="REP">REP</option>
|
||||
<option value="ROOM">ROOM</option>
|
||||
<option value="SENS">SENS</option>
|
||||
</select>
|
||||
|
||||
<!-- Sort Buttons -->
|
||||
<div class="sort-buttons">
|
||||
<button class="sort-btn" data-sort="name" id="sortByName" title="Sort by contact name">
|
||||
<span>Name</span>
|
||||
<i class="bi bi-sort-down"></i>
|
||||
</button>
|
||||
<button class="sort-btn active" data-sort="last_advert" id="sortByLastAdvert" title="Sort by last advertisement time">
|
||||
<span>Last advert</span>
|
||||
<i class="bi bi-sort-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="existingLoading" class="text-center py-5" style="display: none;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-muted">Loading contacts...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="existingEmpty" class="empty-state" style="display: none;">
|
||||
<i class="bi bi-inbox"></i>
|
||||
<p class="mb-0">No contacts found</p>
|
||||
<small class="text-muted">Contacts will appear here once added</small>
|
||||
</div>
|
||||
|
||||
<!-- Existing Contacts List (Full-screen) -->
|
||||
<div id="existingList" class="contacts-list-fullscreen">
|
||||
<!-- Dynamically populated by contacts.js -->
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="existingError" class="alert alert-danger" style="display: none;" role="alert">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
<span id="existingErrorMessage">Failed to load contacts</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,85 @@
|
||||
{% extends "contacts_base.html" %}
|
||||
|
||||
{% 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="window.location.href='/';" title="Home">
|
||||
<i class="bi bi-house"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div id="managePageContent">
|
||||
<!-- Page Header -->
|
||||
<div class="mb-4">
|
||||
<h2 class="mb-1">
|
||||
<i class="bi bi-gear"></i> Settings
|
||||
</h2>
|
||||
<p class="text-muted small mb-0">Configure contact management preferences</p>
|
||||
</div>
|
||||
|
||||
<!-- Manual Approval Settings Section -->
|
||||
<div class="compact-setting">
|
||||
<div class="form-check form-switch mb-0 d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="manualApprovalSwitch" style="cursor: pointer; min-width: 3rem; min-height: 1.5rem;">
|
||||
<label class="form-check-label mb-0" for="manualApprovalSwitch" style="cursor: pointer; font-weight: 500;">
|
||||
<span id="switchLabel">Loading...</span>
|
||||
</label>
|
||||
</div>
|
||||
<i class="bi bi-info-circle info-icon"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="When enabled, new contacts must be manually approved before they can communicate with your node"></i>
|
||||
</div>
|
||||
|
||||
<!-- Cleanup Inactive Contacts Section -->
|
||||
<div class="cleanup-section">
|
||||
<h6><i class="bi bi-trash"></i> Cleanup Inactive Contacts</h6>
|
||||
<p class="small text-muted mb-3">Remove contacts that haven't sent an advertisement in a specified time period.</p>
|
||||
<div class="mb-3">
|
||||
<label for="inactiveHours" class="form-label">Remove contacts inactive for:</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="inactiveHours" value="48" min="1">
|
||||
<span class="input-group-text">hours</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-danger" id="cleanupBtn">
|
||||
<i class="bi bi-trash"></i> Clean Inactive Contacts
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Section -->
|
||||
<div class="mb-4">
|
||||
<h5 class="mb-3">
|
||||
<i class="bi bi-list-ul"></i> Manage Contacts
|
||||
</h5>
|
||||
|
||||
<!-- Pending Contacts Card -->
|
||||
<div class="nav-card" onclick="window.location.href='/contacts/pending';">
|
||||
<div>
|
||||
<h6><i class="bi bi-hourglass-split"></i> Pending Contacts</h6>
|
||||
<small class="text-muted">Contacts awaiting manual approval</small>
|
||||
</div>
|
||||
<span class="badge bg-primary rounded-pill" id="pendingBadge" style="font-size: 1.1rem;">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Existing Contacts Card -->
|
||||
<div class="nav-card" onclick="window.location.href='/contacts/existing';">
|
||||
<div>
|
||||
<h6><i class="bi bi-person-lines-fill"></i> Existing Contacts</h6>
|
||||
<small class="text-muted">View and manage your approved contacts</small>
|
||||
</div>
|
||||
<span class="badge counter-badge counter-ok rounded-pill" id="existingBadge" style="font-size: 1.1rem;">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,63 @@
|
||||
{% extends "contacts_base.html" %}
|
||||
|
||||
{% 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">
|
||||
<!-- Back Buttons -->
|
||||
<div class="back-buttons">
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/contacts/manage';">
|
||||
<i class="bi bi-arrow-left"></i> Contact Management
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" onclick="window.location.href='/';">
|
||||
<i class="bi bi-house"></i> Home
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Page Description -->
|
||||
<div class="mb-3">
|
||||
<p class="text-muted small mb-0">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
Approve or reject contacts waiting for manual approval.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="pendingLoading" class="text-center py-5" style="display: none;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-muted">Loading pending contacts...</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="pendingEmpty" class="empty-state" style="display: none;">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
<p class="mb-0">No pending requests</p>
|
||||
<small class="text-muted">New contact requests will appear here when manual approval is enabled</small>
|
||||
</div>
|
||||
|
||||
<!-- Pending Contacts List (Full-screen) -->
|
||||
<div id="pendingList" class="contacts-list-fullscreen">
|
||||
<!-- Dynamically populated by contacts.js -->
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="pendingError" class="alert alert-danger" style="display: none;" role="alert">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
<span id="pendingErrorMessage">Failed to load pending contacts</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,420 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>{% block title %}Contact Management - mc-webui{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-16x16.png') }}">
|
||||
<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
|
||||
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
|
||||
<style>
|
||||
/* Mobile-first custom styles for Contact Management */
|
||||
/* Compact manual approval section */
|
||||
.compact-setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
color: #6c757d;
|
||||
cursor: help;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.pending-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.contact-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #212529;
|
||||
margin-bottom: 0.5rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.contact-key {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
word-break: break-all;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
min-height: 44px; /* Touch-friendly size */
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 1.5rem 1rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state.compact {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.empty-state.compact i {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.info-badge {
|
||||
display: inline-block;
|
||||
background-color: #e7f3ff;
|
||||
color: #0c5460;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Existing Contacts Styles */
|
||||
.existing-contact-card {
|
||||
background-color: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.existing-contact-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.contact-info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.counter-badge {
|
||||
font-size: 1rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
}
|
||||
|
||||
.counter-ok {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.counter-warning {
|
||||
background-color: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.counter-alarm {
|
||||
background-color: #dc3545;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.search-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-toolbar input,
|
||||
.search-toolbar select {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* Scrollable contacts lists */
|
||||
#pendingList {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
#existingList {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-height: calc(100vh - 400px);
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
/* Custom scrollbar styling */
|
||||
#existingList::-webkit-scrollbar,
|
||||
#pendingList::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-track,
|
||||
#pendingList::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb,
|
||||
#pendingList::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#existingList::-webkit-scrollbar-thumb:hover,
|
||||
#pendingList::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Compact section headers */
|
||||
.section-compact {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* NEW: Full-screen lists for dedicated pages */
|
||||
.contacts-list-fullscreen {
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* NEW: Navigation cards on manage page */
|
||||
.nav-card {
|
||||
background: white;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.nav-card h6 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* NEW: Sort toolbar */
|
||||
.filter-sort-toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sort-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sort-btn:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.sort-btn.active {
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
border-color: #0d6efd;
|
||||
}
|
||||
|
||||
.sort-btn i {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* NEW: Back buttons */
|
||||
.back-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.back-buttons button {
|
||||
flex: 1;
|
||||
padding: 0.75rem;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* NEW: Cleanup section on manage page */
|
||||
.cleanup-section {
|
||||
background-color: #fff3cd;
|
||||
border: 1px solid #ffc107;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cleanup-section h6 {
|
||||
color: #856404;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
#existingList {
|
||||
max-height: calc(100vh - 450px);
|
||||
}
|
||||
|
||||
.contacts-list-fullscreen {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.filter-sort-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sort-buttons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% 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="window.location.href='/';" 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">
|
||||
{% block page_content %}
|
||||
<!-- Content will be provided by child templates -->
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Delete Confirmation Modal (shared across all contact pages) -->
|
||||
<div class="modal fade" id="deleteContactModal" tabindex="-1" aria-labelledby="deleteContactModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-danger text-white">
|
||||
<h5 class="modal-title" id="deleteContactModalLabel">
|
||||
<i class="bi bi-exclamation-triangle"></i> Confirm Delete
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="mb-2">Are you sure you want to delete this contact?</p>
|
||||
<div class="alert alert-warning mb-0">
|
||||
<strong id="deleteContactName"></strong><br>
|
||||
<small class="font-monospace" id="deleteContactKey"></small>
|
||||
</div>
|
||||
<p class="text-muted small mt-2 mb-0">This action cannot be undone.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">
|
||||
<i class="bi bi-trash"></i> Delete Contact
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast container for notifications (shared across all contact pages) -->
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="contactToast" class="toast" role="alert">
|
||||
<div class="toast-header">
|
||||
<strong class="me-auto">Contact Management</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
<div class="toast-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap 5 JS Bundle -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Contact Management JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/contacts.js') }}"></script>
|
||||
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user