nune/rat
1
0
Fork 0
mirror of https://0xacab.org/johnxina/rat.git synced 2024-12-23 04:59:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
John Xina 2023-07-27 10:16:33 +08:00
parent 49c35b1b58
commit 4100095cdf
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app.py
View File

@ -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 }]"'

5
static/css/1337box_shadow.css Normal file
View File

@ -0,0 +1,5 @@
.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}

1
templates/thread.html
View File

@ -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>