luckyimnotanigger/redlib
1
0
Fork 0
mirror of https://github.com/redlib-org/redlib.git synced 2025-06-20 08:00:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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; vertical-align: -2px;
} }
figcaption { figcaption p {
margin-top: 5px; margin: 5px 0;
text-align: center; text-align: center;
} }
@ -1112,6 +1112,13 @@ a.search_subreddit:hover {
overflow: hidden; overflow: hidden;
} }
.post_media_content:not(:has(.post_media_video)),
.post_media_video,
.gallery {
border: var(--panel-border);
border-radius: 5px;
}
.post_media_video { .post_media_video {
min-width: 100px; min-width: 100px;
max-width: 100px; max-width: 100px;
@ -1169,9 +1176,51 @@ a.search_subreddit:hover {
vertical-align: bottom; 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 { .gallery img {
display: block;
margin: auto;
max-width: 100%; max-width: 100%;
vertical-align: bottom; border-radius: 5px;
} }
.gallery .outbound_url { .gallery .outbound_url {

3
templates/utils.html
View file

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