dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Add a clearer error indicator to new item page previews

Browse source
This commit is contained in:
Emi Matchu 2024-07-08 10:36:16 -07:00
parent d18f43d769
commit fcad7e2bc9
2 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
app/assets/stylesheets/items/_show.sass
View file

@ -39,14 +39,13 @@ body.items-show
width: 16px width: 16px
.outfit-viewer .outfit-viewer
position: relative
display: block display: block
position: relative
width: 300px width: 300px
height: 300px height: 300px
border: 1px solid $module-border-color border: 1px solid $module-border-color
border-radius: 1em border-radius: 1em
overflow: hidden overflow: hidden
margin: 0 auto .75em margin: 0 auto .75em
outfit-layer outfit-layer
@ -69,26 +68,29 @@ body.items-show
opacity: 0 opacity: 0
transition: opacity .5s transition: opacity .5s
// When loading, fade in the loading spinner after a brief delay. (We only .error-indicator
// apply the delay here, because fading *out* on load should be instant.) font-size: 85%
&:has(outfit-layer:state(loading)) color: $error-color
cursor: wait margin-top: .25em
.loading-indicator margin-bottom: .5em
opacity: 1 display: none
transition-delay: 2s
&:has(outfit-layer:state(error)) // When loading, fade in the loading spinner after a brief delay. (We only
border-color: $error-border-color // 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
// We also show the loading spinner when the item preview Turbo frame is // is loading.
// loading in new data for us. #item-preview[busy] .outfit-viewer, .outfit-viewer:has(outfit-layer:state(loading))
turbo-frame#item-preview[busy] cursor: wait
.outfit-viewer
cursor: wait
.loading-indicator .loading-indicator
opacity: 1 opacity: 1
transition-delay: 2s transition-delay: 2s
#item-preview:has(outfit-layer:state(error))
.outfit-viewer
border: 2px solid red
.error-indicator
display: block
.species-color-picker .species-color-picker
.error-icon .error-icon
cursor: help cursor: help

2
app/views/items/show.html.haml
View file

@ -15,6 +15,8 @@
= turbo_frame_tag "item-preview" do = turbo_frame_tag "item-preview" do
= render partial: "outfit_viewer", locals: {outfit: @preview_outfit} = render partial: "outfit_viewer", locals: {outfit: @preview_outfit}
.error-indicator
💥 We couldn't load all of this outfit. Try again?
= form_for item_path(@item), method: :get, class: "species-color-picker", = form_for item_path(@item), method: :get, class: "species-color-picker",
data: {"is-valid": @preview_error.nil?} do |f| data: {"is-valid": @preview_error.nil?} do |f|