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

core/models.py

@@ -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

core/static/sas/album.scss

@@ -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%;
@@ -195,14 +160,42 @@
 
         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;
+    }
   }
 }