klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2026-04-23 11:43:12 +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
+24 -29
View File
@@ -134,7 +134,7 @@
--loading-size: 20px --loading-size: 20px
} }
@media (max-width: 1000px) { @media (min-width: 700px) and (max-width: 1000px) {
max-width: calc(50% - 5px); max-width: calc(50% - 5px);
} }
@@ -201,57 +201,52 @@
} }
} }
.general { #pict .general {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: 3em;
justify-content: space-evenly;
@media (max-width: 1000px) { @media (max-width: 1000px) {
gap: 1em;
flex-direction: column; flex-direction: column;
} }
>.infos { .infos, .tools {
flex: 1;
display: flex; display: flex;
flex-direction: column; 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; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
>*:first-child {
min-width: 150px;
@media (max-width: 1000px) {
min-width: auto;
}
}
}
} }
>.tools { >.tools {
display: flex; flex: 1;
flex-direction: column;
width: 50%;
>div { >div>div {
display: flex; >a.btn {
flex-direction: row;
justify-content: space-between;
>div {
>a.button {
box-sizing: border-box;
background-color: $primary-neutral-light-color; background-color: $primary-neutral-light-color;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 0;
color: black; color: black;
border-radius: 5px;
width: 40px; width: 40px;
height: 40px; height: 40px;
font-size: 20px;
&:hover { &:hover {
background-color: #aaa; background-color: #aaa;
@@ -268,9 +263,9 @@
&.buttons { &.buttons {
display: flex; display: flex;
flex-direction: row;
gap: 5px; gap: 5px;
} }
} }
} }
} }
}
sas/templates/sas/picture.jinja
+9 -4
View File
@@ -118,15 +118,20 @@
<a class="text" :href="currentPicture.full_size_url"> <a class="text" :href="currentPicture.full_size_url">
{% trans %}HD version{% endtrans %} {% trans %}HD version{% endtrans %}
</a> </a>
<br>
<a class="text danger " :href="currentPicture.report_url"> <a class="text danger " :href="currentPicture.report_url">
{% trans %}Ask for removal{% endtrans %} {% trans %}Ask for removal{% endtrans %}
</a> </a>
</div> </div>
<div class="buttons"> <div class="buttons">
<a class="button" :href="currentPicture.edit_url"><i class="fa-regular fa-pen-to-square edit-action"></i></a> <a
<a class="button" href="?rotate_left"><i class="fa-solid fa-rotate-left"></i></a> class="btn btn-no-text"
<a class="button" href="?rotate_right"><i class="fa-solid fa-rotate-right"></i></a> :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> </div>
</div> </div>