From 181902d3a7c6c5031a1edfb9139e2520b26a9fb3 Mon Sep 17 00:00:00 2001
From: Mario Volke <info@mariovolke.com>
Date: Mon, 16 Jun 2014 13:59:40 +0200
Subject: [PATCH] mail list redesign for mobile, flexbox for mail list layout

---
 src/sass/components/_mail-list.scss | 86 +++++++++--------------------
 src/sass/views/_mail-list.scss      | 46 ++++++++++-----
 2 files changed, 60 insertions(+), 72 deletions(-)

diff --git a/src/sass/components/_mail-list.scss b/src/sass/components/_mail-list.scss
index c6df7b6..a086e7a 100755
--- a/src/sass/components/_mail-list.scss
+++ b/src/sass/components/_mail-list.scss
@@ -15,8 +15,17 @@
         cursor: pointer;
         transition: background-color $time-li-fade, color $time-li-fade;
 
+        border-top: 5px solid $color-white;
+        box-shadow: 0 -1px 0 $color-grey-light;
+        margin-top: 5px;
+
+        &:first-child {
+            box-shadow: none;
+            border-top: 0;
+            margin-top: 0;
+        }
         &:last-child {
-            margin-bottom: 0;
+            margin-bottom: 5px;
         }
 
         &.ng-animate {
@@ -105,46 +114,6 @@
             background-color: mix($color-white, $color-blue, 90%);
         }
 
-        &.mail-list-attachment {
-            .head:after {
-                content: "\e003";
-                color: $color-grey-medium;
-                font-family: $font-family-icons;
-                position: absolute;
-                right: 0;
-                top: 0;
-                margin-top: -0.3em;
-                margin-right: -1 * $padding-horizontal;
-                text-align: center;
-                line-height: 1.8em;
-                width: $padding-horizontal;
-            }
-        }
-
-        &.mail-list-unread {
-            .flag {
-                background-color: $color-blue;
-                box-shadow: inset 0.5px 1px 1px $color-grey-medium;
-            }
-        }
-
-        &.mail-list-replied {
-            .flag {
-                color: $color-grey-medium;
-                font-family: $font-family-icons;
-                position: absolute;
-                left: 0;
-                top: 0;
-                margin-left: -1 * $padding-horizontal;
-                text-align: center;
-                line-height: 1.8em / 0.8em;
-                box-shadow: none;
-                width: $padding-horizontal;
-                height: auto;
-                font-size: 0.8em;
-            }
-        }
-
         &.mail-list-active,
         &.mail-list-active:hover {
             background-color: $color-blue;
@@ -167,27 +136,26 @@
             .body {
                 color: $color-white;
             }
-            .flag {
-                box-shadow: inset 1px 1px 1px $color-grey-light;
-                background-color: $color-white;
-            }
-            &.mail-list-attachment {
-                .head:after {
+            .flags {
+                & > li {
                     color: $color-white;
+
+                    &:nth-child(1) {
+                        &:after {
+                            background-color: $color-white;
+                        }
+                    }
                 }
             }
-            &.mail-list-unread {
-                .flag {
-                    box-shadow: inset 1px 1px 1px $color-grey-light;
-                    background-color: $color-white;
-                }
-            }
-            &.mail-list-replied {
-                .flag {
-                    color: $color-white;
-                    background: transparent;
-                    box-shadow: none;
-                }
+        }
+
+        @include respond-to(desktop) {
+            box-shadow: none;
+            border-top: 0;
+            margin-top: 0;
+
+            &:last-child {
+                margin-bottom: 0;
             }
         }
     }
diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss
index a8877c3..88a7253 100755
--- a/src/sass/views/_mail-list.scss
+++ b/src/sass/views/_mail-list.scss
@@ -1,16 +1,16 @@
 .view-mail-list {
     $padding-horizontal: 15px;
     $padding-vertical: 10px;
-    position: relative;
+
+    display: flex;
+    flex-direction: column;
     height: 100%;
     width: 100%;
-    background: $color-grey-lighterer;
-    background-image: linear-gradient(to right ,$color-grey-lighterer 98%, darken($color-grey-lighterer, 1%) 100%);
 
     header {
+        flex-shrink: 0;
         cursor: pointer;
         padding: $padding-vertical $padding-horizontal;
-        text-shadow: 0px 1px 1px $color-grey-lighter;
         &:before {
             color: $color-blue;
             font-size: $font-size-bigger;
@@ -24,6 +24,7 @@
             font-size: $font-size-bigger;
             font-weight: normal;
             vertical-align: middle;
+            text-shadow: 0px 1px 1px $color-grey-lighter;
         }
         button {
             float: right;
@@ -36,34 +37,41 @@
     }
 
     .search {
+        flex-shrink: 0;
         padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;
         margin: 0 auto;
         width: 100%;
     }
 
     .list-wrapper {
-        height: 100%;
+        flex-grow: 1;
         padding: 0 $padding-horizontal;
         overflow-y: hidden;
-
-        .mail-list {
-            padding-bottom: 126px;
-        }
     }
 
     footer {
+        flex-shrink: 0;
+        position: relative;
         height: 28px;
         cursor: pointer;
-        position: absolute;
-        bottom: 0px;
-        left: 0px;
         padding: 0 $nav-padding;
-        background: darken($color-grey-lighterer, 1%);
+        background: $color-white;
         width: 100%;
         font-size: $font-size-smaller;
         color: $color-grey-dark;
         line-height: em(28,12);
 
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0;
+            left: $nav-padding;
+            right: $nav-padding;
+            height: 0;
+            border-top: 1px solid $color-grey-medium;
+        }
+
         .offline {
             &[data-icon]:before {
                 padding-right: 0.5em;
@@ -80,4 +88,16 @@
             }
         }
     }
+
+    @include respond-to(desktop) {
+        background: $color-grey-lighterer;
+        background-image: linear-gradient(to right ,$color-grey-lighterer 98%, darken($color-grey-lighterer, 1%) 100%);
+
+        footer {
+            background: darken($color-grey-lighterer, 1%);
+            &:before {
+                display: none;
+            }
+        }
+    }
 }
\ No newline at end of file