Skip to content
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.

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

Address comments from PR #403 Improve pool navigation/browsing #650

Open
wants to merge 37 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
8164586
Support sorting post search results by pool post order
Ruin0x11 May 8, 2021
6fd48dc
Sort by pool by default from pool details page
Ruin0x11 May 8, 2021
4737739
Thumbnail view in pool list
Ruin0x11 May 8, 2021
161a393
Add new sort tokens for pools; update API doc
Ruin0x11 May 8, 2021
eee9b70
Stacked thumbnail appearance for pool list page
Ruin0x11 May 8, 2021
676a5ff
Retrieve surrounding pool posts in pool search query
Ruin0x11 May 8, 2021
748f0e1
temp
Ruin0x11 May 9, 2021
8e8b15a
Route for getting previous/next posts in pool
Ruin0x11 May 9, 2021
7750e43
Initial implementation of pool navigation inside posts
Ruin0x11 May 9, 2021
e1c9704
Add pool posts around test
Ruin0x11 May 9, 2021
28eaf53
Add first/last pool post to pool navigator
Ruin0x11 May 9, 2021
2ce243d
Merge branch 'old-pool-divergence' into update/Ruin0x11/improve-pools
dekarrin Apr 14, 2024
6a0d574
slap alembic-utils into install process quick and let ci do the work …
dekarrin Apr 14, 2024
719f6dc
Impl post_search_config.py's create_around_query()
dekarrin Apr 14, 2024
e397817
temp rearrange server Dockerfile so cache is used for fast dev cycle
dekarrin Apr 14, 2024
fa95a98
remove initial pgfunction migration bc endgoal is to not have it
dekarrin Apr 14, 2024
1a54bb3
Merge branch 'update/Ruin0x11/improve-pools' of github.com:dekarrin/s…
dekarrin Apr 14, 2024
eabf637
Add todo msg
dekarrin Apr 15, 2024
fa14bea
rewire post search config to actual function
dekarrin Apr 15, 2024
1c189fc
fix defaulted abstraction
dekarrin Apr 15, 2024
85f012b
Rewrite get_pool_posts_around to not use raw sql
dekarrin Apr 18, 2024
dde52f1
Fix pool post serializer
dekarrin Apr 18, 2024
75840f2
Remove unneeded files
dekarrin Apr 18, 2024
fdb36ed
Remove unneeded new SQL function lines
dekarrin Apr 18, 2024
75d9fb2
Restore dev env convenience changes
dekarrin Apr 18, 2024
2ea36ce
Restore more dev env convenience changes
dekarrin Apr 18, 2024
cb0377a
Spacing
dekarrin Apr 18, 2024
5607664
Update dockerfile to cache package installs before copying in code
dekarrin Apr 18, 2024
076a3a0
Don't copy codebase twice in dockerfile
dekarrin Apr 18, 2024
e7031b3
Fix tests/func/test_get_pools_around to use new format
dekarrin Apr 18, 2024
d0f6a36
Make verify_unpage for test_pool_search ignore order unless specified
dekarrin Apr 19, 2024
0955ed0
Remove redundant no-query tests from pool search sort tests
dekarrin Apr 19, 2024
674979c
Fix test_pool_search_config.test_sort_by_category to assume default l…
dekarrin Apr 19, 2024
2ff6d74
Remove unnecessary comma from pool list controller
dekarrin Apr 19, 2024
4ddbbcb
Spacing in server Dockerfile
dekarrin Apr 19, 2024
dff6b65
Tidy up unused symbols, spacing
dekarrin Apr 19, 2024
ebb46e5
apply pre-commit
dekarrin Apr 19, 2024
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
5 changes: 5 additions & 0 deletions .gitignore

Choose a reason for hiding this comment

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

Were the changes to .gitignore here intentionally included or are they specific to your setup?

Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# User-specific configuration
config.yaml
.env
sql/
data/

# Client Development Artifacts
*/*_modules/
Expand All @@ -13,3 +15,6 @@ server/**/lib/
server/**/bin/
server/**/pyvenv.cfg
__pycache__/

.vscode
docker-compose.dev.yml
1 change: 1 addition & 0 deletions client/Dockerfile
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
ARG BUILDPLATFORM=linux/amd64
FROM --platform=$BUILDPLATFORM node:lts as builder
WORKDIR /opt/app

Expand Down
2 changes: 2 additions & 0 deletions client/css/colors.styl
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ $message-error-border-color = #FCC
$message-error-background-color = #FFF5F5
$message-success-border-color = #D3E3D3
$message-success-background-color = #F5FFF5
$pool-navigator-border-color = #AAA
$pool-navigator-background-color = #EEE
$input-bad-border-color = #FCC
$input-bad-background-color = #FFF5F5
$input-good-border-color = #D3E3D3
Expand Down
129 changes: 88 additions & 41 deletions client/css/pool-list-view.styl
Original file line number Diff line number Diff line change
@@ -1,47 +1,76 @@
@import colors

