Move item lists bulk management form to an openable dialog in the header
This commit is contained in:
parent
77d88e50a6
commit
507b346c2c
6 changed files with 116 additions and 73 deletions
22
app/assets/javascripts/items/item_header.js
Normal file
22
app/assets/javascripts/items/item_header.js
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
|
@ -6,47 +6,6 @@ body.items-show
|
||||||
.item-header
|
.item-header
|
||||||
+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
|
#item-contributors
|
||||||
+subtle-banner
|
+subtle-banner
|
||||||
clear: both
|
clear: both
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@import "../partials/clean/constants"
|
@import "../partials/clean/constants"
|
||||||
|
@import "../partials/clean/mixins"
|
||||||
|
|
||||||
=item-header
|
=item-header
|
||||||
border-bottom: 1px solid $module-border-color
|
border-bottom: 1px solid $module-border-color
|
||||||
|
@ -7,7 +8,7 @@
|
||||||
|
|
||||||
.item-header-main
|
.item-header-main
|
||||||
display: grid
|
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
|
align-items: center
|
||||||
justify-content: center
|
justify-content: center
|
||||||
column-gap: 1em
|
column-gap: 1em
|
||||||
|
@ -58,6 +59,57 @@
|
||||||
background: #E2E8F0
|
background: #E2E8F0
|
||||||
color: #1A202C
|
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
|
.item-description
|
||||||
margin-top: .5em
|
margin-top: .5em
|
||||||
|
|
|
@ -28,6 +28,43 @@
|
||||||
= link_to t('items.show.resources.trading_post'), trading_post_url_for(item)
|
= 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)
|
= 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
|
%p.item-description= @item.description
|
||||||
|
|
||||||
%nav.item-subpages-nav
|
%nav.item-subpages-nav
|
||||||
|
@ -46,3 +83,6 @@
|
||||||
count: trades[:offering].size),
|
count: trades[:offering].size),
|
||||||
item_trades_path(item, type: 'seeking'),
|
item_trades_path(item, type: 'seeking'),
|
||||||
'data-is-current' => current_subpage == 'trades_seeking'
|
'data-is-current' => current_subpage == 'trades_seeking'
|
||||||
|
|
||||||
|
- content_for :javascripts do
|
||||||
|
= javascript_include_tag 'items/item_header'
|
||||||
|
|
|
@ -4,37 +4,6 @@
|
||||||
= render partial: "item_header",
|
= render partial: "item_header",
|
||||||
locals: {item: @item, trades: @trades, current_subpage: "preview"}
|
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}
|
#outfit-preview-root{'data-item-id': @item.id}
|
||||||
|
|
||||||
- unless @contributors_with_counts.empty?
|
- unless @contributors_with_counts.empty?
|
||||||
|
|
|
@ -316,6 +316,7 @@ en:
|
||||||
trading_post: Trades
|
trading_post: Trades
|
||||||
auction_genie: Auctions
|
auction_genie: Auctions
|
||||||
closet_hangers:
|
closet_hangers:
|
||||||
|
button: Add to your lists
|
||||||
header_html: Track this in %{user_items_link}
|
header_html: Track this in %{user_items_link}
|
||||||
quantity_label: How many?
|
quantity_label: How many?
|
||||||
submit: Save to Your Items
|
submit: Save to Your Items
|
||||||
|
|
Loading…
Reference in a new issue