Malin/krawl.es
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance view request button with tooltip and SVG icon for better UX

Browse Source
This commit is contained in:
Lorenzo Venerandi
2026-03-04 13:50:33 +01:00
parent 9cb9cb28b8
commit 8321164514
5 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/templates/jinja2/dashboard/partials/access_by_ip_table.html
View File

@@ -45,7 +45,10 @@
<td>{{ log.timestamp | format_ts }}</td>
<td>
{% if log.id %}
<button class="view-btn" @click="viewRawRequest({{ log.id }})">View Request</button>
<button class="view-btn" @click="viewRawRequest({{ log.id }})" title="View Request">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
<span class="view-btn-tooltip">View Request</span>
</button>
{% endif %}
</td>
</tr>

5
src/templates/jinja2/dashboard/partials/attack_types_table.html
View File

@@ -62,7 +62,10 @@
<td>{{ attack.timestamp | format_ts }}</td>
<td style="display: flex; gap: 6px; flex-wrap: wrap;">
{% if attack.log_id %}
<button class="view-btn" @click="viewRawRequest({{ attack.log_id }})">View Request</button>
<button class="view-btn" @click="viewRawRequest({{ attack.log_id }})" title="View Request">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
<span class="view-btn-tooltip">View Request</span>
</button>
{% endif %}
<button class="inspect-btn" @click="openIpInsight('{{ attack.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>

5
src/templates/jinja2/dashboard/partials/search_results.html
View File

@@ -118,7 +118,10 @@
<td>{{ attack.timestamp | format_ts }}</td>
<td>
{% if attack.log_id %}
<button class="view-btn" @click="viewRawRequest({{ attack.log_id }})">View Request</button>
<button class="view-btn" @click="viewRawRequest({{ attack.log_id }})" title="View Request">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
<span class="view-btn-tooltip">View Request</span>
</button>
{% endif %}
</td>
</tr>

5
src/templates/jinja2/dashboard/partials/suspicious_table.html
View File

@@ -26,7 +26,10 @@
<td>{{ activity.timestamp | format_ts(time_only=True) }}</td>
<td style="display: flex; gap: 6px; flex-wrap: wrap;">
{% if activity.log_id %}
<button class="view-btn" @click="viewRawRequest({{ activity.log_id }})">View Request</button>
<button class="view-btn" @click="viewRawRequest({{ activity.log_id }})" title="View Request">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M9.4 16.6 4.8 12l4.6-4.6L8 6l-6 6 6 6zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6z"/></svg>
<span class="view-btn-tooltip">View Request</span>
</button>
{% endif %}
<button class="inspect-btn" @click="openIpInsight('{{ activity.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>

40
src/templates/static/css/dashboard.css
View File

@@ -1603,19 +1603,45 @@ tbody {
/* Dynamically injected button styles (previously in JS) */
.view-btn {
padding: 4px 10px;
background: #21262d;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
background: none;
color: #8b949e;
border: none;
border-radius: 4px;
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.view-btn:hover {
color: #58a6ff;
background: rgba(88, 166, 255, 0.1);
}
.view-btn svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.view-btn-tooltip {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 4px 8px;
background: #1c2128;
color: #e6edf3;
border: 1px solid #30363d;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.view-btn:hover {
background: #30363d;
border-color: #58a6ff;
.view-btn:hover .view-btn-tooltip {
opacity: 1;
}
.inspect-btn {
display: inline-flex;