.pool-list
table
width: 100%
border-spacing: 0
text-align: left
line-height: 1.3em
tr:hover td
background: $top-navigation-color
th, td
padding: 0.1em 0.5em
th
white-space: nowrap
background: $top-navigation-color
.names
width: 84%
.post-count
text-align: center
width: 8%
.creation-time
text-align: center
width: 8%
white-space: pre
ul
list-style-type: none
margin: 0
padding: 0
display: inline
li
padding: 0
display: inline
&:not(:last-child):after
content: ', '
@media (max-width: 800px)
.posts
display: none

.darktheme .pool-list
table
tr:hover td
background: $top-navigation-color-darktheme
th
background: $top-navigation-color-darktheme
ul
list-style-type: none
padding: 0
display: flex
align-content: flex-end
flex-wrap: wrap
margin: 0 -0.25em

li
position: relative
flex-grow: 1
margin: 2em 1.5em 2em 1.2em;
display: inline-block
text-align: left
min-width: 10em
width: 12vw
&:not(.flexbox-dummy)
min-height: 7.5em
height: 9vw

.thumbnail-wrapper
display: inline-block
width: 100%
height: 100%
line-height: 80%
font-size: 80%
color: white
outline-offset: -3px
box-shadow: 0 0 0 1px rgba(0,0,0,0.2)

.thumbnail
width: 100%
height: 100%
outline-offset: -3px
&:not(.empty)
background-position: 50% 30%
position: absolute
display: inline-block

.thumbnail-1
right: -0px;
top: -0px;
z-index: 30;

.thumbnail-2
right: -10px;
top: -10px;
z-index: 20;

.thumbnail-3
right: -20px;
top: -20px;
z-index: 10;

.pool-name
color: black
font-size: 1em
text-align: center
a
width: 100%
display: inline-block

&:hover
background: $post-thumbnail-border-color
.thumbnail
opacity: .9

&:hover a, a:active, a:focus
.thumbnail
outline: 4px solid $main-color !important

.pool-list-header
label
Expand All @@ -61,3 +90,21 @@
.darktheme .pool-list-header
.append
color: $inactive-link-color-darktheme

.post-flow
ul
li
min-width: inherit
width: inherit
margin: 0 0.25em 0.5em 0.25em
&:not(.flexbox-dummy)
height: 14vw
.thumbnail
position: static
outline-offset: -1px
.thumbnail-wrapper.no-tags
.thumbnail
outline: 2px solid $post-thumbnail-no-tags-border-color
&:hover a, a:active, a:focus
.thumbnail
outline: 2px solid $main-color !important
38 changes: 38 additions & 0 deletions client/css/pool-navigator-control.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
@import colors

.pool-navigator-container
padding: 0
margin: 0 auto

.pool-info-wrapper
box-sizing: border-box
width: 100%
margin: 0 0 1em 0
display: flex
padding: 0.5em 1em
border: 1px solid $pool-navigator-border-color
background: $pool-navigator-background-color
&.active
font-weight: bold
font-size: 1.10em;
padding: 0.58em 1em

.pool-name
flex: 1 1;
text-align: center;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

.first, .last
flex-basis: 1em;

.first, .prev, .next, .last
flex: 0 1;
margin: 0 .25em;
white-space: nowrap;


.darktheme .pool-navigator-container
background: $pool-navigator-header-background-color-darktheme
9 changes: 9 additions & 0 deletions client/css/pool-navigator-list-control.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.pool-navigators>ul
list-style-type: none
margin: 0
padding: 0

>li
margin-bottom: 1em
&:last-child
margin-bottom: 0
5 changes: 4 additions & 1 deletion client/css/post-main-view.styl
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,14 @@
width: 100%

.post-container
margin-bottom: 2em
margin-bottom: 1em

.post-content
margin: 0

.pool-navigators-container
margin-bottom: 2em

.darktheme .post-view
>.sidebar
nav.buttons
Expand Down
2 changes: 1 addition & 1 deletion client/css/post-upload.styl
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ $cancel-button-color = tomato
img
width: 100%
height: 100%

video
width: 100%
height: 100%
Expand Down
2 changes: 1 addition & 1 deletion client/html/pool_delete.tpl
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class='pool-delete'>
<form>
<p>This pool has <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + ctx.pool.id}) %>'><%- ctx.pool.postCount %> post(s)</a>.</p>
<p>This pool has <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + ctx.pool.id + ' sort:pool'}) %>'><%- ctx.pool.postCount %> post(s)</a>.</p>

