Reformat and fix panel inclusion

core/templates/ui/drilldown/drilldown.html

@@ -53,50 +53,42 @@
       htmx.trigger("#search", "click");
     }
   </script>
+
   <div class="grid-stack">
     <div class="grid-stack-item" gs-w="7" gs-h="10" gs-y="0" gs-x="1">
-        <div class="grid-stack-item-content">
-          <nav class="panel">
-            <p class="panel-heading" style="padding: .2em; line-height: .5em;">
-              <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
-              Search
-            </p>
-            <article class="panel-block is-active">
-              {% include 'ui/drilldown/search_partial.html' %}
-            </article>
-          </nav>
+      <div class="grid-stack-item-content">
+        <nav class="panel">
+          <p class="panel-heading" style="padding: .2em; line-height: .5em;">
+            <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
+            Search
+          </p>
+          <article class="panel-block is-active">
+            {% include 'ui/drilldown/search_partial.html' %}
+          </article>
+        </nav>
+      </div>
     </div>
     <div class="grid-stack-item" gs-w="10" gs-h="40" gs-y="10" gs-x="1">
       <div class="grid-stack-item-content">
-        
-          <nav class="panel">
-            <p class="panel-heading" style="padding: .2em; line-height: .5em;">
-              <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
-              Results
-            </p>
-            <div class="panel-block is-active">
-              <div class="control">
-                <div id="results">
-                  {% include 'ui/drilldown/table_results.html' %}
-                </div>
-              </div>
-            </div>
-          </nav>
+        <div id="results">
+          {% include 'ui/drilldown/table_results.html' %}
+        </div>
       </div>
     </div>
   </div>
   <div id="modals-here">
   </div>
   <script>
-    setupTags();
     var grid = GridStack.init({
       cellHeight: 20,
-      // cellWidth: 50,
+      cellWidth: 50,
       auto: true,
       float: true,
       draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
       removable: false,
     });
+    // GridStack.init();
+    setupTags();
 
   </script>
-{% endblock outer_content %}
+{% endblock %}

core/templates/ui/drilldown/search_partial.html

@@ -183,61 +183,65 @@
           </div>
           <div class="control">
             <label class="radio button has-text-link">
-              <input type="radio"
-                    value="below"
-                    class="sentiment-radio"
-                    {% if params.sentiment_method == 'below' %}
-                      checked
-                    {% endif %}
-                    name="sentiment_method"
-                    {% if params.check_sentiment != "on" %}
-                      disabled
-                    {% endif %}>
+              <input
+                type="radio"
+                value="below"
+                class="sentiment-radio"
+                {% if params.sentiment_method == 'below' %}
+                  checked
+                {% endif %}
+                name="sentiment_method"
+                {% if params.check_sentiment != "on" %}
+                  disabled
+                {% endif %}>
               <span class="icon" data-tooltip="Below">
                 <i class="fa-solid fa-face-frown"></i>
               </span>
             </label>
             <label class="radio button has-text-link is-hidden">
-              <input type="radio"
-                    value="exact"
-                    class="sentiment-radio"
-                    {% if params.sentiment_method == 'exact' %}
-                      checked
-                    {% endif %}
-                    name="sentiment_method"
-                    {% if params.check_sentiment != "on" %}
-                      disabled
-                    {% endif %}>
+              <input
+                type="radio"
+                value="exact"
+                class="sentiment-radio"
+                {% if params.sentiment_method == 'exact' %}
+                  checked
+                {% endif %}
+                name="sentiment_method"
+                {% if params.check_sentiment != "on" %}
+                  disabled
+                {% endif %}>
               <span class="icon" data-tooltip="Exact">
                 <i class="fa-solid fa-face-smile"></i>
               </span>
             </label>
             <label class="radio button has-text-link">
-              <input type="radio"
-                    value="above"
-                    class="sentiment-radio"
-                    {% if params.sentiment_method == 'above' %}
-                      checked
-                    {% endif %}
-                    name="sentiment_method"
-                    {% if params.check_sentiment != "on" %}
-                      disabled
-                    {% endif %}>
+              <input
+                type="radio"
+                value="above"
+                class="sentiment-radio"
+                {% if params.sentiment_method == 'above' %}
+                  checked
+                {% endif %}
+                name="sentiment_method"
+                {% if params.check_sentiment != "on" %}
+                  disabled
+                {% endif %}>
               <span class="icon" data-tooltip="Above">
                 <i class="fa-solid fa-face-smile"></i>
               </span>
             </label>
             <label class="radio button has-text-link">
-              <input type="radio"
-                    value="nonzero"
-                    class="sentiment-radio"
-                    {% if params.sentiment_method == 'nonzero' %}
-                      checked
-                    {% endif %}
-                    name="sentiment_method"
-                    {% if params.check_sentiment != "on" %}
-                      disabled
-                    {% endif %}>
+              <input
+                type="radio"
+                value="nonzero"
+                class="sentiment-radio"
+                {% if params.sentiment_method == 'nonzero' %}
+                  checked
+                {% endif %}
+                name="sentiment_method"
+                {% if params.check_sentiment != "on" %}
+                  disabled
+                {% endif %}>
               <span class="icon" data-tooltip="Nonzero">
                 <i class="fa-solid fa-face-meh-blank"></i>
               </span>
