raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Integrate styles/animations for page alert, top bar, tab bar, off canvas

Browse Source
This commit is contained in:
Kristina Lim
2019-07-24 12:29:08 +08:00
parent fca82375e8
commit 6419edcb1f
2 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/darkswarm/directives/page_alert.js.coffee
View File

@@ -2,7 +2,7 @@ Darkswarm.directive "ofnPageAlert", ($timeout) ->
restrict: 'A'
scope: true
link: (scope, elem, attrs) ->
container_elems = $(".off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, .page-alert")
container_elems = $(".off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, .off-canvas-fixed .top-bar, .off-canvas-fixed ofn-flash, .off-canvas-fixed nav.tab-bar, .off-canvas-fixed .page-alert")
# Wait a moment after page load before showing the alert. Otherwise we often miss the
# start of the animation.

33
app/assets/stylesheets/darkswarm/page_alert.css.scss
View File

@@ -2,10 +2,12 @@
@import "animations";
@import "compass/css3/transition";
$page-alert-height: 55px;
// Basic style \\
.page-alert {
.alert-box {
height: 55px;
height: $page-alert-height;
overflow: hidden;
border: 1px solid rgba($dark-grey, 0.35);
border-left: none;
@@ -45,33 +47,26 @@
}
// Show-hide animation \\
.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar {
.off-canvas-wrap .inner-wrap,
.off-canvas-fixed .top-bar,
.off-canvas-fixed ofn-flash,
.off-canvas-fixed nav.tab-bar,
.off-canvas-fixed .page-alert {
@include transition(all 1000ms ease-in-out);
&.move-down {
margin-top: 55px;
@include transition(all 1000ms ease-in-out);
margin-top: $page-alert-height;
}
}
.off-canvas-wrap .inner-wrap .page-alert.fixed {
top: -55px;
z-index: 1;
// TODO: Compass to disable transition
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
.off-canvas-wrap .page-alert {
top: -1 * $page-alert-height;
z-index: 100;
}
.off-canvas-wrap.move-right .inner-wrap.move-down {
.page-alert {
top: -55px * 2;
}
.left-off-canvas-menu {
top: -55px;
top: -1 * $page-alert-height;
}
}