Sort posts by age. Reload empty pages.

This commit is contained in:
John Stephani 2025-12-28 01:14:59 -06:00
parent 6ad0b5673e
commit dc5220fa05
3 changed files with 421 additions and 376 deletions

View File

@ -175,7 +175,7 @@ def front_page():
hidden = ? AND
saved = ?
ORDER BY
score desc
created_utc asc
LIMIT ?
"""
binds = [False, False, config.posts_per_page_load]
@ -217,7 +217,7 @@ def other_page():
count <= ?
)
ORDER BY
score desc
created_utc asc
LIMIT ?
"""
binds = [False, False, False, config.other_posts_cutoff, config.posts_per_page_load]
@ -264,7 +264,7 @@ def get_subreddit(subreddit):
hidden = ? AND
saved = ?
ORDER BY
score desc
created_utc asc
LIMIT ?
"""
binds = [subreddit, False, False, config.posts_per_page_load]

View File

@ -4,7 +4,7 @@ max_age_seconds = max_age_days * 24 * 60 * 60
other_posts_cutoff = 4 #subreddits with this many unread posts or fewer are merged to /r/other
# Webpage configuration
posts_per_page_load = 25
posts_per_page_load = 10
db_dir = "/reddit/db"
media_dir = "/reddit/media"

View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -12,21 +13,27 @@
--confirm: #970000;
--saved: #9f9400;
}
html {
height: 100%;
}
body {
background-color: var(--darker);
color: var(--light);
min-height: 100%;
margin: 0; /* Removes default browser margin */
margin: 0;
/* Removes default browser margin */
}
img, video {
img,
video {
max-width: 100%;
max-height: 80vh;
width: auto;
height: auto;
}
div.post {
background-color: var(--dark);
border: 2px solid var(--light);
@ -34,6 +41,7 @@
padding: 10px;
margin-bottom: 20px;
}
.sidebar {
outline: 2px solid var(--light);
position: sticky;
@ -44,20 +52,25 @@
flex-wrap: nowrap;
z-index: 1000;
}
.content {
display: flex;
flex-grow: 1; /* Takes up remaining space */
flex-grow: 1;
/* Takes up remaining space */
flex-direction: column;
}
/* desktop */
@media (min-aspect-ratio: 1) {
div.post {
width: 70vw;
}
.container {
display: flex;
flex-direction: row;
}
.sidebar {
width: fit-content;
height: 100vh;
@ -67,16 +80,19 @@
margin-right: 20px;
}
}
/* phone */
@media (max-aspect-ratio: 1) {
div.post {
width: calc(100vw - 50px);
margin-top: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.sidebar {
width: 100vw;
height: 50px;
@ -87,10 +103,12 @@
padding-bottom: 5px;
margin-bottom: 10px;
}
.content {
align-items: center;
}
}
.sidebar a {
display: block;
color: var(--light);
@ -99,28 +117,34 @@
margin: 5px;
padding: 5px;
}
.sidebar a:hover {
background-color: var(--darker);
color: var(--light);
}
a.no-style-link {
color: inherit;
text-decoration: inherit;
cursor: pointer;
}
.invert {
filter: invert(1);
transition: filter 0.3s;
}
.button-wrapper {
display: flex;
width: 100%;
gap: 10px;
margin-top: 10px;
}
.button-wrapper.gallery {
gap: 5px;
}
.button-wrapper button {
flex: 1;
padding: 10px;
@ -132,12 +156,15 @@
font-size: 1.25rem;
font-weight: bold;
}
.button-wrapper button.confirm {
background-color: var(--confirm)
}
.button-wrapper button.saved {
background-color: var(--saved)
}
.button-wrapper button.gallery {
padding: 5px;
background-color: var(--darker);
@ -145,15 +172,19 @@
border: none;
cursor: none;
}
.button-wrapper button.gallery.selected {
background-color: var(--light);
}
.text-content {
overflow: hidden;
transition: max-height 0.3s ease-out; /* Smooth transition */
transition: max-height 0.3s ease-out;
/* Smooth transition */
max-height: 20vh;
position: relative;
}
.text-content::after {
content: "";
position: absolute;
@ -163,14 +194,17 @@
height: 30px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--dark));
}
.text-content.expanded {
max-height: 1000vh;
}
.text-content.expanded::after {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
@ -213,9 +247,12 @@
</div>
{% endif %}
<span class="button-wrapper">
<button type="button" name="comments" onpointerdown='commentsDown(this, "{{ post.permalink }}")' onpointerup='commentsUp(this, "{{ post.permalink }}")'>Comments</button>
<button type="button" name="comments" onpointerdown='commentsDown(this, "{{ post.permalink }}")'
onpointerup='commentsUp(this, "{{ post.permalink }}")'>Comments</button>
<button type="button" name="save" onclick='save(this, "{{ post.permalink }}")' {% if saved %}class='saved' {% endif %}>Save</button>
{% if not saved %}
<button type="button" name="hide" onclick='hide(this, "{{ post.permalink }}")'>Hide</button>
{% endif %}
</span>
</div>
{% endfor %}
@ -296,7 +333,8 @@
div = button.closest('.post');
div.remove();
try {
fetch('/hide' + permalink);
fetch('/hide' + permalink)
.then(checkPostCount());
} catch (error) {
console.error('Could not hide', error);
}
@ -329,20 +367,19 @@
}
function save(button, permalink) {
div = button.closest('.post');
div.remove();
if (button.classList.contains("saved")) {
button.classList.remove("saved");
try {
fetch('/save' + permalink + '?action=unsave');
fetch('/save' + permalink + '?action=unsave')
.then(checkPostCount());
} catch (error) {
console.error('Could not unsave', error);
}
} else {
button.classList.add("saved");
div = button.closest('.post');
hideButton = div.querySelector('[name="hide"]');
hideButton.classList.remove("confirm");
try {
fetch('/save' + permalink + '?action=save');
fetch('/save' + permalink + '?action=save')
.then(checkPostCount());
} catch (error) {
console.error('Could not save', error);
}
@ -409,6 +446,14 @@
audio.currentTime = video.currentTime;
}
}
function checkPostCount() {
posts = document.querySelectorAll('.post').length;
if (posts == 0) {
setTimeout(() => {window.location.href = window.location.href;}, 1000);
}
}
</script>
</body>
</html>