The "Loading orders" spinner is still visible from the beginning so that
it can be used as indicator for when the page is loaded.
Before, the "No orders found" message was visible between page load and
Angular initilisation.
"admin/all.css" which imports these SCSS partials already imports the
color variables in "admin/variables", so actually there should be no
need to import the variables again.
However, "application.css" calls "require_tree", which means asset
precompilation through Sprockets would attempt to compile each of the
SCSS partials individually. When compiled individually, the color
variables are not available to these partials.
This is a quick solution to allow precompilation of "application.css" to
complete.
Change modals for large screens from 10% position from top and 80% max
height, to 5% position from top and 90% max height.
This is to accommodate the taller cookies policy modal.
It seems that it is not easy to apply a custom position and height to a
specific modal only. This doesn't seem to be supported by the modal
library currently being used.
Before the recent changes, most modals were rendering at 10px top
position (not the originally planned 10%), so changing this to 5%
doesn't seem to be much of a compromise.
Occasionally, the page scrolls up while the modal is being opened. This
was causing the final position of the modal to be at the wrong location
relative to the viewport.
This was happening because of a race condition between the animation
that slides the modal from above the viewport to the middle, and focus()
which the modal does:
https://github.com/yalabot/angular-foundation/blob/0.8.0/src/modal/modal.js#L109
The final vertical position of the modal is at 10%, so the animation
which translates the modal -25% vertically was starting -15% above the
viewport. The focus() was then causing vertical scroll.
This lowers the starting point of the animation, so there will no longer
be scrolling.
Additionally, the animation would only happen on large screens. The CSS
property "top" is 0 for smaller screens.
When there is enough content in the modal, the height of the modal plus
its top margin could exceed the height of the viewport.
Considering a top position of 10%, a max height of 80% renders a tall
modal vertically centered, with 10% remaining space at the bottom.
