From 9f808c43ee0559e390a8034ef4bc1e96a6da7b59 Mon Sep 17 00:00:00 2001
From: Mark Veidemanis <m@zm.is>
Date: Thu, 21 Jul 2022 13:52:17 +0100
Subject: [PATCH] Put all Insights elements into boxes

---
 core/templates/ui/insights/channels.html |  35 ++--
 core/templates/ui/insights/info.html     | 207 +++++++++++------------
 core/templates/ui/insights/insights.html |   4 +
 core/templates/ui/insights/meta.html     |  29 ++--
 core/templates/ui/insights/nicks.html    |  31 ++--
 5 files changed, 140 insertions(+), 166 deletions(-)

diff --git a/core/templates/ui/insights/channels.html b/core/templates/ui/insights/channels.html
index 1509ed5..eee24a1 100644
--- a/core/templates/ui/insights/channels.html
+++ b/core/templates/ui/insights/channels.html
@@ -1,23 +1,16 @@
 <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>
-        <span
-          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-          hx-post="{% url 'modal_drilldown' %}"
-          hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
-          hx-target="#modals-here" 
-          hx-trigger="click"
-          class="button is-small">
-          {{ chan }}
-        </span>
-      </a>
-    {% endfor %}
-  </div>
+  {% for chan in chans %}
+    <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' %}"
+      hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
+      hx-target="#modals-here" 
+      hx-trigger="click"
+      class="button is-small">
+      {{ chan }}
+    </span>
+  {% endfor %}
 </div>
\ No newline at end of file
diff --git a/core/templates/ui/insights/info.html b/core/templates/ui/insights/info.html
index 366523e..207a8a4 100644
--- a/core/templates/ui/insights/info.html
+++ b/core/templates/ui/insights/info.html
@@ -1,112 +1,105 @@
 {% 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">
-            <tbody>
-              <tr>
-                <th>src</th>
-                <td>
-                  {% if item.src == 'irc' %}
-                    <span class="icon" data-tooltip="IRC">
-                      <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
-                    </span>
-                    IRC
-                  {% elif item.src == 'dis' %}
-                    <span class="icon" data-tooltip="Discord">
-                      <i class="fa-brands fa-discord" aria-hidden="true"></i>
-                    </span>
-                    Discord
-                  {% endif %}
-                </td>
-              </tr>
-              <tr>
-                <th>nick</th>
-                <td>
-                  {% if item.online is True %}
-                    <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
-                      <i class="fa-solid fa-circle"></i>
-                    </span>
-                    {{ item.nick }}
-                  {% elif item.online is False %}
-                    <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
-                      <i class="fa-solid fa-circle"></i>
-                    </span>
-                    {{ item.nick }}
-                  {% else %}
-                    <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
-                      <i class="fa-solid fa-circle"></i>
-                    </span>
-                    {{ item.nick }}
-                  {% endif %}
-                  {% if item.num_chans is not None %}
-                    <span class="tag">
-                      {{ item.num_chans }}
-                    </span>
-                  {% endif %}
-                </td>
-              </tr>
-              <tr>
-                <th>host</th>
-                <td>{{ item.host }}</td>
-              </tr>
-              <tr>
-                <th>actions</th>
-                <td>
-                  {% if item.src == 'irc' %}
-                    <button
-                      hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-                      hx-post="{% url 'modal_insights' %}"
-                      hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
-                      hx-target="#modals-here" 
-                      hx-trigger="click"
-                      class="button is-small">
-                      Information
-                    </button>
-                  {% endif %}
-                </td>
-              </tr>
-              <tr>
-                <th>net</th>
-                <td>{{ item.net }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      {% endif %}
+  {% if item is not None %}
+    <div class="table-container">
+      <table class="table is-fullwidth is-hoverable">
+        <tbody>
+          <tr>
+            <th>src</th>
+            <td>
+              {% if item.src == 'irc' %}
+                <span class="icon" data-tooltip="IRC">
+                  <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+                </span>
+                IRC
+              {% elif item.src == 'dis' %}
+                <span class="icon" data-tooltip="Discord">
+                  <i class="fa-brands fa-discord" aria-hidden="true"></i>
+                </span>
+                Discord
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th>nick</th>
+            <td>
+              {% if item.online is True %}
+                <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
+                  <i class="fa-solid fa-circle"></i>
+                </span>
+                {{ item.nick }}
+              {% elif item.online is False %}
+                <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
+                  <i class="fa-solid fa-circle"></i>
+                </span>
+                {{ item.nick }}
+              {% else %}
+                <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
+                  <i class="fa-solid fa-circle"></i>
+                </span>
+                {{ item.nick }}
+              {% endif %}
+              {% if item.num_chans is not None %}
+                <span class="tag">
+                  {{ item.num_chans }}
+                </span>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th>host</th>
+            <td>{{ item.host }}</td>
+          </tr>
+          <tr>
+            <th>actions</th>
+            <td>
+              {% if item.src == 'irc' %}
+                <button
+                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+                  hx-post="{% url 'modal_insights' %}"
+                  hx-vals='{"net": "{{ item.net }}", "nick": "{{ item.nick }}", "channel": "{{ item.channel }}"}'
+                  hx-target="#modals-here" 
+                  hx-trigger="click"
+                  class="button is-small">
+                  Information
+                </button>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <th>net</th>
+            <td>{{ item.net }}</td>
+          </tr>
+        </tbody>
+      </table>
     </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>
+  {% endif %}
 </div>
\ No newline at end of file
diff --git a/core/templates/ui/insights/insights.html b/core/templates/ui/insights/insights.html
index b6b3140..fea6c1e 100644
--- a/core/templates/ui/insights/insights.html
+++ b/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>
diff --git a/core/templates/ui/insights/meta.html b/core/templates/ui/insights/meta.html
index 9f7d407..1e34fdf 100644
--- a/core/templates/ui/insights/meta.html
+++ b/core/templates/ui/insights/meta.html
@@ -1,21 +1,12 @@
 <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' %}"
-        hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
-        hx-target="#modals-here" 
-        hx-trigger="click"
-        class="button is-small">
-        bbb
-      </span>
-    </a>
-  </div>
+  <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
+  <span
+    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+    hx-post="{% url 'modal_drilldown' %}"
+    hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
+    hx-target="#modals-here" 
+    hx-trigger="click"
+    class="button is-small">
+    bbb
+  </span>
 </div>
\ No newline at end of file
diff --git a/core/templates/ui/insights/nicks.html b/core/templates/ui/insights/nicks.html
index 8486f66..f174669 100644
--- a/core/templates/ui/insights/nicks.html
+++ b/core/templates/ui/insights/nicks.html
@@ -1,21 +1,14 @@
 <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>
-      <span
-        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
-        hx-post="{% url 'modal_drilldown' %}"
-        hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
-        hx-target="#modals-here" 
-        hx-trigger="click"
-        class="button is-small">
-        aaa
-      </span>
-    </a>
-  </div>
+  <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' %}"
+    hx-vals='{"net": "{{ net }}", "nick": "{{ nick }}", "channel": "{{ chan }}"}'
+    hx-target="#modals-here" 
+    hx-trigger="click"
+    class="button is-small">
+    aaa
+  </span>
 </div>
\ No newline at end of file