Skip to content

feat: Condense wishlist UI #201

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

Open
JadElClemens wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: Condense wishlist UI #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1cf5e7
Remove extra headers for action items and compress buttons, change la…
JadElClemens Jan 1, 2026
99eda05
Slightly reduce image column width
JadElClemens Jan 2, 2026
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
1 change: 1 addition & 0 deletions src/languages/en-us.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,7 @@ export const strings = {
WISHLIST_UNPLEDGE_GUARD: 'You did not pledge for this', // should never happen unless someone makes their own http requests
WISHLIST_UNPLEDGE_SUCCESS: 'Successfully unpledged for item!',
WISHLIST_UNPLEDGE: 'Unpledge',
WISHLIST_UNPLEDGE_ITEM: 'Unpledge item',
WISHLIST_URL_LABEL: `Item URL or Name (<a href="${_CC.config.base}supported-sites">Supported Sites</a>)`,
WISHLIST_URL_PLACEHOLDER: 'https://www.amazon.com/dp/B00ZV9RDKK',
WISHLIST_URL_REQUIRED: 'Item URL or Name is required',
Expand Down
2 changes: 1 addition & 1 deletion src/static/js/wishlist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function listen(element, upOrDown) {
try {
event.preventDefault()

const tr = event.currentTarget.parentElement.parentElement
const tr = event.currentTarget.closest('tr')
const otherTr = upOrDown === 'up' ? tr.previousSibling : tr.nextSibling
const numItems = tr.parentElement.rows.length
const animationDuration = '0.45s'
Expand Down
218 changes: 114 additions & 104 deletions src/views/wishlist.pug
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,16 @@ block content
table.table.has-mobile-cards#wishlist-table
thead
th #
th(style='width: 15%;')= lang('WISHLIST_IMAGE')
th(style='width: 25%;')= lang('WISHLIST_NAME')
th(style='width: 50%;')= lang('WISHLIST_NOTE')
th(style='width: 10%; cursor: pointer')
th(style='width: 10%;')= lang('WISHLIST_IMAGE')
th= lang('WISHLIST_NAME')
th(style='width: 40%;')= lang('WISHLIST_NOTE')
th(style='width: 7%; cursor: pointer')
a(href="#", id="sort-price")= lang('WISHLIST_PRICE')
|&nbsp;
|&nbsp;
span#price-arrow
th= lang('WISHLIST_EDIT_ITEM')
th= lang('WISHLIST_ADDED_BY')
if req.params.user === req.user._id
th= lang('WISHLIST_MOVE_TOP')
th= lang('WISHLIST_MOVE_UP')
th= lang('WISHLIST_MOVE_DOWN')
th= lang('WISHLIST_MOVE_BOTTOM')
else
th= lang('WISHLIST_PLEDGE')
th= lang('WISHLIST_DELETE')
th(style='width: 7%;')= lang('WISHLIST_ADDED_BY')
//- Unlabled header to cover action buttons (pledge/unpledge, move, edit, delete)
th(style='width: 10%')
tbody.wishlist-items
each item, index in items
tr(id=item.id)
Expand Down Expand Up @@ -94,98 +87,115 @@ block content
else
td.ugc(data-label=lang('WISHLIST_NOTE'))= item.note
td.price.ugc(data-label=lang('WISHLIST_PRICE'))= item.price
td(data-label=lang('WISHLIST_EDIT_ITEM'))
form.inline(method='GET', action=`${_CC.config.base}wishlist/${req.params.user}/note/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;'
disabled=item.addedBy !== req.user._id
)
span.icon
i.far.fa-edit
if item.addedBy === '_CCUNKNOWN'
td.ugc(data-label=lang('WISHLIST_ADDED_BY'))= lang('WISHLIST_ADDED_BY_GUEST')
else
else
td.ugc(data-label=lang('WISHLIST_ADDED_BY'))= item.addedBy
if req.params.user === req.user._id
td(data-label=lang('WISHLIST_MOVE_ITEM_TOP'))
form.topForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/top/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === 0
)
span.icon
i.fas.fa-angle-double-up
td(data-label=lang('WISHLIST_MOVE_ITEM_UP'))
form.upForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/up/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === 0
)
span.icon
i.fas.fa-arrow-up
td(data-label=lang('WISHLIST_MOVE_ITEM_DOWN'))
form.downForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/down/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === items.length - 1
)
span.icon
i.fas.fa-arrow-down
td(data-label=lang('WISHLIST_MOVE_ITEM_BOTTOM'))
form.bottomForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/bottom/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === items.length - 1
)
span.icon
i.fas.fa-angle-double-down
//- === Unified action button section ===
//- A couple of scenarios here:
//- 1. This is not our list and is an item pledged for by someone else. Only display "Pledged for by [xyz]"
//- 2. This is not our list and
//- a. Is suggested by us. Display "pledge/unpledge" and edit + delete
//- b. Is not suggested by us. Display "pledge/unpledge"
//- 3. This is our list. we will only see items added by us. Display all action buttons (move + edit + delete)
if (req.params.user !== req.user._id) && item.pledgedBy && (item.pledgedBy !== req.user._id)
//- Not our list and item is pledged for by somebody else.
td(style='text-align: center;')
if item.pledgedBy === '_CCUNKNOWN'
span.ugc(style='width: 100%;')=lang('WISHLIST_PLEDGED_GUEST')
else
span.ugc(style='width: 100%;')=lang('WISHLIST_PLEDGED', item.pledgedBy)
else
td(data-label=lang('WISHLIST_PLEDGE'))
if req.params.user !== req.user._id && !item.pledgedBy
form.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/pledge/${item.id}`)
.field.inline
.control.inline
input.inline.button.is-primary(type='submit' value=lang('WISHLIST_PLEDGE_ITEM'))
if item.pledgedBy === req.user._id
form.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/unpledge/${item.id}`)
.field.inline
.control.inline
input.inline.button(type='submit' value=lang('WISHLIST_UNPLEDGE'))
if item.pledgedBy && item.pledgedBy !== req.user._id
if item.pledgedBy === '_CCUNKNOWN'
span.ugc=lang('WISHLIST_PLEDGED_GUEST')
else
span.ugc=lang('WISHLIST_PLEDGED', item.pledgedBy)
td(data-label='Delete Item')
form.inline(
method='POST',
action=`${_CC.config.base}wishlist/${req.params.user}/remove/${item.id}`
)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=item.addedBy !== req.user._id
)
span.icon
i.fas.fa-trash

td
div(style='display: grid; grid-template-columns: repeat(2, auto); width: 100%;')
div(style='display: flex; justify-content: flex-start;')
if req.params.user === req.user._id
//- Our list
//- Move to top
form.topForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/top/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === 0
)
span.icon
i.fas.fa-angle-double-up
//- Move up
form.upForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/up/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === 0
)
span.icon
i.fas.fa-arrow-up
//- Move down
form.downForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/down/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === items.length - 1
)
span.icon
i.fas.fa-arrow-down
//- Move to bottom
form.bottomForm.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/move/bottom/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === items.length - 1
)
span.icon
i.fas.fa-angle-double-down
if item.addedBy === req.user._id
//- We added this. Show edit/delete
//- Edit
form.inline(method='GET', action=`${_CC.config.base}wishlist/${req.params.user}/note/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;'
disabled=item.addedBy !== req.user._id
)
span.icon
i.far.fa-edit
//- Delete
form.inline(
method='POST',
action=`${_CC.config.base}wishlist/${req.params.user}/remove/${item.id}`
)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=item.addedBy !== req.user._id
)
span.icon
i.fas.fa-trash
if req.params.user !== req.user._id
//- Not our list
if !item.pledgedBy
//- Pledge
form.inline(style='justify-self: end;', method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/pledge/${item.id}`)
.field.inline
.control.inline
input.inline.button.is-primary(type='submit' value=lang('WISHLIST_PLEDGE'))
else if item.pledgedBy === req.user._id
//- Unpledge
form.inline(style='justify-self: end;', method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/unpledge/${item.id}`)
.field.inline
.control.inline
input.inline.button(type='submit' value=lang('WISHLIST_UNPLEDGE'))
else
each item, index in items
if req.user._id === item.addedBy || req.params.user !== req.user._id
Expand Down Expand Up @@ -242,7 +252,7 @@ block content
form.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/unpledge/${item.id}`)
.field.inline
.control.inline
input.inline.button(type='submit' value=lang('WISHLIST_UNPLEDGE'))
input.inline.button(type='submit' value=lang('WISHLIST_UNPLEDGE_ITEM'))
if req.user._id === req.params.user
form.inline(method='POST', action=`${_CC.config.base}wishlist/${req.params.user}/remove/${item.id}`)
.field.inline
Expand Down