dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Move item lists bulk management form to an openable dialog in the header

Browse source
This commit is contained in:
Emi Matchu 2024-01-21 06:20:32 -08:00
parent 77d88e50a6
commit 507b346c2c
6 changed files with 116 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/items/item_header.js Normal file
View file

@ -0,0 +1,22 @@
const userListSections = document.querySelectorAll(
".item-header .user-lists-section");
for (const section of userListSections) {
try {
const dialog = section.querySelector("dialog");
const opener = section.querySelector(".dialog-opener");
const closer = section.querySelector(".dialog-closer");
if (dialog.showModal) { // check browser support
opener.addEventListener("click", (event) => {
dialog.show();
event.preventDefault();
});
document.body.addEventListener("click", (event) => {
if (dialog.open && !section.contains(event.target)) {
dialog.close();
}
});
}
} catch (error) {
console.error(`Error applying dialog behavior to item header:`, error);
}
}

41
app/assets/stylesheets/items/_show.sass
View file

@ -6,47 +6,6 @@ body.items-show
.item-header
+item-header
#your-items-form
border: 1px solid $module-border-color
font-size: 85%
margin-bottom: 2em
margin-left: auto
margin-right: auto
padding: 1em
width: 30em
h3
font-size: 150%
font-weight: bold
margin-bottom: .25em
#closet-hangers-ownership-groups
+clearfix
margin-bottom: .5em
div
float: left
margin: 0 5%
text-align: left
width: 40%
li
list-style: none
word-wrap: break-word
label.unlisted
font-style: italic
form
padding: .5em 0
select
width: 9em
input[type=number]
margin-right: .5em
width: 3em
#item-contributors
+subtle-banner
clear: both

54
app/assets/stylesheets/partials/_item_header.sass
View file

@ -1,4 +1,5 @@
@import "../partials/clean/constants"
@import "../partials/clean/mixins"
=item-header
border-bottom: 1px solid $module-border-color
@ -7,7 +8,7 @@
.item-header-main
display: grid
grid-template-areas: "img gap1" "img name" "img links" "img gap2" "nav nav"
grid-template-areas: "img gap1" "img name" "img links" "img lists" "img gap2" "nav nav"
align-items: center
justify-content: center
column-gap: 1em
@ -58,6 +59,57 @@
background: #E2E8F0
color: #1A202C
.user-lists-section
grid-area: lists
font-size: 85%
text-align: left
.dialog-opener
&::after
content: " ›"
dialog
background: $background-color
border: 1px solid $module-border-color
border-radius: .5em
padding: 1em
width: 30em
text-align: center
z-index: 2
margin-top: .5em
box-shadow: 0px 1px 4px #666
h3
font-size: 150%
font-weight: bold
margin-bottom: .25em
.closet-hangers-ownership-groups
+clearfix
margin-bottom: .5em
div
float: left
margin: 0 5%
text-align: left
width: 40%
li
list-style: none
word-wrap: break-word
label.unlisted
font-style: italic
form
padding: .5em 0
select
width: 9em
input[type=number]
margin-right: .5em
width: 3em
.item-description
margin-top: .5em

40
app/views/items/_item_header.haml
View file

@ -28,6 +28,43 @@
= link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
= link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
- if user_signed_in?
.user-lists-section
= link_to t('items.show.closet_hangers.button'),
user_closet_hangers_path(current_user),
class: 'dialog-opener'
%dialog
%h3
= t 'items.show.closet_hangers.header_html',
user_items_link: link_to(t('your_items'),
user_closet_hangers_path(current_user))
= form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => @item), :method => :put do
.closet-hangers-ownership-groups
- @current_user_lists.each do |owned, lists|
%div
%h4= closet_lists_group_name(:you, owned)
%ul
- lists.each_with_index do |list, index|
%li
= number_field_tag "quantity[#{list.id}]",
@current_user_quantities[list.id], min: 0,
autofocus: owned && index == 0
= label_tag "quantity[#{list.id}]", list.name
%li
= number_field_tag "quantity[#{owned}]",
@current_user_quantities[owned], min: 0,
autofocus: owned && lists.empty?
- unless lists.empty?
= label_tag "quantity[#{owned}]",
t('closet_lists.unlisted_name'),
:class => 'unlisted'
- else
= label_tag "quantity[#{owned}]",
t('items.show.closet_hangers.quantity_label')
= submit_tag t('items.show.closet_hangers.submit')
%p.item-description= @item.description
%nav.item-subpages-nav
@ -46,3 +83,6 @@
count: trades[:offering].size),
item_trades_path(item, type: 'seeking'),
'data-is-current' => current_subpage == 'trades_seeking'
- content_for :javascripts do
= javascript_include_tag 'items/item_header'

31
app/views/items/show.html.haml
View file

@ -4,37 +4,6 @@
= render partial: "item_header",
locals: {item: @item, trades: @trades, current_subpage: "preview"}
- if user_signed_in?
#your-items-form
%h3
= t '.closet_hangers.header_html',
:user_items_link => link_to(t('your_items'),
user_closet_hangers_path(current_user))
= form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => @item), :method => :put do
#closet-hangers-ownership-groups
- @current_user_lists.each do |owned, lists|
%div
%h4= closet_lists_group_name(:you, owned)
%ul
- lists.each do |list|
%li
= number_field_tag "quantity[#{list.id}]",
@current_user_quantities[list.id], :min => 0
= label_tag "quantity[#{list.id}]", list.name
%li
= number_field_tag "quantity[#{owned}]",
@current_user_quantities[owned], :min => 0
- unless lists.empty?
= label_tag "quantity[#{owned}]",
t('closet_lists.unlisted_name'),
:class => 'unlisted'
- else
= label_tag "quantity[#{owned}]",
t('.closet_hangers.quantity_label')
= submit_tag t('.closet_hangers.submit')
#outfit-preview-root{'data-item-id': @item.id}
- unless @contributors_with_counts.empty?

1
config/locales/en.yml
View file

@ -316,6 +316,7 @@ en:
trading_post: Trades
auction_genie: Auctions
closet_hangers:
button: Add to your lists
header_html: Track this in %{user_items_link}
quantity_label: How many?
submit: Save to Your Items