Skip to content

Wrapped each shared file post in an <article> tag and used <nav> for older / newer navigation controls #850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Wrapped each shared file post in an <article> tag and used <nav> for older / newer navigation controls #850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
30a4856
Wrap each pair of divs (header and image content) that currently make…
smallsaucepan Aug 25, 2025
46360a6
Fixed issue where hotkey navigation to next / previous page wasn't wo…
smallsaucepan Aug 30, 2025
a2938e5
Updated image list handlers to annotate posts with flags indicating w…
smallsaucepan Sep 5, 2025
1f30094
Merge branch 'master' into image-list-article-nav-tags
smallsaucepan Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion handlers/account.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@ def get(self, user_name=None, page=None):

if not images and page != 1:
raise tornado.web.HTTPError(404)

# Annotate each file with page position to facilitate navigation.
for i, file in enumerate(images):
file.first_on_page = (i == 0)
file.last_on_page = (i == len(images) - 1)

return self.render("account/index.html", images=images, user=user,
current_user_obj=current_user, count=count, page=page,
url_format=url_format, can_follow=can_follow,
Expand Down Expand Up @@ -149,7 +155,15 @@ def get(self, user_name=None, before_or_after=None, favorite_id=None):
followers = shake.subscribers(page=1)
follower_count = shake.subscriber_count()

return self.render("account/likes.html", sharedfiles=sharedfiles[0:10],
# Trim to presentation length
sharedfiles = sharedfiles[0:10]

# Annotate each file with page position to facilitate navigation.
for i, file in enumerate(sharedfiles):
file.first_on_page = (i == 0)
file.last_on_page = (i == len(sharedfiles) - 1)

return self.render("account/likes.html", sharedfiles=sharedfiles,
current_user_obj=current_user_obj,
following_shakes=following_shakes[:10],
following_shakes_count=following_shakes_count,
Expand Down
10 changes: 9 additions & 1 deletion handlers/incoming.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,15 @@ def get(self, before_or_after=None, base36_id=None):
if len(sharedfiles) > 10:
older_link = "/incoming/before/%s" % sharedfiles[9].share_key

return self.render("incoming/index.html", sharedfiles=sharedfiles[0:10],
# Trim to presentation length
sharedfiles = sharedfiles[0:10]

# Annotate each file with page position to facilitate navigation.
for i, file in enumerate(sharedfiles):
file.first_on_page = (i == 0)
file.last_on_page = (i == len(sharedfiles) - 1)

return self.render("incoming/index.html", sharedfiles=sharedfiles,
current_user_obj=current_user_obj,
older_link=older_link, newer_link=newer_link,
notifications_count=notifications_count)
6 changes: 6 additions & 0 deletions handlers/popular.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ def get(self):

best_of_user = user.User.get("name=%s", options.best_of_user_name)
best_of_shake = best_of_user.shake()

# Annotate each file with page position to facilitate navigation.
for i, file in enumerate(sharedfiles):
file.first_on_page = (i == 0)
file.last_on_page = (i == len(sharedfiles) - 1)

return self.render("popular/index.html",
sharedfiles=sharedfiles,
notifications_count=notifications_count,
Expand Down
5 changes: 5 additions & 0 deletions handlers/search.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,11 @@ def get(self, base36_id=None):
older_link = "/search?q=%s&offset=%d" % (escape.url_escape(q), offset + MAX_PER_PAGE)
sharedfiles = sharedfiles[0:MAX_PER_PAGE]

# Annotate each file with page position to facilitate navigation.
for i, file in enumerate(sharedfiles):
file.first_on_page = (i == 0)
file.last_on_page = (i == len(sharedfiles) - 1)

return self.render("search/search.html",
current_user_obj=current_user_obj,
sharedfiles=sharedfiles, q=q,
Expand Down
6 changes: 3 additions & 3 deletions static/js/paging_keys.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,9 @@ HotKey.prototype.remove = function (key) {
var pagingKeys = (function () {
// settings
var config = {
nodeSelector: ".image-title", // used to select each item on the page and place in the map (must be a link)
prevPageSelector: ".newer a", // link on this element should always jump to prev page a.prev_page (must be a link)
nextPageSelector: ".older a", // link on this element should always jump to next page a.next_page (must be a link)
nodeSelector: "article.shared-file", // used to select each item on the page and place in the map (must be a link)
prevPageSelector: "a.newer", // link on this element should always jump to prev page a.prev_page (must be a link)
nextPageSelector: "a.older", // link on this element should always jump to next page a.next_page (must be a link)
pagingNavId: "paging-nav", // dom id of the floating page navigation element
keyNext: "j", // hot keys used
keyPrev: "k",
Expand Down
19 changes: 11 additions & 8 deletions templates/incoming/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,21 @@ <h3>Did You Know?</h3>
{% for sharedfile in sharedfiles %}
{{modules.Image(sharedfile, current_user=current_user_obj, list_view=True, show_attribution_in_title=True)}}
{% end %}
</div>
<div class="linear-navigation">
<div class="older">

<nav class="linear-navigation timeline-navigation" aria-label="Timeline">
Copy link
Collaborator

@bradchoate bradchoate Sep 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a purpose for the timeline-navigation class? I don't see any reference to it here or over at mltshp-patterns.

Copy link
Contributor Author

@smallsaucepan smallsaucepan Sep 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feel that timeline is more descriptive than linear for what the navigation does. Hence the aria label. Wanted the classname to reflect that, but with a plan to introduce gradually (phasing out linear-navigation in patterns over time).

{% if older_link %}
<a class="btn btn-secondary btn-shadow" href="{{ older_link }}">&laquo; Older</a>
<a class="older btn btn-secondary btn-shadow" href="{{ older_link }}">&laquo; Older</a>
{% else %}
{# Simplify container layout #}
<div></div>
Copy link
Collaborator

@bradchoate bradchoate Sep 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would expect simpler to mean fewer DOM elements. Also, this is a block element where the other is inline. But my preference would be to not emit anything if older_link or newer_link are "false". If both are false, then nav itself can be removed since there's no appropriate navigation (layout would still need to look right, with respect to padding at the bottom of the short page).

Copy link
Contributor Author

@smallsaucepan smallsaucepan Sep 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simpler was also referring to CSS complexity. Let me see if there's a way to do nicely with CSS alone ...

{% end %}
</div>
<div class="newer">
{% if newer_link %}
<a class="btn btn-secondary btn-shadow" href="{{ newer_link }}">Newer &raquo;</a>
<a class="newer btn btn-secondary btn-shadow" href="{{ newer_link }}">Newer &raquo;</a>
{% else %}
{# Simplify container layout #}
<div></div>
{% end %}
</div>
</nav>
</div>
</div>
</div>
Expand Down
Loading