support articles
This commit is contained in:
@@ -2,6 +2,37 @@
|
||||
|
||||
{% block title %}Support Articles - DocuPulse{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.article-card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.article-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
.category-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
.status-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
.note-editor {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.note-editor.note-frame {
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
.note-editor .note-editing-area {
|
||||
background-color: var(--white);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
@@ -10,18 +41,373 @@
|
||||
<h1 class="h3 mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-life-ring me-2"></i>Support Articles
|
||||
</h1>
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createArticleModal">
|
||||
<i class="fas fa-plus me-2"></i>Create New Article
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="text-center py-5">
|
||||
<i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
|
||||
<h4 class="text-muted mt-3">Support Articles</h4>
|
||||
<p class="text-muted">Content coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Articles List -->
|
||||
<div class="row" id="articlesList">
|
||||
<!-- Articles will be loaded here via AJAX -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create Article Modal -->
|
||||
<div class="modal fade" id="createArticleModal" tabindex="-1" aria-labelledby="createArticleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="createArticleModalLabel">Create New Help Article</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form id="createArticleForm">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="mb-3">
|
||||
<label for="articleTitle" class="form-label">Title</label>
|
||||
<input type="text" class="form-control" id="articleTitle" name="title" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="articleCategory" class="form-label">Category</label>
|
||||
<select class="form-select" id="articleCategory" name="category" required>
|
||||
<option value="">Select Category</option>
|
||||
<option value="getting-started">Getting Started</option>
|
||||
<option value="user-management">User Management</option>
|
||||
<option value="file-management">File Management</option>
|
||||
<option value="communication">Communication</option>
|
||||
<option value="security">Security & Privacy</option>
|
||||
<option value="administration">Administration</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="articleBody" class="form-label">Content</label>
|
||||
<textarea class="form-control" id="articleBody" name="body" rows="15" required></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="orderIndex" class="form-label">Order Index</label>
|
||||
<input type="number" class="form-control" id="orderIndex" name="order_index" value="0" min="0">
|
||||
<div class="form-text">Lower numbers appear first in the category</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="isPublished" name="is_published" checked>
|
||||
<label class="form-check-label" for="isPublished">
|
||||
Publish immediately
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Create Article</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Article Modal -->
|
||||
<div class="modal fade" id="editArticleModal" tabindex="-1" aria-labelledby="editArticleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editArticleModalLabel">Edit Help Article</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form id="editArticleForm">
|
||||
<input type="hidden" id="editArticleId" name="id">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<div class="mb-3">
|
||||
<label for="editArticleTitle" class="form-label">Title</label>
|
||||
<input type="text" class="form-control" id="editArticleTitle" name="title" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="mb-3">
|
||||
<label for="editArticleCategory" class="form-label">Category</label>
|
||||
<select class="form-select" id="editArticleCategory" name="category" required>
|
||||
<option value="">Select Category</option>
|
||||
<option value="getting-started">Getting Started</option>
|
||||
<option value="user-management">User Management</option>
|
||||
<option value="file-management">File Management</option>
|
||||
<option value="communication">Communication</option>
|
||||
<option value="security">Security & Privacy</option>
|
||||
<option value="administration">Administration</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="editArticleBody" class="form-label">Content</label>
|
||||
<textarea class="form-control" id="editArticleBody" name="body" rows="15" required></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="editOrderIndex" class="form-label">Order Index</label>
|
||||
<input type="number" class="form-control" id="editOrderIndex" name="order_index" value="0" min="0">
|
||||
<div class="form-text">Lower numbers appear first in the category</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="editIsPublished" name="is_published">
|
||||
<label class="form-check-label" for="editIsPublished">
|
||||
Published
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Update Article</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal fade" id="deleteArticleModal" tabindex="-1" aria-labelledby="deleteArticleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deleteArticleModalLabel">Delete Article</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this article? This action cannot be undone.</p>
|
||||
<p class="text-muted" id="deleteArticleTitle"></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="confirmDelete">Delete Article</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Initialize Summernote for rich text editing
|
||||
$('#articleBody, #editArticleBody').summernote({
|
||||
height: 300,
|
||||
toolbar: [
|
||||
['style', ['style']],
|
||||
['font', ['bold', 'underline', 'italic', 'clear']],
|
||||
['fontname', ['fontname']],
|
||||
['color', ['color']],
|
||||
['para', ['ul', 'ol', 'paragraph']],
|
||||
['height', ['height']],
|
||||
['table', ['table']],
|
||||
['insert', ['link', 'picture']],
|
||||
['view', ['fullscreen', 'codeview', 'help']]
|
||||
],
|
||||
styleTags: [
|
||||
'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
|
||||
]
|
||||
});
|
||||
|
||||
// Load articles on page load
|
||||
loadArticles();
|
||||
|
||||
// Handle create article form submission
|
||||
$('#createArticleForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
createArticle();
|
||||
});
|
||||
|
||||
// Handle edit article form submission
|
||||
$('#editArticleForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
updateArticle();
|
||||
});
|
||||
|
||||
// Handle delete confirmation
|
||||
$('#confirmDelete').on('click', function() {
|
||||
deleteArticle();
|
||||
});
|
||||
});
|
||||
|
||||
function loadArticles() {
|
||||
$.get('/api/admin/help-articles', function(data) {
|
||||
const articlesList = $('#articlesList');
|
||||
articlesList.empty();
|
||||
|
||||
if (data.articles.length === 0) {
|
||||
articlesList.html(`
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
|
||||
<h4 class="text-muted mt-3">No Articles Yet</h4>
|
||||
<p class="text-muted">Create your first help article to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
return;
|
||||
}
|
||||
|
||||
data.articles.forEach(article => {
|
||||
const categoryNames = {
|
||||
'getting-started': 'Getting Started',
|
||||
'user-management': 'User Management',
|
||||
'file-management': 'File Management',
|
||||
'communication': 'Communication',
|
||||
'security': 'Security & Privacy',
|
||||
'administration': 'Administration'
|
||||
};
|
||||
|
||||
const card = $(`
|
||||
<div class="col-lg-6 col-xl-4 mb-4">
|
||||
<div class="card article-card border-0 shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<span class="badge category-badge" style="background-color: var(--primary-color);">
|
||||
${categoryNames[article.category]}
|
||||
</span>
|
||||
<span class="badge status-badge ${article.is_published ? 'bg-success' : 'bg-warning'}">
|
||||
${article.is_published ? 'Published' : 'Draft'}
|
||||
</span>
|
||||
</div>
|
||||
<h5 class="card-title mb-2">${article.title}</h5>
|
||||
<p class="card-text text-muted small mb-3">
|
||||
${article.body.substring(0, 100)}${article.body.length > 100 ? '...' : ''}
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
Order: ${article.order_index} | Created: ${new Date(article.created_at).toLocaleDateString()}
|
||||
</small>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-primary" onclick="editArticle(${article.id})">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline-danger" onclick="confirmDelete(${article.id}, '${article.title}')">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
articlesList.append(card);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function createArticle() {
|
||||
const formData = new FormData($('#createArticleForm')[0]);
|
||||
formData.set('body', $('#articleBody').summernote('code'));
|
||||
formData.set('is_published', $('#isPublished').is(':checked'));
|
||||
|
||||
$.ajax({
|
||||
url: '/api/admin/help-articles',
|
||||
method: 'POST',
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(response) {
|
||||
$('#createArticleModal').modal('hide');
|
||||
$('#createArticleForm')[0].reset();
|
||||
$('#articleBody').summernote('code', '');
|
||||
loadArticles();
|
||||
showAlert('Article created successfully!', 'success');
|
||||
},
|
||||
error: function(xhr) {
|
||||
showAlert('Error creating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function editArticle(articleId) {
|
||||
$.get(`/api/admin/help-articles/${articleId}`, function(data) {
|
||||
$('#editArticleId').val(data.article.id);
|
||||
$('#editArticleTitle').val(data.article.title);
|
||||
$('#editArticleCategory').val(data.article.category);
|
||||
$('#editArticleBody').summernote('code', data.article.body);
|
||||
$('#editOrderIndex').val(data.article.order_index);
|
||||
$('#editIsPublished').prop('checked', data.article.is_published);
|
||||
$('#editArticleModal').modal('show');
|
||||
});
|
||||
}
|
||||
|
||||
function updateArticle() {
|
||||
const formData = new FormData($('#editArticleForm')[0]);
|
||||
formData.set('body', $('#editArticleBody').summernote('code'));
|
||||
formData.set('is_published', $('#editIsPublished').is(':checked'));
|
||||
|
||||
$.ajax({
|
||||
url: `/api/admin/help-articles/${$('#editArticleId').val()}`,
|
||||
method: 'PUT',
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function(response) {
|
||||
$('#editArticleModal').modal('hide');
|
||||
loadArticles();
|
||||
showAlert('Article updated successfully!', 'success');
|
||||
},
|
||||
error: function(xhr) {
|
||||
showAlert('Error updating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function confirmDelete(articleId, title) {
|
||||
$('#deleteArticleId').val(articleId);
|
||||
$('#deleteArticleTitle').text(title);
|
||||
$('#deleteArticleModal').modal('show');
|
||||
}
|
||||
|
||||
function deleteArticle() {
|
||||
const articleId = $('#deleteArticleId').val();
|
||||
|
||||
$.ajax({
|
||||
url: `/api/admin/help-articles/${articleId}`,
|
||||
method: 'DELETE',
|
||||
success: function(response) {
|
||||
$('#deleteArticleModal').modal('hide');
|
||||
loadArticles();
|
||||
showAlert('Article deleted successfully!', 'success');
|
||||
},
|
||||
error: function(xhr) {
|
||||
showAlert('Error deleting article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showAlert(message, type) {
|
||||
const alertHtml = `
|
||||
<div class="alert alert-${type} alert-dismissible fade show" role="alert">
|
||||
<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
`;
|
||||
$('.container-fluid').prepend(alertHtml);
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -203,7 +203,7 @@
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">Getting Started</h4>
|
||||
<p class="text-muted mb-4">Learn the basics of DocuPulse and set up your workspace</p>
|
||||
<a href="#getting-started" class="btn btn-outline-primary">View Articles</a>
|
||||
<a href="{{ url_for('public.help_articles', category='getting-started') }}" class="btn btn-outline-primary">View Articles</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
@@ -213,7 +213,7 @@
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">User Management</h4>
|
||||
<p class="text-muted mb-4">Manage users, permissions, and team collaboration</p>
|
||||
<a href="#user-management" class="btn btn-outline-primary">View Articles</a>
|
||||
<a href="{{ url_for('public.help_articles', category='user-management') }}" class="btn btn-outline-primary">View Articles</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
@@ -223,7 +223,7 @@
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">File Management</h4>
|
||||
<p class="text-muted mb-4">Upload, organize, and manage your documents</p>
|
||||
<a href="#file-management" class="btn btn-outline-primary">View Articles</a>
|
||||
<a href="{{ url_for('public.help_articles', category='file-management') }}" class="btn btn-outline-primary">View Articles</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
@@ -233,7 +233,7 @@
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">Communication</h4>
|
||||
<p class="text-muted mb-4">Use messaging and collaboration features</p>
|
||||
<a href="#communication" class="btn btn-outline-primary">View Articles</a>
|
||||
<a href="{{ url_for('public.help_articles', category='communication') }}" class="btn btn-outline-primary">View Articles</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
@@ -243,7 +243,7 @@
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">Security & Privacy</h4>
|
||||
<p class="text-muted mb-4">Learn about security features and data protection</p>
|
||||
<a href="#security" class="btn btn-outline-primary">View Articles</a>
|
||||
<a href="{{ url_for('public.help_articles', category='security') }}" class="btn btn-outline-primary">View Articles</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
@@ -253,7 +253,7 @@
|
||||
</div>
|
||||
<h4 class="fw-bold mb-3">Administration</h4>
|
||||
<p class="text-muted mb-4">Configure settings and manage your organization</p>
|
||||
<a href="#administration" class="btn btn-outline-primary">View Articles</a>
|
||||
<a href="{{ url_for('public.help_articles', category='administration') }}" class="btn btn-outline-primary">View Articles</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -296,7 +296,7 @@
|
||||
</button>
|
||||
<div id="faq3" class="collapse" data-bs-parent="#faqAccordion">
|
||||
<div class="faq-answer">
|
||||
DocuPulse supports a wide range of file types including documents (PDF, DOCX, DOC, TXT, RTF), spreadsheets (XLSX, XLS, ODS), presentations (PPTX, PPT), images (JPG, PNG, GIF, SVG), archives (ZIP, RAR, 7Z), code files (PY, JS, HTML, CSS), audio/video files, and CAD/design files. Individual files can be up to 10MB, and the platform includes storage limits that can be configured by administrators.
|
||||
DocuPulse supports a wide range of file types including documents (PDF, DOCX, DOC, TXT, RTF), spreadsheets (XLSX, XLS, ODS), presentations (PPTX, PPT), images (JPG, PNG, GIF, SVG), archives (ZIP, RAR, 7Z), code files (PY, JS, HTML, CSS), audio/video files, and CAD/design files.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
294
templates/public/help_articles.html
Normal file
294
templates/public/help_articles.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% if category_name %}{{ category_name }} - {% endif %}Help Articles - DocuPulse</title>
|
||||
<meta name="description" content="Browse help articles and documentation for DocuPulse organized by category.">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
|
||||
<style>
|
||||
.category-nav {
|
||||
background: var(--white);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 5px 15px var(--shadow-color);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.category-link {
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
margin: 5px 0;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
color: var(--text-dark);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.category-link:hover {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--primary-color);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.category-link.active {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--white);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.article-card {
|
||||
background: var(--white);
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px var(--shadow-color);
|
||||
margin-bottom: 25px;
|
||||
border: none;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
line-height: 1.7;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.article-content h1, .article-content h2, .article-content h3,
|
||||
.article-content h4, .article-content h5, .article-content h6 {
|
||||
color: var(--primary-color);
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-content p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-content ul, .article-content ol {
|
||||
margin-bottom: 15px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.article-content li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.article-content code {
|
||||
background-color: var(--bg-color);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.article-content pre {
|
||||
background-color: var(--bg-color);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.article-content blockquote {
|
||||
border-left: 4px solid var(--primary-color);
|
||||
padding-left: 20px;
|
||||
margin: 20px 0;
|
||||
font-style: italic;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.article-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.article-content th, .article-content td {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.article-content th {
|
||||
background-color: var(--bg-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.breadcrumb-nav {
|
||||
background: var(--white);
|
||||
border-radius: 10px;
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 8px var(--shadow-color);
|
||||
}
|
||||
|
||||
.breadcrumb-item a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 4rem;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px var(--primary-opacity-15);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
.btn-outline-primary {
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
border-radius: 25px;
|
||||
padding: 12px 30px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.btn-outline-primary:hover {
|
||||
background: rgba(var(--primary-color-rgb), 0.05);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% include 'components/header_nav.html' %}
|
||||
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<div class="container mt-4">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb breadcrumb-nav">
|
||||
<li class="breadcrumb-item"><a href="{{ url_for('public.help_center') }}">Help Center</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
{% if category_name %}{{ category_name }}{% else %}All Articles{% endif %}
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Category Navigation -->
|
||||
<div class="col-lg-3">
|
||||
<div class="category-nav">
|
||||
<h5 class="mb-3" style="color: var(--primary-color);">
|
||||
<i class="fas fa-folder me-2"></i>Categories
|
||||
</h5>
|
||||
<a href="{{ url_for('public.help_articles') }}"
|
||||
class="category-link {% if not current_category %}active{% endif %}">
|
||||
<i class="fas fa-th-large me-2"></i>All Articles
|
||||
</a>
|
||||
{% for category_key, category_name in categories.items() %}
|
||||
<a href="{{ url_for('public.help_articles', category=category_key) }}"
|
||||
class="category-link {% if current_category == category_key %}active{% endif %}">
|
||||
<i class="fas fa-{{ 'rocket' if category_key == 'getting-started' else 'users' if category_key == 'user-management' else 'folder' if category_key == 'file-management' else 'comments' if category_key == 'communication' else 'shield-alt' if category_key == 'security' else 'cog' }} me-2"></i>
|
||||
{{ category_name }}
|
||||
{% if all_articles.get(category_key) %}
|
||||
<span class="badge bg-secondary float-end">{{ all_articles[category_key]|length }}</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Articles Content -->
|
||||
<div class="col-lg-9">
|
||||
{% if category_name %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h2 mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-{{ 'rocket' if current_category == 'getting-started' else 'users' if current_category == 'user-management' else 'folder' if current_category == 'file-management' else 'comments' if current_category == 'communication' else 'shield-alt' if current_category == 'security' else 'cog' }} me-2"></i>
|
||||
{{ category_name }}
|
||||
</h1>
|
||||
<a href="{{ url_for('public.help_center') }}" class="btn btn-outline-primary">
|
||||
<i class="fas fa-arrow-left me-2"></i>Back to Help Center
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h2 mb-0" style="color: var(--primary-color);">
|
||||
<i class="fas fa-book me-2"></i>All Help Articles
|
||||
</h1>
|
||||
<a href="{{ url_for('public.help_center') }}" class="btn btn-outline-primary">
|
||||
<i class="fas fa-arrow-left me-2"></i>Back to Help Center
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if articles %}
|
||||
{% for article in articles %}
|
||||
<div class="article-card">
|
||||
<h2 class="article-title">{{ article.title }}</h2>
|
||||
<div class="article-content">
|
||||
{{ article.body|safe }}
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="fas fa-calendar me-1"></i>
|
||||
Updated: {{ article.updated_at.strftime('%B %d, %Y') if article.updated_at else article.created_at.strftime('%B %d, %Y') }}
|
||||
</small>
|
||||
<span class="badge" style="background-color: var(--primary-color);">
|
||||
{{ categories[article.category] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-file-alt"></i>
|
||||
<h3 class="text-muted">No Articles Found</h3>
|
||||
<p class="text-muted">
|
||||
{% if current_category %}
|
||||
No articles are available in the "{{ category_name }}" category yet.
|
||||
{% else %}
|
||||
No help articles are available yet.
|
||||
{% endif %}
|
||||
</p>
|
||||
<a href="{{ url_for('public.help_center') }}" class="btn btn-primary">
|
||||
<i class="fas fa-arrow-left me-2"></i>Back to Help Center
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'components/footer_nav.html' %}
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user