Merge pull request #1358 from ae-utbm/sas-style

Sas style improvement

sas/static/sas/css/picture.scss

@@ -134,7 +134,7 @@
           --loading-size: 20px
         }
 
-        @media (max-width: 1000px) {
+        @media (min-width: 700px) and (max-width: 1000px) {
           max-width: calc(50% - 5px);
         }
 
@@ -201,75 +201,70 @@
   }
 }
 
-.general {
+#pict .general {
   display: flex;
   flex-direction: row;
-  gap: 20px;
+  gap: 3em;
+  justify-content: space-evenly;
 
   @media (max-width: 1000px) {
+    gap: 1em;
     flex-direction: column;
   }
 
-  >.infos {
+  .infos, .tools {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    width: 50%;
-
-    >div>div {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-
-      >*:first-child {
-        min-width: 150px;
-
-        @media (max-width: 1000px) {
-          min-width: auto;
-        }
-      }
+    gap: .5em;
+    @media (min-width: 700px) {
+      max-width: 350px;
     }
   }
+  .infos > div, .tools > div > div {
+    display: flex;
+    flex-direction: column;
+    gap: .35em;
+  }
+
+  .tools > div, >.infos >div>div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 
   >.tools {
-    display: flex;
-    flex-direction: column;
-    width: 50%;
+    flex: 1;
 
-    >div {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+    >div>div {
+      >a.btn {
+        background-color: $primary-neutral-light-color;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        color: black;
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
 
-      >div {
-        >a.button {
-          box-sizing: border-box;
-          background-color: $primary-neutral-light-color;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 10px;
-          color: black;
-          border-radius: 5px;
-          width: 40px;
-          height: 40px;
-
-          &:hover {
-            background-color: #aaa;
-          }
+        &:hover {
+          background-color: #aaa;
         }
+      }
 
-        >a.text.danger {
-          color: red;
+      >a.text.danger {
+        color: red;
 
-          &:hover {
-            color: darkred;
-          }
+        &:hover {
+          color: darkred;
         }
+      }
 
-        &.buttons {
-          display: flex;
-          gap: 5px;
-        }
+      &.buttons {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
       }
     }
   }

sas/templates/sas/main.jinja

@@ -12,6 +12,17 @@
   {% trans %}See all the photos taken during events organised by the AE.{% endtrans %}
 {%- endblock %}
 
+{% block metatags %}
+  <meta property="og:url" content="{{ request.build_absolute_uri() }}" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Stock à souvenirs" />
+  <meta
+    property="og:description"
+    content="Retrouvez toutes les photos prises durant les événements organisés par l'AE."
+  />
+  <meta property="og:image" content="{{ request.build_absolute_uri(static("core/img/logo_no_text.png")) }}" />
+{% endblock %}
+
 {% set is_sas_admin = user.is_root or user.is_in_group(pk=settings.SITH_GROUP_SAS_ADMIN_ID) %}
 
 {% from "sas/macros.jinja" import display_album %}

sas/templates/sas/picture.jinja

@@ -118,15 +118,20 @@
                 <a class="text" :href="currentPicture.full_size_url">
                   {% trans %}HD version{% endtrans %}
                 </a>
-                <br>
-                <a class="text danger" :href="currentPicture.report_url">
+                <a class="text danger " :href="currentPicture.report_url">
                   {% trans %}Ask for removal{% endtrans %}
                 </a>
               </div>
               <div class="buttons">
-                <a class="button" :href="currentPicture.edit_url"><i class="fa-regular fa-pen-to-square edit-action"></i></a>
-                <a class="button" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a>
-                <a class="button" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a>
+                <a
+                  class="btn btn-no-text"
+                  :href="currentPicture.edit_url"
+                  x-show="{{ user.has_perm("sas.change_sasfile")|tojson }} || currentPicture.owner.id === {{ user.id }}"
+                >
+                  <i class="fa-regular fa-pen-to-square edit-action"></i>
+                </a>
+                <a class="btn btn-no-text" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a>
+                <a class="btn btn-no-text" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a>
               </div>
             </div>
           </div>