From e66920ed4e4a35013c487425df431d33caaa1286 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= Date: Sat, 16 Sep 2017 02:32:42 +0200 Subject: [PATCH] Add & update templates + styles --- allauth_ens/scss/_base.scss | 318 ++++++++++++-- allauth_ens/scss/_mixins.scss | 31 +- allauth_ens/scss/_variables.scss | 2 +- allauth_ens/static/allauth_ens/authens.js | 37 +- allauth_ens/static/allauth_ens/screen.css | 391 ++++++++++++++---- allauth_ens/templates/account/base-login.html | 9 - .../templates/account/base-logout.html | 11 - allauth_ens/templates/account/base.html | 22 +- allauth_ens/templates/account/block-form.html | 43 +- .../account/block-messages-base.html | 9 + .../account/block-messages-form-errors.html | 15 + .../templates/account/block-messages.html | 26 +- allauth_ens/templates/account/email.html | 108 +++++ .../templates/account/email_confirm.html | 43 ++ allauth_ens/templates/account/login.html | 22 +- allauth_ens/templates/account/logout.html | 8 +- .../templates/account/password_change.html | 22 + .../templates/account/password_reset.html | 22 + .../account/password_reset_done.html | 17 + .../account/password_reset_from_key_done.html | 17 + .../templates/account/password_set.html | 29 ++ allauth_ens/templates/account/settings.html | 32 -- allauth_ens/templates/account/signup.html | 24 ++ .../templates/account/signup_closed.html | 17 + .../templates/socialaccount/connections.html | 58 +-- .../socialaccount/snippets/provider_list.html | 10 + 26 files changed, 1069 insertions(+), 274 deletions(-) delete mode 100644 allauth_ens/templates/account/base-login.html delete mode 100644 allauth_ens/templates/account/base-logout.html create mode 100644 allauth_ens/templates/account/block-messages-base.html create mode 100644 allauth_ens/templates/account/block-messages-form-errors.html create mode 100644 allauth_ens/templates/account/email.html create mode 100644 allauth_ens/templates/account/email_confirm.html create mode 100644 allauth_ens/templates/account/password_change.html create mode 100644 allauth_ens/templates/account/password_reset.html create mode 100644 allauth_ens/templates/account/password_reset_done.html create mode 100644 allauth_ens/templates/account/password_reset_from_key_done.html create mode 100644 allauth_ens/templates/account/password_set.html delete mode 100644 allauth_ens/templates/account/settings.html create mode 100644 allauth_ens/templates/account/signup.html create mode 100644 allauth_ens/templates/account/signup_closed.html diff --git a/allauth_ens/scss/_base.scss b/allauth_ens/scss/_base.scss index d21065a..e532796 100644 --- a/allauth_ens/scss/_base.scss +++ b/allauth_ens/scss/_base.scss @@ -2,8 +2,8 @@ body { font-family: Roboto, Verdana; font-family: $font-family-base; line-height: 1.4; - background: $gray-lightest; - color: $gray; + background: $body-bg; + color: $body-color; @media (min-width: 576px) { display: flex; @@ -124,7 +124,7 @@ header { display: flex; align-items: stretch; - min-height: 60px; + min-height: 55px; background: $header-bg; color: $white; @@ -132,26 +132,63 @@ header { font-size: 20px; font-weight: bold; - button { - width: 60px; + .history-back { + @include transition; + + width: 55px; cursor: pointer; background: transparent; + color: $white; + font-size: $header-history-icon-size; + @include hover-focus { background: lighten($header-bg, 5%); } - img { - height: $header-history-icon-size; - width: auto; - vertical-align: bottom; + } + + a { + color: $white !important; + + @include hover-focus { + background: lighten($header-bg, 5%); + text-decoration: none; + } + } + + .right { + border-left: 1px solid lighten($header-bg, 15%); + display: flex; + flex-flow: column; + align-items: stretch; + justify-content: space-around; + + font-size: 14px; + + text-align: center; + + & > * { + flex: 0 0 auto; + padding: 0 15px; + line-height: 28px; + } + + & .connect-status { + font-weight: normal; + + .fa { + margin-right: 10px; + } } } h1 { - padding: 15px 35px 15px 15px; - line-height: 30px; + flex: 1 0 auto; + + padding: 15px 35px; + line-height: 25px; } } @@ -173,16 +210,26 @@ header { } .messages-list { - padding: 15px 0; + padding: 10px 0; +} + +@mixin message-lvl($cls-level, $bg-color-base) { + &.#{$cls-level} { + color: darken($bg-color-base, 15%); + } } .message { - & + .message { - margin-top: 10px; - } - &.warning { color: darken($orange, 15%); } - &.error { color: $red; } + padding: 5px; + font-size: 14px; + + color: $gray-dark; + + @include message-lvl('info', $brand-info); + @include message-lvl('success', $brand-success); + @include message-lvl('warning', $brand-warning); + @include message-lvl('error', $brand-danger); } @@ -191,8 +238,8 @@ header { ***********/ section { - p { - margin-bottom: 15px; + & > * + * { + margin-top: 15px; } } @@ -224,11 +271,101 @@ $space-between: 15px; .provider-list { & > li { - height: 40px; - padding: 10px; - & > .heading > * { - float: left; + &:not(:first-child) { + margin-top: 5px; + } + + & > .heading { + @include clearfix; + + height: 45px; + width: 100%; + + background-color: $gray-lighter; + + & > * { + float: left; + height: 100%; + } + + & > .connect, & > .brand-icon { + text-align: center; + } + + & > .connect a { + @include transition; + + display: inline-block; + + background-color: $brand-success; + color: $white; + + height: 100%; + line-height: 100%; + width: 45px; + + padding: 12px; + + font-size: 20px; + text-align: center; + + @include hover-focus { + background-color: darken($brand-success, 5%); + text-decoration: none; + } + } + + & > .brand-icon { + padding: 10px; + width: 45px; + color: $brand-primary; + } + + & > .name { + padding: 10px; + font-weight: bold; + } + } + + & > .connected-list { + + padding: 0 15px; + + & > li { + @include clearfix; + + height: 30px; + + & > * { + float: left; + display: block; + height: 100%; + } + + & > .connected-delete [type=submit] { + background-color: $red; + color: $white; + min-height: 30px; + width: 30px; + + @include hover-focus { + background-color: darken($red, 5%); + } + } + + & > .connected-label { + padding: 7px 15px; + width: calc(100% - 30px); + border-bottom: 1px solid $red; + + font-size: 12px; + + .fa { + margin-right: 5px; + } + } + } } } form { @@ -236,6 +373,80 @@ $space-between: 15px; } } +/* E-mail adresses list */ + +.emailaddress-list { + + .emailaddress { + + border-bottom: 1px dotted $gray; + + .summary { + @include clearfix; + + height: 45px; + + & > * { + float: left; + height: 100%; + padding: 12px; + } + + & > .primary, & > .verified-status { + float: right; + width: 45px; + line-height: 100%; + text-align: center; + font-size: 20px; + } + + & > .email { + padding: 12px; + font-weight: bold; + } + + & > .primary { + color: darken($brand-primary, 15%); + } + + & > .verified { + color: $brand-success; + } + + & > .unverified { + color: $brand-warning; + } + } + + .actions { + @include clearfix; + + margin-bottom: 10px; + + & > * { + float: right; + margin-right: 10px; + font-size: 12px; + } + + } + + } + +} + +.actions { + @include clearfix; + + margin-bottom: 10px; + + & > * { + float: right; + margin-right: 10px; + font-size: 12px; + } + +} /********* @@ -272,10 +483,6 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; label { @include ellipsis; - position: absolute; - bottom: 100%; - left: 0; - padding-left: $input-wrapper-padding; width: 100%; @@ -284,17 +491,23 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; height: $label-height; line-height: $label-height; - pointer-events: none; - color: rgba(0,0,0,0.38); font-size: $input-font-size; + } + + &:not(.input-skip) label { + position: absolute; + bottom: 100%; + left: 0; + + pointer-events: none; transform: translate3d(0,$label-height + $input-padding,0) scale(1); transition: transform .4s cubic-bezier(.25,.8,.25,1); transform-origin: left top; } - input.field { + input.field:not([type=checkbox]) { height: $input-height; width: 100%; @@ -308,7 +521,17 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; font-size: $input-font-size; } + input[type="checkbox"] { + vertical-align: sub; + width: 20px; + height: 20px; + } + @mixin input-special($type, $color: $input-border-color) { + &.input-#{$type} { + color: $color; + } + &.input-#{$type} input.field { padding-bottom: $input-padding - $input-border-width-lg; border-width: $input-border-width-lg; @@ -316,9 +539,16 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; } } - &.input-focused label, - &.input-has-value label { - transform: translate3d(0,$label-small-top,0) scale($label-small-scale); + &:not(.input-skip) { + + &.input-focused label, + &.input-has-value label { + transform: translate3d(0,$label-small-top,0) scale($label-small-scale); + } + + &.input-focused label { + color: inherit; + } } @include input-special('has-value', $green); @@ -331,11 +561,20 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; min-width: 1px; } + .messages { + + & > * { + padding-top: 5px; + font-size: 12px; + } + } + } [type=submit]:not(.link) { @include btn; @include btn-success-hov; + float: right; } [type=submit].link { @@ -348,6 +587,19 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding; } } +.form-inline { + display: flex; + flex-flow: row nowrap; + align-items: center; + + .input-list { + } + + [type=submit] { + font-size: 14px; + } +} + .btn { @include btn; display: block; diff --git a/allauth_ens/scss/_mixins.scss b/allauth_ens/scss/_mixins.scss index e72f1cd..6378cad 100644 --- a/allauth_ens/scss/_mixins.scss +++ b/allauth_ens/scss/_mixins.scss @@ -30,30 +30,36 @@ } } +@mixin transition($time: .3s) { + transition: background $time, color $time; +} + @mixin link { + @include transition; + color: $link-color; font-size: inherit; text-decoration: $link-decoration; @include hover-focus { - color: $link-hover-color; + //color: $link-hover-color; text-decoration: $link-hover-decoration; } } @mixin btn { - width: 100%; - min-height: 40px; + @include transition; + + //width: 100%; + min-height: 30px; border: 0; - padding: 15px 10px; + padding: 10px 15px; font-family: "Roboto Slab"; font-size: 18px; - text-align:center; - - transition: background .3s; + text-align: center; @include hover-focus { text-decoration: none; @@ -62,22 +68,19 @@ } @mixin btn-primary-hov { - // background: $gray-lighter; color: $black; - // border: 1px dashed $gray; - // border-top: 2px solid transparent; - // border-bottom: 2px solid darken($brand-primary, 15%); @include hover-focus { background: darken($brand-primary, 15%); color: $white; - // border: 1px solid darken($brand-primary, 15%); } } @mixin btn-success-hov { - background: $gray-lighter; - color: $black; + background-color: $brand-success; + color: $white; + //background: $gray-lighter; + //color: $black; @include hover-focus { background: darken($brand-success, 15%); diff --git a/allauth_ens/scss/_variables.scss b/allauth_ens/scss/_variables.scss index c16e6b1..4f50789 100644 --- a/allauth_ens/scss/_variables.scss +++ b/allauth_ens/scss/_variables.scss @@ -34,7 +34,7 @@ $link-hover-decoration: underline !default; // Body -$body-bg: $white !default; +$body-bg: $gray-lightest !default; $body-color: $gray-dark !default; diff --git a/allauth_ens/static/allauth_ens/authens.js b/allauth_ens/static/allauth_ens/authens.js index 90bd073..7acd8b3 100644 --- a/allauth_ens/static/allauth_ens/authens.js +++ b/allauth_ens/static/allauth_ens/authens.js @@ -1,9 +1,6 @@ - - - -/************************* - * Input fields handlers * - *************************/ +/** + * Input fields handlers + */ function toggleWrapperClass(class_name, callable) { let func = function(bool) { @@ -56,15 +53,6 @@ $( function() { }); -/** - * History - */ - -$( function() { - $('.history-back').click( () => history.back() ); -}); - - /** * Keyboard shortcuts * @@ -72,34 +60,29 @@ $( function() { * (or second if first is already used...) */ -function prepareShorcuts() { - let shorcuts = {}; +export function prepareShorcuts() { + let shortcuts = {}; $('.method-wrapper a').each( function() { let name = $(this).text(); for (let i=0; i < name.length; i++) { let key = name[i].toLowerCase(); - if (key !== '' && shorcuts[key] === undefined) { - shorcuts[key] = this; + if (key !== '' && shortcuts[key] === undefined) { + shortcuts[key] = this; break; } } }); - window.methodsShorcuts = shorcuts; -} - -$( function() { - // Register shorcuts - prepareShorcuts(); + window.methodsShortcuts = shortcuts; // Shorcuts handler $(document).keydown( function(e) { if (e.ctrlKey && e.altKey) { - let methodLink = window.methodsShorcuts[e.key]; + let methodLink = shortcuts[e.key]; if (methodLink !== undefined) methodLink.click(); } }); -}); +} diff --git a/allauth_ens/static/allauth_ens/screen.css b/allauth_ens/static/allauth_ens/screen.css index 71d5a4d..63d0ca6 100644 --- a/allauth_ens/static/allauth_ens/screen.css +++ b/allauth_ens/static/allauth_ens/screen.css @@ -3855,7 +3855,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.4; background: #f7f7f9; - color: #464a4c; + color: #292b2c; } @media (min-width: 576px) { /* line 1, ../../scss/_base.scss */ @@ -3868,13 +3868,13 @@ body { /* line 16, ../../scss/_base.scss */ a { + transition: background 0.3s, color 0.3s; color: #0275d8; font-size: inherit; text-decoration: none; } /* line 10, ../../scss/_mixins.scss */ a:focus, a:hover { - color: #014c8c; text-decoration: underline; } @@ -3973,7 +3973,7 @@ b { header { display: flex; align-items: stretch; - min-height: 60px; + min-height: 55px; background: #c9302c; color: #fff; font-size: 20px; @@ -3986,35 +3986,66 @@ header::after { clear: both; } /* line 135, ../../scss/_base.scss */ -header button { - width: 60px; +header .history-back { + transition: background 0.3s, color 0.3s; + width: 55px; cursor: pointer; background: transparent; + color: #fff; + font-size: 20px; } /* line 10, ../../scss/_mixins.scss */ -header button:focus, header button:hover { +header .history-back:focus, header .history-back:hover { background: #d43f3a; } -/* line 145, ../../scss/_base.scss */ -header button img { - height: 20px; - width: auto; - vertical-align: bottom; -} /* line 152, ../../scss/_base.scss */ +header a { + color: #fff !important; +} +/* line 10, ../../scss/_mixins.scss */ +header a:focus, header a:hover { + background: #d43f3a; + text-decoration: none; +} +/* line 161, ../../scss/_base.scss */ +header .right { + border-left: 1px solid #de6764; + display: flex; + flex-flow: column; + align-items: stretch; + justify-content: space-around; + font-size: 14px; + text-align: center; +} +/* line 172, ../../scss/_base.scss */ +header .right > * { + flex: 0 0 auto; + padding: 0 15px; + line-height: 28px; +} +/* line 178, ../../scss/_base.scss */ +header .right .connect-status { + font-weight: normal; +} +/* line 181, ../../scss/_base.scss */ +header .right .connect-status .fa { + margin-right: 10px; +} +/* line 187, ../../scss/_base.scss */ header h1 { - padding: 15px 35px 15px 15px; - line-height: 30px; + flex: 1 0 auto; + padding: 15px 35px; + line-height: 25px; } /************ * Messages * ************/ -/* line 164, ../../scss/_base.scss */ +/* line 201, ../../scss/_base.scss */ .messages-container { padding: 0 15px; } -/* line 167, ../../scss/_base.scss */ +/* line 204, ../../scss/_base.scss */ .messages-container::after { display: block; content: ""; @@ -4022,34 +4053,44 @@ header h1 { height: 2px; } -/* line 175, ../../scss/_base.scss */ +/* line 212, ../../scss/_base.scss */ .messages-list { - padding: 15px 0; + padding: 10px 0; } -/* line 180, ../../scss/_base.scss */ -.message + .message { - margin-top: 10px; +/* line 222, ../../scss/_base.scss */ +.message { + padding: 5px; + font-size: 14px; + color: #292b2c; } -/* line 184, ../../scss/_base.scss */ +/* line 217, ../../scss/_base.scss */ +.message.info { + color: #28a1c5; +} +/* line 217, ../../scss/_base.scss */ +.message.success { + color: #3d8b3d; +} +/* line 217, ../../scss/_base.scss */ .message.warning { color: #df8a13; } -/* line 185, ../../scss/_base.scss */ +/* line 217, ../../scss/_base.scss */ .message.error { - color: #d9534f; + color: #b52b27; } /*********** * Content * ***********/ -/* line 194, ../../scss/_base.scss */ -section p { - margin-bottom: 15px; +/* line 241, ../../scss/_base.scss */ +section > * + * { + margin-top: 15px; } /* Methods list */ -/* line 204, ../../scss/_base.scss */ +/* line 251, ../../scss/_base.scss */ .method-list { display: flex; flex-flow: row wrap; @@ -4057,21 +4098,20 @@ section p { margin: -7.5px; } -/* line 211, ../../scss/_base.scss */ +/* line 258, ../../scss/_base.scss */ .method-wrapper { flex: 1 50%; padding: 7.5px; } -/* line 215, ../../scss/_base.scss */ +/* line 262, ../../scss/_base.scss */ .method-wrapper a { - width: 100%; - min-height: 40px; + transition: background 0.3s, color 0.3s; + min-height: 30px; border: 0; - padding: 15px 10px; + padding: 10px 15px; font-family: "Roboto Slab"; font-size: 18px; text-align: center; - transition: background .3s; color: #000; display: block; } @@ -4087,24 +4127,191 @@ section p { } /* Connected accounts list */ -/* line 226, ../../scss/_base.scss */ -.provider-list > li { - height: 40px; - padding: 10px; +/* line 275, ../../scss/_base.scss */ +.provider-list > li:not(:first-child) { + margin-top: 5px; } -/* line 230, ../../scss/_base.scss */ +/* line 279, ../../scss/_base.scss */ +.provider-list > li > .heading { + height: 45px; + width: 100%; + background-color: #eceeef; +} +/* line 18, ../../scss/_mixins.scss */ +.provider-list > li > .heading::after { + display: block; + content: ""; + clear: both; +} +/* line 287, ../../scss/_base.scss */ .provider-list > li > .heading > * { float: left; + height: 100%; } -/* line 234, ../../scss/_base.scss */ +/* line 292, ../../scss/_base.scss */ +.provider-list > li > .heading > .connect, .provider-list > li > .heading > .brand-icon { + text-align: center; +} +/* line 296, ../../scss/_base.scss */ +.provider-list > li > .heading > .connect a { + transition: background 0.3s, color 0.3s; + display: inline-block; + background-color: #5cb85c; + color: #fff; + height: 100%; + line-height: 100%; + width: 45px; + padding: 12px; + font-size: 20px; + text-align: center; +} +/* line 10, ../../scss/_mixins.scss */ +.provider-list > li > .heading > .connect a:focus, .provider-list > li > .heading > .connect a:hover { + background-color: #4cae4c; + text-decoration: none; +} +/* line 319, ../../scss/_base.scss */ +.provider-list > li > .heading > .brand-icon { + padding: 10px; + width: 45px; + color: #0275d8; +} +/* line 325, ../../scss/_base.scss */ +.provider-list > li > .heading > .name { + padding: 10px; + font-weight: bold; +} +/* line 331, ../../scss/_base.scss */ +.provider-list > li > .connected-list { + padding: 0 15px; +} +/* line 335, ../../scss/_base.scss */ +.provider-list > li > .connected-list > li { + height: 30px; +} +/* line 18, ../../scss/_mixins.scss */ +.provider-list > li > .connected-list > li::after { + display: block; + content: ""; + clear: both; +} +/* line 340, ../../scss/_base.scss */ +.provider-list > li > .connected-list > li > * { + float: left; + display: block; + height: 100%; +} +/* line 346, ../../scss/_base.scss */ +.provider-list > li > .connected-list > li > .connected-delete [type=submit] { + background-color: #d9534f; + color: #fff; + min-height: 30px; + width: 30px; +} +/* line 10, ../../scss/_mixins.scss */ +.provider-list > li > .connected-list > li > .connected-delete [type=submit]:focus, .provider-list > li > .connected-list > li > .connected-delete [type=submit]:hover { + background-color: #d43f3a; +} +/* line 357, ../../scss/_base.scss */ +.provider-list > li > .connected-list > li > .connected-label { + padding: 7px 15px; + width: calc(100% - 30px); + border-bottom: 1px solid #d9534f; + font-size: 12px; +} +/* line 364, ../../scss/_base.scss */ +.provider-list > li > .connected-list > li > .connected-label .fa { + margin-right: 5px; +} +/* line 371, ../../scss/_base.scss */ .provider-list form { display: inline-block; } +/* E-mail adresses list */ +/* line 380, ../../scss/_base.scss */ +.emailaddress-list .emailaddress { + border-bottom: 1px dotted #464a4c; +} +/* line 384, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .summary { + height: 45px; +} +/* line 18, ../../scss/_mixins.scss */ +.emailaddress-list .emailaddress .summary::after { + display: block; + content: ""; + clear: both; +} +/* line 389, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .summary > * { + float: left; + height: 100%; + padding: 12px; +} +/* line 395, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status { + float: right; + width: 45px; + line-height: 100%; + text-align: center; + font-size: 20px; +} +/* line 403, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .summary > .email { + padding: 12px; + font-weight: bold; +} +/* line 408, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .summary > .primary { + color: #014c8c; +} +/* line 412, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .summary > .verified { + color: #5cb85c; +} +/* line 416, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .summary > .unverified { + color: #f0ad4e; +} +/* line 421, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .actions { + margin-bottom: 10px; +} +/* line 18, ../../scss/_mixins.scss */ +.emailaddress-list .emailaddress .actions::after { + display: block; + content: ""; + clear: both; +} +/* line 426, ../../scss/_base.scss */ +.emailaddress-list .emailaddress .actions > * { + float: right; + margin-right: 10px; + font-size: 12px; +} + +/* line 438, ../../scss/_base.scss */ +.actions { + margin-bottom: 10px; +} +/* line 18, ../../scss/_mixins.scss */ +.actions::after { + display: block; + content: ""; + clear: both; +} +/* line 443, ../../scss/_base.scss */ +.actions > * { + float: right; + margin-right: 10px; + font-size: 12px; +} + /********* * Forms * *********/ -/* line 264, ../../scss/_base.scss */ +/* line 475, ../../scss/_base.scss */ .input-wrapper { position: relative; display: block; @@ -4117,22 +4324,15 @@ section p { content: ""; clear: both; } -/* line 272, ../../scss/_base.scss */ +/* line 483, ../../scss/_base.scss */ .input-wrapper label { - position: absolute; - bottom: 100%; - left: 0; padding-left: 0; width: 100%; max-width: 100%; height: 26px; line-height: 26px; - pointer-events: none; color: rgba(0, 0, 0, 0.38); font-size: 16px; - transform: translate3d(0, 28px, 0) scale(1); - transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); - transform-origin: left top; } /* line 26, ../../scss/_mixins.scss */ .input-wrapper label { @@ -4140,8 +4340,18 @@ section p { text-overflow: ellipsis; white-space: nowrap; } -/* line 297, ../../scss/_base.scss */ -.input-wrapper input.field { +/* line 498, ../../scss/_base.scss */ +.input-wrapper:not(.input-skip) label { + position: absolute; + bottom: 100%; + left: 0; + pointer-events: none; + transform: translate3d(0, 28px, 0) scale(1); + transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + transform-origin: left top; +} +/* line 510, ../../scss/_base.scss */ +.input-wrapper input.field:not([type=checkbox]) { height: 30px; width: 100%; padding: 2px 2px 1px; @@ -4150,47 +4360,74 @@ section p { border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: 16px; } -/* line 319, ../../scss/_base.scss */ -.input-wrapper.input-focused label, .input-wrapper.input-has-value label { +/* line 524, ../../scss/_base.scss */ +.input-wrapper input[type="checkbox"] { + vertical-align: sub; + width: 20px; + height: 20px; +} +/* line 544, ../../scss/_base.scss */ +.input-wrapper:not(.input-skip).input-focused label, .input-wrapper:not(.input-skip).input-has-value label { transform: translate3d(0, 6.5px, 0) scale(0.75); } -/* line 312, ../../scss/_base.scss */ +/* line 549, ../../scss/_base.scss */ +.input-wrapper:not(.input-skip).input-focused label { + color: inherit; +} +/* line 531, ../../scss/_base.scss */ +.input-wrapper.input-has-value { + color: #5cb85c; +} +/* line 535, ../../scss/_base.scss */ .input-wrapper.input-has-value input.field { padding-bottom: 0px; border-width: 2px; border-color: #5cb85c; } -/* line 312, ../../scss/_base.scss */ +/* line 531, ../../scss/_base.scss */ +.input-wrapper.input-error { + color: #d9534f; +} +/* line 535, ../../scss/_base.scss */ .input-wrapper.input-error input.field { padding-bottom: 0px; border-width: 2px; border-color: #d9534f; } -/* line 312, ../../scss/_base.scss */ +/* line 531, ../../scss/_base.scss */ +.input-wrapper.input-focused { + color: #0275d8; +} +/* line 535, ../../scss/_base.scss */ .input-wrapper.input-focused input.field { padding-bottom: 0px; border-width: 2px; border-color: #0275d8; } -/* line 328, ../../scss/_base.scss */ +/* line 558, ../../scss/_base.scss */ .input-wrapper .infos-spacer { float: right; min-height: 10px; min-width: 1px; } +/* line 566, ../../scss/_base.scss */ +.input-wrapper .messages > * { + padding-top: 5px; + font-size: 12px; +} -/* line 336, ../../scss/_base.scss */ +/* line 574, ../../scss/_base.scss */ [type=submit]:not(.link) { - width: 100%; - min-height: 40px; + transition: background 0.3s, color 0.3s; + min-height: 30px; border: 0; - padding: 15px 10px; + padding: 10px 15px; font-family: "Roboto Slab"; font-size: 18px; text-align: center; - transition: background .3s; - background: #eceeef; - color: #000; + background-color: #5cb85c; + color: #fff; + float: right; } /* line 10, ../../scss/_mixins.scss */ [type=submit]:not(.link):focus, [type=submit]:not(.link):hover { @@ -4203,8 +4440,9 @@ section p { color: #fff; } -/* line 341, ../../scss/_base.scss */ +/* line 580, ../../scss/_base.scss */ [type=submit].link { + transition: background 0.3s, color 0.3s; color: #0275d8; font-size: inherit; text-decoration: none; @@ -4213,7 +4451,6 @@ section p { } /* line 10, ../../scss/_mixins.scss */ [type=submit].link:focus, [type=submit].link:hover { - color: #014c8c; text-decoration: underline; } /* line 10, ../../scss/_mixins.scss */ @@ -4221,16 +4458,26 @@ section p { cursor: pointer; } -/* line 351, ../../scss/_base.scss */ +/* line 590, ../../scss/_base.scss */ +.form-inline { + display: flex; + flex-flow: row nowrap; + align-items: center; +} +/* line 598, ../../scss/_base.scss */ +.form-inline [type=submit] { + font-size: 14px; +} + +/* line 603, ../../scss/_base.scss */ .btn { - width: 100%; - min-height: 40px; + transition: background 0.3s, color 0.3s; + min-height: 30px; border: 0; - padding: 15px 10px; + padding: 10px 15px; font-family: "Roboto Slab"; font-size: 18px; text-align: center; - transition: background .3s; display: block; } /* line 10, ../../scss/_mixins.scss */ @@ -4239,7 +4486,7 @@ section p { cursor: pointer; } -/* line 356, ../../scss/_base.scss */ +/* line 608, ../../scss/_base.scss */ .btn-primary-hov { color: #000; } diff --git a/allauth_ens/templates/account/base-login.html b/allauth_ens/templates/account/base-login.html deleted file mode 100644 index a4083b2..0000000 --- a/allauth_ens/templates/account/base-login.html +++ /dev/null @@ -1,9 +0,0 @@ -{% extends "account/base.html" %} -{% load i18n %} - -{% block title %}{% trans "Connexion" %} - {% project_name %}{% endblock %} -{% block header-title %}{% trans "Connexion à" %} {% project_name %}{% endblock %} - -{% block content %} -
{% include "account/block-form.html" %}
-{% endblock %} diff --git a/allauth_ens/templates/account/base-logout.html b/allauth_ens/templates/account/base-logout.html deleted file mode 100644 index a4057de..0000000 --- a/allauth_ens/templates/account/base-logout.html +++ /dev/null @@ -1,11 +0,0 @@ -{% extends "authens/base.html" %} -{% load authens i18n %} - -{% block title %}{% trans "Déconnexion" %} - {% project_name %}{% endblock %} -{% block header-title %}{% trans "Déconnexion de" %} {% project_name %}{% endblock %} - -{% block content %} -
- {% trans "Vous êtes déjà déconnecté-e." %} -
-{% endblock %} diff --git a/allauth_ens/templates/account/base.html b/allauth_ens/templates/account/base.html index e406f79..4eee6cd 100644 --- a/allauth_ens/templates/account/base.html +++ b/allauth_ens/templates/account/base.html @@ -1,4 +1,5 @@ -{% load static %} +{% load i18n static %} +{% load account allauth_ens %} @@ -7,7 +8,7 @@ - {% block title %}{% endblock %} + {% block title %}{% endblock %} - {{ request.site.name }} {# Responsive UI #} @@ -34,10 +35,21 @@
-

{% block header-title %}{% endblock %}

+
+ {% get_home_url as home_url %} + {{ request.site.name }} + {% if user.is_authenticated %} + {% get_profile_url as profile_url %} + + {% user_display request.user %} + + {% else %} +
+ {% trans "Not Connected" %} +
+ {% endif %} +
{% include "account/block-messages.html" %} diff --git a/allauth_ens/templates/account/block-form.html b/allauth_ens/templates/account/block-form.html index 2571c52..5104fab 100644 --- a/allauth_ens/templates/account/block-form.html +++ b/allauth_ens/templates/account/block-form.html @@ -1,20 +1,29 @@ -{% load i18n %} {% load widget_tweaks %} -
- {% csrf_token %} -
    - {% for field in form %} -
  • - - {% render_field field class+="field" autocomplete="off" autocapitalize="none" placeholder="" %} -
    - {% if field.help_text %} -

    {{ field.help_text|safe }}

    - {% endif %} -
    • +{% csrf_token %} +
      + {% for field in form %} + {% with field|field_type as type %} +
    • + {% if type == "booleanfield" %} + + {% else %} + + {% render_field field class+="field" autocomplete="off" autocapitalize="none" placeholder="" %} + {% endif %} +
      +
        + {% if field.help_text %} +
      • {{ field.help_text|safe }}
        • + {% endif %} + {% for error in field.errors %} +
      • {{ error }}
        • {% endfor %} -
      - - -
      • +
    + + {% endwith %} + {% endfor %} +
diff --git a/allauth_ens/templates/account/block-messages-base.html b/allauth_ens/templates/account/block-messages-base.html new file mode 100644 index 0000000..222000e --- /dev/null +++ b/allauth_ens/templates/account/block-messages-base.html @@ -0,0 +1,9 @@ +{% block messages-container %} + +
+
    + {% block message-list %}{% endblock %} +
+
+ +{% endblock %} diff --git a/allauth_ens/templates/account/block-messages-form-errors.html b/allauth_ens/templates/account/block-messages-form-errors.html new file mode 100644 index 0000000..12ff2b0 --- /dev/null +++ b/allauth_ens/templates/account/block-messages-form-errors.html @@ -0,0 +1,15 @@ +{% extends "account/block-messages-base.html" %} + +{% block messages-container %} + {% if form_errors %}{{ block.super }}{% endif %} +{% endblock %} + +{% block message-list %} + +{% for field, errors in form_errors.items %} + {% for error in errors %} +
  • {{ error }}
    • + {% endfor %} +{% endfor %} + +{% endblock %} diff --git a/allauth_ens/templates/account/block-messages.html b/allauth_ens/templates/account/block-messages.html index 0de0666..5671e51 100644 --- a/allauth_ens/templates/account/block-messages.html +++ b/allauth_ens/templates/account/block-messages.html @@ -1,11 +1,15 @@ -{% if messages %} -
    -
      - {% for message in messages %} -
    • - {{ message }} -
      • - {% endfor %} -
    -
    -{% endif %} +{% extends "account/block-messages-base.html" %} + +{% block messages-container %} + {% if messages %}{{ block.super }}{% endif %} +{% endblock %} + +{% block message-list %} + +{% for message in messages %} +
  • + {{ message }} +
    • +{% endfor %} + +{% endblock %} diff --git a/allauth_ens/templates/account/email.html b/allauth_ens/templates/account/email.html new file mode 100644 index 0000000..fb7f932 --- /dev/null +++ b/allauth_ens/templates/account/email.html @@ -0,0 +1,108 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "E-mail Addresses" %}{% endblock %} +{% block header-title %}{% trans "E-mail Addresses" %}{% endblock %} + +{% block content %} + +{% with user.emailaddress_set.all|dictsort:"email" as emailaddresses %} + +
    + + {% if emailaddresses %} + +

    + {% blocktrans %} + The following e-mail addresses are associated with your account: + {% endblocktrans %} +

    + +
      + {% for emailaddress in emailaddresses %} +
    • +
        + + + {% if emailaddress.verified %} +
      • + +
        • + {% else %} +
      • + +
        • + {% endif %} + + {% if emailaddress.primary %} +
      • + +
        • + {% endif %} + +
      + +
        + +
      • +
        + {% csrf_token %} + + +
        +
        • + + {% if not emailaddress.verified %} +
      • +
        + {% csrf_token %} + + +
        +
        • + {% endif %} + + {% if not emailaddress.primary %} +
      • +
        + {% csrf_token %} + + +
        +
        • + {% endif %} +
      +
      • + {% endfor %} +
    + + {% else %} + +

    + {% blocktrans %} + You currently do not have any e-mail address set up. You should really + add an e-mail address so you can receive notifications, reset your + password, etc. + {% endblocktrans %} +

    + + {% endif %} + +
    + {% include "account/block-form.html" with form=form %} + +
    + +
    + +{% endwith %} + +{% endblock %} diff --git a/allauth_ens/templates/account/email_confirm.html b/allauth_ens/templates/account/email_confirm.html new file mode 100644 index 0000000..27e490f --- /dev/null +++ b/allauth_ens/templates/account/email_confirm.html @@ -0,0 +1,43 @@ +{% extends "account/base.html" %} +{% load i18n %} +{% load account %} + +{% block title %}{% trans "Confirm E-mail Address" %}{% endblock %} +{% block header-title %}{% trans "Confirm E-mail Address" %}{% endblock %} + +{% block content %} + +{% user_display confirmation.email_address.user as user_display %} + +
    + {% if confirmation %} + + {% user_display confirmation.email_address.user as user_display %} + +

    + {% blocktrans with confirmation.email_address.email as email %} + Please confirm that {{ email }} is an e-mail address for user + {{ user_display }}. + {% endblocktrans %} +

    + +
    + {% csrf_token %} + +
    + + {% else %} + + {% url "account_email" as email_url %} + +

    + {% blocktrans %} + This e-mail confirmation link expired or is invalid.
    + Please issue a new e-mail confirmation request. + {% endblocktrans %} +

    + + {% endif %} +
    + +{% endblock %} diff --git a/allauth_ens/templates/account/login.html b/allauth_ens/templates/account/login.html index 724bb7f..5d85370 100644 --- a/allauth_ens/templates/account/login.html +++ b/allauth_ens/templates/account/login.html @@ -1,13 +1,9 @@ {% extends "account/base.html" %} {% load i18n %} -{% load account socialaccount %} +{% load account socialaccount allauth_ens %} -{% block title %}{% trans "Sign In" %} - {{ site.name }}{% endblock %} -{% block header-title %} - {% blocktrans with site.name as site_name %} - Sign in {{ site_name }} - {% endblocktrans %} -{% endblock %} +{% block title %}{% trans "Sign In" %}{% endblock %} +{% block header-title %}{% trans "Sign In" %}{% endblock %} {% block messages-extra %} {% if form.errors or user.is_authenticated %} @@ -57,7 +53,17 @@ {% endif %}
    - {% include "account/block-form.html" with form=form %} + +
    + {% include "account/block-form.html" with form=form %} + + {% if redirect_field_value %} + + {% endif %} +
    {% endblock %} diff --git a/allauth_ens/templates/account/logout.html b/allauth_ens/templates/account/logout.html index f1c045b..d6c8473 100644 --- a/allauth_ens/templates/account/logout.html +++ b/allauth_ens/templates/account/logout.html @@ -1,12 +1,8 @@ {% extends "account/base.html" %} {% load i18n %} -{% block title %}{% trans "Sign Out" %} - {{ site.name }}{% endblock %} -{% block header-title %} - {% blocktrans with site.name as site_name %} - Sign out {{ site_name }} - {% endblocktrans %} -{% endblock %} +{% block title %}{% trans "Sign Out" %}{% endblock %} +{% block header-title %}{% trans "Sign Out" %}{% endblock %} {% block content %} diff --git a/allauth_ens/templates/account/password_change.html b/allauth_ens/templates/account/password_change.html new file mode 100644 index 0000000..71774f2 --- /dev/null +++ b/allauth_ens/templates/account/password_change.html @@ -0,0 +1,22 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "Change Password" %}{% endblock %} +{% block header-title %}{% trans "Change Password" %}{% endblock %} + +{% block messages-extra %} + +{% include "account/block-messages-form-errors.html" with form_errors=form.non_field_errors %} + +{% endblock %} + +{% block content %} + +
    +
    + {% include "account/block-form.html" with form=form submit_value=submit_value %} + +
    +
    + +{% endblock %} diff --git a/allauth_ens/templates/account/password_reset.html b/allauth_ens/templates/account/password_reset.html new file mode 100644 index 0000000..84f5ba9 --- /dev/null +++ b/allauth_ens/templates/account/password_reset.html @@ -0,0 +1,22 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "Password Reset" %}{% endblock %} +{% block header-title %}{% trans "Password Reset" %}{% endblock %} + +{% block content %} + +
    +

    + {% blocktrans %} + Forgotten your password? Enter your e-mail address below, and we'll send + you an e-mail allowing you to reset it. + {% endblocktrans %} +

    +
    + {% include "account/block-form.html" with form=form %} + +
    +
    + +{% endblock %} diff --git a/allauth_ens/templates/account/password_reset_done.html b/allauth_ens/templates/account/password_reset_done.html new file mode 100644 index 0000000..b3b6b3d --- /dev/null +++ b/allauth_ens/templates/account/password_reset_done.html @@ -0,0 +1,17 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "Password Reset" %}{% endblock %} +{% block header-title %}{% trans "Password Reset" %}{% endblock %} + +{% block content %} + +
    +

    + {% blocktrans %} + We have sent you an e-mail. Please contact us if you do not receive it within a few minutes. + {% endblocktrans %} +

    +
    + +{% endblock %} diff --git a/allauth_ens/templates/account/password_reset_from_key_done.html b/allauth_ens/templates/account/password_reset_from_key_done.html new file mode 100644 index 0000000..265b586 --- /dev/null +++ b/allauth_ens/templates/account/password_reset_from_key_done.html @@ -0,0 +1,17 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "Change Password" %}{% endblock %} +{% block header-title %}{% trans "Change Password" %}{% endblock %} + +{% block content %} + +
    +

    + {% blocktrans %} + Your password is now changed. + {% endblocktrans %} +

    +
    + +{% endblock %} diff --git a/allauth_ens/templates/account/password_set.html b/allauth_ens/templates/account/password_set.html new file mode 100644 index 0000000..6e93915 --- /dev/null +++ b/allauth_ens/templates/account/password_set.html @@ -0,0 +1,29 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "Set Password" %}{% endblock %} +{% block header-title %}{% trans "Set Password" %}{% endblock %} + +{% block messages-extra %} + +{% include "account/block-messages-form-errors.html" with form_errors=form.non_field_errors %} + +{% endblock %} + +{% block content %} + +
    +

    + {% blocktrans %} + Your account does not have a password yet. Add one to authenticate without + third parties. + {% endblocktrans %} +

    +
    +
    + {% include "account/block-form.html" with form=form %} + +
    +
    + +{% endblock %} diff --git a/allauth_ens/templates/account/settings.html b/allauth_ens/templates/account/settings.html deleted file mode 100644 index 8dde7b2..0000000 --- a/allauth_ens/templates/account/settings.html +++ /dev/null @@ -1,32 +0,0 @@ -{% extends "account/base.html" %} -{% load i18n %} - -{% block title %} - {% trans "Account Preferences" %} - {{ request.site.name }} -{% endblock %} - -{% block header-title %} - {% blocktrans with request.site.name as site_name %} - Account Preferences - {{ site_name }} - {% endblocktrans %} -{% endblock %} - -{% block content %} - -
    - - - -
    - -{% endblock %} diff --git a/allauth_ens/templates/account/signup.html b/allauth_ens/templates/account/signup.html new file mode 100644 index 0000000..7ec5a47 --- /dev/null +++ b/allauth_ens/templates/account/signup.html @@ -0,0 +1,24 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "Signup" %}{% endblock %} +{% block header-title %}{% trans "Signup" %}{% endblock %} + +{% block content %} + +
    + +
    + {% include "account/block-form.html" with form=form %} + + {% if redirect_field_value %} + + {% endif %} +
    +
    + +{% endblock %} diff --git a/allauth_ens/templates/account/signup_closed.html b/allauth_ens/templates/account/signup_closed.html new file mode 100644 index 0000000..34ffaae --- /dev/null +++ b/allauth_ens/templates/account/signup_closed.html @@ -0,0 +1,17 @@ +{% extends "account/base.html" %} +{% load i18n %} + +{% block title %}{% trans "Sign Up Closed" %}{% endblock %} +{% block header-title %}{% trans "Sign Up Closed" %}{% endblock %} + +{% block content %} + +
    +

    + {% blocktrans %} + We are sorry, but the sign up is currently closed. + {% endblocktrans %} +

    +
    + +{% endblock %} diff --git a/allauth_ens/templates/socialaccount/connections.html b/allauth_ens/templates/socialaccount/connections.html index 08366cb..10ff9ff 100644 --- a/allauth_ens/templates/socialaccount/connections.html +++ b/allauth_ens/templates/socialaccount/connections.html @@ -1,12 +1,9 @@ {% extends "account/base.html" %} {% load i18n %} -{% load socialaccount %} -{% load allauth_ens_social %} +{% load socialaccount allauth_ens_social %} -{% block title %}{% trans "Account Connections" %} - {{ request.site.name }}{% endblock %} -{% block header-title %} - {% trans "Account Connections" %} - {{ request.site.name }} -{% endblock %} +{% block title %}{% trans "Account Connections" %}{% endblock %} +{% block header-title %}{% trans "Account Connections" %}{% endblock %} {% block content %} @@ -23,41 +20,46 @@ {% endif %}