Made thumbnail + gallery errors look 20% less horrible
This commit is contained in:
parent
831b361eda
commit
0895108c07
29
index.html
29
index.html
|
@ -17,6 +17,25 @@ body {
|
||||||
}
|
}
|
||||||
.thumbnail-card {
|
.thumbnail-card {
|
||||||
height: 400px;
|
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 {
|
#focused-panel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -55,6 +74,16 @@ body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 31px;
|
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
|
/* Yoinked from https://codepen.io/AdamDipinto/pen/eYOaGvY
|
||||||
with modifications */
|
with modifications */
|
||||||
|
|
44
src/UI.purs
44
src/UI.purs
|
@ -34,21 +34,37 @@ component initialState = H.mkComponent
|
||||||
, eval: H.mkEval $ H.defaultEval { handleAction = update, initialize = Just LoadThumbs }
|
, 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 :: forall m. Int -> Image -> H.ComponentHTML Event () m
|
||||||
renderThumbnail pos image =
|
renderThumbnail pos image =
|
||||||
HH.div
|
HH.div
|
||||||
[ HP.class_ $ ClassName "thumbnail-card"
|
(
|
||||||
, HE.onClick \_ -> Focus pos
|
[ HP.class_ $ ClassName "thumbnail-card"
|
||||||
]
|
, HE.onClick \_ -> Focus pos
|
||||||
( [ HH.img
|
]
|
||||||
( [ HP.width 400
|
<>
|
||||||
, HP.height 400
|
maybe [] (backgroundUrl >>> pure) (image.blurhashUrl)
|
||||||
] <> 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)]]
|
|
||||||
_ -> []
|
|
||||||
)
|
)
|
||||||
|
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 :: forall m. Image -> H.ComponentHTML Event () m
|
||||||
renderFocused image =
|
renderFocused image =
|
||||||
|
@ -113,7 +129,11 @@ update Unfocus = H.modify_ \model -> case model of
|
||||||
GLoaded gal -> GLoaded gal { focus = Nothing }
|
GLoaded gal -> GLoaded gal { focus = Nothing }
|
||||||
|
|
||||||
render :: forall m. Model -> H.ComponentHTML Event () m
|
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_
|
render (GLoaded {title, desc, images, focus}) = HH.div_
|
||||||
((maybe [] (HH.text >>> pure >>> HH.h1_ >>> pure) title) <>
|
((maybe [] (HH.text >>> pure >>> HH.h1_ >>> pure) title) <>
|
||||||
(maybe [] (HH.text >>> pure >>> HH.p_ >>> pure) desc) <>
|
(maybe [] (HH.text >>> pure >>> HH.p_ >>> pure) desc) <>
|
||||||
|
|
Loading…
Reference in New Issue