[FIX] Deuxième vague de fixes pour la mise à jour de mars (#619)

core/static/core/header.scss

@@ -1,6 +1,15 @@
+$hovered-text-color: #c2c2c2;
+$text-color: white;
+
+$background-color: #354a5f;
+$background-color-hovered: #283747;
+
+$red-text-color: #eb2f06;
+$hovered-red-text-color: #ff4d4d;
+
 .header {
   box-sizing: border-box;
-  background-color: #354a5f;
+  background-color: $background-color;
   box-shadow: 3px 3px 3px 0 #dfdfdf;
   border-radius: 0;
   width: 100%;
@@ -24,11 +33,11 @@
     gap: 10px;
 
     >a {
-      color: #fff;
+      color: $text-color;
     }
 
     &:hover>a {
-      color: #1a78b3;
+      color: $hovered-text-color;
     }
 
     @media (max-width: 607px) {
@@ -51,7 +60,7 @@
     }
 
     &-text {
-      color: white;
+      color: $text-color;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -89,16 +98,16 @@
         border-radius: 0;
         margin: 0;
         box-sizing: border-box;
-        background-color: #354a5f;
+        background-color: $background-color;
         width: 45px;
         height: 25px;
         padding: 0;
-        color: white;
+        color: $text-color;
         font-weight: normal;
         line-height: 1.3em;
 
         &:hover {
-          background-color: #283747;
+          background-color: $background-color-hovered;
         }
       }
     }
@@ -126,13 +135,13 @@
       align-items: center;
       text-transform: uppercase;
       text-decoration: none;
-      color: white;
+      color: $text-color;
       margin: 0;
       font-size: .9em;
       width: 120px;
 
       &:hover {
-        background-color: #283747;
+        background-color: $background-color-hovered;
       }
     }
   }
