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:
Emi Matchu 2024-01-23 04:20:03 -08:00
parent 23240005a2
commit 0011fdf76a
3 changed files with 83 additions and 90 deletions

View file

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

View file

@ -59,57 +59,59 @@
background: #E2E8F0 background: #E2E8F0
color: #1A202C color: #1A202C
.user-lists-section .user-lists-info
grid-area: lists grid-area: lists
font-size: 85% font-size: 85%
text-align: left text-align: left
.dialog-opener .user-lists-form-opener
&::after &::after
content: " " content: " "
dialog .user-lists-form
background: $background-color background: $background-color
border: 1px solid $module-border-color border: 1px solid $module-border-color
border-radius: .5em border-radius: .5em
padding: 1em padding: 1em
width: 30em width: 30em
text-align: center text-align: center
z-index: 2 z-index: 2
margin-top: .5em margin-top: .5em
box-shadow: 0px 1px 4px #666 margin-inline: auto
margin-bottom: 1.5em
font-size: 85%
h3 h3
font-size: 150% font-size: 150%
font-weight: bold font-weight: bold
margin-bottom: .25em 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 li
+clearfix list-style: none
margin-bottom: .5em word-wrap: break-word
div label.unlisted
float: left font-style: italic
margin: 0 5%
text-align: left
width: 40%
li
list-style: none
word-wrap: break-word
label.unlisted
font-style: italic
form form
padding: .5em 0 padding: .5em 0
select select
width: 9em width: 9em
input[type=number] input[type=number]
margin-right: .5em margin-right: .5em
width: 3em width: 3em
.item-description .item-description
margin-top: .5em margin-top: .5em

View file

@ -31,42 +31,42 @@
= 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? - if user_signed_in?
.user-lists-section .user-lists-info
= link_to t('items.show.closet_hangers.button'), = link_to t('items.show.closet_hangers.button'),
user_closet_hangers_path(current_user), user_closet_hangers_path(current_user),
class: 'dialog-opener' class: 'user-lists-form-opener'
%dialog
%h3 = 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
= t 'items.show.closet_hangers.header_html', %h3
user_items_link: link_to(t('your_items'), = t 'items.show.closet_hangers.header_html',
user_closet_hangers_path(current_user)) user_items_link: link_to(t('your_items'),
= form_tag update_quantities_user_item_closet_hangers_path(:user_id => current_user, :item_id => item), :method => :put do user_closet_hangers_path(current_user))
.closet-hangers-ownership-groups .closet-hangers-ownership-groups
- [true, false].each do |owned| - [true, false].each do |owned|
- lists = current_user_lists[owned] - lists = current_user_lists[owned]
%div %div
%h4= closet_lists_group_name(:you, owned) %h4= closet_lists_group_name(:you, owned)
%ul %ul
- lists.each_with_index do |list, index| - lists.each_with_index do |list, index|
%li %li
= number_field_tag "quantity[#{list.id}]", = number_field_tag "quantity[#{list.id}]",
current_user_quantities[list.id], min: 0, current_user_quantities[list.id], min: 0,
autofocus: owned && index == 0 autofocus: owned && index == 0
= label_tag "quantity[#{list.id}]", list.name = label_tag "quantity[#{list.id}]", list.name
%li %li
= number_field_tag "quantity[#{owned}]", = number_field_tag "quantity[#{owned}]",
current_user_quantities[owned], min: 0, current_user_quantities[owned], min: 0,
autofocus: owned && lists.empty? autofocus: owned && lists.empty?
- unless lists.empty? - unless lists.empty?
= label_tag "quantity[#{owned}]", = label_tag "quantity[#{owned}]",
t('closet_lists.unlisted_name'), t('closet_lists.unlisted_name'),
:class => 'unlisted' :class => 'unlisted'
- else - else
= label_tag "quantity[#{owned}]", = label_tag "quantity[#{owned}]",
t('items.show.closet_hangers.quantity_label') t('items.show.closet_hangers.quantity_label')
= submit_tag t('items.show.closet_hangers.submit') = submit_tag t('items.show.closet_hangers.submit')
%p.item-description= item.description %p.item-description= item.description