From 915db579c45b3c53da302816f2a2a890cb6cd8e3 Mon Sep 17 00:00:00 2001 From: Mario Volke Date: Wed, 5 Nov 2014 16:03:48 +0100 Subject: [PATCH] Refactoring login screens and lightboxes, added general form styling --- src/index.html | 5 +- src/js/app.js | 14 +- src/sass/all.scss | 15 +- src/sass/base/_config.scss | 3 + src/sass/base/_scaffolding.scss | 4 - src/sass/blocks/basics/_buttons.scss | 10 ++ src/sass/blocks/basics/_form.scss | 175 ++++++++++++++++++++- src/sass/blocks/basics/_spinner.scss | 9 ++ src/sass/blocks/basics/_typo.scss | 30 ++++ src/sass/blocks/layout/_lightbox.scss | 149 ++++++++++++++++++ src/sass/blocks/layout/_page.scss | 84 ++++++++++ src/sass/blocks/views/_account.scss | 20 +++ src/sass/blocks/views/_write.scss | 3 +- src/sass/components/_dialog.scss | 16 -- src/sass/components/_lightbox.scss | 140 ----------------- src/sass/mixins/_responsive.scss | 4 +- src/sass/utilities/_others.scss | 4 + src/sass/views/_about.scss | 15 -- src/sass/views/_account.scss | 22 --- src/sass/views/_add-account.scss | 193 ----------------------- src/sass/views/_dialog.scss | 23 --- src/sass/views/_login.scss | 208 ------------------------- src/sass/views/_privatekey-upload.scss | 25 --- src/sass/views/_set-passphrase.scss | 38 ----- src/tpl/about.html | 30 ++-- src/tpl/account.html | 26 ++-- src/tpl/add-account.html | 205 +++--------------------- src/tpl/contacts.html | 14 +- src/tpl/create-account.html | 46 ++++++ src/tpl/desktop.html | 30 ++-- src/tpl/dialog.html | 27 ++-- src/tpl/login-existing.html | 48 +++--- src/tpl/login-initial.html | 88 +++++++---- src/tpl/login-new-device.html | 64 +++++--- src/tpl/login-privatekey-download.html | 94 ++++++----- src/tpl/login-set-credentials.html | 182 ++++++++++++++-------- src/tpl/login.html | 22 +-- src/tpl/page-footer.html | 12 ++ src/tpl/privatekey-upload.html | 76 +++++---- src/tpl/set-passphrase.html | 63 ++++---- src/tpl/validate-phone.html | 24 +++ src/tpl/write.html | 12 +- 42 files changed, 1064 insertions(+), 1208 deletions(-) create mode 100644 src/sass/blocks/basics/_typo.scss create mode 100755 src/sass/blocks/layout/_lightbox.scss create mode 100644 src/sass/blocks/layout/_page.scss create mode 100644 src/sass/blocks/views/_account.scss delete mode 100644 src/sass/components/_dialog.scss delete mode 100755 src/sass/components/_lightbox.scss delete mode 100644 src/sass/views/_about.scss delete mode 100644 src/sass/views/_account.scss delete mode 100644 src/sass/views/_add-account.scss delete mode 100644 src/sass/views/_dialog.scss delete mode 100644 src/sass/views/_login.scss delete mode 100644 src/sass/views/_privatekey-upload.scss delete mode 100644 src/sass/views/_set-passphrase.scss create mode 100644 src/tpl/create-account.html create mode 100644 src/tpl/page-footer.html create mode 100644 src/tpl/validate-phone.html diff --git a/src/index.html b/src/index.html index 4cea422..8f12cd6 100644 --- a/src/index.html +++ b/src/index.html @@ -41,9 +41,8 @@
-
-
-
+
diff --git a/src/js/app.js b/src/js/app.js index 46fdd1f..9c73482 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -54,13 +54,21 @@ var app = angular.module('mail', [ // set router paths app.config(function($routeProvider) { + $routeProvider.when('/login', { + templateUrl: 'tpl/login.html', + controller: LoginCtrl + }); $routeProvider.when('/add-account', { templateUrl: 'tpl/add-account.html', controller: AddAccountCtrl }); - $routeProvider.when('/login', { - templateUrl: 'tpl/login.html', - controller: LoginCtrl + $routeProvider.when('/create-account', { + templateUrl: 'tpl/create-account.html'/*, + controller: AddAccountCtrl*/ + }); + $routeProvider.when('/validate-phone', { + templateUrl: 'tpl/validate-phone.html'/*, + controller: AddAccountCtrl*/ }); $routeProvider.when('/login-set-credentials', { templateUrl: 'tpl/login-set-credentials.html', diff --git a/src/sass/all.scss b/src/sass/all.scss index eb7660a..6f15034 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -19,19 +19,8 @@ @import "utilities/responsive"; @import "utilities/others"; -// Components (TODO: refactor to BEM) -@import "components/lightbox"; -@import "components/dialog"; - // Views (TODO: refactor to BEM) -@import "views/add-account"; -@import "views/account"; -@import "views/privatekey-upload"; -@import "views/set-passphrase"; @import "views/contacts"; -@import "views/about"; -@import "views/dialog"; -@import "views/login"; // Blocks // (BEM-like Naming, see http://cssguidelin.es/#bem-like-naming) @@ -46,10 +35,14 @@ @import "blocks/basics/tooltip"; @import "blocks/basics/dropdown"; @import "blocks/basics/toolbar"; +@import "blocks/basics/typo"; @import "blocks/layout/app"; +@import "blocks/layout/page"; @import "blocks/layout/nav"; @import "blocks/layout/action-bar"; @import "blocks/layout/mail-list-wrapper"; +@import "blocks/layout/lightbox"; @import "blocks/views/mail-list"; @import "blocks/views/read"; @import "blocks/views/write"; +@import "blocks/views/account"; diff --git a/src/sass/base/_config.scss b/src/sass/base/_config.scss index eeb8d8f..c557ad4 100755 --- a/src/sass/base/_config.scss +++ b/src/sass/base/_config.scss @@ -5,6 +5,7 @@ $font-size-small: 14px; $font-size-smaller: 12px; $font-size-big: 18px; $font-size-bigger: 22px; +$font-size-huge: 28px; $font-family-base: "PT Sans", Arial, sans-serif; @@ -43,6 +44,8 @@ $color-touch-active: rgba(0, 0, 0, 0.1); // Breakpoints // ------------------------------------------- +$screen-xs-max: 419px; +$screen-sm-min: 420px; $screen-sm-max: 699px; $screen-md-min: 700px; $screen-md-max: 1099px; diff --git a/src/sass/base/_scaffolding.scss b/src/sass/base/_scaffolding.scss index c502809..dc05ac7 100755 --- a/src/sass/base/_scaffolding.scss +++ b/src/sass/base/_scaffolding.scss @@ -41,10 +41,6 @@ textarea { background-image: none; } -fieldset { - border: 1px solid $color-grey-lighter; -} - // ngView .main-app-view { height: 100%; diff --git a/src/sass/blocks/basics/_buttons.scss b/src/sass/blocks/basics/_buttons.scss index d479968..2e9c105 100755 --- a/src/sass/blocks/basics/_buttons.scss +++ b/src/sass/blocks/basics/_buttons.scss @@ -44,6 +44,11 @@ transform: translateX(2px) translateY(2px); } + // prevent triggering ngAnimate animations + &.ng-animate { + transition: none; + } + &[disabled], &[aria-disabled="true"] { cursor: not-allowed; @@ -61,6 +66,11 @@ } } + // this modifier can be combined with other modifiers, too + &--big { + font-size: $font-size-bigger; + } + // Invalid button state &--invalid { background-color: $color-error; diff --git a/src/sass/blocks/basics/_form.scss b/src/sass/blocks/basics/_form.scss index 86d90f8..5ce9b5a 100644 --- a/src/sass/blocks/basics/_form.scss +++ b/src/sass/blocks/basics/_form.scss @@ -1,5 +1,85 @@ +// Form layout + +.form { + margin: 20px auto 40px; + // same as max page with + // form should never be wider because it just doesn't look good + max-width: 400px; + + &__error-message { + margin-bottom: 10px; + color: $color-error; + } + &__password-strong-message { + margin-bottom: 10px; + color: green; + } + + &__row { + margin-bottom: 10px; + + &--multi { + margin-bottom: 0; + + @include respond-to(sm) { + display: flex; + } + } + } + + &__col { + margin-bottom: 10px; + + @include respond-to(sm) { + flex-grow: 1; + & + .form__col { + margin-left: 10px; + } + + &--2 { + flex-grow: 2; + } + } + } + + .btn { + width: 100%; + } +} + +.form-fieldset { + margin: 0 0 20px; + border: 1px solid $color-border-light; + + legend { + color: $color-blue; + padding: 0 0.5em; + } + + & > :first-child { + margin-top: 0; + } + & > :last-child { + margin-bottom: 0; + } + + &--standalone { + margin: 30px 0 40px; + } + &--error { + border-color: $color-error; + legend { + color: $color-error; + } + } +} + + +// Form elements + .input-text { - background-color: white; + width: 100%; + background-color: $color-bg; border: 1px solid $color-border-light; color: $color-text; font-size: $font-size-base; @@ -18,8 +98,57 @@ &--error { border-color: $color-error; } + + &--big { + font-size: $font-size-bigger; + } } +// Attention: Webkit support only! +.input-select { + position: relative; + + &:after { + position: absolute; + right: 0.5em; + top: 0; + content: '<>'; + color: $color-text; + transform: rotate(90deg); + pointer-events: none; + } + select { + @extend .input-text; + padding-right: 2em; + } +} + +// Attention: Webkit support only! +.input-file { + width: 100%; + background-color: $color-bg; + border: 1px solid $color-border-light; + color: $color-text; + font-size: 1em; + padding: 4px 4px; + outline: none; + + &::-webkit-file-upload-button { + background-color: $color-grey-input; + border: 0; + color: $color-bg; + padding: 4px 10px; + font-family: inherit; + font-size: inherit; + line-height: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + outline: none; + cursor: pointer; + } +} + +// TODO: remove, has been replace by general form class .input-error-message { margin: 5px 0; padding: 0; @@ -31,7 +160,6 @@ position: relative; width: 100%; .input-text { - width: 100%; padding-left: 1.8em; } & > svg { @@ -44,6 +172,22 @@ } } +.input-checkbox { + display: block; + padding-left: 2em; + + .checkbox { + float: left; + margin-top: 0.1em; + margin-left: -2em; + } + + a { + color: $color-main; + text-decoration: underline; + } +} + .checkbox { input[type="checkbox"] { display: none; @@ -77,4 +221,29 @@ border-color: $color-text; } } -} \ No newline at end of file +} + +.input-email-fixed-domain { + display: flex; + & > input { + flex-grow: 1; + margin-right: 10px; + } + & > span { + font-size: $font-size-big; + flex-shrink: 0; + line-height: 38px; // magic number: depends on .input-text height + + @include respond-to(md) { + font-size: $font-size-bigger; + } + } +} + +/* TODO: refactore this block, simply doesn't work on mobile */ +.input-code { + & > input { + display: inline-block; + width: 4em; + } +} diff --git a/src/sass/blocks/basics/_spinner.scss b/src/sass/blocks/basics/_spinner.scss index 97dcc6b..4b1675e 100644 --- a/src/sass/blocks/basics/_spinner.scss +++ b/src/sass/blocks/basics/_spinner.scss @@ -10,6 +10,10 @@ border-bottom: 0.17em solid rgba($color-black, 0.2); border-top: 0.17em solid rgba($color-black, 0.7); border-radius: 100%; + + &--big { + font-size: 150%; + } } @keyframes spinner-rotation { @@ -19,4 +23,9 @@ to { transform: rotate(359deg); } +} + +.spinner-block { + text-align: center; + margin: 50px 0; } \ No newline at end of file diff --git a/src/sass/blocks/basics/_typo.scss b/src/sass/blocks/basics/_typo.scss new file mode 100644 index 0000000..6821405 --- /dev/null +++ b/src/sass/blocks/basics/_typo.scss @@ -0,0 +1,30 @@ +.typo-title { + font-size: $font-size-bigger; + color: $color-main; + margin: 0 0 10px; + + @include respond-to(md) { + font-size: $font-size-huge; + } +} + +.typo-paragraph { + margin: 0 0 10px; + + strong { + font-weight: normal; + color: $color-main; + } + em { + font-style: italic; + } + a { + color: $color-main; + text-decoration: underline; + } +} + +.typo-code { + font-family: monospace; + font-weight: bold; +} \ No newline at end of file diff --git a/src/sass/blocks/layout/_lightbox.scss b/src/sass/blocks/layout/_lightbox.scss new file mode 100755 index 0000000..c66ce97 --- /dev/null +++ b/src/sass/blocks/layout/_lightbox.scss @@ -0,0 +1,149 @@ +.lightbox { + display: none; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1000; + background: $color-grey-dark-alpha; + overflow: auto; + text-align: center; + + @include respond-to(md) { + @include scut-vcenter-ib(".lightbox__body"); + } + + &__body { + position: relative; + width: 100%; + min-height: 100%; + padding: 15px; + background: $color-bg; + color: $color-text; + backface-visibility: hidden; + display: flex; + flex-direction: column; + text-align: left; + margin: 0 auto; + + @include respond-to(md) { + width: 90%; + max-width: 762px; + min-height: 0; + backface-visibility: hidden; + } + } + + &__header { + flex-shrink: 0; + text-align: center; + position: relative; + margin-bottom: 20px; + h2 { + margin: 0; + padding: 0; + font-size: $font-size-bigger; + font-weight: normal; + line-height: 1em; + color: $color-grey-dark; + } + } + &__close { + position: absolute; + top: 0px; + right: 0px; + display: block; + border: none; + background: none; + padding: 0 0 0 40px; + margin: 0; + color: $color-grey-dark; + outline: none; + + svg { + height: 1em; + width: 1em; + fill: $color-grey-dark; + } + } + + &__content { + flex-grow: 1; + overflow: hidden; + } + + &__controls { + text-align: right; + margin-top: 15px; + flex-shrink: 0; + + .btn { + min-width: 6em; + margin-top: 5px; + } + } + + /* Modifiers */ + + &--dialog { + @include scut-vcenter-ib(".lightbox__body"); + + .lightbox__body { + min-height: 0; + max-width: 450px; + } + .lightbox__content { + padding: 0 15px; + text-align: center; + } + .lightbox__controls { + text-align: center; + margin-top: 25px; + } + } + + &--show { + display: block; + } + + /* ngAnimate */ + &--show-add { + display: block; + opacity: 0; + @include respond-to(md) { + transition: opacity 0.3s; + } + .lightbox__body { + transform: scale(0.7); + @include respond-to(md) { + transition: transform 0.3s; + } + } + } + &--show-add-active { + opacity: 1; + .lightbox__body { + transform: scale(1); + } + } + &--show-remove { + display: block; + opacity: 1; + @include respond-to(md) { + transition: opacity 0.3s; + } + .lightbox__body { + transform: scale(1); + @include respond-to(md) { + transition: transform 0.3s; + } + } + } + &--show-remove-active { + opacity: 0; + .lightbox__body { + transform: scale(0.7); + } + } +} \ No newline at end of file diff --git a/src/sass/blocks/layout/_page.scss b/src/sass/blocks/layout/_page.scss new file mode 100644 index 0000000..92d99f2 --- /dev/null +++ b/src/sass/blocks/layout/_page.scss @@ -0,0 +1,84 @@ +// Simple page layout + +.page { + height: 100%; + overflow-y: auto; + + // disable text selection + user-select: none; + + &__canvas { + min-height: 100%; + display: flex; + flex-direction: column; + padding: 10px 20px; + background: $color-grey-lighterer; + color: $color-text; + } + + &__header { + margin: 45px 0; + img { + display: block; + width: 100%; + max-width: 400px; + margin: 0 auto; + } + + @include respond-to(md) { + margin: 115px 0 75px; + } + } + + &__main { + flex-grow: 1; + margin: 0 auto 20px; + max-width: 400px; + width: 100%; + } + + &__footer { + width: 100%; + text-align: center; + font-size: $font-size-small; + color: $color-text-light; + line-height: 1.5; + + nav { + ul { + list-style: none; + margin: 0; + padding: 0; + } + li { + display: inline; + white-space: nowrap; + &:after { + display: inline-block; + content: ' | '; + margin: 0 0.5em; + } + &:last-child:after { + display: none; + } + } + a { + color: inherit; + text-decoration: none; + &:hover, + &:focus { + text-decoration: underline; + } + } + } + + @include respond-to(md) { + text-align: left; + nav { + float: right; + } + } + } +} + + diff --git a/src/sass/blocks/views/_account.scss b/src/sass/blocks/views/_account.scss new file mode 100644 index 0000000..77988a3 --- /dev/null +++ b/src/sass/blocks/views/_account.scss @@ -0,0 +1,20 @@ +.account { + // TODO: remove table layout -> use
+ table { + margin: 50px auto 60px; + td { + padding-top: 15px; + text-align: left; + &:first-child { + text-align: right; + padding-right: 15px; + font-weight: bold; + } + + a { + color: $color-main; + text-decoration: underline; + } + } + } +} \ No newline at end of file diff --git a/src/sass/blocks/views/_write.scss b/src/sass/blocks/views/_write.scss index 7da1ac2..0fb7d60 100644 --- a/src/sass/blocks/views/_write.scss +++ b/src/sass/blocks/views/_write.scss @@ -4,8 +4,7 @@ flex-direction: column; @include respond-to(md) { - // this number depends on max-height set on .lightbox - height: 590px; // magic number + height: 590px; // magic number: chosen to look good } // Header components diff --git a/src/sass/components/_dialog.scss b/src/sass/components/_dialog.scss deleted file mode 100644 index 5961505..0000000 --- a/src/sass/components/_dialog.scss +++ /dev/null @@ -1,16 +0,0 @@ -.dialog { - padding: 0px; - color: $color-grey-dark; - - a { - color: $color-blue; - } - - .control { - float: right; - - button { - border: 0!important; - } - } -} \ No newline at end of file diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss deleted file mode 100755 index d954690..0000000 --- a/src/sass/components/_lightbox.scss +++ /dev/null @@ -1,140 +0,0 @@ -.lightbox { - position: relative; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - z-index: 2000; - - @include respond-to(md) { - margin: 0 auto; - width: $lightbox-width; - max-width: $lightbox-max-width; - height: auto; - text-align: left; - backface-visibility: hidden; - } - @include respond-to(lg) { - max-width: $lightbox-max-width + 100px; - } - - .lightbox-body { - position: relative; - height: 100%; - padding: $lightbox-padding; - background: #fff; - backface-visibility: hidden; - display: flex; - flex-direction: column; - - @include respond-to(md) { - max-height: $lightbox-min-height; - } - @include respond-to(lg) { - max-height: $lightbox-min-height + 50px; - } - - & > header { - flex-shrink: 0; - text-align: center; - position: relative; - margin-bottom: 15px; - button.close { - position: absolute; - top: 0px; - right: 0px; - display: block; - border: none; - background: none; - padding: 0 0 0 40px; - margin: 0; - color: $color-grey-dark; - outline: none; - - svg { - height: 1em; - width: 1em; - fill: $color-grey-dark; - } - - &.active { - top: 2px; - right: -2px; - } - } - h2 { - margin: 0; - padding: 0; - font-size: $font-size-bigger; - font-weight: normal; - line-height: 1em; - color: $color-grey-dark; - } - } - & > .content { - flex-grow: 1; - overflow: hidden; - } - } -} - -.lightbox-overlay { - position: absolute; - width: 100%; - height: 100%; - display: none; - top: 0; - left: 0; - z-index: 1000; - background: $color-grey-dark-alpha; - overflow: auto; - - @include respond-to(md) { - @include scut-vcenter-ib(".lightbox"); - text-align: center; - } - - &.show { - display: block; - } - - /* ngAnimate */ - &.show-add { - display: block; - opacity: 0; - @include respond-to(md) { - transition: opacity 0.3s; - } - .lightbox-body { - transform: scale(0.7); - @include respond-to(md) { - transition: transform 0.3s; - } - } - } - &.show-add-active { - opacity: 1; - .lightbox-body { - transform: scale(1); - } - } - &.show-remove { - display: block; - opacity: 1; - @include respond-to(md) { - transition: opacity 0.3s; - } - .lightbox-body { - transform: scale(1); - @include respond-to(md) { - transition: transform 0.3s; - } - } - } - &.show-remove-active { - opacity: 0; - .lightbox-body { - transform: scale(0.7); - } - } -} \ No newline at end of file diff --git a/src/sass/mixins/_responsive.scss b/src/sass/mixins/_responsive.scss index 689f098..9e6c0fc 100755 --- a/src/sass/mixins/_responsive.scss +++ b/src/sass/mixins/_responsive.scss @@ -1,7 +1,9 @@ // Actual media queries $mediaqueries: ( - sm-only: "(max-width: #{$screen-sm-max})", + xs-only: "(max-width: #{$screen-xs-max})", + sm: "(min-width: #{$screen-sm-min})", + sm-only: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})", md: "(min-width: #{$screen-md-min})", md-only: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})", lg: "(min-width: #{$screen-lg-min})", diff --git a/src/sass/utilities/_others.scss b/src/sass/utilities/_others.scss index a052a4b..04b08c4 100644 --- a/src/sass/utilities/_others.scss +++ b/src/sass/utilities/_others.scss @@ -1,3 +1,7 @@ .u-waiting-cursor { cursor: wait !important; +} + +.u-text-center { + text-align: center; } \ No newline at end of file diff --git a/src/sass/views/_about.scss b/src/sass/views/_about.scss deleted file mode 100644 index 14855b1..0000000 --- a/src/sass/views/_about.scss +++ /dev/null @@ -1,15 +0,0 @@ -.view-about { - @include respond-to(md) { - max-width: 550px; - } - - .content { - margin: 30px auto; - text-align: center; - - a { - color: $color-blue; - } - } - -} \ No newline at end of file diff --git a/src/sass/views/_account.scss b/src/sass/views/_account.scss deleted file mode 100644 index bd0e2ec..0000000 --- a/src/sass/views/_account.scss +++ /dev/null @@ -1,22 +0,0 @@ -.view-account { - - a { - color: $color-blue; - text-decoration: none; - } - - table { - margin: 50px auto 60px auto; - - td { - padding-top: 15px; - - &:first-child { - text-align: right; - padding-right: 15px; - font-weight: bold; - } - } - } - -} \ No newline at end of file diff --git a/src/sass/views/_add-account.scss b/src/sass/views/_add-account.scss deleted file mode 100644 index 5a7304d..0000000 --- a/src/sass/views/_add-account.scss +++ /dev/null @@ -1,193 +0,0 @@ -.view-add-account { - - .choose { - .choice { - padding: 20px; - - p { - margin-top: 0; - } - } - - hr { - margin: 30px 0; - color: $color-grey-lighter; - } - } - - .create-account { - div.flex { - width: 100%; - margin: 0; - display: flex; - - input[type="text"].wmail { - flex-grow: 1; - } - - .domain { - font-size: $font-size-bigger; - margin: 0; - height: 38px; - line-height: 38px; - flex-shrink: 0; - - @include respond-to(sm-only) { - font-size: $font-size-big; - } - } - - input[type="password"] { - flex: 1; - } - - input[type="password"].right { - flex: 1; - margin-right: 0; - } - } - } - - .providers { - h1 { - padding: 60px 0 50px 0; - text-align: center; - margin: 0; - font-size: 32px; - line-height: 64px; - - @include respond-to(sm-only) { - padding: 30px 0 20px 0; - } - } - - ul { - list-style-type: none; - max-width: 320px; - width: 100%; - margin: 0 auto 30px auto; - padding: 0; - border-width: 1px; - border-style: solid; - border-color: $color-grey-lighter; - - li { - position: relative; - height: 68px; - cursor: pointer; - &:hover, - &:focus { - opacity: 0.6; - } - &:active { - opacity: 1; - top: 1px; - left: 1px; - } - - &:nth-child(odd) { - background-color: white; - } - - &:nth-child(even) { - background-color: $color-grey-lightest; - } - - &.google { - div { - width: 164px; - height: 58px; - margin: 0px auto; - padding: 8px 0; - - img { - width: 164px; - height: 58px; - } - } - } - - &.whiteout { - div { - width: 210px; - margin: 0 auto; - padding: 15px 0; - - img { - width: 100%; - } - } - } - - &.yahoo { - div { - width: 181px; - margin: 0 auto; - - img { - width: 100%; - } - } - } - - &.tonline { - div { - width: 271px; - margin: 0 auto; - - img { - width: 100%; - } - } - } - - &.outlook { - div { - width: 256px; - margin: 0 auto; - padding: 13px 0; - - img { - width: 100%; - } - } - } - - &.gmx { - div { - width: 115px; - margin: 0 auto; - padding: 13px 0; - - img { - width: 115px; - height: 37px; - } - } - } - - &.webde { - div { - width: 137px; - margin: 0 auto; - padding: 17px 0; - - img { - width: 137px; - height: 31px; - } - } - } - - &.other { - h3 { - margin: 0; - line-height: 68px; - font-size: 21px; - text-align: center; - } - } - } - } - } -} \ No newline at end of file diff --git a/src/sass/views/_dialog.scss b/src/sass/views/_dialog.scss deleted file mode 100644 index 212769b..0000000 --- a/src/sass/views/_dialog.scss +++ /dev/null @@ -1,23 +0,0 @@ -.view-dialog { - height: auto; - - @include respond-to(md) { - max-width: 350px; - } - - p { - text-align: center; - max-width: 80%; - margin: 30px auto; - } - - .control { - button { - min-width: 100px; - - &.ng-animate { - transition: none; - } - } - } -} \ No newline at end of file diff --git a/src/sass/views/_login.scss b/src/sass/views/_login.scss deleted file mode 100644 index 04b9f5f..0000000 --- a/src/sass/views/_login.scss +++ /dev/null @@ -1,208 +0,0 @@ -.view-login { - position: relative; - height: 100%; - background-color: $color-grey-lightest; - color: $color-grey-dark; - text-align: center; - padding: 20px; - overflow-y: auto; - - .logo { - max-width: 700px; - margin: 45px auto; - img { - display: block; - max-width: 50%; - width: 320px; - } - - @include respond-to(md) { - margin: 115px auto 75px; - } - } - - .working { - text-align: center; - } - - .spinner { - font-size: 150%; - } - - .content { - max-width: 400px; - margin-left: auto; - margin-right: auto; - text-align: left; - b, a { - color: $color-blue; - } - - button, a.btn { - margin-right: 10px; - margin-bottom: 10px; - width: 100%; - } - - p, label { - line-height: 150%; - } - - div { - margin: 20px 0; - } - - fieldset { - margin: 30px 0 40px; - - legend { - color: $color-blue; - } - - p { - margin: 0; - } - } - - input { - margin-right: 10px; - } - label, - input[type="tel"], - input[type="text"], - input[type="email"], - input[type="number"], - input[type="password"] { - margin-bottom: 10px; - width: 100%; - } - - input.token { - width: auto; - } - - input[type=file] { - width: 100%; - background-color: white; - border-width: 1px; - border-style: solid; - border-color: $color-grey-lighter; - color: $color-grey-input; - font-size: 1em; - padding: 4px 4px; - outline: none; - - &::-webkit-file-upload-button { - background-color: $color-grey-input; - border-width: 0px; - border-style: solid; - color: white; - padding: 4px 10px; - font-family: inherit; - font-size: inherit; - line-height: inherit; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - outline: none; - cursor: pointer; - } - } - } -} - -.view-login-existing { -} - -.view-login-initial { - .content { - form { - .option { - width: 90%; - font-size: $font-size-small; - margin: 0 auto; - } - - .terms { - margin-top: 30px; - margin-bottom: 15px; - } - - .newsletter { - margin-bottom: 40px; - } - } - } -} - -.view-login-privatekey-download { - .content { - - fieldset { - margin-top: 20px; - } - - .code { - max-width: 240px; - margin: 0 auto; - - input { - margin-right: 0; - width: auto; - } - } - } -} - -.view-login-set-credentials { - .content { - b, a { - text-decoration: none; - } - - .connection-error { - margin: 30px 0; - - p { - margin-bottom: 15px; - } - } - - .details { - fieldset { - margin: 0 0 10px 0; - - select { - width: 100%; - } - - div { - width: 100%; - margin: 0; - display: flex; - - input[type="text"] { - flex: 2; - } - - input[type="number"] { - flex: 1; - margin-right: 0; - } - } - - label { - position:relative - } - label:after { - content: '<>'; - color: $color-grey-dark; - transform:rotate(90deg); - right: 8px; - top: -3px; - position:absolute; - pointer-events:none; - } - } - } - } -} \ No newline at end of file diff --git a/src/sass/views/_privatekey-upload.scss b/src/sass/views/_privatekey-upload.scss deleted file mode 100644 index 0530544..0000000 --- a/src/sass/views/_privatekey-upload.scss +++ /dev/null @@ -1,25 +0,0 @@ -.view-privatekey-upload { - - a { - color: $color-blue; - } - - .step { - margin: 20px 0; - - h2 { - font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace; - } - - .working { - text-align: center; - font-size: 30px; - margin: 70px; - } - } - - button.ng-animate { - transition: none; - } - -} \ No newline at end of file diff --git a/src/sass/views/_set-passphrase.scss b/src/sass/views/_set-passphrase.scss deleted file mode 100644 index d7e5f6f..0000000 --- a/src/sass/views/_set-passphrase.scss +++ /dev/null @@ -1,38 +0,0 @@ -.view-set-passphrase { - - p { - margin: 40px auto 0; - width: 90%; - } - - .passphrase-label-ok { - color: green; - } - - .inputs { - margin: 40px 60px 30px; - - div { - margin: 5px 0; - } - } - - table { - margin: 40px auto 60px auto; - - td { - padding-top: 16px; - - &:first-child { - text-align: right; - padding-right: 16px; - font-weight: bold; - } - } - - td.no-padding { - padding-top: 0; - } - } - -} \ No newline at end of file diff --git a/src/tpl/about.html b/src/tpl/about.html index 9843a34..df29278 100644 --- a/src/tpl/about.html +++ b/src/tpl/about.html @@ -1,17 +1,23 @@ -
-
-
-
+
+

+ +

- -

Whiteout Mail

-

Version {{version}}

-

© {{ date | date:'yyyy'}} Whiteout Networks GmbH

-

Imprint · Privacy · Terms · Licenses

- -
-
\ No newline at end of file +

Whiteout Mail

+

Version {{version}}

+

© {{ date | date:'yyyy'}} Whiteout Networks GmbH

+

+ Imprint · + Privacy · + Terms · + Licenses +

+
+ \ No newline at end of file diff --git a/src/tpl/account.html b/src/tpl/account.html index 4b1f8f9..f694621 100644 --- a/src/tpl/account.html +++ b/src/tpl/account.html @@ -1,14 +1,13 @@ -
-
+
+

Account

-
-
- -
-
\ No newline at end of file +
+ + +
+
\ No newline at end of file diff --git a/src/tpl/add-account.html b/src/tpl/add-account.html index 2495051..93d4563 100644 --- a/src/tpl/add-account.html +++ b/src/tpl/add-account.html @@ -1,189 +1,28 @@ -