Update web/templates/search.html

web/templates/search.html

@@ -3,82 +3,44 @@
 {% load static %}
 
 {% block content %}
-<script src="{% static 'web/core/static/core/search-help.js' %}"></script>
 <div class="container">
   <h1 class="page-title">Search</h1>
-  <!-- <p class="page-subtitle">
-    Use wildcards: <code>*</code> matches many characters (e.g., <code>*love*</code>), <code>?</code> matches one.
-    By default we search Subject, Illustration, and Application.
-  </p> -->
 
-  <!-- Search Help Dropdown -->
+  <form method="get" class="search-form">
-  <div class="search-help">
+    <div class="search-row">
-    <button class="help-toggle" type="button" onclick="this.nextElementSibling.classList.toggle('open')">
+      <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
-      ❓ Search Tips
+      <button class="btn btn-primary">Search</button>
-    </button>
+
-    <div class="help-content">
+      <!-- Help button stays inline with Search -->
+      <button
+        class="btn btn-secondary help-toggle"
+        type="button"
+        data-target="#search-help-panel"
+      >
+        Help
+      </button>
+    </div>
+
+    <!-- Help panel sits below the row -->
+    <div id="search-help-panel" class="help-panel">
       <h3>How to Use Search Operators</h3>
       <ul>
         <li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
             <em>Example:</em> <code>faith</code></li>
-
         <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
             <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
-
         <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
             <em>Example:</em> <code>love OR kindness</code></li>
-
         <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
             <em>Example:</em> <code>hope -future</code></li>
-
         <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
             <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
-
         <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
             <em>Example:</em> <code>John 3:16</code></li>
       </ul>
-      <p><strong>Tip:</strong> You can combine these for powerful searches.<br>
+      <p><strong>Tip:</strong> Combine operators:<br>
          <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
     </div>
-  </div>
-
-<form method="get" class="search-form">
-  <div class="search-row">
-    <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
-    <button class="btn btn-primary">Search</button>
-
-    <!-- Help button stays inline -->
-    <button
-      class="btn btn-secondary help-toggle"
-      type="button"
-      data-target="#search-help-panel"
-    >
-      Help
-    </button>
-  </div>
-
-  <!-- Help panel lives OUTSIDE the row so it doesn't shrink the input -->
-  <div id="search-help-panel" class="help-panel">
-    <h3>How to Use Search Operators</h3>
-    <ul>
-      <li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
-          <em>Example:</em> <code>faith</code></li>
-      <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
-          <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
-      <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
-          <em>Example:</em> <code>love OR kindness</code></li>
-      <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
-          <em>Example:</em> <code>hope -future</code></li>
-      <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
-          <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
-      <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
-          <em>Example:</em> <code>John 3:16</code></li>
-    </ul>
-    <p><strong>Tip:</strong> Combine operators:<br>
-       <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
-  </div>
-</form>
-
 
     <div class="filter-row">
       {% for f in field_options %}
@@ -88,8 +50,7 @@
         </label>
       {% endfor %}
     </div>
-    
+
-  </div>
     <div class="muted small">Total entries: {{ total }}</div>
   </form>
 
@@ -101,40 +62,40 @@
   {% endif %}
 </div>
 
-<!-- Inline, scoped styles for the help dropdown -->
+<!-- Styles for the help panel -->
 <style>
-  .search-help { margin-bottom: 12px; }
+  .help-panel{
-  .help-toggle {
+    display:none;
-    background: var(--brand);
+    margin-top:10px;
-    color: #fff;
+    background:#fff;
-    border: none;
+    border:1px solid var(--border);
-    padding: 6px 10px;
+    border-radius:12px;
-    border-radius: 6px;
+    padding:14px;
-    cursor: pointer;
+    box-shadow:0 4px 16px rgba(0,0,0,.06);
-    font-size: 14px;
+    font-size:14px;
+    line-height:1.6;
   }
-  .help-toggle:hover { background: var(--brand-800); }
+  .help-panel.open{ display:block; }
-  .help-content {
+  .help-panel code{ background:#f3f4f6; padding:2px 4px; border-radius:4px; font-size:90%; }
-    display: none;
+  .help-panel h3{ margin:0 0 8px; font-size:16px; }
-    margin-top: 8px;
+  .help-panel ul{ margin:0 0 8px 18px; }
-    background: #fff;
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    padding: 12px;
-    font-size: 14px;
-    line-height: 1.5;
-  }
-  .help-content.open { display: block; }
-  .help-content code {
-    background: #f3f4f6;
-    padding: 2px 4px;
-    border-radius: 4px;
-    font-size: 90%;
-  }
-  .help-content h3 {
-    margin: 0 0 8px;
-    font-size: 16px;
-  }
-  .help-content ul { margin: 0 0 8px 18px; }
 </style>
+
+<!-- Inline JS to toggle the panel (click button to toggle, click away to close) -->
+<script>
+  document.addEventListener('click', function(e){
+    const btn = e.target.closest('.help-toggle');
+    if (btn) {
+      const panel = document.querySelector(btn.dataset.target || '#search-help-panel');
+      if (panel) panel.classList.toggle('open');
+      return;
+    }
+    const panel = document.querySelector('#search-help-panel');
+    if (!panel) return;
+    if (panel.classList.contains('open')) {
+      const clickedInside = panel.contains(e.target) || e.target.closest('.help-toggle');
+      if (!clickedInside) panel.classList.remove('open');
+    }
+  });
+</script>
 {% endblock %}