Sith/core/templates/core/user_pictures.jinja
Julien Constant c1022642a2 [FIX] Fixes supplémentaires pour la màj de mars (#622)
- Les photos de l'onglet de la page utilisateur utilise désormais leur version thumbnail au lieu de leur version HD
- Une des classes du CSS du SAS a été renommée car elle empiétait sur une class de la navbar
- Le profil utilisateur a été revu pour ajouter plus d'espacement entre le tableau des cotisations et le numéro de cotisants
- Les images de forum & blouse sont de nouveau cliquable pour les afficher en grands
- Sur mobile, lorsqu'on cliquait sur le premier élément de la navbar, ce dernier avait un overlay avec des angles arrondis
- Sur mobile, les utilisateurs avec des images de profils non carrées dépassait dans l'onglet Famille
2023-04-08 20:59:43 +02:00

112 lines
4.2 KiB
Django/Jinja

{% extends "core/base.jinja" %}
{%- block additional_css -%}
<link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
{%- endblock -%}
{% block title %}
{% trans user_name=profile.get_display_name() %}{{ user_name }}'s pictures{% endtrans %}
{% endblock %}
{% block content %}
<main>
{% if can_edit(profile, user) %}
<button id="download_all_pictures", onclick=download_pictures()>{% trans %}Download all my pictures{% endtrans %}</button>
{% endif %}
{% for a in albums %}
<h4>{{ a.name }}</h4>
<div class="photos">
{% for p in pictures[a.id] %}
{% if p.can_be_viewed_by(user) %}
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
<div
class="photo{% if not p.is_moderated %} not_moderated{% endif %}"
style="background-image: url('{% if p.file %}{{ p.get_download_thumb_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
>
{% if not p.is_moderated %}
<div class="overlay">&nbsp;</div>
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
{% else %}
<div class="text">&nbsp;</div>
{% endif %}
</div>
</a>
{% else %}
<div>
<div class="photo">
<div class="text">{% trans %}Picture Unavailable{% endtrans %}</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
<br>
{% endfor %}
</main>
{% endblock %}
{% block script %}
{{ super() }}
<script type="text/javascript">
/**
* Download a list of files.
* @author speedplane
*/
function download_files(files) {
function download_next(i) {
if (i >= files.length) {
return;
}
var a = document.createElement('a');
a.href = files[i].download;
a.target = '_parent';
// Use a.download if available, it prevents plugins from opening.
if ('download' in a) {
a.download = files[i].filename;
}
// Add a to the doc for click to work.
(document.body || document.documentElement).appendChild(a);
if (a.click) {
a.click(); // The click method is supported by most browsers.
} else {
$(a).click(); // Backup using jquery
}
// Delete the temporary link.
a.parentNode.removeChild(a);
// Download the next file with a small timeout. The timeout is necessary
// for IE, which will otherwise only download the first file.
setTimeout(function() {
download_next(i + 1);
}, 500);
}
// Initiate the first download.
download_next(0);
}
function download_pictures() {
$("#download_all_pictures").prop("disabled", true);
var xhr = new XMLHttpRequest();
$.ajax({
type: "GET",
url: "{{ url('api:all_pictures_of_user', user=object.id) }}",
tryCount: 0,
xhr: function(){
return xhr;
},
success: function(data){
$("#download_all_pictures").prop("disabled", false);
to_download = [];
data.forEach(picture =>
to_download.push({ download: picture["full_size_url"], filename: picture["name"] })
);
download_files(to_download);
},
error: function(data){
console.log("Error retrieving data from url: " + data);
$("#download_all_pictures").text("{% trans %}Error downloading your pictures{% endtrans %}");
}
});
}
</script>
{% endblock %}