Fix ranking card split: replace nested <a> Source link with button in local book cards
An <a> element nested inside the card's outer <a> is invalid HTML — browsers auto-close the outer anchor before the inner one, causing the card to be split across two grid cells visually. Replace with a <button> that calls window.open() with event.preventDefault/stopPropagation to avoid interfering with card navigation.
This commit is contained in:
@@ -645,13 +645,13 @@ const rankingTmpl = `
|
|||||||
</div>
|
</div>
|
||||||
{{if .SourceURL}}
|
{{if .SourceURL}}
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<a href="{{.SourceURL}}" target="_blank" rel="noopener noreferrer"
|
<button onclick="event.preventDefault();event.stopPropagation();window.open('{{.SourceURL}}','_blank','noopener,noreferrer')"
|
||||||
class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors">
|
class="inline-flex items-center gap-1 text-xs px-2 py-0.5 rounded bg-zinc-700 hover:bg-zinc-600 text-zinc-300 hover:text-white transition-colors cursor-pointer border-0">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||||||
</svg>
|
</svg>
|
||||||
Source
|
Source
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user