From 0011fdf76abaff916d2605c0140434daf08b6148 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Tue, 23 Jan 2024 04:20:03 -0800 Subject: [PATCH] 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! --- app/assets/javascripts/items/item_header.js | 25 ++---- .../stylesheets/partials/_item_header.sass | 80 ++++++++++--------- app/views/items/_item_header.haml | 68 ++++++++-------- 3 files changed, 83 insertions(+), 90 deletions(-) diff --git a/app/assets/javascripts/items/item_header.js b/app/assets/javascripts/items/item_header.js index ad615f4c..9fc74b30 100644 --- a/app/assets/javascripts/items/item_header.js +++ b/app/assets/javascripts/items/item_header.js @@ -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); } diff --git a/app/assets/stylesheets/partials/_item_header.sass b/app/assets/stylesheets/partials/_item_header.sass index a61fe8e2..1554d1c2 100644 --- a/app/assets/stylesheets/partials/_item_header.sass +++ b/app/assets/stylesheets/partials/_item_header.sass @@ -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 diff --git a/app/views/items/_item_header.haml b/app/views/items/_item_header.haml index 80b27872..73c06447 100644 --- a/app/views/items/_item_header.haml +++ b/app/views/items/_item_header.haml @@ -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