fix: layout improvement after merge

This commit is contained in:
Lorenzo Venerandi
2026-02-28 19:42:15 +01:00
parent fad4f71fce
commit 4900c3dd49
9 changed files with 194 additions and 81 deletions

View File

@@ -47,7 +47,7 @@
hx-target="#search-results-container"
hx-swap="innerHTML"
hx-indicator="#search-spinner" />
<span id="search-spinner" class="htmx-indicator search-spinner">&#8635;</span>
<span id="search-spinner" class="htmx-indicator search-spinner"></span>
</div>
<div id="search-results-container"></div>
</div>

View File

@@ -64,23 +64,11 @@
</div>
<div class="ip-info-section">
<h3>Location</h3>
{% if stats.city %}
<h3>Geo & Network</h3>
{% if stats.city or stats.country %}
<div class="stat-row">
<span class="stat-label-sm">City:</span>
<span class="stat-value-sm">{{ stats.city | e }}</span>
</div>
{% endif %}
{% if stats.region_name %}
<div class="stat-row">
<span class="stat-label-sm">Region:</span>
<span class="stat-value-sm">{{ stats.region_name | e }}</span>
</div>
{% endif %}
{% if stats.country %}
<div class="stat-row">
<span class="stat-label-sm">Country:</span>
<span class="stat-value-sm">{{ stats.country | e }} ({{ stats.country_code | default('') | e }})</span>
<span class="stat-label-sm">Location:</span>
<span class="stat-value-sm">{{ stats.city | default('') | e }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) | e }}</span>
</div>
{% endif %}
{% if stats.timezone %}
@@ -89,10 +77,6 @@
<span class="stat-value-sm">{{ stats.timezone | e }}</span>
</div>
{% endif %}
</div>
<div class="ip-info-section">
<h3>Network</h3>
{% if stats.isp %}
<div class="stat-row">
<span class="stat-label-sm">ISP:</span>
@@ -120,7 +104,7 @@
</div>
<div class="ip-info-section">
<h3>Flags & Reputation</h3>
<h3>Reputation</h3>
{% set flags = [] %}
{% if stats.is_proxy %}{% set _ = flags.append('Proxy') %}{% endif %}
{% if stats.is_hosting %}{% set _ = flags.append('Hosting') %}{% endif %}
@@ -136,16 +120,16 @@
{% endif %}
{% if stats.reputation_score is not none %}
<div class="stat-row">
<span class="stat-label-sm">Reputation:</span>
<span class="stat-label-sm">Score:</span>
<span class="stat-value-sm reputation-score {% if stats.reputation_score <= 30 %}bad{% elif stats.reputation_score <= 60 %}medium{% else %}good{% endif %}">
{{ stats.reputation_score }}/100
</span>
</div>
{% endif %}
{% if stats.blocklist_memberships %}
<div class="stat-row" style="flex-direction: column; align-items: flex-start; gap: 8px;">
<div class="stat-row" style="flex-direction: column; align-items: flex-start; gap: 6px;">
<span class="stat-label-sm">Listed On:</span>
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
<div class="blocklist-badges">
{% for bl in stats.blocklist_memberships %}
<span class="reputation-badge">{{ bl | e }}</span>
{% endfor %}
@@ -184,7 +168,7 @@
{% if stats.category_history %}
<div class="table-container">
<h2>Behavior Timeline</h2>
<div class="timeline">
<div class="timeline ip-timeline-scroll">
{% for entry in stats.category_history %}
<div class="timeline-item">
<div class="timeline-marker {{ entry.new_category | default('unknown') | replace('_', '-') }}"></div>
@@ -240,7 +224,7 @@
const scores = {{ stats.category_scores | tojson }};
const container = document.getElementById('ip-radar-chart');
if (container && typeof generateRadarChart === 'function') {
container.innerHTML = generateRadarChart(scores, 220, true);
container.innerHTML = generateRadarChart(scores, 220, true, 'side');
}
{% endif %}

View File

