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
+45 -50
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,75 +201,70 @@
} }
} }
.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) {
>div>div { max-width: 350px;
display: flex;
flex-direction: row;
justify-content: space-between;
>*:first-child {
min-width: 150px;
@media (max-width: 1000px) {
min-width: auto;
}
}
} }
} }
.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 { >.tools {
display: flex; flex: 1;
flex-direction: column;
width: 50%;
>div { >div>div {
display: flex; >a.btn {
flex-direction: row; background-color: $primary-neutral-light-color;
justify-content: space-between; display: flex;
justify-content: center;
align-items: center;
padding: 0;
color: black;
width: 40px;
height: 40px;
font-size: 20px;
>div { &:hover {
>a.button { background-color: #aaa;
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;
}
} }
}
>a.text.danger { >a.text.danger {
color: red; color: red;
&:hover { &:hover {
color: darkred; color: darkred;
}
} }
}
&.buttons { &.buttons {
display: flex; display: flex;
gap: 5px; 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"> <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>