Older and Newer buttons for history navigation instead of list

This commit is contained in:
Matthias Portzel 2023-03-03 21:47:30 -05:00
parent 0ab37f6298
commit 8b9bb999a7
4 changed files with 83 additions and 74 deletions

View File

@ -37,7 +37,7 @@ def season_year_for_date(date):
def formatted_name_for_season_year(current_season, current_year):
return str(current_year) + " - " + ["Winter", "Spring", "Summer", "Fall"][current_season]
return ["Winter", "Spring", "Summer", "Fall"][current_season] + " " + str(current_year)
def get_page_slug(thought):
@ -101,31 +101,3 @@ def get_all_pages():
# .formatted_name
# .get_all_entries
# return [Pages]
def get_page(requested_slug, highlighted_uuid=None):
pages = get_all_pages()
# show=uuid takes priority over page
if highlighted_uuid:
try:
highlighted_thought = Thought.objects.get(uuid=highlighted_uuid)
requested_slug = get_page_slug(highlighted_thought)
except Thought.DoesNotExist:
pass
# When we get here, either:
# no slug was passed, requested_slug is ""
# a valid highlighted_uuid was passed, requested_slug is the slug of that page
# requested_slug is an invalid slug
# requested_slug is a valid slug
# First item in pages should be listed first
requested_page = pages[0]
for p in pages:
if p.slug == requested_slug:
requested_page = p
return requested_page

View File

@ -240,25 +240,19 @@ h1 {
}
.history-nav {
font-size: 1.1em;
margin-top: 30px;
margin-bottom: 40px;
margin-left: 20px;
}
.history-nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex; /* Mostly just removes the horizontal space from whitespace */
}
.history-nav li {
line-height: 1.3;
}
.history-nav li::before {
content: "➤";
}
.history-nav li > * {
margin-left: 10px;
.history-nav .nav-item:not(:last-child)::after {
content: "•";
margin-left: 0.7em;
margin-right: 0.7em;
text-decoration: none !important;
}
.history-nav .current-page {
font-weight: bold;
}

View File

@ -12,7 +12,7 @@
{% block head %}
{% if not first_page %}
<link rel="canonical" href="/?page={{ current_page_slug }}">
<link rel="canonical" href="/?page={{ page.slug }}">
{% else %}
<link rel="canonical" href="/">
{% endif %}
@ -41,20 +41,19 @@
{% endblock %}
{% block main %}
{% if not first_page %}
<nav class="history-nav top" aria-label="History Navigation">
<ul>
{% for page in pages %}
{% if page.slug == current_page_slug %}
<li><span class="current-page">{{ page.formatted_name }}</span></li>
{% else %}
<li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
{% endif %}
{% endfor %}
<li><a href="/search">Search</a></li>
</ul>
</nav>
{% endif %}
<nav class="history-nav top" aria-label="History Navigation">
{% if not is_first_page %}
<span class="nav-item"><a href="?page={{ previous_page_slug }}">Newer</a></span>
{% endif %}
<span class="nav-item"><span class="current-page">{{ page.formatted_name }}</span></span>
{% if not is_last_page %}
<span class="nav-item"><a href="?page={{ next_page_slug }}">Older</a></span>
{% endif %}
<span class="nav-item"><a href="/search">Search</a></span>
</nav>
{% for thought in thoughts %}
<div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{ thought.uuid }}">
@ -71,16 +70,17 @@
{% endfor %}
<nav class="history-nav bottom" aria-label="History Navigation">
<ul>
{% for page in pages %}
{% if page.slug == current_page_slug %}
<li><span class="current-page">{{ page.formatted_name }}</span></li>
{% else %}
<li><a href="?page={{ page.slug }}">{{ page.formatted_name }}</a></li>
{% endif %}
{% endfor %}
<li><a href="/search">Search</a></li>
</ul>
{% if not is_first_page %}
<a class="nav-item" href="?page={{ previous_page_slug }}">Older</a>
{% endif %}
<span class="current-page nav-item"><span>{{ page.formatted_name }}</span></span>
{% if not is_last_page %}
<a class="nav-item" href="?page={{ previous_page_slug }}">Older</a>
{% endif %}
<a class="nav-item" href="/search">Search</a>
</nav>
{% endblock %}

View File

@ -2,6 +2,8 @@ import os.path
import uuid
import subprocess
import base64
import collections
from itertools import islice
import magic
@ -15,7 +17,22 @@ from haystack.forms import SearchForm
from whispermaphone import settings
from .models import Thought, ThoughtForm, ALLOWED_MEDIA_TYPES
from .pagination import get_all_pages, get_page_slug, get_page
from .pagination import get_all_pages, get_page_slug
# Python's itertools standard library is bad
# Instead of providing functions
# They provide "receipes" that you can copy-paste into your own program
# => https://docs.python.org/3/library/itertools.html#itertools-recipes
def sliding_window(iterable, n):
# sliding_window('ABCDEFG', 4) --> ABCD BCDE CDEF DEFG
it = iter(iterable)
window = collections.deque(islice(it, n), maxlen=n)
if len(window) == n:
yield tuple(window)
for x in it:
window.append(x)
yield tuple(window)
def check_authenticated(request):
authenticated = False
@ -39,17 +56,43 @@ def index(request):
pages = get_all_pages()
requested_slug = request.GET.get("page", default="")
requested_page = get_page(requested_slug, highlighted_uuid)
thoughts = requested_page.get_all_entries()
# If we've passed a valid highlighted thought uuid,
# that takes priority over a page= value, so we overwrite requested_slug
if highlighted_uuid:
try:
requested_slug = get_page_slug(Thought.objects.get(uuid=highlighted_uuid))
except Thought.DoesNotExist:
pass
# When we get here, either:
# no slug was passed, requested_slug is ""
# a valid highlighted_uuid was passed, requested_slug is the slug of that page
# requested_slug is an invalid slug
# requested_slug is a valid slug
# First item in pages should be the default
previous_page, current_page, next_page = None, pages[0], pages[1]
# We don't have any way of validating slugs or anything,
# so we just have to loop though and see if the requested slug matches any pages
for (prev, curr, nex) in sliding_window(pages, 3):
if curr.slug == requested_slug:
previous_page, current_page, next_page = prev, curr, nex
# If you requested the last page, then this runs on the last iteration
# It runs right before every matching slug, but it only matters if it's the last iteration
if nex.slug == requested_slug:
previous_page, current_page, next_page = curr, nex, None
thoughts = current_page.get_all_entries()
return render(request, "thoughts/index.html", {
"thoughts": thoughts,
"highlighted": highlighted_uuid,
"authenticated": authenticated,
"pages": pages,
"current_page_slug": requested_page.slug,
"first_page": requested_page.slug == pages[0].slug # if you're viewing the first page
"page": current_page,
"previous_page_slug": getattr(previous_page, "slug", None),
"next_page_slug": getattr(next_page, "slug", None),
"is_first_page": current_page.slug == pages[0].slug, # if you're viewing the first page
"is_last_page": current_page.slug == pages[-1].slug
})