Make tabs into island

2026-03-12 22:37:54 +00:00
parent 12e02ac7ec
commit d148d59ec7
5 changed files with 80 additions and 94 deletions
--- a/core/static/css/gia-theme.css
+++ b/core/static/css/gia-theme.css
@@ -105,8 +105,15 @@ body .has-text-grey-light {
  color: var(--gia-text);
 }

-.tabs.is-boxed a {
-  border-radius: 0;
+.tabs.is-boxed a,
+.tabs.is-boxed li a,
+.tabs.is-boxed li:first-child a,
+.tabs.is-boxed li:last-child a {
+  border-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  border-end-end-radius: 0 !important;
 }

 .modal-card-head,
@@ -313,7 +320,7 @@ body.gia-has-workspace > .section.gia-workspace-page {
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
-  padding: 1rem;
+  padding: 0.85rem 1rem 0.7rem;
 }

 .gia-workspace-shell {
@@ -321,14 +328,14 @@ body.gia-has-workspace > .section.gia-workspace-page {
  min-height: 0;
  display: flex;
  flex-direction: column;
-  gap: 1rem;
+  gap: 0.55rem;
 }

 .gia-workspace-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
  align-items: stretch;
 }

@@ -342,10 +349,10 @@ body.gia-has-workspace > .section.gia-workspace-page {
  height: 100%;
  min-height: 0;
  overflow: hidden;
-  border-radius: 1rem;
-  border: 1px solid var(--gia-border);
-  background: var(--gia-surface-1);
-  box-shadow: var(--gia-shadow);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
 }

 .gia-snap-assistant {
@@ -393,26 +400,47 @@ body.gia-has-workspace > .section.gia-workspace-page {
 .gia-taskbar {
  flex: 0 0 auto;
  margin: 0;
-  border: 1px solid var(--gia-border);
-  border-radius: 1rem;
-  background: var(--gia-surface-1);
-  box-shadow: var(--gia-shadow);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
  overflow-x: auto;
  overflow-y: hidden;
+  padding: 0 0.35rem;
 }

-.gia-taskbar ul {
+.gia-workspace-tabs {
+  margin: 0;
+}
+
+.gia-workspace-tabs ul {
  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  justify-content: flex-start;
 }

-.gia-taskbar li {
+.gia-workspace-tabs li {
  flex: 0 0 auto;
 }

-.gia-taskbar a {
+.gia-workspace-tabs a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
+  white-space: nowrap;
+  border-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+}
+
+.gia-workspace-launcher {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  height: 100%;
 }

 .gia-taskbar li.is-active a {
@@ -443,9 +471,13 @@ html.gia-has-workspace-root {
 .gia-widget-panel {
  height: 100%;
  margin-bottom: 0;
-  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.9rem;
  border: 1px solid var(--gia-border);
  background: var(--gia-surface-2);
+  box-shadow: var(--gia-shadow);
+  overflow: hidden;
 }

 .gia-widget-heading {
@@ -456,6 +488,8 @@ html.gia-has-workspace-root {
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  line-height: 1.2;
+  border-bottom: 1px solid var(--gia-border);
+  background: var(--gia-surface-3);
 }

 .gia-widget-heading-main {
@@ -493,8 +527,8 @@ html.gia-has-workspace-root {
  min-height: 0;
  overflow: hidden;
  padding: 0.75rem;
-  display: flex !important;
-  align-items: stretch !important;
+  display: flex;
+  align-items: stretch;
 }

 .gia-widget-control {
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -43,7 +43,7 @@
    <link rel="preload" href="{% static 'vendor/fontawesome/webfonts/fa-regular-400.woff2' %}" as="font" type="font/woff2" integrity="sha512-qioT43fXB5q4Bbpn8sPQE9OIZLjKD0c0lVmpm6KmT8k34LM6gkRcOOMi1BOl2lohFG/7p9tzKfTP5G563BQq1g==" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}" integrity="sha512-yh2RE0wZCVZeysGiqTwDTO/dKelCbS9bP2L94UvOFtl/FKXcNAje3Y2oBg/ZMZ3LS1sicYk4dYVGtDex75fvvA==" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'vendor/fontawesome/css/all.css' %}" integrity="sha512-UKBBxJ5N3/MYiSsYTlEsARsp4vELKVRIklED4Mb6wpuVFOgy5Blt+sXUdz1TDReqWsm64xxBA2QoBJRCxI0x5Q==" crossorigin="anonymous">
-    <link rel="stylesheet" href="{% static 'css/gia-theme.css' %}" integrity="sha512-ySzeXoQreOo29Fv+kBiggvr2yLJEj4LO+Srcdw6rAENl1cAl6fzjVITZld1grkwMb+Hxe1jczo623coGQr0jsw==" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'css/gia-theme.css' %}" integrity="sha512-17wNDv0gA1saxAIzoySMcOef4/8dKEo2eZcWGhVHUjKolxhbfYVia9i/wExDqEw8MhfP4Kk8BrMajcOHngqJJg==" crossorigin="anonymous">
    {% block extra_head_assets %}{% endblock %}
    <script src="{% static 'js/htmx.min.js' %}" integrity="sha512-CGXFnDNv5q48ciFeIyWFcfZhqYW0sSBiPO+HZDO3XLM+p8xjhezz5CCxtkXVDKfCbvF+iUhel7xoeSp19o7x7g==" crossorigin="anonymous"></script>
    <script defer src="{% static 'js/remove-me.js' %}" integrity="sha512-uhE4kDw2+tXdJPDKSttOEYhVnwYq310+d5DMQnTjafJ58QLlYPyx0RTCNbjcrTiGfCjAhaQob4AumEUa2m3TaQ==" crossorigin="anonymous"></script>
--- a/core/templates/index.html
+++ b/core/templates/index.html
@@ -44,7 +44,7 @@
      </div>
      <nav
        id="gia-taskbar"
-        class="tabs is-boxed is-small gia-taskbar is-hidden"
+        class="tabs is-boxed is-small gia-workspace-tabs gia-taskbar is-hidden"
        aria-label="Open windows">
        <ul id="gia-taskbar-items">
        </ul>
--- a/core/templates/partials/osint-workspace-tabs-widget.html
+++ b/core/templates/partials/osint-workspace-tabs-widget.html
@@ -1,70 +1,22 @@
-<div class="osint-workspace-tabs">
-  <p class="is-size-7 has-text-weight-semibold" style="margin-bottom: 0.35rem;">
+<div class="gia-workspace-launcher">
+  <p class="is-size-7 has-text-weight-semibold mb-2">
    OSINT Workspace
  </p>
-  <p class="is-size-7 has-text-grey" style="margin-bottom: 0.5rem;">
-    One-line setup capsule. Each tab opens a fresh setup widget.
-  </p>
-
-  <div class="osint-capsule-row" role="tablist" aria-label="OSINT setup tabs">
+  <nav class="tabs is-boxed is-small gia-workspace-tabs" aria-label="OSINT setup tabs">
+    <ul>
      {% for tab in tabs %}
-      <button
-        type="button"
-        class="button osint-capsule-tab"
+        <li>
+          <a
+            href="{{ tab.widget_url }}"
            hx-get="{{ tab.widget_url }}"
            hx-target="#widgets-here"
            hx-swap="beforeend"
            title="Open {{ tab.label }} setup widget">
            <span class="icon is-small"><i class="{{ tab.icon }}"></i></span>
            <span>{{ tab.label }}</span>
-      </button>
+          </a>
+        </li>
      {% endfor %}
-  </div>
+    </ul>
+  </nav>
 </div>
-
-<style>
-  .osint-capsule-row {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    gap: 0.35rem;
-    width: 100%;
-    overflow-x: auto;
-    padding: 0.3rem;
-    border-radius: 999px;
-    border: 1px solid rgba(0, 0, 0, 0.16);
-    background: linear-gradient(180deg, rgba(248, 250, 254, 0.95), rgba(255, 255, 255, 0.96));
-  }
-
-  .osint-capsule-tab {
-    border-radius: 999px;
-    border: 1px solid rgba(0, 0, 0, 0.14);
-    background: #fff;
-    box-shadow: none;
-    white-space: nowrap;
-    min-height: 2rem;
-    padding-left: 0.7rem;
-    padding-right: 0.7rem;
-    font-weight: 600;
-  }
-
-  .osint-capsule-tab:hover,
-  .osint-capsule-tab:focus-visible {
-    border-color: rgba(50, 115, 220, 0.5);
-    color: #2f67b2;
-  }
-
-  @media (max-width: 768px) {
-    .osint-capsule-row {
-      gap: 0.28rem;
-      padding: 0.25rem;
-    }
-
-    .osint-capsule-tab {
-      min-height: 1.82rem;
-      padding-left: 0.55rem;
-      padding-right: 0.55rem;
-      font-size: 0.76rem;
-    }
-  }
-</style>
--- a/vendor/django-crud-mixins/mixins/templates/mixins/wm/widget.html
+++ b/vendor/django-crud-mixins/mixins/templates/mixins/wm/widget.html
@@ -5,8 +5,8 @@
  {% if widget_script_srcs %}data-gia-script-srcs="{{ widget_script_srcs|join:'|' }}"{% endif %}>
  <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% if widget_options is None %}gs-w="6" gs-h="1" gs-y="20" gs-x="0"{% else %}{% autoescape off %}{{ widget_options }}{% endautoescape %}{% endif %}{% endblock %}>
    <div class="grid-stack-item-content">
-      <nav class="panel gia-widget-panel">
-        <p class="panel-heading gia-widget-heading">
+      <section class="gia-widget-panel">
+        <header class="gia-widget-heading">
          <span class="gia-widget-heading-main">
            <span class="icon is-small gia-widget-heading-icon">
              <i class="{{ widget_icon|default:'fa-solid fa-window-maximize' }}"></i>
@@ -54,15 +54,15 @@
              {% include 'mixins/partials/close-widget.html' %}
            {% endblock %}
          </span>
-        </p>
-        <article class="panel-block is-active gia-widget-body">
+        </header>
+        <div class="gia-widget-body">
          <div class="control gia-widget-control{% if widget_control_class %} {{ widget_control_class }}{% endif %}">
            {% block panel_content %}
              {% include window_content %}
            {% endblock %}
          </div>
-        </article>
-      </nav>
+        </div>
+      </section>
    </div>
  </div>
 </div>