Add a clearer error indicator to new item page previews
This commit is contained in:
parent
d18f43d769
commit
fcad7e2bc9
2 changed files with 21 additions and 17 deletions
|
@ -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
|
||||||
|
|
|
@ -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|
|
||||||
|
|
Loading…
Reference in a new issue