DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

dossiers: fix the sticky bar on IE 11

Browse source 
This allows IE 11 users to see the draft autosave indicator.

The layout on IE 11 is still buggy though - but it's better than
nothing.
This commit is contained in:
Pierre de La Morinerie 2020-01-08 14:53:07 +00:00
parent 2c795a5ff4
commit 6eaf0f7804
2 changed files with 50 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
app/assets/stylesheets/new_design/dossier_edit.scss
View file

@ -1,6 +1,8 @@
@import "colors"; @import "colors";
@import "constants"; @import "constants";
$dossier-actions-bar-border-width: 1px;
.dossier-header { .dossier-header {
.container { .container {
padding-bottom: $default-padding; padding-bottom: $default-padding;
@ -46,29 +48,40 @@
border-radius: 4px; border-radius: 4px;
} }
.send-dossier-actions-bar { .dossier-edit-sticky-footer {
// scss-lint:disable VendorPrefix // scss-lint:disable VendorPrefix DuplicateProperty
position: fixed; // Fallback for IE 11, and other browser that don't support sticky
position: -webkit-sticky; // This is needed on Safari (tested on 12.1) position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
// scss-lint:enable VendorPrefix
position: sticky; position: sticky;
// scss-lint:enable VendorPrefix DuplicateProperty
// IE 11 uses `position:fixed` – and thus needs an explicit width, content-box for better layout, etc.
width: 100%;
max-width: $page-width + 2 * $default-padding;
box-sizing: content-box;
bottom: 0; bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
margin-top: $default-padding; margin-top: $default-padding;
margin-left: -$default-padding; margin-left: -$default-padding;
margin-right: -$default-padding; margin-right: -$default-padding;
margin-bottom: 0; margin-bottom: 0;
padding-top: 0;
padding-bottom: $default-spacer; padding-right: $default-padding - $dossier-actions-bar-border-width;
padding-right: $default-padding; padding-left: $default-padding - $dossier-actions-bar-border-width;
padding-left: $default-padding;
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #CCCCCC;
border: $dossier-actions-bar-border-width solid #CCCCCC;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom: none; border-bottom: none;
}
.send-dossier-actions-bar {
display: flex;
flex-direction: row;
align-items: center;
.button:not(:small) { .button:not(:small) {
min-height: 38px; min-height: 38px;
@ -81,13 +94,13 @@
} }
// Normal layout // Normal layout
@media (min-width: 500px) { @media (min-width: 620px) {
padding-top: $default-spacer * 2; padding-top: $default-spacer * 2;
padding-bottom: $default-spacer * 2; padding-bottom: $default-spacer * 2;
} }
// Compact layout // Compact layout
@media (max-width: 500px) { @media (max-width: 620px) {
padding-top: $default-spacer; padding-top: $default-spacer;
padding-bottom: $default-spacer; padding-bottom: $default-spacer;
} }

1
app/views/shared/dossiers/_edit.html.haml
View file

@ -53,6 +53,7 @@
locals: { champ: champ, form: champ_form } locals: { champ: champ, form: champ_form }
- if !apercu - if !apercu
.dossier-edit-sticky-footer
.send-dossier-actions-bar .send-dossier-actions-bar
- if dossier.brouillon? - if dossier.brouillon?
- if autosave_available?(dossier) - if autosave_available?(dossier)