@@ -48,23 +48,11 @@
</div>
<div class="ip-info-section">
<h3>Location</h3>
{% if stats.city %}
<h3>Geo & Network</h3>
{% if stats.city or stats.country %}
<div class="stat-row">
<span class="stat-label-sm">City:</span>
<span class="stat-value-sm">{{ stats.city | e }}</span>
</div>
{% endif %}
{% if stats.region_name %}
<div class="stat-row">
<span class="stat-label-sm">Region:</span>
<span class="stat-value-sm">{{ stats.region_name | e }}</span>
</div>
{% endif %}
{% if stats.country %}
<div class="stat-row">
<span class="stat-label-sm">Country:</span>
<span class="stat-value-sm">{{ stats.country | e }} ({{ stats.country_code | default('') | e }})</span>
<span class="stat-label-sm">Location:</span>
<span class="stat-value-sm">{{ stats.city | default('') | e }}{% if stats.city and stats.country %}, {% endif %}{{ stats.country | default(stats.country_code | default('')) | e }}</span>
</div>
{% endif %}
{% if stats.timezone %}
@@ -73,10 +61,6 @@
<span class="stat-value-sm">{{ stats.timezone | e }}</span>
</div>
{% endif %}
</div>
<div class="ip-info-section">
<h3>Network</h3>
{% if stats.isp %}
<div class="stat-row">
<span class="stat-label-sm">ISP:</span>
@@ -104,7 +88,7 @@
</div>
<div class="ip-info-section">
<h3>Flags & Reputation</h3>
<h3>Reputation</h3>
{% set flags = [] %}
{% if stats.is_proxy %}{% set _ = flags.append('Proxy') %}{% endif %}
{% if stats.is_hosting %}{% set _ = flags.append('Hosting') %}{% endif %}
@@ -120,16 +104,16 @@
{% endif %}
{% if stats.reputation_score is not none %}
<div class="stat-row">
<span class="stat-label-sm">Reputation:</span>
<span class="stat-label-sm">Score:</span>
<span class="stat-value-sm reputation-score {% if stats.reputation_score <= 30 %}bad{% elif stats.reputation_score <= 60 %}medium{% else %}good{% endif %}">
{{ stats.reputation_score }}/100
</span>
</div>
{% endif %}
{% if stats.blocklist_memberships %}
<div class="stat-row" style="flex-direction: column; align-items: flex-start; gap: 8px;">
<div class="stat-row" style="flex-direction: column; align-items: flex-start; gap: 6px;">
<span class="stat-label-sm">Listed On:</span>
<div style="display: flex; flex-wrap: wrap; gap: 6px;">
<div class="blocklist-badges">
{% for bl in stats.blocklist_memberships %}
<span class="reputation-badge">{{ bl | e }}</span>
{% endfor %}
@@ -163,7 +147,7 @@
{% if stats.category_history %}
<div class="table-container">
<h2>Behavior Timeline</h2>
<div class="timeline">
<div class="timeline ip-timeline-scroll">
{% for entry in stats.category_history %}
<div class="timeline-item">
<div class="timeline-marker {{ entry.new_category | default('unknown') | replace('_', '-') }}"></div>
@@ -208,7 +192,7 @@
const scores = {{ stats.category_scores | tojson }};
const container = document.getElementById('insight-radar-chart');
if (container && typeof generateRadarChart === 'function') {
container.innerHTML = generateRadarChart(scores, 220, true);
container.innerHTML = generateRadarChart(scores, 220, true, 'side');
}
{% endif %}

View File

@@ -24,6 +24,7 @@
<th>Location</th>
<th>ISP / ASN</th>
<th>Last Seen</th>
<th style="width: 40px;"></th>
</tr>
</thead>
<tbody>
@@ -40,7 +41,7 @@
<td>{{ ip.total_requests }}</td>
<td>
{% if ip.category %}
<span class="category-badge category-{{ ip.category | default('unknown') | replace(' ', '-') | lower }}">
<span class="category-badge category-{{ ip.category | default('unknown') | replace('_', '-') | lower }}">
{{ ip.category | e }}
</span>
{% else %}
@@ -50,9 +51,14 @@
<td>{{ ip.city | default('') | e }}{% if ip.city and ip.country_code %}, {% endif %}{{ ip.country_code | default('N/A') | e }}</td>
<td>{{ ip.isp | default(ip.asn_org | default('N/A')) | e }}</td>
<td>{{ ip.last_seen | format_ts }}</td>
<td>
<button class="inspect-btn" @click="openIpInsight('{{ ip.ip | e }}')" title="Inspect IP">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"/></svg>
</button>
</td>
</tr>
<tr class="ip-stats-row" style="display: none;">
<td colspan="7" class="ip-stats-cell">
<td colspan="8" class="ip-stats-cell">
<div class="ip-stats-dropdown">
<div class="loading">Loading stats...</div>
</div>

View File

@@ -31,7 +31,7 @@
{% for item in items %}
<tr>
<td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
<td style="font-size: 11px; word-break: break-all; max-width: 400px;">{{ item.user_agent | e }}</td>
<td>{{ item.user_agent | e }}</td>
<td>{{ item.count }}</td>
</tr>
{% else %}