j2
/
reddit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/app.py
View File

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

2
app/config.py
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 other_posts_cutoff = 4 #subreddits with this many unread posts or fewer are merged to /r/other
# Webpage configuration # Webpage configuration
posts_per_page_load = 25 posts_per_page_load = 10
db_dir = "/reddit/db" db_dir = "/reddit/db"
media_dir = "/reddit/media" media_dir = "/reddit/media"

71
app/templates/index.html
View File

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