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

28
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,25 +68,28 @@ body.items-show
opacity: 0 opacity: 0
transition: opacity .5s transition: opacity .5s
.error-indicator
font-size: 85%
color: $error-color
margin-top: .25em
margin-bottom: .5em
display: none
// When loading, fade in the loading spinner after a brief delay. (We only // 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.) // apply the delay here, because fading *out* on load should be instant.)
&:has(outfit-layer:state(loading)) // 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 cursor: wait
.loading-indicator .loading-indicator
opacity: 1 opacity: 1
transition-delay: 2s transition-delay: 2s
&:has(outfit-layer:state(error)) #item-preview:has(outfit-layer:state(error))
border-color: $error-border-color
// 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 .outfit-viewer
cursor: wait border: 2px solid red
.loading-indicator .error-indicator
opacity: 1 display: block
transition-delay: 2s
.species-color-picker .species-color-picker
.error-icon .error-icon

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|