improve SAS picture tools style

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,57 +201,52 @@
   }
 }
 
-.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%;
+    gap: .5em;
+    @media (min-width: 700px) {
+      max-width: 350px;
+    }
+  }
+  .infos > div, .tools > div > div {
+    display: flex;
+    flex-direction: column;
+    gap: .35em;
+  }
 
-    >div>div {
+  .tools > div, >.infos >div>div {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-
-      >*:first-child {
-        min-width: 150px;
-
-        @media (max-width: 1000px) {
-          min-width: auto;
-        }
-      }
-    }
   }
 
   >.tools {
-    display: flex;
-    flex-direction: column;
-    width: 50%;
+    flex: 1;
 
-    >div {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-
-      >div {
-        >a.button {
-          box-sizing: border-box;
+    >div>div {
+      >a.btn {
         background-color: $primary-neutral-light-color;
         display: flex;
         justify-content: center;
         align-items: center;
-          padding: 10px;
+        padding: 0;
         color: black;
-          border-radius: 5px;
         width: 40px;
         height: 40px;
+        font-size: 20px;
 
         &:hover {
           background-color: #aaa;
@@ -268,9 +263,9 @@
 
       &.buttons {
         display: flex;
+        flex-direction: row;
         gap: 5px;
       }
     }
   }
 }
-}

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">
                   {% 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>