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

Made thumbnail + gallery errors look 20% less horrible

This commit is contained in:
Emi Simpson 2022-11-09 12:29:15 -05:00
parent 831b361eda
commit 0895108c07
Signed by: Emi
GPG Key ID: A12F2C2FFDC3D847
2 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -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 */

44
src/UI.purs
View File

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