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;
justify-content: center;
}
.control {
background-color: transparent;
color: white;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
}
.thumbnail-card {
height: 400px;
width: 400px;
@ -79,7 +87,7 @@ p {
z-index: -1;
position: fixed;
height: fit-content;
font-size: 70px;
font-size: 90px;
top: 0;
bottom: 0;
margin: auto 0;
@ -93,9 +101,9 @@ p {
}
#close {
position: absolute;
font-size: 40px;
top: 10px;
right: 20px;
font-size: 50px;
top: 5px;
right: 40px;
}
#focused-panel.unzoomed > div.blurhash-frame {
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 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
]
<>
@ -82,20 +82,23 @@ renderFocused zoom image =
[ HP.id "focused-bg"
, HE.onClick \_ -> Unfocus
]
[ HH.div
[ HH.button
[ HP.id "close"
, HP.class_ $ ClassName "control"
]
[ HH.text "⨯"
]
]
, HH.div
, HH.button
[ HP.id "prev-image"
, HP.class_ $ ClassName "control"
, HE.onClick \_ -> Pan false
]
[ HH.text "❰"
]
, HH.div
, HH.button
[ HP.id "next-image"
, HP.class_ $ ClassName "control"
, HE.onClick \_ -> Pan true
]
[ HH.text "❱"