@@ -198,30 +207,34 @@
 
         > a {
           display: block;
-          width: 40px;
+          min-width: 40px;
           height: 40px;
           border-radius: 50%;
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
-          background-color: #354a5f;
+          background-color: $background-color;
         }
 
         >.options {
           display: flex;
           flex-direction: column;
-          gap: 2px;
+          gap: 5px;
 
           >.username {
             display: flex;
             justify-content: flex-end;
             gap: 5px;
 
+            @media (max-width: 500px) {
+              justify-content: flex-start;
+            }
+
             >a {
-              color: white;
+              color: $text-color;
 
               &:hover {
-                color: #1a78b3;
+                color: $hovered-text-color;
               }
             }
           }
@@ -230,7 +243,7 @@
             width: 100%;
             display: flex;
             justify-content: flex-end;
-            gap: 5px;
+            gap: 15px;
 
             @media (max-width: 1200px) {
               justify-content: flex-start;
@@ -238,17 +251,17 @@
 
             >a {
               text-align: right;
-              color: white;
+              color: $text-color;
 
               &:hover {
-                color: #1a78b3;
+                color: $hovered-text-color;
               }
 
               &:last-child {
-                color: #eb2f06;
+                color: $red-text-color;
 
                 &:hover {
-                  color: #cc2804;
+                  color: $hovered-red-text-color;
                 }
               }
             }
@@ -265,16 +278,16 @@
         position: relative;
 
         >a {
-          color: white;
+          color: $text-color;
           position: relative;
           font-size: 25px;
 
           &:hover {
-            color: #1a78b3;
+            color: $hovered-text-color;
           }
 
           >span {
-            color: white;
+            color: $text-color;
             font-size: 14px;
             display: flex;
             justify-content: center;
@@ -282,7 +295,7 @@
             width: 10px;
             height: 10px;
             padding: 5px;
-            background-color: #eb2f06;
+            background-color: $red-text-color;
             border-radius: 50%;
             position: absolute;
             top: -50%;
@@ -388,9 +401,13 @@
           border-radius: 5px;
           font-size: .9em;
           margin: 0;
-          background-color: #283747;
+          background-color: $background-color-hovered;
           padding: 0 10px;
-          color: white;
+          color: $text-color;
+
+          &::placeholder {
+            color: $hovered-text-color;
+          }
         }
       }
     }
@@ -418,10 +435,10 @@
 
   >li>a {
     display: flex;
-    color: white;
+    color: $text-color;
 
     &:hover {
-      color: #1a78b3;
+      color: $hovered-text-color;
     }
 
     >span {

core/static/core/navbar.scss

@@ -1,13 +1,9 @@
 nav.navbar {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
   background-color: hsl(203, 75%, 40%);
   margin: 1em;
   color: white;
   border-radius: 0.6em;
+  min-height: 40px;
 
   @media (max-width: 500px) {
     position: relative;
@@ -17,6 +13,37 @@ nav.navbar {
     margin: .2em;
   }
 
+  > .expand-button {
+    background-color: transparent;
+    display: none;
+    position: relative;
+    padding: 10px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+
+    > i {
+      font-size: 1.5em;
+      color: white;
+    }
+
+    @media (max-width: 500px) {
+      display: flex;
+    }
+  }
+
+  > .content {
+    @media (min-width: 500px) {display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      display: flex !important;
+    }
+
     > .menu,
     > .link {
       box-sizing: border-box;
@@ -107,4 +134,5 @@ nav.navbar {
         }
       }
     }
+  }
 }

core/static/sas/album.scss

@@ -160,6 +160,7 @@ main {
     > .photo,
     > .album {
       box-sizing: border-box;
+      background-color: #333333;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
@@ -167,6 +168,10 @@ main {
       width: calc(16 / 9 * 128px);
       height: 128px;
 
+      &.vertical {
+        background-size: contain;
+      }
+
       margin: 0;
       padding: 0;
       box-shadow: none;

core/static/sas/picture.scss

@@ -70,7 +70,7 @@
     > #next {
       width: calc(50% - 5px);
       aspect-ratio: 16/9;
-      background: #aaa;
+      background: #333333;
 
       > a {
         display: flex;
@@ -241,6 +241,7 @@
   > .infos {
     display: flex;
     flex-direction: column;
+    width: 50%;
 
     > div > div {
       display: flex;
@@ -260,7 +261,7 @@
   > .tools {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    width: 50%;
 
     > div  {
       display: flex;

core/templates/core/base.jinja

@@ -16,7 +16,6 @@
                 {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
                 <link rel="stylesheet" href="{{ static('core/js/ui/jquery-ui.min.css') }}">
             {% endblock %}
-
             <link rel="preload" as="style" href="{{ static('core/font-awesome/css/font-awesome.min.css') }}" onload="this.onload=null;this.rel='stylesheet'">
             <noscript><link rel="stylesheet" href="{{ static('core/font-awesome/css/font-awesome.min.css') }}"></noscript>
             <script defer href="{{ static('core/font-awesome/js/fontawesone.min.js') }}"></script>
@@ -196,6 +195,8 @@
         {% block nav %}
             {% if not popup %}
                 <nav class="navbar">
+                    <button class="expand-button" onclick="showMenu()"><i class="fa fa-bars"></i></button>
+                    <div id="navbar-content" class="content" style="display: none;">
                         <a class="link" href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
                         <div class="menu">
                             <span class="head">{% trans %}Associations & Clubs{% endtrans %}</span>
@@ -243,6 +244,7 @@
                                 <li><a href="{{ url('core:page', page_name='Index') }}">{% trans %}Wiki{% endtrans %}</a></li>
                             </ul>
                         </div>
+                    </div>
                 </nav>
             {% endif %}
         {% endblock %}
@@ -308,6 +310,13 @@
         <script src="{{ static('ajax_select/js/ajax_select.js') }}"></script>
         <script src="{{ url('javascript-catalog') }}"></script>
         <script>
+            function showMenu() {
+                let navbar = document.getElementById("navbar-content");
+                const current = navbar.style.getPropertyValue("display");
+                navbar.style.setProperty("display", current == "none" ? "block" : "none");
+            }
+        </script>
+        <script>
 $('.select_date').datepicker({
     changeMonth: true,
     changeYear: true,

sas/models.py

@@ -63,7 +63,12 @@ class Picture(SithFile):
             return (w / h) < 1
 
     def can_be_edited_by(self, user):
-        return user.is_in_group(settings.SITH_GROUP_SAS_ADMIN_ID)
+        perm = cache.get("%d_can_edit_pictures" % (user.id), None)
+        if perm is None:
+            perm = user.is_root or user.is_in_group(settings.SITH_GROUP_SAS_ADMIN_ID)
+
+        cache.set("%d_can_edit_pictures" % (user.id), perm, timeout=4)
+        return perm
 
     def can_be_viewed_by(self, user):
         # SAS pictures are visible to old subscribers
@@ -72,19 +77,13 @@ class Picture(SithFile):
             return False
 
         perm = cache.get("%d_can_view_pictures" % (user.id), False)
+        if not perm:
+            perm = user.was_subscribed
 
-        # 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 or self.can_be_edited_by(user))
-            and user.was_subscribed
-        )
         cache.set("%d_can_view_pictures" % (user.id), perm, timeout=4)
-
+        return (perm and self.is_moderated and self.is_in_sas) or self.can_be_edited_by(
-        return perm
+            user
+        )
 
     def get_download_url(self):
         return reverse("sas:download", kwargs={"picture_id": self.id})

sas/templates/sas/album.jinja

@@ -88,7 +88,7 @@
                 {% if p.can_be_viewed_by(user) %}
                     <a href="{{ url('sas:picture', picture_id=p.id) }}#pict">
                         <div
-                            class="photo"
+                            class="photo {% if p.is_vertical %}vertical{% endif %}"
                             style="background-image: url('{{ p.get_download_thumb_url() }}')"
                         >
                             {% if not p.is_moderated %}

sas/templates/sas/picture.jinja

@@ -38,7 +38,7 @@
         <h3>{{ picture.get_display_name() }}</h3>
         <h4>{{ picture.parent.children.filter(id__lte=picture.id).count() }} / {{ picture.parent.children.count() }}</h4>
     </div>
-
+    <br>
 
     {% if not picture.is_moderated %}
         {% set next = picture.get_next() %}