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

114 lines
2.3 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
Add hacky play/pause toggle to new item page preview This doesn't do a good job maintaining state across morphs, but hey it's Working At All in terms of wiring, and that's good!! Also need to style up the toggle as a cute button instead of a visible checkbox and the words "Play/pause"!
2024-07-08 13:43:28 -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
Add hacky play/pause toggle to new item page preview This doesn't do a good job maintaining state across morphs, but hey it's Working At All in terms of wiring, and that's good!! Also need to style up the toggle as a cute button instead of a visible checkbox and the words "Play/pause"!
2024-07-08 13:43:28 -07:00
z-index: 1000
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
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 hacky play/pause toggle to new item page preview This doesn't do a good job maintaining state across morphs, but hey it's Working At All in terms of wiring, and that's good!! Also need to style up the toggle as a cute button instead of a visible checkbox and the words "Play/pause"!
2024-07-08 13:43:28 -07:00
.play-pause-button
position: absolute
z-index: 1001
left: 8px
bottom: 8px
display: none
&:has(outfit-layer:state(has-animations))
.play-pause-button
display: block
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.
Add hacky play/pause toggle to new item page preview This doesn't do a good job maintaining state across morphs, but hey it's Working At All in terms of wiring, and that's good!! Also need to style up the toggle as a cute button instead of a visible checkbox and the words "Play/pause"!
2024-07-08 13:43:28 -07:00
#item-preview[busy] outfit-viewer, outfit-viewer:has(outfit-layer:state(loading))
Add a clearer error indicator to new item page previews
2024-07-08 10:36:16 -07:00
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))
Add hacky play/pause toggle to new item page preview This doesn't do a good job maintaining state across morphs, but hey it's Working At All in terms of wiring, and that's good!! Also need to style up the toggle as a cute button instead of a visible checkbox and the words "Play/pause"!
2024-07-08 13:43:28 -07:00
outfit-viewer
Add a clearer error indicator to new item page previews
2024-07-08 10:36:16 -07:00
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