Infinite scroll, and footer in sidebar if exists

This commit is contained in:
Andrew Godwin 2022-12-29 11:33:41 -07:00
parent d3fd365a37
commit ea6f272047
7 changed files with 62 additions and 12 deletions

View file

@ -248,5 +248,6 @@ class Config(models.Model):
# wellness Options
visible_reaction_counts: bool = True
expand_linked_cws: bool = True
infinite_scroll: bool = True
custom_css: str | None

View file

@ -136,11 +136,31 @@ footer {
font-size: 90%;
}
body:not(.no-sidebar) footer {
position: fixed;
bottom: 0;
right: calc((100vw - 920px)/2);
width: 250px;
margin: 0;
padding: 5px;
display: flex;
flex-wrap: wrap;
}
body:not(.no-sidebar) footer a {
flex-basis: 50%;
flex-grow: 1;
}
body:not(.no-sidebar) footer a:hover {
color: var(--color-text-dull);
}
.no-sidebar footer {
max-width: 800px;
}
footer a {
.no-sidebar footer a {
border-bottom: 1px solid var(--color-text-duller);
margin-right: 5px;
}
@ -867,22 +887,52 @@ button:hover,
border: 3px solid rgba(255, 255, 255, 0.3);
}
button.htmx-request,
.button.htmx-request {
background: var(--color-button-disabled);
}
button.htmx-request::before,
.button.htmx-request::before {
display: inline-block;
content: "\f2f1";
font: var(--fa-font-solid);
margin-right: 8px;
-webkit-animation-delay: var(--fa-animation-delay, 0s);
animation-delay: var(--fa-animation-delay, 0s);
-webkit-animation-direction: var(--fa-animation-direction, normal);
animation-direction: var(--fa-animation-direction, normal);
-webkit-animation-name: fa-spin;
animation-name: fa-spin;
-webkit-animation-duration: var(--fa-animation-duration, 2s);
animation-duration: var(--fa-animation-duration, 2s);
-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-webkit-animation-timing-function: var(--fa-animation-timing, linear);
animation-timing-function: var(--fa-animation-timing, linear);
}
.right-column button,
.right-column .button {
padding: 2px 6px;
}
form .field.multi-option {
margin-bottom: 10px;
}
form .field.multi-option {
margin-bottom: 10px;
}
form .option.option-row {
margin: 0px 0px 5px 0px;
}
.option-row .right {
float: right;
}
form .option-row .option-field {
vertical-align: middle;
display: inline-block;
@ -983,6 +1033,7 @@ h1.identity small {
text-align: right;
color: var(--color-text-dull);
}
.identity-metadata .metadata-pair .metadata-name::after {
padding-left: 3px;
@ -1461,13 +1512,7 @@ form .post {
}
body:not(.no-sidebar) footer {
position: fixed;
bottom: 0;
right: 0;
width: 250px;
margin: 0;
padding: 5px;
text-align: right;
}
body:not(.no-sidebar) footer a {

View file

@ -28,7 +28,7 @@
{% endif %}
{% if page_obj.has_next %}
<a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML">Next Page</a>
<a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML" {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}>Next Page</a>
{% endif %}
</div>
{% endblock %}

View file

@ -15,7 +15,7 @@
{% endif %}
{% if page_obj.has_next %}
<a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML">Next Page</a>
<a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML" {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}>Next Page</a>
{% endif %}
</div>
{% endblock %}

View file

@ -38,7 +38,7 @@
{% endif %}
{% if page_obj.has_next %}
<a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML">Next Page</a>
<a class="button" href=".?page={{ page_obj.next_page_number }}" hx-get=".?page={{ page_obj.next_page_number }}" hx-select=".left-column > *:not(.view-options)" hx-target=".pagination" hx-swap="outerHTML" {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}>Next Page</a>
{% endif %}
</div>
{% endblock %}

View file

@ -16,7 +16,7 @@
{% endif %}
{% if page_obj.has_next %}
<div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }}">Next Page</a></div>
<div class="load-more"><a class="button" href=".?page={{ page_obj.next_page_number }} {% if config_identity.infinite_scroll %}hx-trigger="revealed"{% endif %}">Next Page</a></div>
{% endif %}
</div>
{% endblock %}

View file

@ -29,10 +29,14 @@ class InterfacePage(SettingsPage):
"title": "Expand linked Content Warnings",
"help_text": "Expands all CWs of the same type at once, rather than one at a time.",
},
"infinite_scroll": {
"title": "Infinite Scroll",
"help_text": "Automatically loads more posts when you get to the bottom of a timeline.",
},
}
layout = {
"Posting": ["toot_mode", "default_post_visibility"],
"Wellness": ["visible_reaction_counts", "expand_linked_cws"],
"Wellness": ["infinite_scroll", "visible_reaction_counts", "expand_linked_cws"],
"Appearance": ["custom_css"],
}