XF/GIA
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Make tabs into island

Browse Source
This commit is contained in:
Mark Veidemanis
2026-03-12 22:37:54 +00:00
parent 12e02ac7ec
commit d148d59ec7
5 changed files with 80 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/templates/base.html
View File

@@ -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>

2
core/templates/index.html
View File

@@ -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>

86
core/templates/partials/osint-workspace-tabs-widget.html
View File

@@ -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">
{% for tab in tabs %}
<button
type="button"
class="button osint-capsule-tab"
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>
{% endfor %}
</div>
<nav class="tabs is-boxed is-small gia-workspace-tabs" aria-label="OSINT setup tabs">
<ul>
{% for tab in tabs %}
<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>
</a>
</li>
{% endfor %}
</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>