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

19
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");
if (dialog.showModal) { // check browser support
opener.addEventListener("click", (event) => { opener.addEventListener("click", (event) => {
dialog.show(); form.toggleAttribute("hidden");
event.preventDefault(); 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);
} }

12
app/assets/stylesheets/partials/_item_header.sass
View file

@ -59,16 +59,16 @@
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
@ -77,12 +77,14 @@
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 .closet-hangers-ownership-groups
+clearfix +clearfix

8
app/views/items/_item_header.haml
View file

@ -31,16 +31,16 @@
= 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
= 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 %h3
= t 'items.show.closet_hangers.header_html', = t 'items.show.closet_hangers.header_html',
user_items_link: link_to(t('your_items'), user_items_link: link_to(t('your_items'),
user_closet_hangers_path(current_user)) 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 .closet-hangers-ownership-groups
- [true, false].each do |owned| - [true, false].each do |owned|
- lists = current_user_lists[owned] - lists = current_user_lists[owned]