Started working on the SAS css

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);
+        }
+      }
+    }
+  }
+}

sas/templates/sas/album.jinja

@@ -1,6 +1,11 @@
 {% extends "core/base.jinja" %}
 {% from "core/macros.jinja" import paginate %}
 
+{%- block additional_css -%}
+    <link rel="stylesheet" href="{{ scss('core/override.scss') }}">
+    <link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
+{%- endblock -%}
+
 {% block title %}
     {% trans %}SAS{% endtrans %}
 {% endblock %}
@@ -8,86 +13,110 @@
 {% macro print_path(file) %}
     {% if file and file.parent %}
         {{ print_path(file.parent) }}
-<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> >
+        <a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> /
     {% endif %}
 {% endmacro %}
 
 
 {% block content %}
-<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(album.parent) }} {{ album.get_display_name() }}
-<h3>{{ album.get_display_name() }}</h3>
-<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a><br>
-{% set start = timezone.now() %}
-<hr>
+    <code>
+        <a href="{{ url('sas:main') }}">SAS</a> / {{ print_path(album.parent) }} {{ album.get_display_name() }}
+    </code>
+
     {% set edit_mode = user.can_edit(album) %}
+    {% set start = timezone.now() %}
+
     {% if edit_mode %}
-<form action="" method="post" enctype="multipart/form-data" style="width: 100%;">
+        <form action="" method="post" enctype="multipart/form-data">
             {% csrf_token %}
-    <p>
-        <input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}"> |
-        <input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}"> |
-        <input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}"> |
+
+            <div class="navbar">
+                <h3>{{ album.get_display_name() }}</h3>
+
+                <div class="toolbar">
+                    <a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a>
+                    <input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}">
+                    <input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}">
                     <input name="paste" type="submit" value="{% trans %}Paste{% endtrans %}">
-    </p>
+                </div>
+            </div>
+
             {% if clipboard %}
-    <p>{% trans %}Clipboard: {% endtrans %}
+                <div class="clipboard">
+                    {% trans %}Clipboard: {% endtrans %}
                     <ul>
                         {% for f in clipboard %}
                             <li>{{ f.get_full_path() }}</li>
                         {% endfor %}
                     </ul>
-    </p>
+                    <input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}">
+                </div>
             {% endif %}
     {% endif %}
-    <div>
+
+    {% if album.children_albums.count() > 0 %}
+        <h4>{% trans %}Albums{% endtrans %}</h4>
+        <div class="albums">
             {% for a in album.children_albums.order_by('-date') %}
-        <div style="display: inline-block;">
+                {% if user.can_view(a) %}
+                    <a href="{{ url("sas:album", album_id=a.id) }}">
+                        <div
+                            class="album {% if a.is_moderated %}moderated{% endif %}"
+                            style="background-image: url('{% if a.file %}{{ a.get_download_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
+                        >
+                            <div>
+                                {{ a.name }}
+                            </div>
+                        </div>
                         {% if edit_mode %}
                         <input type="checkbox" name="file_list" value="{{ a.id }}">
                         {% endif %}
-        {% if user.can_view(a) %}
-        <a href="{{ url("sas:album", album_id=a.id) }}" style="display: inline-block">
-            <div class="album{% if not a.is_moderated %} not_moderated{% endif %}">
-            <div>
-            {% if a.file %}
-            <img src="{{ a.get_download_url() }}" alt="{% trans %}preview{% endtrans %}">
-            {% else %}
-            <img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
-            {% endif %}
-            </div>
-            {{ a.name }}
-        </div>
                     </a>
                 {% endif %}
-        </div>
             {% endfor %}
         </div>
-    <div>
+
+        <br>
+    {% endif %}
+
+    <h4>{% trans %}Photos{% 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 style="display: inline-block;">
+                <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 edit_mode %}
                             <input type="checkbox" name="file_list" value="{{ p.id }}">
                         {% endif %}
-        {% if user.can_view(p) %}
-        <div class="picture{% if not p.is_moderated %} not_moderated{% endif %}">
-            <a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
-                <img src="{{ p.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" />
+                        &nbsp;
                     </a>
                 </div>
-        {% endif %}
-        </div>
             {% endfor %}
         </div>
-    <br>
+    {% else %}
+        {% trans %}This album does not contain any photos.{% endtrans %}
+    {% endif %}
+
+    <div class="paginator">
         {{ paginate(pictures, paginator) }}
+    </div>
+
     {% if edit_mode %}
         </form>
     {% endif %}
-<form id="upload_form" action="" method="post" enctype="multipart/form-data">
+
+    <hr>
+
+    <form class="add-files" id="upload_form" action="" method="post" enctype="multipart/form-data">
         {% csrf_token %}
+        <div class="inputs">
             {{ form.as_p() }}
-    <p><input type="submit" value="{% trans %}Upload{% endtrans %}" /></p>
+
+            <input type="submit" value="{% trans %}Upload{% endtrans %}" />
+        </div>
     </form>
+
     <p style="font-size: small; color: #444;">{% trans %}Template generation time: {% endtrans %}
     {{ timezone.now() - start }}
     </p>
@@ -95,9 +124,25 @@
 
 {% 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) {
-    var formData = new FormData($(this)[0]);
+        let formData = new FormData($(this)[0]);
 
         if(!formData.get('album_name') && !formData.get('images').name)
             return false;
@@ -108,26 +153,26 @@ $("form#upload_form").submit(function (event) {
 
         event.preventDefault();
 
-    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);
+        let 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);
+        while(errorList.childElementCount > 0)
+            errorList.removeChild(errorList.firstElementChild);
 
-    var progress;
+        let progress;
         if((progress = this.querySelector('progress')) === null) {
             progress = document.createElement('progress');
             progress.value = 0;
-        var p = document.createElement('p');
+            let p = document.createElement('p');
             p.appendChild(progress);
             this.insertBefore(p, this.lastElementChild);
         }
 
-    var dataHolder;
+        let dataHolder;
 
         if(formData.get('album_name')) {
             dataHolder = new FormData();
@@ -143,12 +188,12 @@ $("form#upload_form").submit(function (event) {
             });
         }
 
-    var images = formData.getAll('images');
-    var imagesCount = images.length;
-    var completeCount = 0;
+        let images = formData.getAll('images');
+        let imagesCount = images.length;
+        let completeCount = 0;
 
-    var poolSize = 1;
-    var imagePool = [];
+        let poolSize = 1;
+        let imagePool = [];
 
         while(images.length > 0 && imagePool.length < poolSize) {
             var image = images.shift();
@@ -174,11 +219,11 @@ $("form#upload_form").submit(function (event) {
         }
 
         function next(image, status, jqXHR) {
-        var index;
+            let index;
             if(index = imagePool.indexOf(image) !== -1) {
                 imagePool.splice(index, 1);
             }
-        var nextImage;
+            let nextImage;
             if(nextImage = images.shift()) {
                 imagePool.push(nextImage);
 
@@ -187,14 +232,16 @@ $("form#upload_form").submit(function (event) {
         }
 
         function onSuccess(image, data, status, jqXHR) {
+            let errors = [];
+
             if ($(data.responseText).find('.errorlist.nonfield')[0])
-            var errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
-        else
-            var errors = []
+                errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
+
             while(errors.length > 0)
-            errorlist.appendChild(errors.shift());
+                errorList.appendChild(errors.shift());
+
             progress.value = ++completeCount / imagesCount;
-        if(progress.value === 1 && errorlist.children.length === 0)
+            if(progress.value === 1 && errorList.children.length === 0)
                 document.location.reload(true)
         }
     });

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"