admin: Add support for comment search by Thread URL in admin interface

See: - isso-comments#642 - isso-comments#1000
pkvach · May 2, 2024 · e0a35ce · e0a35ce
1 parent d63e5f4
commit e0a35ce
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 1 deletion.
diff --git a/isso/css/admin.css b/isso/css/admin.css
@@ -176,3 +176,67 @@ a {
     width: 100%;
     margin-top: 1em;
 }
+
+
+.search-tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+}
+
+.search-tooltip-icon {
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  border-radius: 50%;
+  background: #fffaf3;
+  font-family: serif;
+  font-weight: bold;
+  text-align: center;
+  color: #000;
+}
+
+.search-tooltip .search-tooltip-text {
+  visibility: hidden;
+  width: 370px;
+  background-color: #555;
+  color: #fff;
+  text-align: left;
+  border-radius: 6px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -185px;
+}
+
+/* Tooltip arrow */
+.search-tooltip .search-tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.search-tooltip .show {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
+}
+
+/* Add animation (fade in the tooltip) */
+@-webkit-keyframes fadeIn {
+  from {opacity: 0;} 
+  to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity:1 ;}
+}
diff --git a/isso/js/admin.js b/isso/js/admin.js
@@ -125,3 +125,7 @@ function send_edit(com_id, hash, isso_host_script) {
     stop_edit(com_id, true);
 }
 
+function toggleTooltip(tooltipContainer) {
+    const tooltipText = tooltipContainer.querySelector(".search-tooltip-text");
+    tooltipText.classList.toggle("show");
+}
diff --git a/isso/templates/admin.html b/isso/templates/admin.html
@@ -74,7 +74,14 @@ <h2>Administration</h2>
           <div class="search">
             <form action="/admin/" method="get">
               <input type="hidden" name="mode" value="0" />
-              <label>Search by URL
+                <label class="search-label">Search by URL
+                  <div class="search-tooltip" onclick="toggleTooltip(this)"><span class="search-tooltip-icon">?</span>
+                    <span class="search-tooltip-text">
+                      Search for comments within threads (e.g. http://example.com/thread) or for specific comments
+                      (e.g. http://example.com/thread#isso-1) by their URL.
+                    </span>
+                  </div>
+                </label>
                 <input type="url" class="search__input" name="comment_search_url" value="{{comment_search_url}}" spellcheck="false"
                   required placeholder="https://example.com/demo/#isso-1" />
               </label>