Emi Matchu
b2a23b3e7b
I couldn't find a library for this functionality that didn't require jQuery, and I don't want to be adding *more* jQuery requirements. So, I decided to throw together my own! The `<magic-magnifier>` component copies its contents into a "lens" element, then uses basic JS to track mouse position, then uses CSS to move the lens and its contents into a helpful position. One thing I noticed here is that the zoom is a bit crunchy because we're using PNG images, and it's hard to zoom in even further than we already are. I might try switching this UI to use the SVG images by default instead?
57 lines
2 KiB
Text
57 lines
2 KiB
Text
- title "#{@pet_type.human_name}: #{pose_name @pet_state.pose}"
|
|
- use_responsive_design
|
|
|
|
%ol.breadcrumbs
|
|
%li
|
|
= link_to "Rainbow Pool", pet_types_path
|
|
%li
|
|
= link_to @pet_type.possibly_new_color.human_name,
|
|
pet_types_path(color: @pet_type.possibly_new_color.human_name)
|
|
%li{"data-relation-to-prev": "sibling"}
|
|
= link_to @pet_type.possibly_new_species.human_name,
|
|
pet_types_path(species: @pet_type.possibly_new_species.human_name)
|
|
%li
|
|
= link_to "Appearances", @pet_type
|
|
%li
|
|
\##{@pet_state.id}
|
|
|
|
= support_outfit_viewer pet_state: @pet_state
|
|
|
|
= support_form_with model: [@pet_type, @pet_state] do |f|
|
|
= f.errors
|
|
|
|
= f.fields do
|
|
= f.radio_grid_fieldset "Pose" do
|
|
- pose_options.each do |pose|
|
|
= f.radio_field do
|
|
= f.radio_button :pose, pose
|
|
= pose_name(pose)
|
|
- if @reference_pet_type
|
|
= link_to @reference_pet_type, target: "_blank", class: "reference-link" do
|
|
= pet_type_image @reference_pet_type, :happy, :face
|
|
%span Reference: #{@reference_pet_type.human_name}
|
|
= external_link_icon
|
|
|
|
= f.field do
|
|
= f.label :glitched, "Glitched?"
|
|
= f.select :glitched, [["✅ Not marked as Glitched", false],
|
|
["👾 Yes, it's bad news bonko'd", true]]
|
|
|
|
= f.actions do
|
|
= f.submit "Save changes"
|
|
= f.go_to_next_field title: "If checked, takes you to the first unlabeled appearance in the database, if any. Useful for labeling in bulk!" do
|
|
= f.go_to_next_check_box "unlabeled-appearance"
|
|
Then: Go to unlabeled appearance
|
|
|
|
- content_for :stylesheets do
|
|
= stylesheet_link_tag "application/breadcrumbs"
|
|
= stylesheet_link_tag "application/magic-magnifier"
|
|
= stylesheet_link_tag "application/outfit-viewer"
|
|
= stylesheet_link_tag "application/support-form"
|
|
= stylesheet_link_tag "pet_states/support-outfit-viewer"
|
|
= page_stylesheet_link_tag "pet_states/edit"
|
|
|
|
- content_for :javascripts do
|
|
= javascript_include_tag "magic-magnifier"
|
|
= javascript_include_tag "outfit-viewer"
|
|
= javascript_include_tag "pet_states/support-outfit-viewer"
|