- Move large sections into partials: - forms → templates/_include_forms.html - scripts → templates/_include_scripts.html (if applicable) - Add Tailwind component classes in assets/input.css: - .badge + variants (.badge-ok, .badge-warn, .badge-danger, .badge-muted, .badge-info, .badge-success, .badge-success-solid) - .chip - .card - Override .border-gray-800 to fixed color (no opacity var) - Stabilize table layouts: - Use table-fixed + <colgroup> with percentage widths - Forms cols: 10% / 10% / 15% / 45% / 25% - Scripts cols: 10% / 20% / 45% / 25% - Remove inner fixed-width wrapper from snippet cells; use w-full + wrapping to prevent column jitter - Update templates to use new badge/chip classes
113 lines
4.6 KiB
HTML
113 lines
4.6 KiB
HTML
<!-- /templates/partials/result_forms.html -->
|
|
<section id="forms" class="card">
|
|
<h2 class="text-lg font-semibold mb-3">Forms</h2>
|
|
|
|
{% if forms and forms|length > 0 %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full table-fixed text-sm"> <!-- was: min-w-full -->
|
|
<colgroup>
|
|
<col class="w-[10%]"> <!-- Action -->
|
|
<col class="w-[10%]"> <!-- Method -->
|
|
<col class="w-[15%]"> <!-- Inputs -->
|
|
<col class="w-[45%]"> <!-- Matches -->
|
|
<col class="w-[25%]"> <!-- Snippet -->
|
|
</colgroup>
|
|
<thead class="text-gray-400 border-b border-gray-800">
|
|
<tr>
|
|
<th class="text-left py-2 pr-4 whitespace-normal break-words">Action</th>
|
|
<th class="text-left py-2 pr-4 whitespace-normal break-words">Method</th>
|
|
<th class="text-left py-2 pr-4 whitespace-normal break-words">Inputs</th>
|
|
<th class="text-left py-2 pr-4 whitespace-normal break-words">Matches (Rules)</th>
|
|
<th class="text-left py-2 pr-4 whitespace-normal break-words">Form Snippet</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for f in forms %}
|
|
<tr class="border-b border-gray-900 align-top">
|
|
<!-- Action -->
|
|
<td class="py-2 pr-4 break-all">
|
|
{% if f.action %}
|
|
{{ f.action[:80] }}{% if f.action|length > 80 %}…{% endif %}
|
|
{% else %}
|
|
<span class="text-gray-500">(no action)</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<!-- Method -->
|
|
<td class="py-2 pr-4 whitespace-nowrap">{{ (f.method or 'get')|upper }}</td>
|
|
|
|
<!-- Inputs -->
|
|
<td class="py-2 pr-4 break-words">
|
|
{% if f.inputs and f.inputs|length > 0 %}
|
|
<div class="flex flex-wrap gap-1">
|
|
{% for inp in f.inputs %}
|
|
<span class="chip"
|
|
title="{{ (inp.name or '') ~ ' : ' ~ (inp.type or 'text') }}">
|
|
{{ inp.name or '(unnamed)' }}<small class="text-gray-400"> : {{ (inp.type or 'text') }}</small>
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<span class="chip">None</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<!-- Matches (Rules) -->
|
|
<td class="py-2 pr-4 break-words">
|
|
{% if f.rules and f.rules|length > 0 %}
|
|
<ul class="space-y-1">
|
|
{% for r in f.rules %}
|
|
<li title="{{ r.description or '' }}">
|
|
{{ r.name }}
|
|
{% if r.severity %}
|
|
{% set sev = r.severity|lower %}
|
|
<span class="ml-2 rounded-full px-2 py-0.5 text-xs border
|
|
{% if sev == 'high' %} badge badge-danger
|
|
{% elif sev == 'medium' %} badge badge-warn
|
|
{% else %} badge badge-info {% endif %}">
|
|
{{ r.severity|title }}
|
|
</span>
|
|
{% endif %}
|
|
{% if r.tags %}
|
|
{% for t in r.tags %}
|
|
<span class="chip" title="Tag: {{ t }}">{{ t }}</span>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if r.description %}
|
|
<small class="text-gray-400"> — {{ r.description }}</small>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<span class="text-gray-500">N/A</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
<!-- Form Snippet (let column width control it) -->
|
|
<td class="py-2 pr-4 align-top">
|
|
{% if f.content_snippet %}
|
|
<details>
|
|
<summary class="cursor-pointer text-blue-300 hover:underline">
|
|
View snippet ({{ f.content_snippet|length }} chars)
|
|
</summary>
|
|
<pre class="mt-1 bg-[#0b0f14] border border-gray-800 rounded-lg p-3
|
|
w-full max-w-full overflow-auto max-h-64
|
|
whitespace-pre-wrap break-words font-mono text-xs">{{ f.content_snippet }}</pre>
|
|
</details>
|
|
{% else %}
|
|
<span class="text-gray-500">N/A</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% else %}
|
|
<p class="text-sm text-gray-500">No form issues detected.</p>
|
|
{% endif %}
|
|
|
|
<p class="mt-2"><a href="#top-jump-list" class="text-sm text-gray-400 hover:text-blue-400">Back to top</a></p>
|
|
</section> |