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

45 lines
851 B
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"
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
> 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
Copy permalink