forked from UKSOURCE/cms.hailearning.edu.vn
fix: Improve formatting and spacing in blog edit and index pages
This commit is contained in:
@@ -211,28 +211,30 @@
|
|||||||
<label class="form-label fw-medium">Categories</label>
|
<label class="form-label fw-medium">Categories</label>
|
||||||
<div class="d-flex gap-2 mb-2">
|
<div class="d-flex gap-2 mb-2">
|
||||||
<input type="text" class="form-control form-control-sm"
|
<input type="text" class="form-control form-control-sm"
|
||||||
id="newCategoryInput"
|
id="newCategoryInput" placeholder="Enter new category name">
|
||||||
placeholder="Enter new category name">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-primary"
|
<button type="button" class="btn btn-sm btn-outline-primary"
|
||||||
id="addCategoryBtn">
|
id="addCategoryBtn">
|
||||||
<i class="fas fa-plus me-1"></i>Add
|
<i class="fas fa-plus me-1"></i>Add
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-check-group" id="categoriesContainer" style="max-height: 300px; overflow-y: auto;">
|
<div class="form-check-group" id="categoriesContainer"
|
||||||
|
style="max-height: 300px; overflow-y: auto;">
|
||||||
<% categories.forEach(category=> { %>
|
<% categories.forEach(category=> { %>
|
||||||
<div class="form-check d-flex align-items-center justify-content-between mb-2" data-category-id="<%= category._id %>">
|
<div class="form-check d-flex align-items-center justify-content-between mb-2"
|
||||||
|
data-category-id="<%= category._id %>">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<input class="form-check-input" type="checkbox"
|
<input class="form-check-input" type="checkbox"
|
||||||
name="category" value="<%= category.name %>"
|
name="category" value="<%= category.name %>"
|
||||||
id="category_<%= category._id %>" <%=blog.category &&
|
id="category_<%= category._id %>" <%=blog.category
|
||||||
blog.category.includes(category.name) ? 'checked' : ''
|
&& blog.category.includes(category.name) ? 'checked'
|
||||||
%>>
|
: '' %>>
|
||||||
<label class="form-check-label ms-2"
|
<label class="form-check-label ms-2"
|
||||||
for="category_<%= category._id %>">
|
for="category_<%= category._id %>">
|
||||||
<%= category.name %>
|
<%= category.name %>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-sm btn-outline-danger delete-category-btn"
|
<button type="button"
|
||||||
|
class="btn btn-sm btn-outline-danger delete-category-btn"
|
||||||
data-category-id="<%= category._id %>"
|
data-category-id="<%= category._id %>"
|
||||||
data-category-name="<%= category.name %>"
|
data-category-name="<%= category.name %>"
|
||||||
title="Delete category">
|
title="Delete category">
|
||||||
@@ -241,7 +243,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<% }); %>
|
<% }); %>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-text">Select one or more categories for this blog post.</div>
|
<div class="form-text">Select one or more categories for this blog post.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tags Column -->
|
<!-- Tags Column -->
|
||||||
@@ -249,29 +252,31 @@
|
|||||||
<label class="form-label fw-medium">Tags</label>
|
<label class="form-label fw-medium">Tags</label>
|
||||||
<div class="d-flex gap-2 mb-2">
|
<div class="d-flex gap-2 mb-2">
|
||||||
<input type="text" class="form-control form-control-sm"
|
<input type="text" class="form-control form-control-sm"
|
||||||
id="newTagInput"
|
id="newTagInput" placeholder="Enter new tag name">
|
||||||
placeholder="Enter new tag name">
|
|
||||||
<button type="button" class="btn btn-sm btn-outline-primary"
|
<button type="button" class="btn btn-sm btn-outline-primary"
|
||||||
id="addTagBtn">
|
id="addTagBtn">
|
||||||
<i class="fas fa-plus me-1"></i>Add
|
<i class="fas fa-plus me-1"></i>Add
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-check-group" id="tagsContainer" style="max-height: 300px; overflow-y: auto;">
|
<div class="form-check-group" id="tagsContainer"
|
||||||
|
style="max-height: 300px; overflow-y: auto;">
|
||||||
<% tags.forEach(tag=> { %>
|
<% tags.forEach(tag=> { %>
|
||||||
<div class="form-check d-flex align-items-center justify-content-between mb-2" data-tag-id="<%= tag._id %>">
|
<div class="form-check d-flex align-items-center justify-content-between mb-2"
|
||||||
|
data-tag-id="<%= tag._id %>">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<input class="form-check-input" type="checkbox" name="tags"
|
<input class="form-check-input" type="checkbox"
|
||||||
value="<%= tag.name %>" id="tag_<%= tag._id %>"
|
name="tags" value="<%= tag.name %>"
|
||||||
<%=blog.tags && blog.tags.includes(tag.name) ? 'checked'
|
id="tag_<%= tag._id %>" <%=blog.tags &&
|
||||||
: '' %>>
|
blog.tags.includes(tag.name) ? 'checked' : '' %>>
|
||||||
<label class="form-check-label ms-2" for="tag_<%= tag._id %>">
|
<label class="form-check-label ms-2"
|
||||||
|
for="tag_<%= tag._id %>">
|
||||||
<%= tag.name %>
|
<%= tag.name %>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-sm btn-outline-danger delete-tag-btn"
|
<button type="button"
|
||||||
|
class="btn btn-sm btn-outline-danger delete-tag-btn"
|
||||||
data-tag-id="<%= tag._id %>"
|
data-tag-id="<%= tag._id %>"
|
||||||
data-tag-name="<%= tag.name %>"
|
data-tag-name="<%= tag.name %>" title="Delete tag">
|
||||||
title="Delete tag">
|
|
||||||
<i class="fas fa-trash"></i>
|
<i class="fas fa-trash"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -314,7 +319,8 @@
|
|||||||
Mark as Featured Post
|
Mark as Featured Post
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-text">Featured posts can be highlighted on the blog page.</div>
|
<div class="form-text">Featured posts can be highlighted on the blog
|
||||||
|
page.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -902,8 +908,8 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Delete Category Confirmation Modal -->
|
<!-- Delete Category Confirmation Modal -->
|
||||||
<div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true"
|
<div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel"
|
||||||
data-bs-backdrop="true" data-bs-keyboard="true">
|
aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header bg-danger text-white">
|
<div class="modal-header bg-danger text-white">
|
||||||
@@ -914,7 +920,8 @@
|
|||||||
aria-label="Close"></button>
|
aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Are you sure you want to delete the category "<span id="deleteCategoryName" class="fw-bold"></span>"?</p>
|
<p>Are you sure you want to delete the category "<span id="deleteCategoryName" class="fw-bold"></span>"?
|
||||||
|
</p>
|
||||||
<p class="text-danger mb-0">
|
<p class="text-danger mb-0">
|
||||||
<small>
|
<small>
|
||||||
<i class="fas fa-exclamation-triangle me-1"></i>This action cannot be undone.</small>
|
<i class="fas fa-exclamation-triangle me-1"></i>This action cannot be undone.</small>
|
||||||
@@ -961,16 +968,19 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Fix modal z-index */
|
/* Fix modal z-index */
|
||||||
#deleteCategoryModal, #deleteTagModal {
|
#deleteCategoryModal,
|
||||||
|
#deleteTagModal {
|
||||||
z-index: 2050 !important;
|
z-index: 2050 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#deleteCategoryModal .modal-content, #deleteTagModal .modal-content {
|
#deleteCategoryModal .modal-content,
|
||||||
|
#deleteTagModal .modal-content {
|
||||||
z-index: 2070 !important;
|
z-index: 2070 !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#deleteCategoryModal.show, #deleteTagModal.show {
|
#deleteCategoryModal.show,
|
||||||
|
#deleteTagModal.show {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user