Added text to moderated picture

core/static/sas/album.scss

@@ -66,7 +66,9 @@
       }
     }
 
+    > div > input,
     > input {
+      box-sizing: border-box;
       height: 40px;
       width: 100%;
       max-width: 300px;
@@ -75,6 +77,16 @@
         max-width: 100%;
       }
     }
+
+    > div {
+      width: 100%;
+      max-width: 300px;
+    }
+
+    > input[type=submit]:hover {
+      background-color: #287fb8;
+      color: white;
+    }
   }
 
 }
@@ -136,8 +148,6 @@
 
     > .photo,
     > .album {
-      border: none;
-
       box-sizing: border-box;
       background-size: cover;
       background-repeat: no-repeat;
@@ -156,8 +166,24 @@
         width: 100%;
       }
 
-      > div {
+      &:hover > .text {
+        background-color: rgba(0, 0, 0, .5);
+      }
+
+      &:hover > .overlay {
+        -webkit-backdrop-filter: blur(2px);
+        backdrop-filter: blur(2px);
+
+        ~ .text {
+          background-color: transparent;
+        }
+      }
+
+      > .text {
+        position: absolute;
         box-sizing: border-box;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
 
@@ -168,20 +194,22 @@
 
         padding: 10px;
         color: white;
-        
-        &:hover {
-          background: rgba(0, 0, 0, .5);
-        }
       }
 
-      &.not_moderated {
+      > .overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+
         &::before {
-          content: '⚠️';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
+          content: '⚠️';
           color: white;
           display: flex;
           justify-content: center;
@@ -191,11 +219,6 @@
           -webkit-backdrop-filter: blur(5px);
           backdrop-filter: blur(5px);
         }
-
-        &:hover::before {
-          -webkit-backdrop-filter: blur(2px);
-          backdrop-filter: blur(2px);
-        }
       }
     }
 
@@ -205,5 +228,10 @@
       text-align: left;
       word-break: break-word;
     }
+
+    > .photo > .text {
+      align-items: center;
+      padding-bottom: 30px;
+    }
   }
 }

locale/fr/LC_MESSAGES/django.po

@@ -2644,6 +2644,11 @@ msgstr "Coller"
 msgid "Clipboard: "
 msgstr "Presse-papier : "
 
+#: sas/templates/sas/album.jinja:69
+#: sas/templates/sas/album.jinja:97
+msgid "To be moderated"
+msgstr "A modérer"
+
 #: core/templates/core/file_detail.jinja:53
 msgid "Real name: "
 msgstr "Nom réel : "

sas/templates/sas/album.jinja

@@ -64,9 +64,12 @@
                             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>
+                            {% if not a.is_moderated %}
-                                {{ a.name }}
+                                <div class="overlay">&nbsp;</div>
-                            </div>
+                                <div class="text">{% trans %}To be moderated{% endtrans %}</div>
+                            {% else %}
+                                <div class="text">{{ a.name }}</div>
+                            {% endif %}
                         </div>
                         {% if edit_mode %}
                             <input type="checkbox" name="file_list" value="{{ a.id }}">
@@ -86,10 +89,15 @@
                 {% 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 %}" 
+                            class="photo"
                             style="background-image: url('{{ p.get_download_thumb_url() }}')"
                         >
-                            <div>&nbsp;</div>
+                            {% 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>
                         {% if edit_mode %}
                             <input type="checkbox" name="file_list" value="{{ p.id }}">
@@ -188,7 +196,7 @@
         let imagePool = [];
 
         while(images.length > 0 && imagePool.length < poolSize) {
-            var image = images.shift();
+            let image = images.shift();
             imagePool.push(image);
             sendImage(image);
         }
@@ -210,20 +218,20 @@
                 .always(next.bind(undefined, image));
         }
 
-        function next(image, status, jqXHR) {
+        function next(image, _, __) {
-            let index;
+            let index = imagePool.indexOf(image);
-            if(index = imagePool.indexOf(image) !== -1) {
+            let nextImage = images.shift();
-                imagePool.splice(index, 1);
-            }
-            let nextImage;
-            if(nextImage = images.shift()) {
-                imagePool.push(nextImage);
 
+            if(index !== -1)
+                imagePool.splice(index, 1);
+
+            if(nextImage) {
+                imagePool.push(nextImage);
                 sendImage(nextImage);
             }
         }
 
-        function onSuccess(image, data, status, jqXHR) {
+        function onSuccess(image, data, _, __) {
             let errors = [];
 
             if ($(data.responseText).find('.errorlist.nonfield')[0])
@@ -234,7 +242,7 @@
 
             progress.value = ++completeCount / imagesCount;
             if(progress.value === 1 && errorList.children.length === 0)
-                document.location.reload(true)
+                document.location.reload()
         }
     });
     </script>

sas/templates/sas/main.jinja

@@ -25,7 +25,7 @@
             class="album"
             style="background-image: url('{{ img }}');"
         >
-            <div>
+            <div class="text">
                 {{ a.name }}
             </div>
         </div>