Fix mobile transitions (sort of)

UI/WebServerResources/scss/components/button/_button.scss

@@ -63,7 +63,7 @@ $iconButton-size-cursor-fine: $iconButton-size;
 // convenient wrapper for padding calculation todo: write a mixin or a function for a more generic use
 $iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-icon-padding * 2))) / 2;
 $iconButton-hover-scale: 1.25;
-$iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-function;
+$iconButton-transition: all $swift-ease-in-duration $swift-ease-in-timing-function;
 
 // Classes
 .iconButton,
@@ -74,8 +74,9 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
   padding: $iconButton-padding;
   border-radius: 50%;
   color: inherit;
+  transition: $iconButton-transition;
 
-  &:hover,
+  &:hover:not(.md-fab),
   &:active {
     background-color: transparent;
 
@@ -129,11 +130,13 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
 .sg-icon-bar--vertical {
   display: flex;
   flex-direction: column;
-  margin: ($iconButton-padding * -1) ($iconButton-padding * -1) 0 $mg;
+  margin: 0 ($mg * -1) 0 $mg;
   font-size: $sg-font-size-3;
   align-items: center;
   // Containers have padding, we compensate to align according to specs
   justify-content: space-between;
+
+  // for transitions
   @include at(sm) {
   margin-left: $iconButton-padding;
   }
@@ -153,10 +156,21 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
   padding: $mg;
   margin-right: $mg;
   // this is to positioned the button on the toolbar's edge
-  transform: translateY(-50%);
+  transform: translate3d(0, -50%, 0);
+  &:hover {
+    transform: translate3d(0, -49%, 0);
+    [class ^= md-icon],
+    [class *= md-icon-] {
+      transform: scale($iconButton-hover-scale);
+    }
+  }
+
   @include at(sm) {
     //position: absolute;
-    transform: translate(-100%, -50%);
+    transform: translate3d(-100%, -50%, 0);
+    &:hover {
+      transform: translate3d(-100%, -49%, 0);
+    }
   }
 
   i[class|="md-icon"] {

UI/WebServerResources/scss/components/icon/_extends.scss

@@ -10,7 +10,7 @@
 /// if not compiled in a specific order
 /// todo : build with grunt
 ///
-@import "../../../angular-material/src/components/icon/icon.scss";
+//@import "../../../angular-material/src/components/icon/icon.scss";
 @import "../../../bower_components/material-design-iconic-font/scss/_variables";
 // variables in source are not defaulted, we MUST override here
 // relative (to css) path for src fonts

UI/WebServerResources/scss/core/layout.scss

@@ -115,6 +115,13 @@ flex, hide, show, show-sm;
 
 @include attributesToClasses($selectors);
 
+// We need to silently extend this class
+%md-layout-fill {
+  margin: 0;
+  min-height: 100%;
+  width: 100%;
+}
+
 .md-flex {
   flex: 1 1 auto;
 }

UI/WebServerResources/scss/views/_view.scss

@@ -55,50 +55,101 @@ $detailView-width: grid-step(8) !global;
 
 .view-detail {
   z-index: $z-index-view;
+  overflow-x: hidden;
   background-color: $background-base-color;
+
   @include from(lg) {
     @include flex-col(lg, 8, 2, 1);
     margin: 0 auto $mg auto;
   }
+
   @include at(md) {
     @include flex-col(md, 9);
     margin: 0;
   }
+
+  @include from(md) {
+    .viewer {
+      position: absolute;
+      transform: translate3d(0, 0, 0);
+      transition: all 0.5s $swift-ease-in-out-timing-function;
+      &.ng-enter {
+        transform: translate(-105%, 0);
+        &.ng-enter-active {
+          transform: translate(0%, 0%);
+          transition-delay: 0.5s;
+        }
+      }
+
+      &.ng-leave {
+        transition-delay: 0;
+        transition-duration: 0.1s;
+        transform: translate(0, 0);
+
+        &.ng-leave-active {
+          transition-delay: 0.1s;
+          transition-duration: 0.4s;
+          transform: translate(-105%, 100%);
+
+        }
+      }
+    }
+  }
+
   @include to(sm) {
     position: absolute;
     width: 100%;
     min-width: 100%;
+    // caution: limited support in Android (<=4.4), full-support in v. 37
+    height: calc(100vh - #{$toolbar-tall-height});
     transform: translateX(-100%) scale(1);
-    filter: opacity(1);
     transform-origin: 50% 50%;
     transition: all 0.5s $swift-ease-in-out-timing-function;
+// .view-detail.sg-close hides the background
     &.sg-close {
-      transition: all 0.35s $swift-ease-in-out-timing-function;
-      transition-delay: 0.15s;
+      transition-delay: 0.1s;
+      transition-duration: 0.4s;
       transform: translateX(-100%) scale(0);
-      //transform: translateX(-200%);
-      &.ng-enter {
-        transform: translateX(-100%) scale(0);
+      // .viewer is the card itself
+      .viewer {
+        &.ng-leave,
+        &.ng-enter,
+        &.ng-leave.ng-leave-active {
+          transform: translateY(0) scale(0);
+        }
+        // ui-sref might add ng-animate class early
+        &.ng-enter.ng-enter-active {
+          transform: translateY(0) scale(0);
+        }
       }
     }
+    // .viewer is the card itself
+    .viewer {
+      &.ng-leave,
+      &.ng-leave.ng-leave-active {
+        transform: translateY(100%) scale(0);
+      }
+
+      &.ng-enter {
+        transition: all 0.5s $swift-ease-in-out-timing-function;
+        transform: translateY(100%) scale(0);
+      }
+      &.ng-enter.ng-enter-active {
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    &.ng-leave,
+    &.ng-leave.ng-leave-active {
+      transform: translateX(-100%) scale(0);
+    }
+
     &.ng-enter {
+      transition: all 0.5s $swift-ease-in-out-timing-function;
       transform: translateX(-100%) scale(0);
-      //transform: translateX(0);
     }
-    &.ng-enter.ng-enter-active,
-    &.ng-leave {
+    &.ng-enter.ng-enter-active {
       transform: translateX(-100%) scale(1);
-      filter: opacity(1);
-      //transform: translateX(-100%);
-    }
-    &.ng-leave.ng.leave-active {
-      transform: translateX(-100%) scale(0);
-      filter: opacity(1);
-      //transform: translateX(-200%);
-    }
-    [class *= md-whiteframe-] {
-      box-shadow: none;
     }
   }
 }
-