refactor: hooks page design

This commit is contained in:
Barış Soner Uşaklı
2024-07-25 11:25:53 -04:00
parent 42ac1f9db4
commit cea18d0c1e

View File

@@ -1,28 +1,28 @@
<div class="hooks-list panel-group px-lg-4" id="accordion" role="tablist" aria-multiselectable="true">
<div class="hooks-list px-lg-4" id="accordion" role="tablist" aria-multiselectable="true">
{{{ each hooks }}}
<div class="card">
<div class="card-header" role="tab">
<h6 class="mb-0">
<a style="text-transform: none;" class="text-reset text-decoration-none" role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#{hooks.index}" aria-expanded="true" aria-controls="{hooks.index}">{hooks.hookName}</a>
<span class="float-end">{hooks.count} hooks</span>
<div class="mb-3 border rounded p-2">
<div class="" role="tab">
<h6 class="mb-0 ps-2 d-flex justify-content-between align-items-center">
<span>{hooks.hookName}</span>
<button class="btn-ghost-sm" data-bs-toggle="collapse" data-bs-parent="#accordion" data-bs-target="#{hooks.index}" aria-expanded="true" aria-controls="{hooks.index}">View hooks ({hooks.count})</button>
</h6>
</div>
<div id="{hooks.index}" class="accordion-collapse collapse" role="tabpanel">
<div class="card-body">
{{{ each hooks.methods }}}
<div class="mb-3">
<strong>{hooks.methods.id}</strong>
Priority: {hooks.methods.priority}
<div class="d-flex flex-column mt-3 ms-3">
{{{ each hooks.methods }}}
<div class="mb-3">
<strong>{hooks.methods.id}</strong>
<span class="text-secondary text-sm">Priority: {hooks.methods.priority}</span>
<button class="btn btn-primary btn-sm float-end" type="button" data-bs-toggle="collapse" data-bs-target="#{hooks.methods.index}" aria-expanded="false" aria-controls="{hooks.methods.index}">
Show Code <i class="fa fa-eye"></i>
</button>
<button class="btn btn-light btn-sm float-end" type="button" data-bs-toggle="collapse" data-bs-target="#{hooks.methods.index}" aria-expanded="false" aria-controls="{hooks.methods.index}">
<i class="fa fa-eye"></i> Show Code
</button>
</div>
<div class="collapse" id="{hooks.methods.index}">
<pre class="p-3 text-bg-light border rounded">{hooks.methods.method}</pre>
</div>
{{{ end }}}
</div>
<div class="collapse" id="{hooks.methods.index}">
<pre class="p-3 text-bg-light border border-secondary rounded">{hooks.methods.method}</pre>
</div>
{{{ end }}}
</div>
</div>
</div>
{{{ end }}}