mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-01 07:35:17 +00:00
See description
From the previous commit : - Fixed permissions - Fixed missing overlay when hovering a picture - Added special overlay for picture to be moderated - Removed JS to calculate how many columns are used
This commit is contained in:
Julien Constant
parent
b7f6a7f370
commit
238d41b84c
@ -783,7 +783,7 @@ class Preferences(models.Model):
|
||||
user = models.OneToOneField(
|
||||
User, related_name="_preferences", on_delete=models.CASCADE
|
||||
)
|
||||
receive_weekmail = models.BooleanField(_("Receive the Weekmail"), default=False)
|
||||
receive_weekmail = models.BooleanField(_("receive the Weekmail"), default=False)
|
||||
show_my_stats = models.BooleanField(_("show your stats to others"), default=False)
|
||||
notify_on_click = models.BooleanField(
|
||||
_("get a notification for every click"), default=False
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
|
||||
> p {
|
||||
box-sizing: border-box;
|
||||
max-width: calc(100% / 3);
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@ -55,6 +55,7 @@
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: normal;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@ -62,7 +63,7 @@
|
||||
> input {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
max-width: calc(100% / 3);
|
||||
max-width: 300px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
max-width: 100%;
|
||||
@ -83,6 +84,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
background-color: rgba(0,0,0,.1);
|
||||
border-radius: 10px;
|
||||
@ -90,48 +92,7 @@
|
||||
margin: 10px 0 10px auto;
|
||||
}
|
||||
|
||||
.photos {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
> .photo {
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
border-radius: 5px;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
border-radius: 5px;
|
||||
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> input[type=checkbox] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photos,
|
||||
.albums {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
@ -142,6 +103,15 @@
|
||||
> a {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 128px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
|
||||
@media (max-width: 300px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .5);
|
||||
@ -151,19 +121,15 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 5px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .photo,
|
||||
> .album {
|
||||
border-radius: 5px;
|
||||
border: none;
|
||||
|
||||
box-sizing: border-box;
|
||||
@ -183,7 +149,6 @@
|
||||
}
|
||||
|
||||
> div {
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -196,13 +161,41 @@
|
||||
padding: 10px;
|
||||
color: white;
|
||||
|
||||
background: rgba(0, 0, 0, .3);
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .7);
|
||||
}
|
||||
}
|
||||
|
||||
&.not_moderated {
|
||||
&::before {
|
||||
content: '⚠️';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background: rgba(0, 0, 0, .5);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .album > div {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5282,6 +5282,10 @@ msgstr "photo"
|
||||
msgid "SAS"
|
||||
msgstr "SAS"
|
||||
|
||||
#: sas/templates/sas/album.jinja:102
|
||||
msgid "This album does not contain any photos."
|
||||
msgstr "Cet album ne contient aucune photo."
|
||||
|
||||
#: sas/templates/sas/album.jinja:53 sas/templates/sas/album.jinja:55
|
||||
#: sas/templates/sas/main.jinja:13 sas/templates/sas/main.jinja:15
|
||||
#: sas/templates/sas/main.jinja:17
|
||||
|
||||
@ -69,7 +69,6 @@ class Picture(SithFile):
|
||||
im = Image.open(BytesIO(f.read()))
|
||||
(w, h) = im.size
|
||||
return (w / h) < 1
|
||||
return False
|
||||
|
||||
def can_be_edited_by(self, user):
|
||||
return user.is_in_group(settings.SITH_GROUP_SAS_ADMIN_ID)
|
||||
@ -79,11 +78,16 @@ class Picture(SithFile):
|
||||
# Result is cached 4s for this user
|
||||
if user.is_anonymous:
|
||||
return False
|
||||
|
||||
perm = cache.get("%d_can_view_pictures" % (user.id), False)
|
||||
if perm:
|
||||
|
||||
# use cache only when user is in SAS Admins or when picture is moderated
|
||||
if perm and (self.is_moderated or self.can_be_edited_by(user)):
|
||||
return perm
|
||||
perm = self.is_in_sas and self.is_moderated and user.was_subscribed
|
||||
|
||||
perm = self.is_in_sas and (self.is_moderated or self.can_be_edited_by(user)) and user.was_subscribed
|
||||
cache.set("%d_can_view_pictures" % (user.id), perm, timeout=4)
|
||||
|
||||
return perm
|
||||
|
||||
def get_download_url(self):
|
||||
|
||||
@ -58,10 +58,10 @@
|
||||
<h4>{% trans %}Albums{% endtrans %}</h4>
|
||||
<div class="albums">
|
||||
{% for a in album.children_albums.order_by('-date') %}
|
||||
{% if user.can_view(a) %}
|
||||
<a href="{{ url("sas:album", album_id=a.id) }}">
|
||||
{% if a.can_be_viewed_by(user) %}
|
||||
<a href="{{ url('sas:album', album_id=a.id) }}">
|
||||
<div
|
||||
class="album {% if a.is_moderated %}moderated{% endif %}"
|
||||
class="album{% if not a.is_moderated %} not_moderated{% endif %}"
|
||||
style="background-image: url('{% if a.file %}{{ a.get_download_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
|
||||
>
|
||||
<div>
|
||||
@ -79,35 +79,40 @@
|
||||
<br>
|
||||
{% endif %}
|
||||
|
||||
<h4>{% trans %}Photos{% endtrans %}</h4>
|
||||
<h4>{% trans %}Pictures{% endtrans %}</h4>
|
||||
{% if pictures | length != 0 %}
|
||||
{% set max = (pictures | length // 6) if pictures | length > 6 else 1 %}
|
||||
<div class="photos">
|
||||
{% for p in pictures %}
|
||||
<div class="photo{% if not p.is_moderated %} moderation{% endif %}">
|
||||
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict" style="background-image: url('{{ p.get_download_thumb_url() }}')">
|
||||
{% 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('{{ p.get_download_thumb_url() }}')"
|
||||
>
|
||||
<div> </div>
|
||||
</div>
|
||||
{% if edit_mode %}
|
||||
<input type="checkbox" name="file_list" value="{{ p.id }}">
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% trans %}This album does not contain any photos.{% endtrans %}
|
||||
{% endif %}
|
||||
|
||||
{% if pictures.has_previous() or pictures.has_next() %}
|
||||
<div class="paginator">
|
||||
{{ paginate(pictures, paginator) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if edit_mode %}
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
|
||||
{% if edit_mode %}
|
||||
<form class="add-files" id="upload_form" action="" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="inputs">
|
||||
@ -116,6 +121,9 @@
|
||||
<input type="submit" value="{% trans %}Upload{% endtrans %}" />
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
|
||||
<p style="font-size: small; color: #444;">{% trans %}Template generation time: {% endtrans %}
|
||||
{{ timezone.now() - start }}
|
||||
@ -124,22 +132,6 @@
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script defer>
|
||||
function updateColumns() {
|
||||
const fullWidth = $(".photos").width();
|
||||
const nbColumns = Math.min(Math.floor((fullWidth / 100) - 1), 5);
|
||||
|
||||
const photoWidth = (fullWidth - (nbColumns - 1) * 5) / nbColumns;
|
||||
const photoHeight = (photoWidth * (9/16));
|
||||
|
||||
$(".photo").css("width", photoWidth);
|
||||
$(".photo").css("height", photoHeight);
|
||||
}
|
||||
|
||||
$(window).resize(updateColumns);
|
||||
updateColumns();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$("form#upload_form").submit(function (event) {
|
||||
let formData = new FormData($(this)[0]);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user