OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity
impress/app/views/items/show.html.haml

134 lines
6.7 KiB
Text
Raw Normal View History

add item name to title
2011-05-13 05:07:59 -07:00
- title @item.name
give user paths a canonical tag
2011-07-26 15:56:14 -07:00
- canonical_path @item
Add responsive layout for item page We add a new `use_responsive_design` helper, for pages to opt into this new CSS—mostly just because like… it's *worse* to apply these styles for pages that don't expect it 😅 And then, I fix up a couple things on the item page (including in the general items layout) to match! I'm doing this because the species face picker layout is going to want some responsive awareness, and I want to be doing that from the start!
2024-09-05 16:18:48 -07:00
- use_responsive_design
pretty item urls
2011-05-20 16:29:04 -07:00
Add tab navigation to get to item trade pages
2024-01-21 04:40:25 -08:00
= render partial: "item_header",
Oops, load the data for the bulk item quantity form on the trades page!
2024-01-21 06:42:24 -08:00
locals: {item: @item, trades: @trades, current_subpage: "preview",
current_user_lists: @current_user_lists,
current_user_quantities: @current_user_quantities}
basic hanger interface from item
2011-07-14 09:50:24 -07:00
Add warning for "Baby Body Paint" bugs I *think* what I'm observing is that: 1. The zone restrictions are different between these items. 2. The zone restrictions *change* when reloading the page sometimes. (I assume from remodeling?) 3. The items look very buggy on many pets, because many appearances seem to expect different zone restrictions than the item actually has. I think what this means is: 1. TNT has finally unbound restricted zones from the item level, and allowed different appearances to have different restrictions. Neat! 2. The API still serves it the same way, as a field on the item. So I think this means we need to update our schema to reflect the fact that an item's `zones_restrict` field isn't *really* a property of the item; it's a property of the combination of the item and the current body ID. My gut take here is that maybe this means it's time for the Large Refactor that I've kinda been interested in for a while, but been avoiding because of Impress 2020 compatibility issues: instead of a `body_id` field on assets, and having them directly belong to items, make an `ItemAppearance` record (closer to how 2020's GQL API modeled it, I was looking ahead to this possibility!) that's keyed on item and body ID, and assets belong to *that*. Then, we could move the zones restriction field onto the `ItemAppearance` record instead. And then it doesn't really matter to us how TNT models it internally; whatever we saw is what we use. (Again, I looked ahead to this in the 2020 app, and tried to use the `restrictedZones` field on `ItemAppearance` when possible—even though it secretly just reads directly from the `Item`!) …but that's a pretty big departure from how things are modeled now, and isn't something we can just throw together—especially coordinating it across both apps. I was getting close to being able to shut off 2020 from a *front-facing* perspective (but still keeping a lot of the GQL endpoints open for the wardrobe-2020 frontend), but I don't think we're very close to being able to try to target turning off 2020's *backend* as a prereq to this; or at least, if we do, we should expect that to take a while. (Counting now, there's still 9 GQL queries—not as many as I expected tbh, but still quite a few.) So idk how to sequence this! But for now, let's put out a warning, and start setting expectations.
2024-02-27 18:16:23 -08:00
- if @item.name.include? "Baby Body Paint"
%p.warning
The Baby Body Paint items seem to have new zone restriction rules that our
system doesn't support yet, whuh oh! This might require major changes to
how we handle zones. Until then, these items will be <em>very</em> buggy,
sorry!
Put the new item preview in a Turbo frame Nice, gotta say, this is a pretty neat way of making things feel more app-y! There's some missing pieces here about like, loading state etc, but the vibes are pretty good, and the implementation was dead-easy!
2024-07-01 13:48:20 -07:00
= turbo_frame_tag "item-preview" do
Oops, fix layout for error when item preview fails to load Oh right, I need the error indicator to be part of a container that also contains the outfit viewer, to appear below it! I was motivated because I realized I forgot the Customize More button so now I'm building it lol
2024-09-06 16:24:58 -07:00
.preview-area
WIP: Outfit viewers on pet type Rainbow Pool page Now that we have such a convenient lil outfit viewer component we built for the item page preview, it's easy peasy to drop it in here too! And it's all nice and lightweight, since in this case it's basically just. image tags, with some supporting enhancements. Anyway, this page has no actual useful styles of its own yet. Gonna make it look nice and such!
2024-09-26 18:20:05 -07:00
= outfit_viewer @preview_outfit
Oops, fix layout for error when item preview fails to load Oh right, I need the error indicator to be part of a container that also contains the outfit viewer, to appear below it! I was motivated because I realized I forgot the Customize More button so now I'm building it lol
2024-09-06 16:24:58 -07:00
.error-indicator
💥 We couldn't load all of this outfit. Try again?
Add Customize More button back to item pages Oh right, forgot about this lol! The specific effect on Impress 2020 where the button label expands is, kinda hard to implement in normal CSS/JS, and so I'm not in the mood and I'm settling for the `title` attribute lol
2024-09-06 17:12:11 -07:00
= link_to wardrobe_path(params: @preview_outfit.wardrobe_params),
Remove "Customize more" tooltip, now that the button shows it on hover
2024-09-09 16:13:35 -07:00
class: "customize-more", target: "_blank" do
Add the slide-out "Customize more" label back to item preview button I skipped this for a bit because I couldn't think of a simple way to adapt this behavior to a web component + vanilla CSS setting, but then I thought of CSS variables, and sat down and cranked this out!
2024-09-09 13:05:42 -07:00
%measured-container.customize-more-label
%measured-content
Customize more
Add Customize More button back to item pages Oh right, forgot about this lol! The specific effect on Impress 2020 where the button label expands is, kinda hard to implement in normal CSS/JS, and so I'm not in the mood and I'm settling for the `title` attribute lol
2024-09-06 17:12:11 -07:00
= edit_icon
Put the new item preview in a Turbo frame Nice, gotta say, this is a pretty neat way of making things feel more app-y! There's some missing pieces here about like, loading state etc, but the vibes are pretty good, and the implementation was dead-easy!
2024-07-01 13:48:20 -07:00
Auto-submit the species color picker on change, for new item previews
2024-09-05 17:34:54 -07:00
%species-color-picker
= form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|
- if @preview_error == :pet_type_does_not_exist
%span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
- elsif @preview_error == :no_item_data
%span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
Put the new item preview in a Turbo frame Nice, gotta say, this is a pretty neat way of making things feel more app-y! There's some missing pieces here about like, loading state etc, but the vibes are pretty good, and the implementation was dead-easy!
2024-07-01 13:48:20 -07:00
Auto-submit the species color picker on change, for new item previews
2024-09-05 17:34:54 -07:00
= select_tag "preview[color_id]",
options_from_collection_for_select(Color.funny.alphabetical,
"id", "human_name", @selected_preview_pet_type.color_id)
= select_tag "preview[species_id]",
options_from_collection_for_select(Species.alphabetical,
"id", "human_name", @selected_preview_pet_type.species_id)
= submit_tag "Go", name: nil
[WIP] Add species/color picker for simplified item page preview Still a lot missing here, like choosing the right default for Baby etc items, and saving the user's preferences. But it's a start!
2024-06-30 23:34:27 -07:00
Fix species face picker going inert again after Turbo frame load Here, I remember the trick I learned when building the outfit viewer: web components are great for making sure stuff stays initialized well in a Turbo environment! The problem was, after submitting the form and getting a new preview loaded via Turbo, the part where we remove `inert` would get undone. Additionally, this script only loads *once* per session, so if you Turbo-nav to a different item then that part of the page never ran. Instead, we use web components to remove the attributes on mount, then again if they're ever reapplied by Idiomorph.
2024-09-03 17:07:53 -07:00
%species-face-picker
Handle noscript for the new species face picker We mark the options as `inert` and `aria-hidden` while the JS is still loading—and if the `noscript` tag tells us it's never coming, it covers up the picker with a brief explainer!
2024-09-03 13:46:29 -07:00
%noscript
This fancy species picker requires Javascript, but you can still use the
dropdowns instead!
Fix species face picker going inert again after Turbo frame load Here, I remember the trick I learned when building the outfit viewer: web components are great for making sure stuff stays initialized well in a Turbo environment! The problem was, after submitting the form and getting a new preview loaded via Turbo, the part where we remove `inert` would get undone. Additionally, this script only loads *once* per session, so if you Turbo-nav to a different item then that part of the page never ran. Instead, we use web components to remove the attributes on mount, then again if they're ever reapplied by Idiomorph.
2024-09-03 17:07:53 -07:00
%species-face-picker-options{
inert: true, # waits for JS to remove
Handle noscript for the new species face picker We mark the options as `inert` and `aria-hidden` while the JS is still loading—and if the `noscript` tag tells us it's never coming, it covers up the picker with a brief explainer!
2024-09-03 13:46:29 -07:00
"aria-hidden": true, # waits for JS to remove
}
- @preview_pet_type_options.each do |pet_type|
Add "No data yet" to species face tooltip when needed, in item previews
2024-09-03 17:27:43 -07:00
%label{
title: species_face_tooltip(pet_type, @item),
}
Handle noscript for the new species face picker We mark the options as `inert` and `aria-hidden` while the JS is still loading—and if the `noscript` tag tells us it's never coming, it covers up the picker with a brief explainer!
2024-09-03 13:46:29 -07:00
= radio_button_tag "species_face_id", pet_type.species_id,
Disable pet faces that the item doesn't fit, in new item previews
2024-09-03 16:42:04 -07:00
checked: pet_type == @preview_outfit.pet_type,
Add "No data yet" to species face tooltip when needed, in item previews
2024-09-03 17:27:43 -07:00
disabled: !item_fits?(@item, pet_type)
Disable pet faces that the item doesn't fit, in new item previews
2024-09-03 16:42:04 -07:00
= pet_type_image pet_type,
Add "No data yet" to species face tooltip when needed, in item previews
2024-09-03 17:27:43 -07:00
item_fits?(@item, pet_type) ? :happy : :sad,
Disable pet faces that the item doesn't fit, in new item previews
2024-09-03 16:42:04 -07:00
:face
Extremely lo-fi new species face picker for simplified item previews The basics are working great! There's a few known missing things though: - Add reasonable noscript behavior - Disable options where there's no valid appearance - Lay it out actually _good_, instead of just images dumped there
2024-09-03 13:23:58 -07:00
Add html5 badge to new item previews
2024-09-05 18:48:41 -07:00
.item-preview-meta-info
.item-zones-info
%section
%h3 Occupies
- if @appearances_by_occupied_zone.present?
%ul
- @appearances_by_occupied_zone.each do |zone, appearances_in_zone|
Fix minor whitespace issue on item page "Occupies" zone list Ahh right, when you indent stuff underneath a tag in HAML, it does the same indented form in the output HTML, which adds whitespace that creates a problem for how we're doing this list. Before this change, the "Engulfed in Flames Effect" item showed below the preview: `Occupies: Background Item , Lower Foreground Item`, with an extra space before the comma. After this change, it now shows `Occupies: Background Item, Lower Foreground Item`, as intended.
2024-09-12 16:03:10 -07:00
%li<
Add html5 badge to new item previews
2024-09-05 18:48:41 -07:00
= zone.label
- if item_zone_partial_fit? appearances_in_zone, @all_appearances
%span.zone-species-info{
title: item_zone_species_list(appearances_in_zone)
}
(#{appearances_in_zone.size} species)
- else
%span.no-zones (None)
%section
%h3 Restricts
- if @item.restricted_zones.present?
%ul
- @item.restricted_zones.sort_by(&:label).each do |zone|
%li= zone.label
- else
%span.no-zones (None)
Add basic zone info to simpler item previews We're missing the feature where we enumerate the exact species in ambiguous cases, though!
2024-08-31 13:07:18 -07:00
Add html5 badge to new item previews
2024-09-05 18:48:41 -07:00
%div
- if @selected_item_appearance.html5?
.item-html5-info{
"data-status": "converted",
"aria-label": "HTML5 supported!",
title: "This item is converted to HTML5, and ready to use on Neopets.com!",
}
%svg{viewBox: "0 0 24 24"}
%path{fill: "currentColor", d: "M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"}
%svg{viewBox: "0 0 36 36"}
%path{fill: "currentColor", d: "M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"}
Add basic zone info to simpler item previews We're missing the feature where we enumerate the exact species in ambiguous cases, though!
2024-08-31 13:07:18 -07:00
- else
Add html5 badge to new item previews
2024-09-05 18:48:41 -07:00
.item-html5-info{
"data-status": "unconverted",
"aria-label": "HTML5 not supported",
title: "This item isn't converted to HTML5 yet, so it might not appear in " +
"Neopets.com customization yet. Once it's ready, it could look a " +
"bit different than our temporary preview here. It might even be " +
"animated!"
}
%svg{viewBox: "0 0 24 24"}
%path{fill: "currentColor", d: "M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"}
%svg{viewBox: "0 0 36 36"}
%path{fill: "currentColor", d: "M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"}
%path{fill: "#DD2E44", opacity: "0.75", d: "M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"}
Add basic zone info to simpler item previews We're missing the feature where we enumerate the exact species in ambiguous cases, though!
2024-08-31 13:07:18 -07:00
Stop caching item page contributors This lets us remove the contribution observer too!
2023-08-02 12:10:38 -07:00
- unless @contributors_with_counts.empty?
#item-contributors
%header #{t '.contributors.header'}:
%ul
- @contributors_with_counts.each do |contributor, count|
%li= link_to(contributor.name, user_contributions_path(contributor)) + format_contribution_count(count)
%footer= t '.contributors.footer'
a few tweaks to items#show contributors appearance
2012-10-24 20:16:01 -07:00
Use our hanger loading spinner for the new item page previews It's back, wowie! Also written up in a bit of a component-y way. Cute!
2024-07-07 19:05:48 -07:00
- content_for :stylesheets do
= stylesheet_link_tag "application/hanger-spinner"
WIP: Outfit viewers on pet type Rainbow Pool page Now that we have such a convenient lil outfit viewer component we built for the item page preview, it's easy peasy to drop it in here too! And it's all nice and lightweight, since in this case it's basically just. image tags, with some supporting enhancements. Anyway, this page has no actual useful styles of its own yet. Gonna make it look nice and such!
2024-09-26 18:20:05 -07:00
-# This is imported into items/show directly, to gain access to its mixins.
-# = stylesheet_link_tag "application/outfit-viewer"
Extract all the item pages' stylesheets into their own CSS files No more of this loading everything into `application.css`! I'm arbitrarily starting here because that's where I've been playing lately, but this is part of a larger effort to move toward a more straightforward CSS architecture (and away from Sass even?)
2024-09-09 18:48:08 -07:00
= page_stylesheet_link_tag "layouts/items"
= page_stylesheet_link_tag "items/show"
Use our hanger loading spinner for the new item page previews It's back, wowie! Also written up in a bit of a component-y way. Cute!
2024-07-07 19:05:48 -07:00
Refactor `outfit_viewer_layers` helper to just be inlined into template I forget what complexity was in here previously that made this make sense before, but now it's just a loop, whatever!
2024-07-02 22:03:43 -07:00
- content_for :javascripts do
Move JS libraries to vendor/javascript The silly motivation is that I wanted to remove `.prettierignore`, which just exists to omit that one folder from `npm run format`. But it also seems like this is the standard place to put them—a standard created long after we first set this up lol
2024-09-13 21:16:46 -07:00
= javascript_include_tag "idiomorph", async: true
Use "morphing" for smoother item page preview changes The most notable thing here is that we keep the movie iframes running! So if you're trying different pets for an animated item, the animation keeps going while the new pet layers load alongside it. This is also nice for like, the species/color picker form, so we're not taking away input elements from people who depend on e.g. keyboard focus.
2024-07-03 21:52:43 -07:00
= javascript_include_tag "outfit-viewer", async: true
Extremely lo-fi new species face picker for simplified item previews The basics are working great! There's a few known missing things though: - Add reasonable noscript behavior - Disable options where there's no valid appearance - Lay it out actually _good_, instead of just images dumped there
2024-09-03 13:23:58 -07:00
= javascript_include_tag "items/show", async: true
Copy permalink