klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2026-04-23 03:33:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve SAS picture tools style

Browse Source
This commit is contained in:
imperosol
2026-04-22 14:38:43 +02:00
parent fdf89ea716
commit ae72a2e00f
2 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sas/static/sas/css/picture.scss
+45 -50
View File
@@ -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/picture.jinja
+10 -5
View File
@@ -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>