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

101 lines
2 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
position: relative
display: block
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
// 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.)
Refactor outfit-layer component to use internal state API, not attrs Oh right okay, attributes like `status="loading"` are more of an API for the caller, whereas the internal state API is where you wanna put things that are meant to be used in CSS selectors and stuff.
2024-07-02 22:34:51 -07:00
&:has(outfit-layer:state(loading))
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
cursor: wait
.loading-indicator
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: 1
transition-delay: 2s
Add basic loading tracking to new item page preview The UI for it is just basic for my own testing rn: it sets the preview background to gray while loading, then back to white when done! This uses the new CSS `:has()` selector: we have JS manage the loading state on each layer, then the container just restyles itself based on whether any currently-loading layers are present.
2024-07-01 17:59:07 -07:00
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
&:has(outfit-layer:state(error))
border-color: $error-border-color
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
// We also show the loading spinner when the item preview Turbo frame is
// loading in new data for us.
turbo-frame#item-preview[busy]
.outfit-viewer
cursor: wait
.loading-indicator
opacity: 1
transition-delay: 2s
[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