Sort posts by age. Reload empty pages.
This commit is contained in:
parent
6ad0b5673e
commit
dc5220fa05
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -161,16 +192,19 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
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 {
|
||||
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="save" onclick='save(this, "{{ post.permalink }}")' {% if saved %}class='saved'{% endif %}>Save</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 %}
|
||||
|
|
@ -236,12 +273,12 @@
|
|||
div = e.target.closest('.media-div');
|
||||
images = Array.from(div.querySelectorAll('img'));
|
||||
currentIndex = images.indexOf(e.target)
|
||||
if (currentIndex < (images.length -1)) {
|
||||
if (currentIndex < (images.length - 1)) {
|
||||
buttons = Array.from(div.querySelectorAll('button'));
|
||||
images[currentIndex].style.display = "none";
|
||||
images[currentIndex+1].style.display = "block";
|
||||
images[currentIndex + 1].style.display = "block";
|
||||
buttons[currentIndex].classList.remove('selected');
|
||||
buttons[currentIndex+1].classList.add('selected');
|
||||
buttons[currentIndex + 1].classList.add('selected');
|
||||
} else {
|
||||
e.target.classList.toggle('invert');
|
||||
}
|
||||
|
|
@ -253,9 +290,9 @@
|
|||
if (currentIndex > 0) {
|
||||
buttons = Array.from(div.querySelectorAll('button'));
|
||||
images[currentIndex].style.display = "none";
|
||||
images[currentIndex-1].style.display = "block";
|
||||
images[currentIndex - 1].style.display = "block";
|
||||
buttons[currentIndex].classList.remove('selected');
|
||||
buttons[currentIndex-1].classList.add('selected');
|
||||
buttons[currentIndex - 1].classList.add('selected');
|
||||
} else {
|
||||
e.target.classList.toggle('invert');
|
||||
}
|
||||
|
|
@ -286,17 +323,18 @@
|
|||
|
||||
// main button code
|
||||
|
||||
function hide(button, permalink){
|
||||
function hide(button, permalink) {
|
||||
div = button.closest('.post');
|
||||
hideButton = div.querySelector('[name="save"]');
|
||||
if (hideButton.classList.contains('saved')){
|
||||
if (hideButton.classList.contains('saved')) {
|
||||
return;
|
||||
}
|
||||
if (button.classList.contains('confirm')) {
|
||||
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);
|
||||
}
|
||||
|
|
@ -350,7 +387,7 @@
|
|||
}
|
||||
// text expand code
|
||||
|
||||
function checkHeight(){
|
||||
function checkHeight() {
|
||||
const divs = document.querySelectorAll('.text-content');
|
||||
divs.forEach(div => {
|
||||
height = div.offsetHeight;
|
||||
|
|
@ -375,7 +412,7 @@
|
|||
});
|
||||
|
||||
// audio/video sync code
|
||||
function pauseVideo(element){
|
||||
function pauseVideo(element) {
|
||||
div = element.closest('.post');
|
||||
video = div.querySelector('video:first-of-type');
|
||||
if (video) {
|
||||
|
|
@ -384,31 +421,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
function findAudio(video){
|
||||
function findAudio(video) {
|
||||
div = video.closest('.post');
|
||||
return div.querySelector('audio:first-of-type');
|
||||
}
|
||||
|
||||
function playAudio(video){
|
||||
function playAudio(video) {
|
||||
audio = findAudio(video);
|
||||
if (audio) {
|
||||
audio.play();
|
||||
audio.currentTime = video.currentTime;
|
||||
}
|
||||
}
|
||||
function pauseAudio(video){
|
||||
function pauseAudio(video) {
|
||||
audio = findAudio(video);
|
||||
if (audio) {
|
||||
audio.pause();
|
||||
audio.currentTime = video.currentTime;
|
||||
}
|
||||
}
|
||||
function seekAudio(video){
|
||||
function seekAudio(video) {
|
||||
audio = findAudio(video);
|
||||
if (audio) {
|
||||
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>
|
||||
Loading…
Reference in New Issue