From c1d9feb391a181ae023a985d73d75e9fca1cfef1 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Fri, 27 Jun 2014 13:05:05 +0200
Subject: [PATCH] Make touchable areas of buttons larger

---
 src/sass/components/_buttons.scss  |  6 ++---
 src/sass/components/_lightbox.scss |  2 +-
 src/sass/views/_mail-list.scss     | 37 +++++++++++++++++++++++-------
 src/sass/views/_read.scss          |  1 -
 src/tpl/mail-list.html             |  5 +++-
 5 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/sass/components/_buttons.scss b/src/sass/components/_buttons.scss
index bef74d8..6ca7e68 100755
--- a/src/sass/components/_buttons.scss
+++ b/src/sass/components/_buttons.scss
@@ -104,8 +104,8 @@
     font-size: $font-size-base;
     font-family: $font-family-icons;
     line-height: 1;
-    height: 2em;
-    width: 2em;
+    height: 2.5em;
+    width: 2.5em;
     text-align: center;
     -webkit-font-smoothing: antialiased;
     @include respond-to(desktop) {
@@ -127,7 +127,7 @@
     &.active {
         outline: 0;
         top: 2px;
-        left: 2px;
+        right: -2px;
     }
 
     &:after {
diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss
index 3307c1a..33d8ec8 100755
--- a/src/sass/components/_lightbox.scss
+++ b/src/sass/components/_lightbox.scss
@@ -39,7 +39,7 @@
                 display: block;
                 border: none;
                 background: none;
-                padding: 0;
+                padding: 0 0 0 40px;
                 margin: 0;
                 color: $color-grey-dark;
                 outline: none;
diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss
index e7eb330..e73f810 100755
--- a/src/sass/views/_mail-list.scss
+++ b/src/sass/views/_mail-list.scss
@@ -12,6 +12,10 @@
         flex-shrink: 0;
         cursor: pointer;
         padding: $padding-vertical $padding-horizontal;
+        @include respond-to(mobile) {
+            padding: ($padding-vertical + 5px) $padding-horizontal;
+        }
+
         &:before {
             color: $color-blue;
             font-size: $font-size-bigger;
@@ -27,20 +31,37 @@
             vertical-align: middle;
             text-shadow: 0px 1px 1px $color-grey-lighter;
         }
-        button {
-            float: right;
-            margin-top: -0.05em; // for perfect vertical alignment with headline
-
-            @include respond-to(desktop) {
-                display: none;
-            }
-        }
 
         &.active {
             background-color: darken($color-white, 10%);
         }
     }
 
+    .compose {
+        position: absolute;
+        top: $padding-vertical;
+        right: $padding-horizontal;
+        margin-top: -0.05em; // for perfect vertical alignment with headline
+        padding-left: 40px;
+
+        &.active {
+            top: $padding-vertical + 2px;
+            right: $padding-horizontal - 2px;
+        }
+
+        @include respond-to(desktop) {
+            display: none;
+        }
+
+        button {
+            &:active,
+            &.active {
+                top: 0;
+                right: 0;
+            }
+        }
+    }
+
     .search {
         flex-shrink: 0;
         padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;
diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss
index cad1e4a..5ee37f2 100644
--- a/src/sass/views/_read.scss
+++ b/src/sass/views/_read.scss
@@ -50,7 +50,6 @@
 
         .controls {
             float: right;
-            margin: 0 15px 10px;
 
             button {
                 margin-left: 7px;
diff --git a/src/tpl/mail-list.html b/src/tpl/mail-list.html
index c5bb1b2..a313de5 100644
--- a/src/tpl/mail-list.html
+++ b/src/tpl/mail-list.html
@@ -2,9 +2,12 @@
   <!-- nav controll and section headline -->
   <header data-icon="&#xe004;" wo-touch="state.nav.toggle(true); $event.stopPropagation()">
     <h2>{{state.nav.currentFolder.type}}</h2>
-    <button wo-touch="state.writer.write(); $event.stopPropagation()" class="btn-icon" title="New mail"></button>
   </header>
 
+  <div class="compose" wo-touch="state.writer.write(); $event.stopPropagation()">
+    <button class="btn-icon" title="New mail"></button>
+  </div>
+
   <div class="search" data-icon="&#xe017;">
     <input class="input-text" type="text" ng-model="searchText" placeholder="Filter..." focus-me="state.mailList.searching">
   </div>