make wishlist prettier, it looked utilitarian

This commit is contained in:
Sam Wing 2019-11-17 07:42:42 -05:00
parent 7b6633d25f
commit 3eaed2c43c
2 changed files with 82 additions and 76 deletions

View file

@ -36,4 +36,9 @@ ul.noStyle li {
.table.has-mobile-cards tr.detail { margin-top: -1rem } .table.has-mobile-cards tr.detail { margin-top: -1rem }
.table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td { display: -ms-flexbox; display: flex; width: auto; -ms-flex-pack: end; justify-content: flex-end; text-align: right; border-bottom: 1px solid #f5f5f5 } .table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td { display: -ms-flexbox; display: flex; width: auto; -ms-flex-pack: end; justify-content: flex-end; text-align: right; border-bottom: 1px solid #f5f5f5 }
.table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td:before { content: attr(data-label); font-weight: 600; margin-right: auto; padding-right: .5em; text-align: left } .table.has-mobile-cards tr:not(.detail):not(.is-empty):not(.table-footer) td:before { content: attr(data-label); font-weight: 600; margin-right: auto; padding-right: .5em; text-align: left }
}
.ugc {
white-space: pre-wrap;
word-break: break-word;
} }

View file

@ -2,89 +2,90 @@ extends layout.pug
block content block content
if process.env.TABLE !== 'false' if process.env.TABLE !== 'false'
table.table.has-mobile-cards .box
thead table.table.has-mobile-cards
th Name thead
th(style='width: 50%;') Note th Name
th Edit Note th(style='width: 50%;') Note
if req.params.user === req.user._id th Edit Note
th Move Up if req.params.user === req.user._id
th Move Down th Move Up
else th Move Down
th Pledge else
th Delete th Pledge
tbody th Delete
each item, index in wishlist tbody
if req.user._id === item.addedBy || req.params.user !== req.user._id each item, index in wishlist
tr if req.user._id === item.addedBy || req.params.user !== req.user._id
if item.url tr
td(data-label='Name') if item.url
a( td(data-label='Name')
href=item.url, a(
rel='noopener noreferrer', href=item.url,
target='_blank' rel='noopener noreferrer',
)= (item.name ? item.name : item.url) target='_blank'
else )= (item.name ? item.name : item.url)
td(data-label='Name')= item.name else
td(data-label='Note', style='white-space: pre-wrap;')= item.note td.ugc(data-label='Name')= item.name
td(data-label='Edit Note') td.ugc(data-label='Note')= item.note
form.inline(method='GET', action=`/wishlist/${req.params.user}/note/${item.id}`) td(data-label='Edit Note')
input(type='hidden', name='current', value=item.note) form.inline(method='GET', action=`/wishlist/${req.params.user}/note/${item.id}`)
.field.inline input(type='hidden', name='current', value=item.note)
.control.inline .field.inline
button.button.is-text( .control.inline
type='submit', button.button.is-text(
style='text-decoration: none;' type='submit',
disabled=item.addedBy !== req.user._id style='text-decoration: none;'
) disabled=item.addedBy !== req.user._id
span.icon )
i.far.fa-edit span.icon
if req.params.user === req.user._id i.far.fa-edit
td(data-label='Move Item Up') if req.params.user === req.user._id
form.inline(method='POST', action=`/wishlist/${req.params.user}/move/up/${item.id}`) td(data-label='Move Item Up')
form.inline(method='POST', action=`/wishlist/${req.params.user}/move/up/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === firstCanSee
)
span.icon
i.fas.fa-arrow-up
td(data-label='Move Item Down')
form.inline(method='POST', action=`/wishlist/${req.params.user}/move/down/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === lastCanSee
)
span.icon
i.fas.fa-arrow-down
else
td(data-label='Pledge')
if req.params.user !== req.user._id && !item.pledgedBy
form.inline(method='POST', action=`/wishlist/${req.params.user}/pledge/${item.id}`)
.field.inline
.control.inline
input.inline.button.is-primary(type='submit' value='Pledge')
if item.pledgedBy === req.user._id
form.inline(method='POST', action=`/wishlist/${req.params.user}/unpledge/${item.id}`)
.field.inline
.control.inline
input.inline.button(type='submit' value='Unpledge')
td(data-label='Delete Item')
form.inline(method='POST', action=`/wishlist/${req.params.user}/remove/${item.id}`)
.field.inline .field.inline
.control.inline .control.inline
button.button.is-text( button.button.is-text(
type='submit', type='submit',
style='text-decoration: none;', style='text-decoration: none;',
disabled=index === firstCanSee disabled=item.addedBy !== req.user._id
) )
span.icon span.icon
i.fas.fa-arrow-up i.fas.fa-trash
td(data-label='Move Item Down')
form.inline(method='POST', action=`/wishlist/${req.params.user}/move/down/${item.id}`)
.field.inline
.control.inline
button.button.is-text(
type='submit',
style='text-decoration: none;',
disabled=index === lastCanSee
)
span.icon
i.fas.fa-arrow-down
else
td(data-label='Pledge')
if req.params.user !== req.user._id && !item.pledgedBy
form.inline(method='POST', action=`/wishlist/${req.params.user}/pledge/${item.id}`)
.field.inline
.control.inline
input.inline.button.is-primary(type='submit' value='Pledge')
if item.pledgedBy === req.user._id
form.inline(method='POST', action=`/wishlist/${req.params.user}/unpledge/${item.id}`)
.field.inline
.control.inline
input.inline.button(type='submit' value='Unpledge')
td(data-label='Delete Item')
form.inline(method='POST', action=`/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
else else
each item, index in wishlist each item, index in wishlist