Fix mobile transitions (sort of)
Benoit Favreault
Francis Lachapelle
parent
f6cb8f226a
commit
a554158686
|
|
@ -5,7 +5,7 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label"
|
||||
>
|
||||
<md-card class="viewer">
|
||||
|
||||
<md-card-content>
|
||||
<md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
|
||||
<header>
|
||||
|
|
@ -19,11 +19,9 @@
|
|||
</h6>
|
||||
</div>
|
||||
<div class="sg-icon-bar--vertical">
|
||||
<span ng-show="addressbook.isEditable">
|
||||
<md-button class="iconButton" aria-label="Edit" ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
|
||||
<i class="md-icon-create"><!-- edit --></i>
|
||||
</md-button>
|
||||
</span>
|
||||
<md-button class="iconButton" aria-label="Edit" ng-show="addressbook.isEditable" ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
|
||||
<i class="md-icon-create"><!-- edit --></i>
|
||||
</md-button>
|
||||
<md-button class="iconButton" aria-label="Delete" ng-click="confirmDelete(card)">
|
||||
<i class="md-icon-delete"><!-- delete --></i>
|
||||
</md-button>
|
||||
|
|
@ -125,5 +123,5 @@
|
|||
|
||||
</md-card-content>
|
||||
|
||||
</md-card>
|
||||
|
||||
</container>
|
||||
|
|
|
|||
|
|
@ -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"] {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue