From b7f6a7f370edd8c32eba58e56ee72cfb4cc32959 Mon Sep 17 00:00:00 2001 From: Julien Constant Date: Tue, 7 Mar 2023 19:29:24 +0100 Subject: [PATCH] Started working on the SAS css --- core/static/sas/album.scss | 208 ++++++++++++++++++ sas/templates/sas/album.jinja | 387 +++++++++++++++++++--------------- sith/settings.py | 2 +- 3 files changed, 426 insertions(+), 171 deletions(-) create mode 100644 core/static/sas/album.scss diff --git a/core/static/sas/album.scss b/core/static/sas/album.scss new file mode 100644 index 00000000..a81ae186 --- /dev/null +++ b/core/static/sas/album.scss @@ -0,0 +1,208 @@ + +.navbar { + margin-top: 10px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + justify-content: space-between; +} + +.toolbar { + display: flex; + align-items: flex-end; + gap: 5px; + + > a, + > input { + padding: 0.4em; + margin: 0.1em; + font-size: 1.2em; + line-height: 1.2em; + color: black; + background-color: #f2f2f2; + border-radius: 5px; + font-weight: bold; + + &:hover { + background-color: #d4d4d4; + } + } +} + +.add-files { + display: flex; + flex-direction: column; + + > .inputs { + align-items: flex-end; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + + > p { + box-sizing: border-box; + max-width: calc(100% / 3); + width: 100%; + + @media (max-width: 500px) { + max-width: 100%; + } + + > input { + box-sizing: border-box; + max-width: 100%; + width: 100%; + height: 40px; + font-size: 16px; + } + } + + > input { + height: 40px; + width: 100%; + max-width: calc(100% / 3); + + @media (max-width: 500px) { + max-width: 100%; + } + } + } + +} + +.clipboard { + margin-top: 10px; + padding: 10px; + background-color: rgba(0,0,0,.1); + border-radius: 10px; +} + +.paginator { + display: flex; + justify-content: center; + gap: 10px; + width: fit-content; + background-color: rgba(0,0,0,.1); + border-radius: 10px; + padding: 10px; + 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; + } + } + } +} + +.albums { + box-sizing: border-box; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 5px; + + > a { + box-sizing: border-box; + position: relative; + + &:hover { + background: rgba(0, 0, 0, .5); + } + + > input[type=checkbox] { + position: absolute; + top: 0; + right: 0; + height: 20px; + width: 20px; + margin: 5px; + + cursor: pointer; + } + + @media (max-width: 500px) { + width: 100%; + } + + > .album { + border-radius: 5px; + border: none; + + box-sizing: border-box; + background-size: cover; + background-repeat: no-repeat; + background-position: center center; + + width: calc(16 / 9 * 128px); + height: 128px; + + margin: 0; + padding: 0; + box-shadow: none; + + @media (max-width: 500px) { + width: 100%; + } + + > div { + border-radius: 5px; + box-sizing: border-box; + width: 100%; + height: 100%; + + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + + 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, .5); + } + } + } + } +} \ No newline at end of file diff --git a/sas/templates/sas/album.jinja b/sas/templates/sas/album.jinja index 6958adc6..3637591c 100644 --- a/sas/templates/sas/album.jinja +++ b/sas/templates/sas/album.jinja @@ -1,202 +1,249 @@ {% extends "core/base.jinja" %} {% from "core/macros.jinja" import paginate %} +{%- block additional_css -%} + + +{%- endblock -%} + {% block title %} -{% trans %}SAS{% endtrans %} + {% trans %}SAS{% endtrans %} {% endblock %} {% macro print_path(file) %} -{% if file and file.parent %} -{{ print_path(file.parent) }} -{{ file.get_display_name() }} > -{% endif %} + {% if file and file.parent %} + {{ print_path(file.parent) }} + {{ file.get_display_name() }} / + {% endif %} {% endmacro %} {% block content %} -SAS > {{ print_path(album.parent) }} {{ album.get_display_name() }} -

{{ album.get_display_name() }}

-{% trans %}Edit{% endtrans %}
-{% set start = timezone.now() %} -
-{% set edit_mode = user.can_edit(album) %} -{% if edit_mode %} -
- {% csrf_token %} -

- | - | - | - -

- {% if clipboard %} -

{% trans %}Clipboard: {% endtrans %} -

-

- {% endif %} -{% endif %} -
- {% for a in album.children_albums.order_by('-date') %} -
- {% if edit_mode %} - - {% endif %} - {% if user.can_view(a) %} - -
-
- {% if a.file %} - {% trans %}preview{% endtrans %} - {% else %} - {% trans %}preview{% endtrans %} - {% endif %} + + SAS / {{ print_path(album.parent) }} {{ album.get_display_name() }} + + + {% set edit_mode = user.can_edit(album) %} + {% set start = timezone.now() %} + + {% if edit_mode %} + + {% csrf_token %} + +
+

{{ album.get_display_name() }}

+ +
+ {% trans %}Edit{% endtrans %} + + + +
- {{ a.name }} + + {% if clipboard %} +
+ {% trans %}Clipboard: {% endtrans %} +
    + {% for f in clipboard %} +
  • {{ f.get_full_path() }}
    • + {% endfor %} +
+ +
+ {% endif %} + {% endif %} + + {% if album.children_albums.count() > 0 %} +

{% trans %}Albums{% endtrans %}

+
+ {% for a in album.children_albums.order_by('-date') %} + {% if user.can_view(a) %} + +
+
+ {{ a.name }} +
+
+ {% if edit_mode %} + + {% endif %} + + {% endif %} + {% endfor %}
- - {% endif %} + +
+ {% endif %} + +

{% trans %}Photos{% endtrans %}

+ {% if pictures | length != 0 %} + {% set max = (pictures | length // 6) if pictures | length > 6 else 1 %} +
+ {% for p in pictures %} +
+ + {% if edit_mode %} + + {% endif %} +   + +
+ {% endfor %}
- {% endfor %} + {% else %} + {% trans %}This album does not contain any photos.{% endtrans %} + {% endif %} + +
+ {{ paginate(pictures, paginator) }}
-
- {% for p in pictures %} -
- {% if edit_mode %} - - {% endif %} - {% if user.can_view(p) %} -
- - {{ p.get_display_name() }} - + + {% if edit_mode %} + + {% endif %} + +
+ +
+ {% csrf_token %} +
+ {{ form.as_p() }} + +
- {% endif %} -
- {% endfor %} -
-
- {{ paginate(pictures, paginator) }} -{% if edit_mode %} - -{% endif %} -
- {% csrf_token %} - {{ form.as_p() }} -

-
-

{% trans %}Template generation time: {% endtrans %} -{{ timezone.now() - start }} -

+ + +

{% trans %}Template generation time: {% endtrans %} + {{ timezone.now() - start }} +

{% endblock %} {% block script %} {{ super() }} - - var errorlist; - if((errorlist = this.querySelector('#upload_form ul.errorlist.nonfield')) === null) { - errorlist = document.createElement('ul'); - errorlist.classList.add('errorlist', 'nonfield'); - this.insertBefore(errorlist, this.firstElementChild); - } + + while(errorList.childElementCount > 0) + errorList.removeChild(errorList.firstElementChild); + + let progress; + if((progress = this.querySelector('progress')) === null) { + progress = document.createElement('progress'); + progress.value = 0; + let p = document.createElement('p'); + p.appendChild(progress); + this.insertBefore(p, this.lastElementChild); + } + + let dataHolder; + + if(formData.get('album_name')) { + dataHolder = new FormData(); + dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}'); + dataHolder.set('album_name', formData.get('album_name')); + $.ajax({ + method: 'POST', + url: "{{ url('sas:album_upload', album_id=object.id) }}", + data: dataHolder, + processData: false, + contentType: false, + success: onSuccess + }); + } + + let images = formData.getAll('images'); + let imagesCount = images.length; + let completeCount = 0; + + let poolSize = 1; + let imagePool = []; + + while(images.length > 0 && imagePool.length < poolSize) { + var image = images.shift(); + imagePool.push(image); + sendImage(image); + } + + function sendImage(image) { + dataHolder = new FormData(); + dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}'); + dataHolder.set('images', image); + + $.ajax({ + method: 'POST', + url: "{{ url('sas:album_upload', album_id=object.id) }}", + data: dataHolder, + processData: false, + contentType: false, + }) + .fail(onSuccess.bind(undefined, image)) + .done(onSuccess.bind(undefined, image)) + .always(next.bind(undefined, image)); + } + + function next(image, status, jqXHR) { + let index; + if(index = imagePool.indexOf(image) !== -1) { + imagePool.splice(index, 1); + } + let nextImage; + if(nextImage = images.shift()) { + imagePool.push(nextImage); + + sendImage(nextImage); + } + } + + function onSuccess(image, data, status, jqXHR) { + let errors = []; + + if ($(data.responseText).find('.errorlist.nonfield')[0]) + errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children); + + while(errors.length > 0) + errorList.appendChild(errors.shift()); + + progress.value = ++completeCount / imagesCount; + if(progress.value === 1 && errorList.children.length === 0) + document.location.reload(true) + } + }); + {% endblock %} diff --git a/sith/settings.py b/sith/settings.py index cd85a670..28b4e730 100644 --- a/sith/settings.py +++ b/sith/settings.py @@ -351,7 +351,7 @@ SITH_FORUM_PAGE_LENGTH = 30 # SAS variables SITH_SAS_ROOT_DIR_ID = 4 -SITH_SAS_IMAGES_PER_PAGE = 30 +SITH_SAS_IMAGES_PER_PAGE = 60 SITH_BOARD_SUFFIX = "-bureau" SITH_MEMBER_SUFFIX = "-membres"