dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity
impress/app/assets/stylesheets/items/_show.sass

103 lines
2.1 KiB
Sass
Raw Normal View History

Upgrade to latest Sass and Sprockets This required a buncha fixes to how SASS scoping works! Needed to add a bunch of imports for stuff that previously would get read from the global scope by being imported *after* the constants and mixins etc. There's clearly a lot of refactor opportunity here, but I'm not gonna worry about it!!
2023-08-22 16:08:11 -07:00
@import "../partials/clean/constants"
@import "../partials/clean/mixins"
Add basic styles to trades page Still not accessible via links, just exists!
2024-01-21 03:38:02 -08:00
@import "../partials/item_header"
Upgrade to latest Sass and Sprockets This required a buncha fixes to how SASS scoping works! Needed to add a bunch of imports for stuff that previously would get read from the global scope by being imported *after* the constants and mixins etc. There's clearly a lot of refactor opportunity here, but I'm not gonna worry about it!!
2023-08-22 16:08:11 -07:00
move from scss to sass
2010-11-05 13:43:26 -07:00
body.items-show
Add basic styles to trades page Still not accessible via links, just exists!
2024-01-21 03:38:02 -08:00
.item-header
+item-header
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way!
2024-01-18 22:16:56 -08:00
brought-to-you-by on items#show lists contributors
2012-10-24 20:09:05 -07:00
#item-contributors
+subtle-banner
clear: both
a few tweaks to items#show contributors appearance
2012-10-24 20:16:01 -07:00
margin:
bottom: 0
top: 2em
brought-to-you-by on items#show lists contributors
2012-10-24 20:09:05 -07:00
header
display: inline
font-weight: bold
margin-right: .25em
footer
display: inline
ul
Fix item page contributor list styles Idk when and how this regressed, maybe I deleted a style I thought was unused? But yeah, this is how this was always intended to render.
2024-01-23 04:37:43 -08:00
display: inline
list-style: none
li
display: inline
&::after
content: ", "
brought-to-you-by on items#show lists contributors
2012-10-24 20:09:05 -07:00
Fix item page contributor list styles Idk when and how this regressed, maybe I deleted a style I thought was unused? But yeah, this is how this was always intended to render.
2024-01-23 04:37:43 -08:00
&:last-child::after
content: "."
update items#show style
2012-03-23 14:37:53 -07:00
move from scss to sass
2010-11-05 13:43:26 -07:00
.nc-icon
height: 16px
width: 16px
[WIP] Start replacing item page preview with simpler HTML-based version Just stripping out the big React component, and having Rails output it! There's a lot of work rn in extracting the Impress 2020 dependency from the `wardrobe-2020` React app, and I'm just curious to see if we can simplify it at all by pulling this stuff *way* back to basics, and deleting the item page part of `wardrobe-2020` altogether. In this draft, we regress a lot of functionality: it just shows the item on a Blue Acara, with no ability to change it! I'm gonna play with putting more of that back in. I also haven't actually removed any of the item page React code; I just stopped calling it. That can be a cleanup for another time, once we're confident in this experiment!
2024-06-30 23:09:28 -07:00
Refactor more of item outfit preview into the `Outfit` class This is a cute thing that I think sets us up for other stuff down the line: move more of the outfit appearance logic into the `Outfit` class! Now, we set up the item page with a temporary instance of `Outfit`, then ask for its `visible_layers`. Still missing restricted-zones logic and such, that's next!
2024-07-01 16:07:25 -07:00
.outfit-viewer
[WIP] Start replacing item page preview with simpler HTML-based version Just stripping out the big React component, and having Rails output it! There's a lot of work rn in extracting the Impress 2020 dependency from the `wardrobe-2020` React app, and I'm just curious to see if we can simplify it at all by pulling this stuff *way* back to basics, and deleting the item page part of `wardrobe-2020` altogether. In this draft, we regress a lot of functionality: it just shows the item on a Blue Acara, with no ability to change it! I'm gonna play with putting more of that back in. I also haven't actually removed any of the item page React code; I just stopped calling it. That can be a cleanup for another time, once we're confident in this experiment!
2024-06-30 23:09:28 -07:00
display: block
Add a clearer error indicator to new item page previews
2024-07-08 10:36:16 -07:00
position: relative
[WIP] Start replacing item page preview with simpler HTML-based version Just stripping out the big React component, and having Rails output it! There's a lot of work rn in extracting the Impress 2020 dependency from the `wardrobe-2020` React app, and I'm just curious to see if we can simplify it at all by pulling this stuff *way* back to basics, and deleting the item page part of `wardrobe-2020` altogether. In this draft, we regress a lot of functionality: it just shows the item on a Blue Acara, with no ability to change it! I'm gonna play with putting more of that back in. I also haven't actually removed any of the item page React code; I just stopped calling it. That can be a cleanup for another time, once we're confident in this experiment!
2024-06-30 23:09:28 -07:00
width: 300px
height: 300px
border: 1px solid $module-border-color
border-radius: 1em
overflow: hidden
margin: 0 auto .75em
Refactor item page outfit-layer to use Web Components Instead of doing all this listening to Turbo events etc to know when outfit layers might have changed, making it a custom element and wiring in the behavior to its actual lifecycle makes it always Just Work!
2024-07-02 22:16:37 -07:00
outfit-layer
[WIP] Start replacing item page preview with simpler HTML-based version Just stripping out the big React component, and having Rails output it! There's a lot of work rn in extracting the Impress 2020 dependency from the `wardrobe-2020` React app, and I'm just curious to see if we can simplify it at all by pulling this stuff *way* back to basics, and deleting the item page part of `wardrobe-2020` altogether. In this draft, we regress a lot of functionality: it just shows the item on a Blue Acara, with no ability to change it! I'm gonna play with putting more of that back in. I also haven't actually removed any of the item page React code; I just stopped calling it. That can be a cleanup for another time, once we're confident in this experiment!
2024-06-30 23:09:28 -07:00
display: block
position: absolute
inset: 0
Load movies in iframe for new item page preview Hey hey, it's working! Still stuff to add like pause/play, but yeah!
2024-07-03 20:15:35 -07:00
img, iframe
[WIP] Start replacing item page preview with simpler HTML-based version Just stripping out the big React component, and having Rails output it! There's a lot of work rn in extracting the Impress 2020 dependency from the `wardrobe-2020` React app, and I'm just curious to see if we can simplify it at all by pulling this stuff *way* back to basics, and deleting the item page part of `wardrobe-2020` altogether. In this draft, we regress a lot of functionality: it just shows the item on a Blue Acara, with no ability to change it! I'm gonna play with putting more of that back in. I also haven't actually removed any of the item page React code; I just stopped calling it. That can be a cleanup for another time, once we're confident in this experiment!
2024-06-30 23:09:28 -07:00
width: 100%
height: 100%
[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
Improve the loading indicator for the new item page previews Add some unobtrusive white background for contrast, show it when the Turbo frame is loading too, add a spinner cursor, and fix a silliness of how we put the `position: absolute` stuff into the component-y part of the hanger spinner instead of this specific use case lol oops!
2024-07-07 21:32:41 -07:00
.loading-indicator
position: absolute
z-index: 999
bottom: 0px
right: 4px
padding: 8px
background: radial-gradient(circle closest-side, white 45%, #ffffff00)
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
opacity: 0
transition: opacity .5s
Add a clearer error indicator to new item page previews
2024-07-08 10:36:16 -07:00
.error-indicator
font-size: 85%
color: $error-color
margin-top: .25em
margin-bottom: .5em
display: none
Load movies in iframe for new item page preview Hey hey, it's working! Still stuff to add like pause/play, but yeah!
2024-07-03 20:15:35 -07:00
Add a clearer error indicator to new item page previews
2024-07-08 10:36:16 -07:00
// When loading, fade in the loading spinner after a brief delay. (We only
// apply the delay here, because fading *out* on load should be instant.)
// We are loading when the <turbo-frame> is busy, or when at least one layer
// is loading.
#item-preview[busy] .outfit-viewer, .outfit-viewer:has(outfit-layer:state(loading))
cursor: wait
Improve the loading indicator for the new item page previews Add some unobtrusive white background for contrast, show it when the Turbo frame is loading too, add a spinner cursor, and fix a silliness of how we put the `position: absolute` stuff into the component-y part of the hanger spinner instead of this specific use case lol oops!
2024-07-07 21:32:41 -07:00
.loading-indicator
opacity: 1
transition-delay: 2s
Add a clearer error indicator to new item page previews
2024-07-08 10:36:16 -07:00
#item-preview:has(outfit-layer:state(error))
.outfit-viewer
border: 2px solid red
.error-indicator
display: block
[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
.species-color-picker
.error-icon
cursor: help
margin-right: .25em
&[data-is-valid="false"]
select
border-color: $error-border-color
color: $error-color
Copy permalink