fix: layout improvement after merge
This commit is contained in:
@@ -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">↻</span>
|
||||
<span id="search-spinner" class="htmx-indicator search-spinner"></span>
|
||||
</div>
|
||||
<div id="search-results-container"></div>
|
||||
</div>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user