OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity
impress/app/assets/stylesheets/pet_states/support-outfit-viewer.sass

79 lines
1.4 KiB
Sass
Raw Normal View History

Add layers table to pet appearance edit page Gonna add some more functionality here too, but right now we at least have this!
2024-12-07 09:58:24 -08:00
@import "../partials/clean/constants"
Add SVG/PNG picker when editing pet appearances I've known there are bugs in the SVGs pretty often, because they're not very well attended-to—I noticed pretty quick that the Marble Eyrie, for example, has its Body asset saved correctly in PNG, but its SVG is just another copy of the head, oops! I think SVG is still a nice default for this UI, but I added a little form to switch to PNG, to give us a debugging method and escape hatch if it starts to get weird.
2024-12-07 12:16:52 -08:00
@import "../partials/context_button"
Add layers table to pet appearance edit page Gonna add some more functionality here too, but right now we at least have this!
2024-12-07 09:58:24 -08:00
support-outfit-viewer
display: flex
gap: 2em
flex-wrap: wrap
justify-content: center
outfit-viewer
flex: 0 0 auto
border: 1px solid $module-border-color
border-radius: 1em
Add SVG/PNG picker when editing pet appearances I've known there are bugs in the SVGs pretty often, because they're not very well attended-to—I noticed pretty quick that the Marble Eyrie, for example, has its Body asset saved correctly in PNG, but its SVG is just another copy of the head, oops! I think SVG is still a nice default for this UI, but I added a little form to switch to PNG, to give us a debugging method and escape hatch if it starts to get weird.
2024-12-07 12:16:52 -08:00
.outfit-viewer-controls
margin-block: .5em
isolation: isolate // Avoid z-index weirdness with our buttons vs the lens
display: flex
align-items: center
justify-content: center
gap: .5em
font-size: .85em
fieldset
display: contents
legend
font-weight: bold
&::after
content: ":"
label
display: flex
align-items: center
gap: .25em
input[type=radio]
margin: 0
[type=submit]
+context-button
Add layers table to pet appearance edit page Gonna add some more functionality here too, but right now we at least have this!
2024-12-07 09:58:24 -08:00
> table
flex: 0 0 auto
border-collapse: collapse
table-layout: fixed
border-radius: .5em
th, td
Add helpful layer interactions on pet appearance edit page When you hover the row for a layer in the table, it highlights the corresponding layer in the outfit viewer. And when you click anywhere in the row, it opens the first link (usually the PNG image).
2024-12-07 10:41:52 -08:00
border: 1px solid $module-border-color
Add layers table to pet appearance edit page Gonna add some more functionality here too, but right now we at least have this!
2024-12-07 09:58:24 -08:00
font-size: .85em
padding: .25em .5em
text-align: left
> tbody
Add helpful layer interactions on pet appearance edit page When you hover the row for a layer in the table, it highlights the corresponding layer in the outfit viewer. And when you click anywhere in the row, it opens the first link (usually the PNG image).
2024-12-07 10:41:52 -08:00
[data-field=links]
Add layers table to pet appearance edit page Gonna add some more functionality here too, but right now we at least have this!
2024-12-07 09:58:24 -08:00
ul
list-style-type: none
display: flex
gap: .5em
Add helpful layer interactions on pet appearance edit page When you hover the row for a layer in the table, it highlights the corresponding layer in the outfit viewer. And when you click anywhere in the row, it opens the first link (usually the PNG image).
2024-12-07 10:41:52 -08:00
// Once the component is ready, add some hints about potential interactions.
&:state(ready)
> table
> tbody > tr
cursor: zoom-in
&:hover
background: $module-bg-color
Add magnification when editing pet appearance 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?
2024-12-07 11:39:37 -08:00
magic-magnifier
--magic-magnifier-lens-width: 100px
--magic-magnifier-lens-height: 100px
--magic-magnifier-scale: 2.5
Add SVG/PNG picker when editing pet appearances I've known there are bugs in the SVGs pretty often, because they're not very well attended-to—I noticed pretty quick that the Marble Eyrie, for example, has its Body asset saved correctly in PNG, but its SVG is just another copy of the head, oops! I think SVG is still a nice default for this UI, but I added a little form to switch to PNG, to give us a debugging method and escape hatch if it starts to get weird.
2024-12-07 12:16:52 -08:00
magic-magnifier-lens
z-index: 2 // Be above things by default, but not by much!
Copy permalink