diff --git a/dist/www/index.html b/dist/www/index.html
index 62882e8..96d82a4 100644
--- a/dist/www/index.html
+++ b/dist/www/index.html
@@ -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;
diff --git a/src/UI.purs b/src/UI.purs
index 1543018..9486262 100644
--- a/src/UI.purs
+++ b/src/UI.purs
@@ -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 ->