@@ -311,31 +315,39 @@
           </div>
           <div class="control">
             <label class="radio button has-text-link">
-              <input type="radio" value="desc" name="sorting"
-                    {% if params.sorting == None %}
-                      checked
-                    {% elif params.sorting == 'desc' %}
-                      checked
-                    {% endif %}
-              >
+              <input
+                type="radio"
+                value="desc"
+                name="sorting"
+                {% if params.sorting == None %}
+                  checked
+                {% elif params.sorting == 'desc' %}
+                  checked
+                {% endif %}>
               <span class="icon" data-tooltip="Sort descending">
                 <i class="fa-solid fa-sort-down"></i>
               </span>
             </label>
             <label class="radio button">
-              <input type="radio" value="asc" name="sorting"
-                    {% if params.sorting == 'asc' %}
-                      checked
-                    {% endif %}>
+              <input
+                type="radio"
+                value="asc"
+                name="sorting"
+                {% if params.sorting == 'asc' %}
+                  checked
+                {% endif %}>
               <span class="icon" data-tooltip="Sort ascending">
                 <i class="fa-solid fa-sort-up"></i>
               </span>
             </label>
             <label class="radio button">
-              <input type="radio" value="none" name="sorting"
-                    {% if params.sorting == 'none' %}
-                      checked
-                    {% endif %}>
+              <input
+                type="radio"
+                value="none"
+                name="sorting"
+                {% if params.sorting == 'none' %}
+                  checked
+                {% endif %}>
               <span class="icon" data-tooltip="No sort">
                 <i class="fa-solid fa-sort"></i>
               </span>
@@ -417,5 +429,4 @@
       value="{{ params.tags }}">
   </div>
   <div class="is-hidden"></div>
-  </div>
 </form>

core/templates/ui/drilldown/sentiment_partial.html

@@ -0,0 +1,13 @@
+
+<div style="display: none" id="jsonData" data-json="{{ data }}">
+</div>
+<div class="grid-stack-item" gs-w="10" gs-h="40" gs-y="10" gs-x="1">
+    <div class="grid-stack-item-content">
+      {% if params.index != 'int' and params.index != 'meta' %}
+      <div style="height: 30rem" id="sentiment-container" {% if params.show_sentiment is None %} class="is-hidden" {% endif %}>
+        <canvas id="sentiment-chart"></canvas>
+      </div>
+      <script src="{% static 'chart.js' %}"></script>
+    {% endif %}
+  </div>
+</div>

core/templates/ui/drilldown/table_results.html

@@ -5,53 +5,42 @@
 
 {% if table %}
   <script src="{% static 'js/column-shifter.js' %}"></script>
-  <div style="display: none" id="jsonData" data-json="{{ data }}">
-  </div>
+  <div class="panel">
+    <p class="panel-heading" style="padding: .2em; line-height: .5em;">
+      <i
+        class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
 
-  <div class="has-text-grey-light nowrap-parent">
-    <div class="nowrap-child block">
-      <span class="icon" data-tooltip="{{ card }} hits total">
+      <span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
         <i class="fa-solid fa-chart-mixed"></i>
       </span>
-    </div>
-    <div class="nowrap-child">
-      <p>{{ table.data|length }} hits in {{ took }}ms</p>
-    </div>
-    {% if exemption is not None %}
-      <div class="nowrap-child">
-        <span class="icon" data-tooltip="God mode">
+
+      {{ table.data|length }} hits in {{ took }}ms
+      {% if exemption is not None %}
+        <span class="icon has-tooltip-bottom" data-tooltip="God mode">
           <i class="fa-solid fa-book-bible"></i>
         </span>
-      </div>
-    {% else %}
-      {% if redacted != 0 %}
-        <div class="nowrap-child">
-          <span class="icon" data-tooltip="{{ redacted }} redacted">
+      {% else %}
+        {% if redacted != 0 %}
+          <span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
             <i class="fa-solid fa-mask"></i>
           </span>
-        </div>
+        {% endif %}
       {% endif %}
-    {% endif %}
-    {% if delay is not None %}
-      <div class="nowrap-child">
-        <span class="icon" data-tooltip="delayed by {{ delay }} days">
+      {% if delay is not None %}
+        <span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
           <i class="fa-solid fa-clock"></i>
         </span>
-      </div>
-    {% endif %}
-    {% if randomised is True %}
-      <div class="nowrap-child">
-        <span class="icon" data-tooltip="integer fields randomised">
+      {% endif %}
+      {% if randomised is True %}
+        <span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
           <i class="fa-solid fa-shuffle"></i>
         </span>
+      {% endif %}
+    </p>
+    <div class="panel-block is-active">
+      <div class="control">
+        {% include 'ui/drilldown/table_results_partial.html' %}
       </div>
-    {% endif %}
-  </div>
-  {% if params.index != 'int' and params.index != 'meta' %}
-    <div style="height: 30rem" id="sentiment-container" {% if params.show_sentiment is None %} class="is-hidden" {% endif %}>
-      <canvas id="sentiment-chart"></canvas>
     </div>
-    <script src="{% static 'chart.js' %}"></script>
-  {% endif %}
-  {% include 'ui/drilldown/table_results_partial.html' %}
+  </div>
 {% endif %}