Emi/aviary-ps
1
0
Fork 0
Code Issues Pull requests Releases Activity

Improve the rendering of errors on thumbnails & rendered images

Browse source
This commit is contained in:
Emi Simpson 2022-11-17 12:05:25 -05:00
parent 71229e2339
commit 9646e67ff7
Signed by: Emi
GPG key ID: A12F2C2FFDC3D847
2 changed files with 68 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
dist/www/index.html vendored
View file

@ -42,7 +42,7 @@ p {
align-items: center;
justify-content: center;
}
.thumbnail-card span {
.thumbnail-card .error-msg {
max-width: 300px;
max-height: 300px;
text-align: center;
@ -56,6 +56,12 @@ p {
height: 400px;
width: 400px;
}
.thumb-icon {
font-size: 40px;
color: rgba(0,0,0,50%);
line-height: 0.5;
margin-bottom: 20px;
}
#focused-panel {
position: fixed;
top: 0;
@ -105,6 +111,25 @@ p {
right: 0;
padding: 5px 40px;
}
#focused-panel .error-msg .full-icon {
font-size: 150px;
color: #f33;
}
#focused-panel .error-msg span {
line-height: 1.3;
}
#focused-panel .error-msg {
max-width: 400px;
text-align: center;
background-color: rgba(50, 20, 30, 80%);
border: 3px solid #f33;
border-radius: 6px;
padding: 40px;
padding-bottom: 60px;
}
#focused-panel .error-frame {
border-radius: 6px;
}
#focused-panel.unzoomed > div.blurhash-frame {
max-height: 80vh;
max-width: 60vw;

49
src/UI.purs
View file

@ -50,17 +50,31 @@ renderThumbnail pos image =
]
]
Retrying _ e ->
[ HH.span
[ HH.div
[ HP.class_ $ ClassName "error-msg"
]
[ HH.text $ "Error! " <> (show e)
[ HH.p
[ HP.class_ $ ClassName "thumb-icon"
]
[ HH.text "⚠"
]
, HH.span_
[ HH.text $ show e
]
]
]
IError e ->
[ HH.span
[ HH.div
[ HP.class_ $ ClassName "error-msg"
]
[ HH.text $ "Error! " <> (show e)
[ HH.p
[ HP.class_ $ ClassName "thumb-icon"
]
[ HH.text "⚠"
]
, HH.span_
[ HH.text $ show e
]
]
]
ILoaded url ->
@ -102,11 +116,18 @@ renderFocused zoom image =
[ HP.style
case image.full of
ILoaded _ -> ""
IError _ ->
maybe "" backgroundUrl (image.blurhashUrl)
Retrying _ _ ->
maybe "" backgroundUrl (image.blurhashUrl)
_ ->
( maybe "" backgroundUrl (image.blurhashUrl)
<> widthHeight image.width image.height
)
, HP.class_ $ ClassName "blurhash-frame"
, HP.classes $ ClassName <$> case image.full of
IError _ -> ["blurhash-frame", "error-frame"]
Retrying _ _ -> ["blurhash-frame", "error-frame"]
_ -> ["blurhash-frame"]
]
case image.full of
Unloaded _ -> []
@ -121,14 +142,28 @@ renderFocused zoom image =
[ HH.span
[ HP.class_ $ ClassName "error-msg"
]
[ HH.text $ "Error! " <> (show e)
[ HH.p
[ HP.class_ $ ClassName "full-icon"
]
[ HH.text "⚠"
]
, HH.span_
[ HH.text $ show e
]
]
]
Retrying _ e ->
[ HH.span
[ HP.class_ $ ClassName "error-msg"
]
[ HH.text $ "Error! " <> (show e)
[ HH.p
[ HP.class_ $ ClassName "full-icon"
]
[ HH.text "⚠"
]
, HH.span_
[ HH.text $ show e
]
]
]
ILoaded url ->