From 4a78d228c37ed2de6b408f456f03ff04c00da040 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Mon, 16 Jun 2014 12:18:31 +0200 Subject: [PATCH 01/16] Refactored icons in mail list view and bugfix in search input --- src/sass/_variables.scss | 2 +- src/sass/components/_input.scss | 8 +++-- src/sass/components/_mail-list.scss | 45 +++++++++++++++++++---------- src/sass/views/_mail-list.scss | 13 +++++++-- src/tpl/mail-list.html | 9 ++++-- 5 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss index 015e21a..357b890 100755 --- a/src/sass/_variables.scss +++ b/src/sass/_variables.scss @@ -20,7 +20,7 @@ $color-white: #fff; $color-grey: #666; $color-grey-input: #949494; $color-grey-dark: #333; -$color-grey-medium: #aaa; +$color-grey-medium: #999; $color-grey-light: #ccc; $color-grey-lighter: #ddd; $color-grey-lighterer: #f0eff5; diff --git a/src/sass/components/_input.scss b/src/sass/components/_input.scss index 7454f94..63acb8b 100644 --- a/src/sass/components/_input.scss +++ b/src/sass/components/_input.scss @@ -20,7 +20,11 @@ font-size: em(13); } -.input-search { - width: 93%; +// need to be more specific than normalize.css +.input-search, +input[type="search"].input-search { + box-sizing: border-box; + width: 100%; + border-radius: 0; -webkit-appearance: searchfield; } \ No newline at end of file diff --git a/src/sass/components/_mail-list.scss b/src/sass/components/_mail-list.scss index 7373bc6..c6df7b6 100755 --- a/src/sass/components/_mail-list.scss +++ b/src/sass/components/_mail-list.scss @@ -6,11 +6,7 @@ margin: 0; padding: 0; - &:last-child { - margin-bottom: 0; - } - - li { + & > li { position: relative; display: block; margin-bottom: 7px; @@ -19,6 +15,10 @@ cursor: pointer; transition: background-color $time-li-fade, color $time-li-fade; + &:last-child { + margin-bottom: 0; + } + &.ng-animate { transition: none; } @@ -67,16 +67,31 @@ text-align: right; line-height: 1.5em * ($font-size-small / $font-size-smaller); } - .flag { - width: 1em; - height: 1em; - border-radius: 50%; - box-shadow: inset 1px 1px 1px $color-grey-light; - position: absolute; - top: 0; - left: 0; - margin-top: 0.2em; - margin-left: -1.3em; + } + .flags { + position: absolute; + top: 0; + left: 0; + list-style: none; + margin: 0.8em 0 0; + padding: 0; + color: $color-grey-medium; + width: 30px; + line-height: 1.6em; + & > li { + font-size: 90%; + text-align: center; + + &:nth-child(1) { + &:after { + display: inline-block; + content: ''; + width: 1em; + height: 1em; + border-radius: 50%; + background-color: $color-blue; + } + } } } diff --git a/src/sass/views/_mail-list.scss b/src/sass/views/_mail-list.scss index 77b1ad4..a8877c3 100755 --- a/src/sass/views/_mail-list.scss +++ b/src/sass/views/_mail-list.scss @@ -25,7 +25,14 @@ font-weight: normal; vertical-align: middle; } + button { + float: right; + margin-top: -0.05em; // for perfect vertical alignment with headline + @include respond-to(desktop) { + display: none; + } + } } .search { @@ -38,10 +45,10 @@ height: 100%; padding: 0 $padding-horizontal; overflow-y: hidden; - } - ul { - padding-bottom: 126px; + .mail-list { + padding-bottom: 126px; + } } footer { diff --git a/src/tpl/mail-list.html b/src/tpl/mail-list.html index e32eccd..0047699 100644 --- a/src/tpl/mail-list.html +++ b/src/tpl/mail-list.html @@ -2,6 +2,7 @@

{{state.nav.currentFolder.type}}

+
@@ -10,15 +11,19 @@
    -
  • +

  • {{email.from[0].name || email.from[0].address}}

    -

    {{email.subject || 'No subject'}}

    {{email.body}}

    +
      +
    • +
    • +
    • +
