interesting noscript way of click-to-scroll catalog with tabindex and :focus css selector, courtesy of anon here https://anon.cafe/make/res/3.html#q158

merge-requests/208/head
Thomas Lynch 4 years ago
parent af0dc4a4fc
commit 0160b846fa
  1. 2
      gulp/res/css/style.css
  2. 9
      views/mixins/catalogtile.pug
  3. 2
      views/pages/overboardcatalog.pug

@ -264,7 +264,7 @@ object {
max-width: 250px; max-width: 250px;
} }
.catalog-tile:hover { .catalog-tile:focus {
overflow-y: auto; overflow-y: auto;
} }

@ -1,11 +1,12 @@
mixin catalogtile(post, index) mixin catalogtile(post, index, overboard=false)
- let anchorSubject = post.subject; - let anchorSubject = post.subject;
if post.subject if post.subject
- const subjectAnchorMatch = post.subject.match(/^\/\w+\//); - const subjectAnchorMatch = post.subject.match(/^\/\w+\//);
if subjectAnchorMatch if subjectAnchorMatch
- anchorSubject = subjectAnchorMatch[0] - anchorSubject = subjectAnchorMatch[0]
.anchor(id=`${post.board}-${anchorSubject}`) .anchor(id=`${post.board}-${anchorSubject}`)
.catalog-tile(data-board=post.board .catalog-tile(tabindex=index
data-board=post.board
data-post-id=post.postId data-post-id=post.postId
data-user-id=post.userId data-user-id=post.userId
data-name=post.name data-name=post.name
@ -17,7 +18,7 @@ mixin catalogtile(post, index)
data-bump=post.bumped) data-bump=post.bumped)
- const postURL = `/${post.board}/${modview ? 'manage/' : ''}thread/${post.postId}.html` - const postURL = `/${post.board}/${modview ? 'manage/' : ''}thread/${post.postId}.html`
.post-info .post-info
if !index if overboard
div div
| Thread from | Thread from
a.no-decoration.post-subject(href=`/${post.board}/`) /#{post.board}/ a.no-decoration.post-subject(href=`/${post.board}/`) /#{post.board}/
@ -31,7 +32,7 @@ mixin catalogtile(post, index)
span(title='Replies') R: #{post.replyposts} span(title='Replies') R: #{post.replyposts}
| / | /
span(title='Files') F: #{post.replyfiles} span(title='Files') F: #{post.replyfiles}
if index if !overboard
| / | /
span(title='Page') P: #{Math.ceil(index/10)} span(title='Page') P: #{Math.ceil(index/10)}
if post.files.length > 0 if post.files.length > 0

@ -29,5 +29,5 @@ block content
else else
.catalog .catalog
for thread, i in threads for thread, i in threads
+catalogtile(thread, false) +catalogtile(thread, i, true)
hr(size=1) hr(size=1)

Loading…
Cancel
Save