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

Move user bulk lists form into a toggleable form, not a dialog

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/assets/javascripts/items/item_header.js
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);
} }

80
app/assets/stylesheets/partials/_item_header.sass
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

68
app/views/items/_item_header.haml
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