UX: [permissiongroup] fix form with new sticky-form class

This commit is contained in:
Mathieu Jaumotte 2023-04-14 13:55:54 +02:00
parent 318a84e04d
commit 8042edc13c
2 changed files with 32 additions and 10 deletions

View File

@ -1,3 +1,11 @@
/// mixin to set sticky area on bottom when scrolling
@mixin sticky-bottom {
position: sticky;
bottom: 0;
margin-top: 4em;
z-index: 1000;
}
ul.record_actions { ul.record_actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -53,16 +61,30 @@ ul.record_actions {
} }
} }
} }
.sticky-form {
background-color: $white;
padding: 1em;
margin: -1em;
border-top: 1px solid $chill-ll-gray;
@include sticky-bottom;
.sticky-form-buttons {
position: initial;
bottom: unset;
margin-top: unset;
z-index: unset;
}
}
.sticky-form-buttons { .sticky-form-buttons {
margin-top: 4em; display: flex;
background-color: $beige; background-color: $beige;
position: sticky; text-align: center;
bottom: 0.3em; padding: 0.8em 1.6em;
text-align: center; border-radius: 0;
display: flex; @include sticky-bottom;
padding: 0.8em 1.6em; bottom: 0.3em;
border-radius: 0;
z-index: 1000;
} }
/// EXCEPTIONS /// EXCEPTIONS

View File

@ -73,7 +73,7 @@
<p>{{ 'This group does not provide any permission'|trans }}</p> <p>{{ 'This group does not provide any permission'|trans }}</p>
{%- endif -%} {%- endif -%}
<div class="mt-5"> <div class="sticky-form">
<h2>{{ 'Grant new permissions'|trans }}</h2> <h2>{{ 'Grant new permissions'|trans }}</h2>
{{ form_start(add_role_scopes_form) }} {{ form_start(add_role_scopes_form) }}