mirrors/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-04-04 13:37:40 +03:00
Code Issues Projects Releases Packages Wiki Activity

display gallery as flexbox + add borders to media

Browse source
This commit is contained in:
DokterKaj 2024-10-21 23:03:48 +08:00
parent 3ff907d6c1
commit fb39759dd3
2 changed files with 57 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

55
static/style.css
View file

@ -223,8 +223,8 @@ nav #redlib {
vertical-align: -2px;
}
figcaption {
margin-top: 5px;
figcaption p {
margin: 5px 0;
text-align: center;
}
@ -1112,6 +1112,13 @@ a.search_subreddit:hover {
overflow: hidden;
}
.post_media_content:not(:has(.post_media_video)),
.post_media_video,
.gallery {
border: var(--panel-border);
border-radius: 5px;
}
.post_media_video {
min-width: 100px;
max-width: 100px;
@ -1169,9 +1176,51 @@ a.search_subreddit:hover {
vertical-align: bottom;
}
.gallery {
display: flex;
flex-flow: row nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
align-items: center;
background: var(--background);
transition: background 0.2s;
}
.post:hover .gallery {
background: var(--post);
}
.gallery figure {
flex: 1 0 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
margin: 0;
}
.gallery_length {
position: sticky;
flex-shrink: 0;
align-self: start;
right: 2%;
top: 2%;
width: 6em;
padding: 10px 5px;
margin-left: calc(-6em - 5px*2);
text-align: center;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 5px;
transition: opacity 0.2s;
}
.gallery_length:focus {
opacity: 0;
}
.gallery img {
display: block;
margin: auto;
max-width: 100%;
vertical-align: bottom;
border-radius: 5px;
}
.gallery .outbound_url {

7
templates/utils.html
View file

@ -136,17 +136,20 @@
{% endif %}
{% else if post.post_type == "gallery" %}
<div class="gallery">
{% for image in post.gallery -%}
{% for image in post.gallery -%}
<figure>
<a href="{{ image.url }}" ><img loading="lazy" alt="Gallery image" src="{{ image.url }}"/></a>
<figcaption>
{% if !image.caption.is_empty() %}
<p>{{ image.caption }}</p>
{% endif %}
{% if image.outbound_url.len() > 0 %}
<p><a class="outbound_url" href="{{ image.outbound_url }}" rel="nofollow">{{ image.outbound_url }}</a>
{% endif %}
</figcaption>
</figure>
{%- endfor %}
{%- endfor %}
<div class="gallery_length" tabindex="-1">gallery<br>({{ post.len() }} images)</div>
</div>
{% else if post.post_type == "link" %}
<a id="post_url" href="{{ post.media.url }}" rel="nofollow">{{ post.media.url }}</a>