mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-11-14 14:20:11 +00:00
Harvey Tindall
2d83718f81
my initial intent before starting search was for it to be server-sided, considering this activity log could rack up 100s or 1000s of entries, and then I forgot and did it client-sided. this commit adds a feature to load more results when scrolled to the bottom, and when a search returns few or no results (this is limited, so it wont loop infinitely). Also finally got rid of the useless left column, since my ideas didn't match my implementation. also, sorting is only by date, can't be bothered with anything else.
51 lines
947 B
CSS
51 lines
947 B
CSS
.loader {
|
|
height: auto;
|
|
color: rgba(0, 0, 0, 0) !important;
|
|
}
|
|
|
|
.loader.rel {
|
|
position: relative;
|
|
}
|
|
|
|
.loader .dot {
|
|
--diameter: 0.5rem;
|
|
--radius: calc(var(--diameter) / 2);
|
|
--deviation: 20%;
|
|
height: var(--diameter);
|
|
width: var(--diameter);
|
|
background-color: var(--color-content);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: calc(50% - var(--radius));
|
|
animation: osc 1s cubic-bezier(.72,.16,.31,.97) infinite;
|
|
}
|
|
|
|
.loader.rel .dot {
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
|
|
.loader.loader-sm .dot {
|
|
--deviation: 10%;
|
|
}
|
|
|
|
@keyframes osc {
|
|
25% {
|
|
left: calc(50% + var(--deviation) - var(--radius));
|
|
}
|
|
75% {
|
|
left: calc(50% - var(--deviation));
|
|
}
|
|
0%, 50%, 100% {
|
|
left: calc(50% - var(--radius));
|
|
}
|
|
/*
|
|
0%, 100% {
|
|
left: calc(50% - var(--deviation))
|
|
}
|
|
50% {
|
|
left: calc(50% + var(--deviation) - var(--radius));
|
|
}
|
|
*/
|
|
}
|