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
Split 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 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>
<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>
<body>
<div class="container my-5">
<div class="row">
<div class="col-10">
<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>
<table class="table table-hover table-bordered">
<thead class="table-dark">
<thead class="table-light">
<tr>
<th scope="col">#</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">
<pre class="mt-0"><code class="language-html">
&lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;thead class="table-light">
&lt;tr>
&lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th>
@ -165,10 +196,10 @@
</div>
</div>
<h5 class="mt-5">Opened Comment</h5>
<h5 class="mt-5" id="component-b">Opened Comment</h5>
<p>Comment opened already.</p>
<table class="table table-hover table-bordered">
<thead class="table-dark">
<thead class="table-light">
<tr>
<th scope="col">#</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">
<pre class="mt-0"><code class="language-html">
&lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;thead class="table-light">
&lt;tr>
&lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th>
@ -280,7 +311,7 @@
const TableComponent = () => {
return (
&lt;table className="table table-hover table-bordered">
&lt;thead className="table-dark">
&lt;thead className="table-light">
&lt;tr>
&lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th>
@ -333,7 +364,7 @@
<pre class="mt-0"><code class="language-html">
&lt;template>
&lt;table class="table table-hover table-bordered">
&lt;thead class="table-dark">
&lt;thead class="table-light">
&lt;tr>
&lt;th scope="col">...&lt;/th>
&lt;th scope="col">...&lt;/th>
@ -394,10 +425,10 @@
</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>
<table class="table table-hover table-bordered">
<thead class="table-dark">
<thead class="table-light">
<tr>
<th scope="col">#</th>
<th scope="col">First column</th>
@ -438,7 +469,6 @@
</tbody>
</table>
<!-- Code Preview -->
<div class="row">
<div class="col">
@ -861,7 +891,19 @@
</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>
@ -1026,9 +1068,21 @@
</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>
// Function to copy the code block content
function copyToClipboard(element, tabPaneId) {
console.log("🚀 ~ copyToClipboard ~ element, tabPaneId:", tabPaneId)

Write Preview
Loading…
Cancel
Save