Fix fab-button positionning

UI/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -280,13 +280,14 @@
             </md-item>
           </md-list>
         </md-content>
+        <md-button class="iconButton md-fab md-fab--bottom md-accent hide-sm" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-add"><!--icon--></i></md-button>
         <!-- This extra container is used to animate views transitions
              double quotes in ng-animate is not a typo                         -->
         <div id="detailView" class="view-detail"  layout="column">
           <md-card class="viewer" ui-view="card"><!-- card view --></md-card>
         </div>
 
-        <md-button class="iconButton md-fab md-accent" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-add"><!--icon--></i></md-button>
+        <md-button class="iconButton md-fab md-accent show-sm" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-add"><!--icon--></i></md-button>
       </div>
 
     </section>

UI/Templates/ContactsUI/UIxContactViewTemplate.wox

@@ -120,7 +120,7 @@
           </div>
         </div>
       </section>
-
+    </div>
     </md-card-content>
 
 

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -43,7 +43,8 @@
   <!-- This extra container is used to animate views transitions
        double quotes in ng-animate is not a typo                         -->
     <div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
-  <md-button class="iconButton md-fab md-accent" aria-label="create" ui-sref="mail.newMessage()">
+  <!-- Responsive: show-small only -->
+  <md-button class="iconButton md-fab md-accent show-sm" aria-label="create" ui-sref="mail.newMessage()">
     <i class="md-icon-add"><!-- icon --></i>
   </md-button>
 

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -76,6 +76,8 @@
     <div class="mailer_mailcontent"
          ng-bind-html="message.$content()"><!-- msg --></div>
   </div>
-
 </md-content>
+  <md-button class="iconButton md-fab md-fab--bottom-inside md-accent hide-sm" aria-label="create" ui-sref="mail.newMessage()">
+    <i class="md-icon-add"><!-- icon --></i>
+  </md-button>
 </container>

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

@@ -152,11 +152,15 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
 // angular-material is overspecifying so we are
 .md-button.iconButton.md-fab.md-default-theme:not([disabled]) {
   z-index: $z-index-fab;
+  // flex might stretch or squize fab bottons
+  min-width: $button-fab-width;
+  min-height: $button-fab-height;
   // this is a temporary fix, see comment in variables
   padding: $mg;
   margin-right: $mg;
   // this is to positioned the button on the toolbar's edge
   transform: translate3d(0, -50%, 0);
+
   &:hover {
     transform: translate3d(0, -49%, 0);
     [class ^= md-icon],
@@ -179,6 +183,25 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
   }
 }
 
+.md-button.iconButton.md-fab.md-fab--bottom {
+  align-self: flex-end;
+  // this is to positioned the button on the container's edge
+  transform: translate3d(-50%, -50%, 0) !important; // at this point important is not worst than long selector
+  &:hover {
+    transform: translate3d(-50%, -49%, 0) !important;
+  }
+}
+
+.md-button.iconButton.md-fab.md-fab--bottom-inside {
+  transform: translate3d(0, (($button-fab-height + $mg) * -1), 0) !important; // at this point important is not worst than long selector
+  // to prevent empty space at bottom of container
+  position: absolute;
+  right: 0;
+  &:hover {
+    transform: translate3d(0, (($button-fab-height + $mg - 1) * -1) 0) !important; // at this point important is not worst than long selector
+  }
+}
+
 .sg-button-navicon {
   //top: ($mg * -1);
   //margin-left: ($mg * -1);

UI/WebServerResources/scss/views/_view.scss

@@ -61,12 +61,14 @@ $detailView-width: grid-step(8) !global;
 
   @include from(lg) {
     @include flex-col(lg, 8, 2, 1);
-    margin: 0 auto $mg auto;
+    margin: 0 $mg;
+
   }
 
   @include at(md) {
     @include flex-col(md, 9);
     margin: 0;
+
   }
 
   @include from(md) {
@@ -155,3 +157,10 @@ $detailView-width: grid-step(8) !global;
     }
   }
 }
+
+@include from(md) {
+  [ui-view="message"] > md-content {
+    // to create a false padding for the fab button
+    border-bottom: ($button-fab-height + ($mg * 2)) solid transparent; // buton height + mg top and bottom
+  }
+}