You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 lines
21 KiB
336 lines
21 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Comment Thread Component</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container my-5">
|
|
<h1>Comment Thread Component</h3>
|
|
|
|
<h5 class="mt-4">No comment</h5>
|
|
<p>No comment yet. Display clickable add comment text with icon.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First Column</th>
|
|
<th scope="col">Second Column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="d-flex justify-content-center align-items-center gap-1 p-2 text-muted" style="cursor:pointer">
|
|
<i class="far fa-comment text-muted"></i> Add Comment
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h5 class="mt-5">Opened comment</h5>
|
|
<p>Comment opened already.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First Column</th>
|
|
<th scope="col">Second Column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="card bg-light rounded-4" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate text-xs">
|
|
<!-- Username -->
|
|
Juan Dela Cruz
|
|
</div>
|
|
<div class="text-end text-muted text-xxs">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text text-truncate text-xs" style="width:300px !important">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h5 class="mt-5">Unread Latest Comment</h5>
|
|
<p>Latest comment unopened. Font weight set to bold.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First Column</th>
|
|
<th scope="col">Second Column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="card bg-light rounded-4" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6 fw-bold">
|
|
<!-- Username -->
|
|
Juan Dela Cruz
|
|
</div>
|
|
<div class="text-end fs-6 fw-bold">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text text-truncate fs-6 fw-bold" style="width:300px !important">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h5 class="mt-5">Open Comment Modal</h5>
|
|
<p>Click comment area to open comment modal.</p>
|
|
<table class="table table-hover table-bordered">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First Column</th>
|
|
<th scope="col">Second Column</th>
|
|
<th scope="col" width="30%">Comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Lorem Ipsum 1</td>
|
|
<td>Lorem Ipsum 2</td>
|
|
<td>
|
|
<div class="card bg-light rounded-4" style="cursor:pointer" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:24px; max-width:26px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6 fw-bold">
|
|
<!-- Username -->
|
|
Juan Dela Cruz
|
|
</div>
|
|
<div class="text-end fs-6 fw-bold">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text text-truncate fs-6 fw-bold" style="width:300px !important">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Comments</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="card bg-body-secondary rounded-4" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6">
|
|
<!-- Username -->
|
|
Juan Dela Cruz <span class="badge rounded-pill text-bg-secondary">Administrator</span>
|
|
</div>
|
|
<div class="text-end fs-6">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text fs-6">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between">
|
|
<div class="ms-5">
|
|
<a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-pdf text-danger me-1"></i>sample.pdf</a>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a>
|
|
<a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>0</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Comment with reply -->
|
|
<div class="card bg-body-secondary rounded-4 mt-3 " style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6">
|
|
<!-- Username -->
|
|
Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span>
|
|
</div>
|
|
<div class="text-end fs-6">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text fs-6">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between">
|
|
<div class="ms-5">
|
|
<a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class="fas fa-reply text-dark"></i></a>
|
|
<a href="#" class="btn"><i class="fas fa-comments text-dark me-1"></i>1</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Replies -->
|
|
<div class="row">
|
|
<div class="col"></div>
|
|
<div class="col-10 border border-3 border-top-0 border-end-0 border-bottom-0 ps-5">
|
|
<div class="card bg-body-secondary rounded-4 mt-3" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="d-flex flex-column col" style="width:inherit !important">
|
|
<div class="d-flex justify-content-between gap-4">
|
|
<div class="card-title text-truncate fs-6">
|
|
<!-- Username -->
|
|
Maria Delos Reyes <span class="badge rounded-pill text-bg-secondary">Proponent</span>
|
|
</div>
|
|
<div class="text-end fs-6">
|
|
<!-- Latest comment date & time -->
|
|
08 Aug 2024 01:06 PM
|
|
</div>
|
|
</div>
|
|
<p class="card-text fs-6">
|
|
<!-- Cemment content here -->
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer d-flex justify-content-between">
|
|
<div class="ms-5">
|
|
<a class="btn btn-sm btn-light mb-0 rounded-pill border border-secondary text-truncate shadow-none px-3"><i class="fas fa-file-image text-danger me-1"></i>sample.jpg</a>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class="fas fa-pen"></i></a>
|
|
<a href="#" class="btn"><i class="far fa-trash-alt text-danger"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Send Reply Thread -->
|
|
<div class="card border-0 rounded-4 mt-2" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="border border-dark rounded-4 w-100 p-2">
|
|
<textarea class="comment-textarea w-100" placeholder="Reply to this thread..." style="border:0; resize: none; outline:none"></textarea>
|
|
<div class="d-flex justify-content-between">
|
|
<div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light">
|
|
<p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p>
|
|
<button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class=" fas fa-paperclip"></i></a>
|
|
<a href="#" class="btn"><i class=" fas fa-paper-plane text-info"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Send Comment Thread -->
|
|
<div class="card border-0 rounded-4 mt-2" style="cursor:pointer">
|
|
<div class="card-body d-flex gap-1 gap-2 mb-0 p-2">
|
|
<!-- Replace src based on your actual directory and file -->
|
|
<img src="/public/default.png" alt="..." class="rounded-circle" style="height:auto; width:auto; max-height:45px; max-width:48px">
|
|
<div class="border border-dark rounded-4 w-100 p-2">
|
|
<textarea class="comment-textarea w-100" placeholder="Write a new comment..." style="border:0; resize: none; outline:none"></textarea>
|
|
<div class="d-flex justify-content-between">
|
|
<div class="d-flex justify-content-between align-items-center border border-dark rounded border border-secondary text-bg-light">
|
|
<p class="p-1 mb-0 text-dark px-2 text-truncate">File.pdf</p>
|
|
<button type="button" class="btn text-danger font-weight-bold"><i class="far fa-window-close"></i></button>
|
|
</div>
|
|
<div class="d-flex">
|
|
<a href="#" class="btn"><i class=" fas fa-paperclip"></i></a>
|
|
<a href="#" class="btn"><i class=" fas fa-paper-plane text-info"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|