mirror of
https://github.com/aljazceru/njump.git
synced 2026-01-26 17:34:23 +01:00
120 lines
4.5 KiB
HTML
120 lines
4.5 KiB
HTML
<aside
|
|
class="fixed bottom-0 left-0 top-auto mt-4 w-full basis-3/12 self-start transition-all duration-500 print:hidden sm:sticky sm:bottom-auto sm:left-auto sm:top-8 sm:w-auto"
|
|
>
|
|
<div
|
|
class="absolute right-0 top-0 z-10 mb-4 h-10 w-10 text-center text-sm sm:relative sm:h-auto sm:w-auto"
|
|
>
|
|
<span class="hidden sm:block">Open in</span>
|
|
<div
|
|
_="on click
|
|
toggle .hidden on #open
|
|
toggle .hidden on #close
|
|
toggle .hidden on #gradient
|
|
toggle .overflow-hidden on <body />
|
|
toggle .hidden on <.client:not(:first-child) />
|
|
toggle .top_client_sticky on <.clients_wrapper > :first-child />
|
|
"
|
|
color: #FFFFFF;
|
|
>
|
|
<div id="open" class="inline sm:hidden">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
fill="currentColor"
|
|
viewBox="0 0 20 20"
|
|
class="m-auto mt-[28%] block h-1/2 w-1/2"
|
|
>
|
|
<path
|
|
fill="#fafafa"
|
|
fill-rule="evenodd"
|
|
d="M3.808.355h2.85a2.85 2.85 0 0 1 2.85 2.85v2.85a2.85 2.85 0 0 1-2.85 2.85h-2.85a2.85 2.85 0 0 1-2.85-2.85v-2.85a2.85 2.85 0 0 1 2.85-2.85Zm2.85 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0 3.8h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm10.45-6.65h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0-17.1h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div id="close" class="mt-4 hidden sm:hidden">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="31"
|
|
height="16"
|
|
fill="currentColor"
|
|
viewBox="0 0 31 16"
|
|
class="m-auto mt-[28%] block h-1/2 w-1/2"
|
|
>
|
|
<path
|
|
fill="#fafafa"
|
|
d="M30.207 3.016 16.744 14.983a1.496 1.496 0 0 1-1.974 0L1.307 3.016A1.496 1.496 0 0 1 3.28.772l12.476 11.085L28.233.772a1.496 1.496 0 1 1 1.974 2.244Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="clients_wrapper | overflow-y-auto rounded-t-lg max-h-[55vh] sm:max-h-max"
|
|
_="on load
|
|
wait 50ms
|
|
get my children
|
|
get sortByCount(it) then repeat for c in it call me.appendChild(c) end
|
|
get first in me
|
|
then tell it
|
|
remove .hidden
|
|
add .top_client
|
|
"
|
|
>
|
|
{{range $index, $client := .Clients}}
|
|
<div
|
|
class="client | hidden w-full items-center border-b border-zinc-800 bg-zinc-700 first-of-type:rounded-t-lg first-of-type:border-0 first-of-type:bg-strongpink hover:bg-zinc-800 sm:mb-3 sm:flex sm:rounded-lg sm:border-0 sm:first-of-type:rounded-lg"
|
|
_="on load get localStorage['nj:{{.ID}}'] or 0 then set @count to it then set @title to `used ${it} times`
|
|
on click increment localStorage['nj:{{$client.ID}}']"
|
|
>
|
|
<a
|
|
class="client block basis-full px-3 py-3 text-left text-[17px] font-normal leading-4 text-white no-underline sm:inline sm:py-1.5 sm:text-center sm:font-light"
|
|
href="{{$client.URL}}"
|
|
>
|
|
<span
|
|
class="ml-1.5 pr-2 inline basis-1/5 text-neutral-400 sm:hidden"
|
|
>Open in</span
|
|
>
|
|
{{$client.Name}}
|
|
<span
|
|
class="type | float-right mr-4 text-xs uppercase text-neutral-400 sm:hidden"
|
|
>{{$client.Type}}</span
|
|
>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
<div class="client | hidden h-8 bg-zinc-700"></div>
|
|
</div>
|
|
<div
|
|
id="gradient"
|
|
class="fixed bottom-0 hidden h-16 w-full bg-gradient-to-t from-zinc-800 to-transparent"
|
|
></div>
|
|
</aside>
|
|
|
|
<style>
|
|
.top_client_sticky {
|
|
position: absolute;
|
|
}
|
|
.top_client span {
|
|
color: #FFFFFF;
|
|
}
|
|
.top_client a span.type {
|
|
display: none;
|
|
}
|
|
.clients_wrapper div {
|
|
&:nth-child(2) {
|
|
margin-top: 2.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function sortByCount(children) {
|
|
return Array.from(children).sort(
|
|
(a, b) =>
|
|
parseInt(b.getAttribute('count')) - parseInt(a.getAttribute('count'))
|
|
)
|
|
}
|
|
</script>
|