Move user bulk lists form into a toggleable form, not a dialog
My intent is to next add behavior to save this state across pageloads, for power users to not have to always reopen it!
This commit is contained in:
parent
23240005a2
commit
0011fdf76a
3 changed files with 83 additions and 90 deletions
|
|
@ -1,21 +1,12 @@
|
|||
const userListSections = document.querySelectorAll(
|
||||
".item-header .user-lists-section");
|
||||
for (const section of userListSections) {
|
||||
const headers = document.querySelectorAll(".item-header");
|
||||
for (const header of headers) {
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
const form = header.querySelector(".user-lists-form");
|
||||
const opener = header.querySelector(".user-lists-form-opener");
|
||||
opener.addEventListener("click", (event) => {
|
||||
form.toggleAttribute("hidden");
|
||||
event.preventDefault();
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(`Error applying dialog behavior to item header:`, error);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,57 +59,59 @@
|
|||
background: #E2E8F0
|
||||
color: #1A202C
|
||||
|
||||
.user-lists-section
|
||||
.user-lists-info
|
||||
grid-area: lists
|
||||
font-size: 85%
|
||||
text-align: left
|
||||
|
||||
.dialog-opener
|
||||
.user-lists-form-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
|
||||
.user-lists-form
|
||||
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
|
||||
margin-inline: auto
|
||||
margin-bottom: 1.5em
|
||||
font-size: 85%
|
||||
|
||||
h3
|
||||
font-size: 150%
|
||||
font-weight: bold
|
||||
margin-bottom: .25em
|
||||
h3
|
||||
font-size: 150%
|
||||
font-weight: bold
|
||||
margin-bottom: .75em
|
||||
|
||||
.closet-hangers-ownership-groups
|
||||
+clearfix
|
||||
margin-bottom: .5em
|
||||
|
||||
div
|
||||
float: left
|
||||
margin: 0 5%
|
||||
text-align: left
|
||||
width: 40%
|
||||
|
||||
.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
|
||||
li
|
||||
list-style: none
|
||||
word-wrap: break-word
|
||||
|
||||
label.unlisted
|
||||
font-style: italic
|
||||
|
||||
form
|
||||
padding: .5em 0
|
||||
form
|
||||
padding: .5em 0
|
||||
|
||||
select
|
||||
width: 9em
|
||||
select
|
||||
width: 9em
|
||||
|
||||
input[type=number]
|
||||
margin-right: .5em
|
||||
width: 3em
|
||||
input[type=number]
|
||||
margin-right: .5em
|
||||
width: 3em
|
||||
|
||||
.item-description
|
||||
margin-top: .5em
|
||||
|
|
|
|||
|
|
@ -31,42 +31,42 @@
|
|||
= link_to t('items.show.resources.auction_genie'), auction_genie_url_for(item)
|
||||
|
||||
- if user_signed_in?
|
||||
.user-lists-section
|
||||
.user-lists-info
|
||||
= 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
|
||||
- [true, false].each do |owned|
|
||||
- lists = current_user_lists[owned]
|
||||
%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')
|
||||
class: 'user-lists-form-opener'
|
||||
|
||||
= form_tag update_quantities_user_item_closet_hangers_path(user_id: current_user, item_id: item), method: :put, class: 'user-lists-form', hidden: true do
|
||||
%h3
|
||||
= t 'items.show.closet_hangers.header_html',
|
||||
user_items_link: link_to(t('your_items'),
|
||||
user_closet_hangers_path(current_user))
|
||||
.closet-hangers-ownership-groups
|
||||
- [true, false].each do |owned|
|
||||
- lists = current_user_lists[owned]
|
||||
%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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue