Put all Insights elements into boxes

core/templates/ui/insights/channels.html

@@ -1,10 +1,5 @@
 <div id="channels">
-  <div class="panel is-primary" style="max-height: 30em; overflow: auto">
-    <p class="panel-heading">
-      Channels
-    </p>
   {% for chan in chans %}
-      <a class="panel-block is-active">
     <span class="panel-icon">
       <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
     </span>
@@ -17,7 +12,5 @@
       class="button is-small">
       {{ chan }}
     </span>
-      </a>
   {% endfor %}
 </div>
-</div>

core/templates/ui/insights/info.html

@@ -1,11 +1,33 @@
 {% load static %}
 {% load index %}
+<div
+  style="display: none;"
+  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+  hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
+  hx-post="{% url 'chans_insights' %}"
+  hx-trigger="load"
+  hx-target="#channels"
+  hx-swap="outerHTML">
+</div>
+<div
+  style="display: none;"
+  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+  hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
+  hx-post="{% url 'nicks_insights' %}"
+  hx-trigger="load"
+  hx-target="#nicks"
+  hx-swap="outerHTML">
+</div>
+<div
+  style="display: none;"
+  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+  hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
+  hx-post="{% url 'meta_insights' %}"
+  hx-trigger="load"
+  hx-target="#meta"
+  hx-swap="outerHTML">
+</div>
 <div id="info">
-  <div class="panel is-primary">
-    <p class="panel-heading">
-      Information
-    </p>
-    <div class="panel-block is-active">
   {% if item is not None %}
     <div class="table-container">
       <table class="table is-fullwidth is-hoverable">
@@ -81,32 +103,3 @@
     </div>
   {% endif %}
 </div>
-    <div
-      style="display: none;"
-      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-      hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
-      hx-post="{% url 'chans_insights' %}"
-      hx-trigger="load"
-      hx-target="#channels"
-      hx-swap="outerHTML">
-    </div>
-    <div
-      style="display: none;"
-      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-      hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
-      hx-post="{% url 'nicks_insights' %}"
-      hx-trigger="load"
-      hx-target="#nicks"
-      hx-swap="outerHTML">
-    </div>
-    <div
-      style="display: none;"
-      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-      hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}"}'
-      hx-post="{% url 'meta_insights' %}"
-      hx-trigger="load"
-      hx-target="#meta"
-      hx-swap="outerHTML">
-    </div>
-  </div>
-</div>

core/templates/ui/insights/insights.html

@@ -75,6 +75,7 @@
         </div>
         <div class="tile is-parent">
           <article class="tile is-child box">
+            <h5 class="subtitle is-5">Nicks</h5>
             <div id="nicks"></div>
           </article>
         </div>
@@ -82,12 +83,14 @@
       <div class="tile">
         <div class="tile is-parent is-vertical">
           <article class="tile is-child box">
+            <h5 class="subtitle is-5">Info</h5>
             <div id="info"></div>
           </article>
 
         </div>
         <div class="tile is-parent">
           <article class="tile is-child box">
+            <h5 class="subtitle is-5">Meta</h5>
             <div id="meta"></div>
           </article>
         </div>
@@ -95,6 +98,7 @@
     </div>
     <div class="tile is-parent">
       <article class="tile is-child box">
+        <h5 class="subtitle is-5">Channels</h5>
         <div id="channels"></div>
       </article>
     </div>

core/templates/ui/insights/meta.html

@@ -1,12 +1,5 @@
 <div id="meta">
-  <div class="panel is-primary" style="max-height: 30em; overflow: auto">
-    <p class="panel-heading">
-      Meta
-    </p>
-    <a class="panel-block is-active">
-      <span class="panel-icon">
   <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
-      </span>
   <span
     hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
     hx-post="{% url 'modal_drilldown' %}"
@@ -16,6 +9,4 @@
     class="button is-small">
     bbb
   </span>
-    </a>
-  </div>
 </div>

core/templates/ui/insights/nicks.html

@@ -1,9 +1,4 @@
 <div id="nicks">
-  <div class="panel is-primary" style="max-height: 30em; overflow: auto">
-    <p class="panel-heading">
-      Nicks
-    </p>
-    <a class="panel-block is-active">
   <span class="panel-icon">
     <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
   </span>
@@ -16,6 +11,4 @@
     class="button is-small">
     aaa
   </span>
-    </a>
-  </div>
 </div>