From cbf69e118947f3705c116310611d26dcb81db4a5 Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Fri, 26 Dec 2025 23:19:39 -0800 Subject: [PATCH] [WV2] Split template into partials --- app/assets/stylesheets/wardrobe/show.css | 2 +- app/views/wardrobe/_item_card.html.haml | 17 +++++ app/views/wardrobe/_pose_picker.html.haml | 39 +++++++++++ app/views/wardrobe/_search_results.html.haml | 12 +--- .../wardrobe/_species_color_picker.html.haml | 12 ++++ app/views/wardrobe/show.html.haml | 65 +------------------ 6 files changed, 73 insertions(+), 74 deletions(-) create mode 100644 app/views/wardrobe/_item_card.html.haml create mode 100644 app/views/wardrobe/_pose_picker.html.haml create mode 100644 app/views/wardrobe/_species_color_picker.html.haml diff --git a/app/assets/stylesheets/wardrobe/show.css b/app/assets/stylesheets/wardrobe/show.css index aeaa9797..b6b89e87 100644 --- a/app/assets/stylesheets/wardrobe/show.css +++ b/app/assets/stylesheets/wardrobe/show.css @@ -643,7 +643,7 @@ body.wardrobe-v2 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } - &:hover .item-add-button { + &:hover :is(.item-add-button, .item-remove-button) { opacity: 1; } } diff --git a/app/views/wardrobe/_item_card.html.haml b/app/views/wardrobe/_item_card.html.haml new file mode 100644 index 00000000..e111a0be --- /dev/null +++ b/app/views/wardrobe/_item_card.html.haml @@ -0,0 +1,17 @@ +- is_worn = @outfit.worn_items.include?(item) +%li.item-card + .item-thumbnail + = image_tag item.thumbnail_url, alt: item.name, loading: "lazy" + .item-info + .item-name= item.name + .item-badges + = render "items/badges/kind", item: item + = render "items/badges/first_seen", item: item + - if is_worn + = button_to wardrobe_v2_path, method: :get, class: "item-remove-button", title: "Remove #{item.name}", "aria-label": "Remove #{item.name}" do + ❌ + = outfit_state_params @outfit.without_item(item) + - else + = button_to wardrobe_v2_path, method: :get, class: "item-add-button", title: "Add #{item.name}", "aria-label": "Add #{item.name}" do + ➕ + = outfit_state_params @outfit.with_item(item) diff --git a/app/views/wardrobe/_pose_picker.html.haml b/app/views/wardrobe/_pose_picker.html.haml new file mode 100644 index 00000000..1fb83f31 --- /dev/null +++ b/app/views/wardrobe/_pose_picker.html.haml @@ -0,0 +1,39 @@ +- pose_info = pose_emoji_and_label(@selected_pose) +%button#pose-picker-button.pose-picker-button{type: "button", popovertarget: "pose-picker-popover"} + %span.pose-emoji= pose_info[:emoji] + %span.pose-label= pose_info[:label] + %span.chevron ▾ + +%pose-picker-popover#pose-picker-popover{popover: "auto"} + = form_with url: wardrobe_v2_path, method: :get, class: "pose-picker-form" do |f| + = outfit_state_params except: [:pose] + %table.pose-picker-table + %thead + %tr + %th + %th + %span.emoji-icon{title: "Happy"} 😀 + %th + %span.emoji-icon{title: "Sad"} 😢 + %th + %span.emoji-icon{title: "Sick"} 🤢 + %tbody + %tr + %th + %span.emoji-icon{title: "Masculine"} 💁‍♂️ + %td + = render "pose_option", pose: "HAPPY_MASC", pet_state: @available_poses["HAPPY_MASC"], selected: @selected_pose == "HAPPY_MASC" + %td + = render "pose_option", pose: "SAD_MASC", pet_state: @available_poses["SAD_MASC"], selected: @selected_pose == "SAD_MASC" + %td + = render "pose_option", pose: "SICK_MASC", pet_state: @available_poses["SICK_MASC"], selected: @selected_pose == "SICK_MASC" + %tr + %th + %span.emoji-icon{title: "Feminine"} 💁‍♀️ + %td + = render "pose_option", pose: "HAPPY_FEM", pet_state: @available_poses["HAPPY_FEM"], selected: @selected_pose == "HAPPY_FEM" + %td + = render "pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: @selected_pose == "SAD_FEM" + %td + = render "pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: @selected_pose == "SICK_FEM" + = submit_tag "Change pose", name: nil, class: "pose-submit-button" diff --git a/app/views/wardrobe/_search_results.html.haml b/app/views/wardrobe/_search_results.html.haml index 67731c89..695abab3 100644 --- a/app/views/wardrobe/_search_results.html.haml +++ b/app/views/wardrobe/_search_results.html.haml @@ -4,17 +4,7 @@ %ul.search-results-list - @search_results.each do |item| - %li.item-card - .item-thumbnail - = image_tag item.thumbnail_url, alt: item.name, loading: "lazy" - .item-info - .item-name= item.name - .item-badges - = render "items/badges/kind", item: item - = render "items/badges/first_seen", item: item - = button_to wardrobe_v2_path, method: :get, class: "item-add-button", title: "Add #{item.name}", "aria-label": "Add #{item.name}" do - ➕ - = outfit_state_params @outfit.with_item(item) + = render "item_card", item: item = will_paginate @search_results, param_name: "q[page]", params: { q: params[:q], species: @outfit.species_id, color: @outfit.color_id, objects: params[:objects] } diff --git a/app/views/wardrobe/_species_color_picker.html.haml b/app/views/wardrobe/_species_color_picker.html.haml new file mode 100644 index 00000000..7e762af6 --- /dev/null +++ b/app/views/wardrobe/_species_color_picker.html.haml @@ -0,0 +1,12 @@ +%species-color-picker + = form_with url: wardrobe_v2_path, method: :get do |f| + = outfit_state_params except: [:color, :species] + = select_tag :color, + options_from_collection_for_select(@colors, "id", "human_name", + @selected_color&.id), + "aria-label": "Pet color" + = select_tag :species, + options_from_collection_for_select(@species, "id", "human_name", + @selected_species&.id), + "aria-label": "Pet species" + = submit_tag "Go", name: nil diff --git a/app/views/wardrobe/show.html.haml b/app/views/wardrobe/show.html.haml index 22ed0c02..bcfb2795 100644 --- a/app/views/wardrobe/show.html.haml +++ b/app/views/wardrobe/show.html.haml @@ -30,59 +30,10 @@ = outfit_viewer @outfit .preview-controls - %species-color-picker - = form_with url: wardrobe_v2_path, method: :get do |f| - = outfit_state_params except: [:color, :species] - = select_tag :color, - options_from_collection_for_select(@colors, "id", "human_name", - @selected_color&.id), - "aria-label": "Pet color" - = select_tag :species, - options_from_collection_for_select(@species, "id", "human_name", - @selected_species&.id), - "aria-label": "Pet species" - = submit_tag "Go", name: nil + = render "species_color_picker" - if @pet_type - - pose_info = pose_emoji_and_label(@selected_pose) - %button#pose-picker-button.pose-picker-button{type: "button", popovertarget: "pose-picker-popover"} - %span.pose-emoji= pose_info[:emoji] - %span.pose-label= pose_info[:label] - %span.chevron ▾ - - %pose-picker-popover#pose-picker-popover{popover: "auto"} - = form_with url: wardrobe_v2_path, method: :get, class: "pose-picker-form" do |f| - = outfit_state_params except: [:pose] - %table.pose-picker-table - %thead - %tr - %th - %th - %span.emoji-icon{title: "Happy"} 😀 - %th - %span.emoji-icon{title: "Sad"} 😢 - %th - %span.emoji-icon{title: "Sick"} 🤢 - %tbody - %tr - %th - %span.emoji-icon{title: "Masculine"} 💁‍♂️ - %td - = render "pose_option", pose: "HAPPY_MASC", pet_state: @available_poses["HAPPY_MASC"], selected: @selected_pose == "HAPPY_MASC" - %td - = render "pose_option", pose: "SAD_MASC", pet_state: @available_poses["SAD_MASC"], selected: @selected_pose == "SAD_MASC" - %td - = render "pose_option", pose: "SICK_MASC", pet_state: @available_poses["SICK_MASC"], selected: @selected_pose == "SICK_MASC" - %tr - %th - %span.emoji-icon{title: "Feminine"} 💁‍♀️ - %td - = render "pose_option", pose: "HAPPY_FEM", pet_state: @available_poses["HAPPY_FEM"], selected: @selected_pose == "HAPPY_FEM" - %td - = render "pose_option", pose: "SAD_FEM", pet_state: @available_poses["SAD_FEM"], selected: @selected_pose == "SAD_FEM" - %td - = render "pose_option", pose: "SICK_FEM", pet_state: @available_poses["SICK_FEM"], selected: @selected_pose == "SICK_FEM" - = submit_tag "Change pose", name: nil, class: "pose-submit-button" + = render "pose_picker" .outfit-controls-section .item-search-form @@ -106,14 +57,4 @@ %h3.zone-label= zone_group[:zone_label] %ul.items-list - zone_group[:items].each do |item| - %li.item-card - .item-thumbnail - = image_tag item.thumbnail_url, alt: item.name, loading: "lazy" - .item-info - .item-name= item.name - .item-badges - = render "items/badges/kind", item: item - = render "items/badges/first_seen", item: item - = button_to wardrobe_v2_path, method: :get, class: "item-remove-button", title: "Remove #{item.name}", "aria-label": "Remove #{item.name}" do - ❌ - = outfit_state_params @outfit.without_item(item) + = render "item_card", item: item