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) <>