klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-02-26 01:17:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use real images with lazy loading in sas albums and user pictures

Browse Source
This commit is contained in:
Antoine Bartuccio 2025-02-19 00:12:30 +01:00
parent e8db68b960
commit f7ff77b88f
6 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
sas/schemas.py
View File

@ -39,6 +39,8 @@ class PictureSchema(ModelSchema):
compressed_url: str
thumb_url: str
album: str
report_url: str
edit_url: str
@staticmethod
def resolve_sas_url(obj: Picture) -> str:
@ -56,6 +58,14 @@ class PictureSchema(ModelSchema):
def resolve_thumb_url(obj: Picture) -> str:
return obj.get_download_thumb_url()
@staticmethod
def resolve_report_url(obj: Picture) -> str:
return reverse("sas:picture_ask_removal", kwargs={"picture_id": obj.id})
@staticmethod
def resolve_edit_url(obj: Picture) -> str:
return reverse("sas:picture_edit", kwargs={"picture_id": obj.id})
class PictureRelationCreationSchema(Schema):
picture: NonNegativeInt

7
sas/static/sas/css/album.scss
View File

@ -166,6 +166,13 @@ main {
border: 1px solid rgba(0, 0, 0, .3);
>img {
object-position: top bottom;
object-fit: contain;
height: 100%;
width: 100%
}
@media (max-width: 500px) {
width: 100%;
height: 100%;

2
sas/templates/sas/album.jinja
View File

@ -78,8 +78,8 @@
<div
class="photo"
:class="{not_moderated: !picture.is_moderated}"
:style="`background-image: url(${picture.thumb_url})`"
>
<img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
<template x-if="!picture.is_moderated">
<div class="overlay">&nbsp;</div>
<div class="text">{% trans %}To be moderated{% endtrans %}</div>

8
sas/templates/sas/macros.jinja
View File

@ -2,15 +2,19 @@
<a href="{{ url('sas:album', album_id=a.id) }}">
{% if a.file %}
{% set img = a.get_download_url() %}
{% set src = a.name %}
{% elif a.children.filter(is_folder=False, is_moderated=True).exists() %}
{% set img = a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() %}
{% set picture = a.children.filter(is_folder=False).first().as_picture %}
{% set img = picture.get_download_thumb_url() %}
{% set src = picture.name %}
{% else %}
{% set img = static('core/img/sas.jpg') %}
{% set src = "sas.jpg" %}
{% endif %}
<div
class="album{% if not a.is_moderated %} not_moderated{% endif %}"
style="background-image: url('{{ img }}');"
>
<img src="{{ img }}" alt="{{ src }}" loading="lazy" />
{% if not a.is_moderated %}
<div class="overlay">&nbsp;</div>
<div class="text">{% trans %}To be moderated{% endtrans %}</div>

4
sas/templates/sas/picture.jinja
View File

@ -114,12 +114,12 @@
{% trans %}HD version{% endtrans %}
</a>
<br>
<a class="text danger" :href="`/sas/picture/${currentPicture.id}/report`">
<a class="text danger" :href="currentPicture.report_url">
{% trans %}Ask for removal{% endtrans %}
</a>
</div>
<div class="buttons">
<a class="button" :href="`/sas/picture/${currentPicture.id}/edit/`"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
<a class="button" :href="currentPicture.edit_url"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
<a class="button" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a>
<a class="button" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a>
</div>

2
sas/templates/sas/user_pictures.jinja
View File

@ -35,8 +35,8 @@
<div
class="photo"
:class="{not_moderated: !picture.is_moderated}"
:style="`background-image: url(${picture.thumb_url})`"
>
<img :src="picture.thumb_url" :alt="picture.name" loading="lazy" />
<template x-if="!picture.is_moderated">
<div class="overlay">&nbsp;</div>
<div class="text">{% trans %}To be moderated{% endtrans %}</div>