<ul class='input'>
<li>
Expand Down
49 changes: 49 additions & 0 deletions client/html/pool_navigator.tpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<div class='pool-navigator-container'>
<div class='pool-info-wrapper <%= ctx.isActivePool ? "active" : "" %>'>
<span class='first'>
<% if (ctx.canViewPosts && ctx.firstPost) { %>
<a class='<%- ctx.linkClass %>' href='<%= ctx.getPostUrl(ctx.firstPost.id, ctx.parameters) %>'>
<% } %>
«
<% if (ctx.canViewPosts && ctx.firstPost) { %>
</a>
<% } %>
</span>
<span class='prev'>
<% if (ctx.canViewPosts && ctx.prevPost) { %>
<a class='<%- ctx.linkClass %>' href='<%= ctx.getPostUrl(ctx.prevPost.id, ctx.parameters) %>'>
<% } %>
‹ prev
<% if (ctx.canViewPosts && ctx.prevPost) { %>
</a>
<% } %>
</span>
<span class='pool-name'>
<% if (ctx.canViewPools) { %>
<a class='<%- ctx.linkClass %>' href='<%= ctx.formatClientLink("pool", ctx.pool.id) %>'>
<% } %>
Pool: <%- ctx.pool.names[0] %>
<% if (ctx.canViewPools) { %>
</a>
<% } %>
</span>
<span class='next'>
<% if (ctx.canViewPosts && ctx.nextPost) { %>
<a class='<%- ctx.linkClass %>' href='<%= ctx.getPostUrl(ctx.nextPost.id, ctx.parameters) %>'>
<% } %>
next ›
<% if (ctx.canViewPosts && ctx.nextPost) { %>
</a>
<% } %>
</span>
<span class='last'>
<% if (ctx.canViewPosts && ctx.lastPost) { %>
<a class='<%- ctx.linkClass %>' href='<%= ctx.getPostUrl(ctx.lastPost.id, ctx.parameters) %>'>
<% } %>
»
<% if (ctx.canViewPosts && ctx.lastPost) { %>
</a>
<% } %>
</span>
</div>
</div>
4 changes: 4 additions & 0 deletions client/html/pool_navigator_list.tpl
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class='pool-navigators'>
<ul>
</ul>
</div>
2 changes: 1 addition & 1 deletion client/html/pool_summary.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@
<section class='description'>
<hr/>
<%= ctx.makeMarkdown(ctx.pool.description || 'This pool has no description yet.') %>
<p>This pool has <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + ctx.pool.id}) %>'><%- ctx.pool.postCount %> post(s)</a>.</p>
<p>This pool has <a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + ctx.pool.id + ' sort:pool'}) %>'><%- ctx.pool.postCount %> post(s)</a>.</p>
</section>
</div>
59 changes: 15 additions & 44 deletions client/html/pools_page.tpl
Original file line number Diff line number Diff line change
@@ -1,48 +1,19 @@
<div class='pool-list table-wrap'>
<% if (ctx.postFlow) { %><div class='pool-list post-flow'><% } else { %><div class='pool-list'><% } %>
<% if (ctx.response.results.length) { %>
<table>
<thead>
<th class='names'>
<% if (ctx.parameters.query == 'sort:name' || !ctx.parameters.query) { %>
<a href='<%- ctx.formatClientLink('pools', {query: '-sort:name'}) %>'>Pool name(s)</a>
<% } else { %>
<a href='<%- ctx.formatClientLink('pools', {query: 'sort:name'}) %>'>Pool name(s)</a>
<ul>
<% for (let pool of ctx.response.results) { %>
<li data-pool-id='<%= pool.id %>'>
<a class='thumbnail-wrapper' href='<%= ctx.canViewPools ? ctx.formatClientLink("pool", pool.id) : "" %>'>
<% if (ctx.canViewPosts) { %>
<%= ctx.makePoolThumbnails(pool.posts, ctx.postFlow) %>
<% } %>
</th>
<th class='post-count'>
<% if (ctx.parameters.query == 'sort:post-count') { %>
<a href='<%- ctx.formatClientLink('pools', {query: '-sort:post-count'}) %>'>Post count</a>
<% } else { %>
<a href='<%- ctx.formatClientLink('pools', {query: 'sort:post-count'}) %>'>Post count</a>
<% } %>
</th>
<th class='creation-time'>
<% if (ctx.parameters.query == 'sort:creation-time') { %>
<a href='<%- ctx.formatClientLink('pools', {query: '-sort:creation-time'}) %>'>Created on</a>
<% } else { %>
<a href='<%- ctx.formatClientLink('pools', {query: 'sort:creation-time'}) %>'>Created on</a>
<% } %>
</th>
</thead>
<tbody>
<% for (let pool of ctx.response.results) { %>
<tr>
<td class='names'>
<ul>
<% for (let name of pool.names) { %>
<li><%= ctx.makePoolLink(pool.id, false, false, pool, name) %></li>
<% } %>
</ul>
</td>
<td class='post-count'>
<a href='<%- ctx.formatClientLink('posts', {query: 'pool:' + pool.id}) %>'><%- pool.postCount %></a>
</td>
<td class='creation-time'>
<%= ctx.makeRelativeTime(pool.creationTime) %>
</td>
</tr>
<% } %>
</tbody>
</table>
</a>
<div class='pool-name'>
<%= ctx.makePoolLink(pool.id, false, false, pool, name) %>
</div>
</li>
<% } %>
<%= ctx.makeFlexboxAlign() %>
</ul>
<% } %>
</div>
4 changes: 4 additions & 0 deletions client/html/post_main.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@
<div class='content'>
<div class='post-container'></div>

<% if (ctx.canListPools && ctx.canViewPools) { %>
<div class='pool-navigators-container'></div>
<% } %>

<% if (ctx.canListComments) { %>
<div class='comments-container'></div>
<% } %>
Expand Down
Loading