Skip to content

Instantly share code, notes, and snippets.

@benjclark

benjclark/gist:ab1e5db8fa725fc6ccd362fa434a7d8a

Created April 26, 2022 20:29
Show Gist options
  • Save benjclark/ab1e5db8fa725fc6ccd362fa434a7d8a to your computer and use it in GitHub Desktop.
Save benjclark/ab1e5db8fa725fc6ccd362fa434a7d8a to your computer and use it in GitHub Desktop.
Download ZIP
new pagination for dan
Raw
gistfile1.txt
<nav class="c-pagination">
<ul class="c-pagination__container">
<li class="c-pagination__item">
<a href="" class="c-pagination__link"><svg class="c-pagination__icon" aria-hidden="true" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m4.46975946 3.28337502-4.17620792 4.03074001c-.39120768.37758093-.39160691.98937525.0000316 1.367372l4.1763942 4.03091977c.39122514.3775978 1.01908149.3838182 1.40017357.0160006.39113012-.3775061.3930364-.9877245-.00310603-1.3700683l-2.48183446-2.39538585h11.61478958l.1166211-.00649339c.4973387-.055753.8833789-.46370161.8833789-.95867408 0-.49497246-.3860402-.90292107-.8833789-.95867408l-.1166211-.00649338h-11.61478958l2.4816273-2.39518594c.39282216-.37913917.40056173-.98637524.01946965-1.35419292-.39113012-.37750607-1.02492687-.37784433-1.41654791.00013556z" fill-rule="evenodd"></path></svg> Prev</a>
</li>
<li class="c-pagination__item">
<a href="" class="c-pagination__link">
<strong class="text-black">1</strong>
</a>
</li>
<li class="c-pagination__item">
<a href=""
class="c-pagination__link"
hx-target="closest section"
hx-post="/html/search/page/?requested_page=2&amp;class_name=codeblock"
hx-include="#search_form"
hx-swap="outerHTML">2
</a>
</li>
<li class="c-pagination__item">
<a href=""
class="c-pagination__link"
hx-target="closest section"
hx-post="/html/search/page/?requested_page=3&amp;class_name=codeblock"
hx-include="#search_form"
hx-swap="outerHTML">3
</a>
</li>
<li class="c-pagination__item">
<span class="c-pagination__ellipsis">…</span>
</li>
<li class="c-pagination__item">
<a href=""
class="c-pagination__link"
hx-target="closest section"
hx-post="/html/search/page/?requested_page=19&amp;class_name=codeblock"
hx-include="#search_form"
hx-swap="outerHTML">19
</a>
</li>
<li class="c-pagination__item">
<a class="c-pagination__link"
hx-target="closest section"
hx-post="/html/search/page/?requested_page=2&amp;class_name=codeblock"
hx-include="#search_form"
hx-swap="outerHTML">Next <svg class="c-pagination__icon" aria-hidden="true" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="m11.5302405 12.716625 4.176208-4.03074003c.3912076-.37758093.3916069-.98937525-.0000316-1.367372l-4.1763942-4.03091981c-.3912252-.37759778-1.0190815-.38381821-1.4001736-.01600053-.39113013.37750607-.39303641.98772445.003106 1.37006824l2.4818345 2.39538588h-11.6147896l-.11662112.00649339c-.49733869.055753-.88337888.46370161-.88337888.95867408 0 .49497246.38604019.90292107.88337888.95867408l.11662112.00649338h11.6147896l-2.4816273 2.39518592c-.39282218.3791392-.40056175.9863753-.0194697 1.3541929.3911302.3775061 1.0249269.3778444 1.4165479-.0001355z" fill-rule="evenodd"></path>
</svg>
</a>
</li>
</ul>
</nav>
<style>
.c-pagination {
display: flex;
justify-content: center;
font-size: 1.1rem;
}
.c-pagination__container {
list-style: none;
display: flex;
gap: 16px;
border: 1px solid #4f46e5;
padding: 4px 8px;
border-radius: 3px;
}
.c-pagination__link {
color: rgb(79 70 229 / var(--tw-text-opacity));
}
a.c-pagination__link:visited {
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.c-pagination__icon {
display: inline-block;
fill: rgb(79 70 229 / var(--tw-text-opacity));
width: 16px;
height: 12px;
vertical-align: baseline;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment