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

Use buttons were buttons ought to be

This commit is contained in:
Emi Simpson 2022-11-12 19:52:43 -05:00
parent 5297164963
commit aae4a2138e
Signed by: Emi
GPG Key ID: A12F2C2FFDC3D847
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -24,6 +24,14 @@ p {
gap: 30px; gap: 30px;
justify-content: center; justify-content: center;
} }
.control {
background-color: transparent;
color: white;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}
.thumbnail-card { .thumbnail-card {
height: 400px; height: 400px;
width: 400px; width: 400px;
@ -79,7 +87,7 @@ p {
z-index: -1; z-index: -1;
position: fixed; position: fixed;
height: fit-content; height: fit-content;
font-size: 70px; font-size: 90px;
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
@ -93,9 +101,9 @@ p {
} }
#close { #close {
position: absolute; position: absolute;
font-size: 40px; font-size: 50px;
top: 10px; top: 5px;
right: 20px; right: 40px;
} }
#focused-panel.unzoomed > div.blurhash-frame { #focused-panel.unzoomed > div.blurhash-frame {
max-height: 80vh; max-height: 80vh;

13
src/UI.purs
View File

@ -45,9 +45,9 @@ widthHeight w h = "width:" <> (show w) <> "px;height:" <> (show h) <> "px;"
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.button
( (
[ HP.classes $ ClassName <$> ["thumbnail-card", "blurhash-frame"] [ HP.classes $ ClassName <$> ["thumbnail-card", "blurhash-frame", "control"]
, HE.onClick \_ -> Focus pos , HE.onClick \_ -> Focus pos
] ]
<> <>
@ -82,20 +82,23 @@ renderFocused zoom image =
[ HP.id "focused-bg" [ HP.id "focused-bg"
, HE.onClick \_ -> Unfocus , HE.onClick \_ -> Unfocus
] ]
[ HH.div [ HH.button
[ HP.id "close" [ HP.id "close"
, HP.class_ $ ClassName "control"
] ]
[ HH.text "⨯" [ HH.text "⨯"
] ]
] ]
, HH.div , HH.button
[ HP.id "prev-image" [ HP.id "prev-image"
, HP.class_ $ ClassName "control"
, HE.onClick \_ -> Pan false , HE.onClick \_ -> Pan false
] ]
[ HH.text "❰" [ HH.text "❰"
] ]
, HH.div , HH.button
[ HP.id "next-image" [ HP.id "next-image"
, HP.class_ $ ClassName "control"
, HE.onClick \_ -> Pan true , HE.onClick \_ -> Pan true
] ]
[ HH.text "❱" [ HH.text "❱"