Add picture zoom in feature (Leah Rowe's Sleepless Rants – 1337box, an...

Add picture zoom in feature (Leah Rowe's Sleepless Rants – 1337box, an insanely optimized CSS-only, no-JS lightbox implementation)

Add picture zoom in feature (Leah Rowe's Sleepless Rants – 1337box, an...
4100095c · John Xina · 49c35b1b · 4100095c · 4100095c · 4100095c
Commit 4100095c authored 1 year ago by John Xina
--- a/app.py
+++ b/app.py
@@ -109,10 +109,15 @@ async def _jinja2_filter_translate(frags, reply_id=0):
            for subfrag in subfrags:
                htmlfmt += str(escape(subfrag)) + '<br>'
        elif isinstance(frag, FragImage_p):
+            # htmlfmt += \
+            #     f'<a target="_blank" href="/proxy/pic/{ extract_image_name(frag.origin_src) }">' \
+            #     f'<img width="{ frag.show_width}" height="{ frag.show_height }" '\
+            #     f'src="/proxy/pic/{ extract_image_name(frag.src) }"></a>'
+
+            # Leah Rowe's lightbox implementation
            htmlfmt += \
-                f'<a target="_blank" href="/proxy/pic/{ extract_image_name(frag.origin_src) }">' \
-                f'<img width="{ frag.show_width}" height="{ frag.show_height }" '\
-                f'src="/proxy/pic/{ extract_image_name(frag.src) }"></a>'
+                f'<img tabindex=1 src="/proxy/pic/{ extract_image_name(frag.src) }" />' \
+                f'<span class="f"><img width="{ frag.show_width }" src="/proxy/pic/{ extract_image_name(frag.origin_src) }" /></span>'
        elif isinstance(frag, FragEmoji_p):
            htmlfmt = append_with_leading_clean(htmlfmt,
                                                f'<img class="emoticons" alt="[{ frag.desc }]"'

--- a/static/css/1337box_shadow.css
+++ b/static/css/1337box_shadow.css
+.f,.f *{position:fixed;max-width:100%;max-height:100%;top:50%;left:50%}
+.f *{transform:translate(-50%,-50%)}
+.f{display:none;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8)}
+*:focus+.f{display:block}
+img{cursor:pointer}
--- a/templates/thread.html
+++ b/templates/thread.html
@@ -7,6 +7,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="/static/css/main.css" rel="stylesheet">
+  <link href="/static/css/1337box_shadow.css" rel="stylesheet">
 </head>

 <body>