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

49
src/UI.purs
View file

@ -50,17 +50,31 @@ renderThumbnail pos image =
] ]
] ]
Retrying _ e -> Retrying _ e ->
[ HH.span [ HH.div
[ HP.class_ $ ClassName "error-msg" [ 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 -> IError e ->
[ HH.span [ HH.div
[ HP.class_ $ ClassName "error-msg" [ 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 -> ILoaded url ->
@ -102,11 +116,18 @@ renderFocused zoom image =
[ HP.style [ HP.style
case image.full of case image.full of
ILoaded _ -> "" ILoaded _ -> ""
IError _ ->
maybe "" backgroundUrl (image.blurhashUrl)
Retrying _ _ ->
maybe "" backgroundUrl (image.blurhashUrl)
_ -> _ ->
( maybe "" backgroundUrl (image.blurhashUrl) ( maybe "" backgroundUrl (image.blurhashUrl)
<> widthHeight image.width image.height <> 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 case image.full of
Unloaded _ -> [] Unloaded _ -> []
@ -121,14 +142,28 @@ renderFocused zoom image =
[ HH.span [ HH.span
[ HP.class_ $ ClassName "error-msg" [ 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 -> Retrying _ e ->
[ HH.span [ HH.span
[ HP.class_ $ ClassName "error-msg" [ 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 -> ILoaded url ->