diff options
| author | Yorhel <git@yorhel.nl> | 2020-04-24 12:20:39 +0200 |
|---|---|---|
| committer | Yorhel <git@yorhel.nl> | 2020-04-24 12:20:43 +0200 |
| commit | 022e02c34f5579113c1e4ff0908bca32cb1753b0 (patch) | |
| tree | dedf0130fe52d002bb65d811690ca256e21deb2b /data | |
| parent | ec04cb3940d47589e087d6b59490ca7a1466bfeb (diff) | |
v2rw/VN::Page: Converted screenshots + image viewer
Decided to base the image viewer on the old one, rather than backport
the Lightbox from v3. That Lightbox wasn't very polished yet and had a
few remaining usability issues. Additionally, Elm doesn't have a whole
lot to offer for a simple image viewer: the complexity does not lie in
state management and view updates but rather in the interaction with the
rest of the page.
A few changes compared to the old one:
- Esc closes the viewer
- position: fixed
- Position and dimensions of the viewer are dynamically updated when the
window resizes.
- Clicking on a link outside of the viewer now performs the action of
that link (i.e. no more preventDefault()).
- Less ugly loading indicator.
Diffstat (limited to 'data')
| -rw-r--r-- | data/style.css | 15 |
1 files changed, 15 insertions, 0 deletions
diff --git a/data/style.css b/data/style.css index d52d69bf..1a12091f 100644 --- a/data/style.css +++ b/data/style.css @@ -1032,6 +1032,21 @@ div#iv_view { color: #000; } +/* ivview childs: + * 1 div -> loading + * 2 div -> img + * 3 a -> full + * 4 a -> close + * 5 a -> prev + * 6 a -> next */ +.ivview { position: fixed; background: $boxbg$; border: 2px solid $border$; padding: 5px; text-align: center } +.ivview a { border: 0; font-weight: bold; font-size: 14px } +.ivview img { cursor: pointer } +.ivview > div:nth-child(1) { position: absolute; left: 48%; top: 48%; width: 30px; height: 30px } +.ivview > a:nth-child(3) { float: left; padding-right: 10px } +.ivview > a:nth-child(4) { float: right; padding-left: 10px } +.ivview > a:nth-child(5) { padding-right: 5px } +.ivview > a:nth-child(6) { padding-left: 5px } /****** filter selector *****/ |