From 0895108c07f25f3b069d37ce6ec90ddfb4b7e371 Mon Sep 17 00:00:00 2001
From: Emi Simpson <emi@alchemi.dev>
Date: Wed, 9 Nov 2022 12:29:15 -0500
Subject: [PATCH] Made thumbnail + gallery errors look 20% less horrible

---
 index.html  | 29 +++++++++++++++++++++++++++++
 src/UI.purs | 44 ++++++++++++++++++++++++++++++++------------
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index f865999..6ccef1e 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,25 @@ body {
 }
 .thumbnail-card {
 	height: 400px;
+	width: 400px;
+	background-size: cover;
+	display: grid;
+	align-items: center;
+	justify-content: center;
+}
+.thumbnail-card span {
+	max-width: 300px;
+	max-height: 300px;
+	text-align: center;
+	color: black;
+	background-color: rgba(255, 255, 255, 30%);
+	border: 5px solid rgba(255, 255, 255, 15%);
+	background-clip: padding-box;
+	padding: 25px 20px;
+}
+.thumbnail-card img {
+	height: 400px;
+	width: 400px;
 }
 #focused-panel {
 	position: fixed;
@@ -55,6 +74,16 @@ body {
 	text-align: center;
 	font-size: 31px;
 }
+.uh-oh-stinky {
+	display: grid;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+}
+.uh-oh-stinky > p {
+	max-width: 50vw;
+	text-align: center;
+}
 
 /* Yoinked from https://codepen.io/AdamDipinto/pen/eYOaGvY
    with modifications */
diff --git a/src/UI.purs b/src/UI.purs
index ffaa1d0..29c9f5b 100644
--- a/src/UI.purs
+++ b/src/UI.purs
@@ -34,21 +34,37 @@ component initialState = H.mkComponent
     , eval: H.mkEval $ H.defaultEval { handleAction = update, initialize = Just LoadThumbs }
     }
 
+backgroundUrl :: forall r i. String -> HP.IProp (style :: String | r) i
+backgroundUrl url = HP.style $ "background-image: url(" <> url <> ");"
+
 renderThumbnail :: forall m. Int -> Image -> H.ComponentHTML Event () m
 renderThumbnail pos image =
     HH.div
-        [ HP.class_ $ ClassName "thumbnail-card"
-        , HE.onClick \_ -> Focus pos
-        ]
-        ( [ HH.img
-            ( [ HP.width 400
-              , HP.height 400
-            ] <> maybe [] (HP.src >>> pure) (thumbOrBlurhash image))
-        ] <> case image.thumb of
-            Unloaded _ -> [HH.p_ [HH.text "Loading..."]]
-            IError e -> [HH.p_ [HH.text $ "Error!  " <> (show e)]]
-            _ -> []
+        (
+            [ HP.class_ $ ClassName "thumbnail-card"
+            , HE.onClick \_ -> Focus pos
+            ]
+            <>
+            maybe [] (backgroundUrl >>> pure) (image.blurhashUrl)
         )
+        case image.thumb of
+            Unloaded _ ->
+                [ HH.span
+                    [ HP.class_ $ ClassName "loading-msg"
+                    ]
+                    [ HH.text "Loading..."
+                    ]
+                ]
+            IError e ->
+                [ HH.span
+                    [ HP.class_ $ ClassName "error-msg"
+                    ]
+                    [ HH.text $ "Error!  " <> (show e)
+                    ]
+                ]
+            ILoaded url ->
+                [ HH.img [HP.src url]
+                ]
 
 renderFocused :: forall m. Image -> H.ComponentHTML Event () m
 renderFocused image =
@@ -113,7 +129,11 @@ update Unfocus = H.modify_ \model -> case model of
     GLoaded gal -> GLoaded gal { focus = Nothing }
 
 render :: forall m. Model -> H.ComponentHTML Event () m
-render (GError e) = HH.p_ [ HH.text $ show e ]
+render (GError e) = HH.div
+    [ HP.class_ $ ClassName "uh-oh-stinky"
+    ]
+    [ HH.p_ [ HH.text $ show e ]
+    ]
 render (GLoaded {title, desc, images, focus}) = HH.div_
     ((maybe [] (HH.text >>> pure >>> HH.h1_ >>> pure) title) <>
     (maybe [] (HH.text >>> pure >>> HH.p_ >>> pure) desc)    <>