Merge pull request #4208 from pengfeidong/fix_3975_buttons_floating

[fix #3975] set buttons floating in dossier page
This commit is contained in:
Paul Chavard 2019-09-17 17:03:42 +02:00 committed by GitHub
commit 45efd99a89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 6 deletions

View file

@ -45,4 +45,51 @@
padding: 20px;
border-radius: 4px;
}
.send-dossier-actions-bar {
// scss-lint:disable VendorPrefix
position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
// scss-lint:enable VendorPrefix
position: sticky;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
margin-top: $default-padding;
margin-left: -$default-padding;
margin-right: -$default-padding;
margin-bottom: 0;
padding-top: 0;
padding-bottom: $default-spacer;
padding-right: $default-padding;
padding-left: $default-padding;
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: none;
.button {
min-height: 38px;
line-height: 16px;
}
// If there are more than one button, align the "Send" button to the right
.button:not(:first-of-type).send {
margin-left: auto;
}
// Normal layout
@media (min-width: 500px) {
padding-top: $default-spacer * 2;
padding-bottom: $default-spacer * 2;
}
// Compact layout
@media (max-width: 500px) {
padding-top: $default-spacer;
padding-bottom: $default-spacer;
}
}
}

View file

@ -108,10 +108,6 @@ footer {
.footer-row {
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
// In this case, the bottom margin is defined directly on each individual column
&.footer-columns {
margin-bottom: 0;

View file

@ -32,7 +32,7 @@
locals: { champ: champ, form: champ_form }
- if !apercu
.send-wrapper
.send-dossier-actions-bar
- if dossier.brouillon?
= f.button 'Enregistrer le brouillon',
formnovalidate: true,

View file

@ -21,7 +21,7 @@ describe 'users/dossiers/brouillon.html.haml', type: :view do
end
it 'affiche les boutons de validation' do
expect(rendered).to have_selector('.send-wrapper')
expect(rendered).to have_selector('.send-dossier-actions-bar')
end
it 'prépare le footer' do