Skip to content

Commit

Permalink
Do not scroll to top when clicking challenge tabs
Browse files Browse the repository at this point in the history
f6b731d introduced a `href` attribute
on the anchors used as Bootstrap tabs.
As there is nothing in JS preventing the default click action, this
causes this page to scroll to top (sorry).

A simple fix would be to use `@onclick.prevent` with AlpineJS, but a
cleaner fix is to use button elements. Using anchors as tabs does not
really make sense here as users don't need to drag&drop the anchor.
  • Loading branch information
erdnaxe committed Mar 12, 2024
1 parent 9935b6f commit 5959673
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions templates/challenge.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#" data-bs-target="#challenge" @click="showChallenge()">
<button class="nav-link active" data-bs-target="#challenge" @click="showChallenge()">
{% trans %}Challenge{% endtrans %}
</a>
</button>
</li>

{% block solves %}
<li class="nav-item">
<a class="nav-link challenge-solves" href="#" data-bs-target="#solves" @click="showSolves()">
<button class="nav-link challenge-solves" data-bs-target="#solves" @click="showSolves()">
{% if solves != None %}
{{ ngettext("%(num)d Solve", "%(num)d Solves", solves) }}
{% endif %}
</a>
</button>
</li>
{% endblock %}
</ul>
Expand Down

0 comments on commit 5959673

Please sign in to comment.