gpdbalde
/
comment-thread-component
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added contents list in side

main
Gerard Balde 1 week ago
parent
b02582b548
commit
45c52a96ee
1 changed files with 795 additions and 741 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      index.html

78
index.html
View File

@ -8,17 +8,48 @@
<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" /> <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" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.js"></script>
<style>
ul {
list-style-type: none;
padding-left: 0;
}
ul > li {
margin-bottom: 5px;
}
ul > li > a {
text-decoration: none;
color: gray;
}
ul > li > a:hover {
text-decoration: underline;
color: black;
}
.nav-link {
color: black;
}
.nav-link.active {
background-color: black !important;
}
</style>
</head> </head>
<body> <body>
<div class="container my-5"> <div class="container my-5">
<div class="row">
<div class="col-10">
<h1>Comment Thread Component</h3> <h1>Comment Thread Component</h3>
<h5 class="mt-4">No comment</h5>
<h5 class="mt-4" id="component-a">No comment</h5>
<p>No comment yet. Display clickable add comment text with icon.</p> <p>No comment yet. Display clickable add comment text with icon.</p>
<table class="table table-hover table-bordered"> <table class="table table-hover table-bordered">
<thead class="table-dark">
<thead class="table-light">
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First column</th> <th scope="col">First column</th>
@ -65,7 +96,7 @@
<div class="tab-pane fade active show" id="pills-a-html" role="tabpanel" aria-labelledby="pills-a-html-tab"> <div class="tab-pane fade active show" id="pills-a-html" role="tabpanel" aria-labelledby="pills-a-html-tab">
<pre class="mt-0"><code class="language-html"> <pre class="mt-0"><code class="language-html">
&lt;table class="table table-hover table-bordered"> &lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;thead class="table-light">
&lt;tr> &lt;tr>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
@ -165,10 +196,10 @@
</div> </div>
</div> </div>
<h5 class="mt-5">Opened Comment</h5>
<h5 class="mt-5" id="component-b">Opened Comment</h5>
<p>Comment opened already.</p> <p>Comment opened already.</p>
<table class="table table-hover table-bordered"> <table class="table table-hover table-bordered">
<thead class="table-dark">
<thead class="table-light">
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First column</th> <th scope="col">First column</th>
@ -234,7 +265,7 @@
<div class="tab-pane fade active show" id="pills-b-html" role="tabpanel" aria-labelledby="pills-b-html-tab"> <div class="tab-pane fade active show" id="pills-b-html" role="tabpanel" aria-labelledby="pills-b-html-tab">
<pre class="mt-0"><code class="language-html"> <pre class="mt-0"><code class="language-html">
&lt;table class="table table-hover table-bordered"> &lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;thead class="table-light">
&lt;tr> &lt;tr>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
@ -280,7 +311,7 @@
const TableComponent = () => { const TableComponent = () => {
return ( return (
&lt;table className="table table-hover table-bordered"> &lt;table className="table table-hover table-bordered">
&lt;thead className="table-dark">
&lt;thead className="table-light">
&lt;tr> &lt;tr>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
@ -333,7 +364,7 @@
<pre class="mt-0"><code class="language-html"> <pre class="mt-0"><code class="language-html">
&lt;template> &lt;template>
&lt;table class="table table-hover table-bordered"> &lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;thead class="table-light">
&lt;tr> &lt;tr>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th> &lt;th scope="col">...&lt;/th>
@ -394,10 +425,10 @@
</div> </div>
</div> </div>
<h5 class="mt-5">Open Comment Modal</h5>
<h5 class="mt-5" id="component-c">Open Comment Modal</h5>
<p>Click comment area to open comment modal.</p> <p>Click comment area to open comment modal.</p>
<table class="table table-hover table-bordered"> <table class="table table-hover table-bordered">
<thead class="table-dark">
<thead class="table-light">
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First column</th> <th scope="col">First column</th>
@ -438,7 +469,6 @@
</tbody> </tbody>
</table> </table>
<!-- Code Preview --> <!-- Code Preview -->
<div class="row"> <div class="row">
<div class="col"> <div class="col">
@ -861,7 +891,19 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="col-2 text-muted">
<div class="sticky-top">
<p class="h6">CONTENTS</p>
<hr>
<ul>
<li><a href="#component-a" class="mt-1">No Comment</a></li>
<li><a href="#component-b">With/Opened Comment</a></li>
<li><a href="#component-c">Unread/Open Comment Modal</a></li>
</ul>
</div>
</div>
</div>
</div> </div>
@ -1026,9 +1068,21 @@
</div> </div>
</div> </div>
<footer class="bg-light">
<div class="text-center pt-3">
<p>
Copyright &copy; 2024
<strong>Comment Thread</strong> by <a href="https://github.com/princegideon15" target="_blank">Gerard Balde</a>.
Check out the source code on
<a href="https://github.com/princegideon15/comment-thread-component.git" target="_blank">GitHub</a>.
</p>
</div>
</footer>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
// Function to copy the code block content // Function to copy the code block content
function copyToClipboard(element, tabPaneId) { function copyToClipboard(element, tabPaneId) {
console.log("🚀 ~ copyToClipboard ~ element, tabPaneId:", tabPaneId) console.log("🚀 ~ copyToClipboard ~ element, tabPaneId:", tabPaneId)

Write Preview
Loading…
Cancel
Save