From 181902d3a7c6c5031a1edfb9139e2520b26a9fb3 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Mon, 16 Jun 2014 13:59:40 +0200 Subject: [PATCH 02/16] 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 From 234c0ca485edf9c8dc1c58552044cc54312a56df Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Mon, 16 Jun 2014 14:20:01 +0200 Subject: [PATCH 03/16] optimized contact popup for mobile --- src/sass/views/_contacts.scss | 31 +++++++++++++++++++++++++------ src/tpl/contacts.html | 10 ++++++---- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/sass/views/_contacts.scss b/src/sass/views/_contacts.scss index 98c8d05..87c2315 100644 --- a/src/sass/views/_contacts.scss +++ b/src/sass/views/_contacts.scss @@ -1,16 +1,35 @@ .view-contacts { .key-controls { + display: flex; + flex-direction: row; margin: 30px; - input[type=text] { - line-height: 23px; + .key-controls-search { + flex-grow: 1; + input[type=text] { + line-height: 23px; + width: 100%; + } } + .key-controls-import { + display: block; + width: 8em; + flex-shrink: 0; + margin-left: 0.5em; + input[type=file] { + visibility: hidden; + width: 0; + height: 0; + position: absolute; + } + .btn { + width: 100%; + } - input[type=file] { - visibility: hidden; - width: 0; - height: 0; + @include respond-to(desktop) { + width: 10em; + } } } diff --git a/src/tpl/contacts.html b/src/tpl/contacts.html index aaf7781..4d0eb5c 100644 --- a/src/tpl/contacts.html +++ b/src/tpl/contacts.html @@ -8,11 +8,13 @@
- - +
+ +
+
- - + +
From 2a1cb893d0f07d1a86c168a5e2bf1d60122fa014 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Mon, 16 Jun 2014 15:04:06 +0200 Subject: [PATCH 04/16] optimized login views for mobile --- src/js/controller/login.js | 2 +- src/sass/views/_login.scss | 49 ++++++++++++++++++++++++++++------- src/tpl/login-existing.html | 4 +-- src/tpl/login-initial.html | 4 +-- src/tpl/login-new-device.html | 4 +-- src/tpl/login.html | 8 +++--- 6 files changed, 49 insertions(+), 22 deletions(-) diff --git a/src/js/controller/login.js b/src/js/controller/login.js index ac96b47..b870a65 100644 --- a/src/js/controller/login.js +++ b/src/js/controller/login.js @@ -29,7 +29,7 @@ define(function(require) { // check if account needs to be selected if (!emailAddress) { - goTo('/add-account'); + //goTo('/add-account'); return; } diff --git a/src/sass/views/_login.scss b/src/sass/views/_login.scss index 7351377..0c2ac48 100644 --- a/src/sass/views/_login.scss +++ b/src/sass/views/_login.scss @@ -4,26 +4,34 @@ height: 100%; background-color: $color-grey-lightest; color: $color-grey-dark; + text-align: center; + padding: 20px; - .logo-wrapper { + .logo { max-width: 700px; - height: 58px; - margin: 145px auto 75px auto; - - .logo { - background-image:url('../img/whiteout_logo.svg'); - background-repeat: no-repeat; - background-size: 320px 58px; + margin: 135px auto 75px; + img { + display: block; + max-width: 100%; width: 320px; - height: 58px; + margin-left: auto; + margin-right: auto; + + @include respond-to(desktop) { + margin-left: 0; + } } } + .spinner { + font-size: 150%; + } + .content { max-width: 400px; margin-left: auto; margin-right: auto; - + text-align: left; b, a { color: $color-blue; } @@ -39,8 +47,14 @@ input { margin-right: 10px; } + input[type="text"], + input[type="password"] { + margin-bottom: 10px; + width: 100%; + } input[type=file] { + width: 100%; background-color: white; border-width: 1px; border-style: solid; @@ -76,6 +90,21 @@ float: left; } } + + .popover-info { + display: none; // hide on mobile + } + + @include respond-to(desktop) { + input[type="text"], + input[type="password"], + input[type="file"] { + width: auto; + } + .popover-info { + display: inline-block; + } + } } } diff --git a/src/tpl/login-existing.html b/src/tpl/login-existing.html index 7210a02..9860d0e 100644 --- a/src/tpl/login-existing.html +++ b/src/tpl/login-existing.html @@ -1,6 +1,6 @@