Add & update templates + styles

This commit is contained in:
Aurélien Delobelle 2017-09-16 02:32:42 +02:00
parent 06db3297b5
commit e66920ed4e
26 changed files with 1069 additions and 274 deletions

View file

@ -2,8 +2,8 @@ body {
font-family: Roboto, Verdana; font-family: Roboto, Verdana;
font-family: $font-family-base; font-family: $font-family-base;
line-height: 1.4; line-height: 1.4;
background: $gray-lightest; background: $body-bg;
color: $gray; color: $body-color;
@media (min-width: 576px) { @media (min-width: 576px) {
display: flex; display: flex;
@ -124,7 +124,7 @@ header {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
min-height: 60px; min-height: 55px;
background: $header-bg; background: $header-bg;
color: $white; color: $white;
@ -132,26 +132,63 @@ header {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
button { .history-back {
width: 60px; @include transition;
width: 55px;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: $white;
font-size: $header-history-icon-size;
@include hover-focus { @include hover-focus {
background: lighten($header-bg, 5%); background: lighten($header-bg, 5%);
} }
img { }
height: $header-history-icon-size;
width: auto; a {
vertical-align: bottom; 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 { h1 {
padding: 15px 35px 15px 15px; flex: 1 0 auto;
line-height: 30px;
padding: 15px 35px;
line-height: 25px;
} }
} }
@ -173,16 +210,26 @@ header {
} }
.messages-list { .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 {
& + .message {
margin-top: 10px;
}
&.warning { color: darken($orange, 15%); } padding: 5px;
&.error { color: $red; } 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 { section {
p { & > * + * {
margin-bottom: 15px; margin-top: 15px;
} }
} }
@ -224,11 +271,101 @@ $space-between: 15px;
.provider-list { .provider-list {
& > li { & > li {
height: 40px;
padding: 10px;
& > .heading > * { &:not(:first-child) {
float: left; 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 { 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 { label {
@include ellipsis; @include ellipsis;
position: absolute;
bottom: 100%;
left: 0;
padding-left: $input-wrapper-padding; padding-left: $input-wrapper-padding;
width: 100%; width: 100%;
@ -284,17 +491,23 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
height: $label-height; height: $label-height;
line-height: $label-height; line-height: $label-height;
pointer-events: none;
color: rgba(0,0,0,0.38); color: rgba(0,0,0,0.38);
font-size: $input-font-size; 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); transform: translate3d(0,$label-height + $input-padding,0) scale(1);
transition: transform .4s cubic-bezier(.25,.8,.25,1); transition: transform .4s cubic-bezier(.25,.8,.25,1);
transform-origin: left top; transform-origin: left top;
} }
input.field { input.field:not([type=checkbox]) {
height: $input-height; height: $input-height;
width: 100%; width: 100%;
@ -308,7 +521,17 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
font-size: $input-font-size; font-size: $input-font-size;
} }
input[type="checkbox"] {
vertical-align: sub;
width: 20px;
height: 20px;
}
@mixin input-special($type, $color: $input-border-color) { @mixin input-special($type, $color: $input-border-color) {
&.input-#{$type} {
color: $color;
}
&.input-#{$type} input.field { &.input-#{$type} input.field {
padding-bottom: $input-padding - $input-border-width-lg; padding-bottom: $input-padding - $input-border-width-lg;
border-width: $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, &:not(.input-skip) {
&.input-has-value label {
transform: translate3d(0,$label-small-top,0) scale($label-small-scale); &.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); @include input-special('has-value', $green);
@ -331,11 +561,20 @@ $label-top: $label-height + $input-wrapper-padding + $input-padding;
min-width: 1px; min-width: 1px;
} }
.messages {
& > * {
padding-top: 5px;
font-size: 12px;
}
}
} }
[type=submit]:not(.link) { [type=submit]:not(.link) {
@include btn; @include btn;
@include btn-success-hov; @include btn-success-hov;
float: right;
} }
[type=submit].link { [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 { .btn {
@include btn; @include btn;
display: block; display: block;

View file

@ -30,30 +30,36 @@
} }
} }
@mixin transition($time: .3s) {
transition: background $time, color $time;
}
@mixin link { @mixin link {
@include transition;
color: $link-color; color: $link-color;
font-size: inherit; font-size: inherit;
text-decoration: $link-decoration; text-decoration: $link-decoration;
@include hover-focus { @include hover-focus {
color: $link-hover-color; //color: $link-hover-color;
text-decoration: $link-hover-decoration; text-decoration: $link-hover-decoration;
} }
} }
@mixin btn { @mixin btn {
width: 100%; @include transition;
min-height: 40px;
//width: 100%;
min-height: 30px;
border: 0; border: 0;
padding: 15px 10px; padding: 10px 15px;
font-family: "Roboto Slab"; font-family: "Roboto Slab";
font-size: 18px; font-size: 18px;
text-align:center; text-align: center;
transition: background .3s;
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
@ -62,22 +68,19 @@
} }
@mixin btn-primary-hov { @mixin btn-primary-hov {
// background: $gray-lighter;
color: $black; color: $black;
// border: 1px dashed $gray;
// border-top: 2px solid transparent;
// border-bottom: 2px solid darken($brand-primary, 15%);
@include hover-focus { @include hover-focus {
background: darken($brand-primary, 15%); background: darken($brand-primary, 15%);
color: $white; color: $white;
// border: 1px solid darken($brand-primary, 15%);
} }
} }
@mixin btn-success-hov { @mixin btn-success-hov {
background: $gray-lighter; background-color: $brand-success;
color: $black; color: $white;
//background: $gray-lighter;
//color: $black;
@include hover-focus { @include hover-focus {
background: darken($brand-success, 15%); background: darken($brand-success, 15%);

View file

@ -34,7 +34,7 @@ $link-hover-decoration: underline !default;
// Body // Body
$body-bg: $white !default; $body-bg: $gray-lightest !default;
$body-color: $gray-dark !default; $body-color: $gray-dark !default;

View file

@ -1,9 +1,6 @@
/**
* Input fields handlers
*/
/*************************
* Input fields handlers *
*************************/
function toggleWrapperClass(class_name, callable) { function toggleWrapperClass(class_name, callable) {
let func = function(bool) { let func = function(bool) {
@ -56,15 +53,6 @@ $( function() {
}); });
/**
* History
*/
$( function() {
$('.history-back').click( () => history.back() );
});
/** /**
* Keyboard shortcuts * Keyboard shortcuts
* *
@ -72,34 +60,29 @@ $( function() {
* (or second if first is already used...) * (or second if first is already used...)
*/ */
function prepareShorcuts() { export function prepareShorcuts() {
let shorcuts = {}; let shortcuts = {};
$('.method-wrapper a').each( function() { $('.method-wrapper a').each( function() {
let name = $(this).text(); let name = $(this).text();
for (let i=0; i < name.length; i++) { for (let i=0; i < name.length; i++) {
let key = name[i].toLowerCase(); let key = name[i].toLowerCase();
if (key !== '' && shorcuts[key] === undefined) { if (key !== '' && shortcuts[key] === undefined) {
shorcuts[key] = this; shortcuts[key] = this;
break; break;
} }
} }
}); });
window.methodsShorcuts = shorcuts; window.methodsShortcuts = shortcuts;
}
$( function() {
// Register shorcuts
prepareShorcuts();
// Shorcuts handler // Shorcuts handler
$(document).keydown( function(e) { $(document).keydown( function(e) {
if (e.ctrlKey && e.altKey) { if (e.ctrlKey && e.altKey) {
let methodLink = window.methodsShorcuts[e.key]; let methodLink = shortcuts[e.key];
if (methodLink !== undefined) if (methodLink !== undefined)
methodLink.click(); methodLink.click();
} }
}); });
}); }

View file

@ -3855,7 +3855,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.4; line-height: 1.4;
background: #f7f7f9; background: #f7f7f9;
color: #464a4c; color: #292b2c;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
/* line 1, ../../scss/_base.scss */ /* line 1, ../../scss/_base.scss */
@ -3868,13 +3868,13 @@ body {
/* line 16, ../../scss/_base.scss */ /* line 16, ../../scss/_base.scss */
a { a {
transition: background 0.3s, color 0.3s;
color: #0275d8; color: #0275d8;
font-size: inherit; font-size: inherit;
text-decoration: none; text-decoration: none;
} }
/* line 10, ../../scss/_mixins.scss */ /* line 10, ../../scss/_mixins.scss */
a:focus, a:hover { a:focus, a:hover {
color: #014c8c;
text-decoration: underline; text-decoration: underline;
} }
@ -3973,7 +3973,7 @@ b {
header { header {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
min-height: 60px; min-height: 55px;
background: #c9302c; background: #c9302c;
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
@ -3986,35 +3986,66 @@ header::after {
clear: both; clear: both;
} }
/* line 135, ../../scss/_base.scss */ /* line 135, ../../scss/_base.scss */
header button { header .history-back {
width: 60px; transition: background 0.3s, color 0.3s;
width: 55px;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: #fff;
font-size: 20px;
} }
/* line 10, ../../scss/_mixins.scss */ /* line 10, ../../scss/_mixins.scss */
header button:focus, header button:hover { header .history-back:focus, header .history-back:hover {
background: #d43f3a; background: #d43f3a;
} }
/* line 145, ../../scss/_base.scss */
header button img {
height: 20px;
width: auto;
vertical-align: bottom;
}
/* line 152, ../../scss/_base.scss */ /* 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 { header h1 {
padding: 15px 35px 15px 15px; flex: 1 0 auto;
line-height: 30px; padding: 15px 35px;
line-height: 25px;
} }
/************ /************
* Messages * * Messages *
************/ ************/
/* line 164, ../../scss/_base.scss */ /* line 201, ../../scss/_base.scss */
.messages-container { .messages-container {
padding: 0 15px; padding: 0 15px;
} }
/* line 167, ../../scss/_base.scss */ /* line 204, ../../scss/_base.scss */
.messages-container::after { .messages-container::after {
display: block; display: block;
content: ""; content: "";
@ -4022,34 +4053,44 @@ header h1 {
height: 2px; height: 2px;
} }
/* line 175, ../../scss/_base.scss */ /* line 212, ../../scss/_base.scss */
.messages-list { .messages-list {
padding: 15px 0; padding: 10px 0;
} }
/* line 180, ../../scss/_base.scss */ /* line 222, ../../scss/_base.scss */
.message + .message { .message {
margin-top: 10px; 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 { .message.warning {
color: #df8a13; color: #df8a13;
} }
/* line 185, ../../scss/_base.scss */ /* line 217, ../../scss/_base.scss */
.message.error { .message.error {
color: #d9534f; color: #b52b27;
} }
/*********** /***********
* Content * * Content *
***********/ ***********/
/* line 194, ../../scss/_base.scss */ /* line 241, ../../scss/_base.scss */
section p { section > * + * {
margin-bottom: 15px; margin-top: 15px;
} }
/* Methods list */ /* Methods list */
/* line 204, ../../scss/_base.scss */ /* line 251, ../../scss/_base.scss */
.method-list { .method-list {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -4057,21 +4098,20 @@ section p {
margin: -7.5px; margin: -7.5px;
} }
/* line 211, ../../scss/_base.scss */ /* line 258, ../../scss/_base.scss */
.method-wrapper { .method-wrapper {
flex: 1 50%; flex: 1 50%;
padding: 7.5px; padding: 7.5px;
} }
/* line 215, ../../scss/_base.scss */ /* line 262, ../../scss/_base.scss */
.method-wrapper a { .method-wrapper a {
width: 100%; transition: background 0.3s, color 0.3s;
min-height: 40px; min-height: 30px;
border: 0; border: 0;
padding: 15px 10px; padding: 10px 15px;
font-family: "Roboto Slab"; font-family: "Roboto Slab";
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
transition: background .3s;
color: #000; color: #000;
display: block; display: block;
} }
@ -4087,24 +4127,191 @@ section p {
} }
/* Connected accounts list */ /* Connected accounts list */
/* line 226, ../../scss/_base.scss */ /* line 275, ../../scss/_base.scss */
.provider-list > li { .provider-list > li:not(:first-child) {
height: 40px; margin-top: 5px;
padding: 10px;
} }
/* 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 > * { .provider-list > li > .heading > * {
float: left; 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 { .provider-list form {
display: inline-block; 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 * * Forms *
*********/ *********/
/* line 264, ../../scss/_base.scss */ /* line 475, ../../scss/_base.scss */
.input-wrapper { .input-wrapper {
position: relative; position: relative;
display: block; display: block;
@ -4117,22 +4324,15 @@ section p {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 272, ../../scss/_base.scss */ /* line 483, ../../scss/_base.scss */
.input-wrapper label { .input-wrapper label {
position: absolute;
bottom: 100%;
left: 0;
padding-left: 0; padding-left: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
pointer-events: none;
color: rgba(0, 0, 0, 0.38); color: rgba(0, 0, 0, 0.38);
font-size: 16px; 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 */ /* line 26, ../../scss/_mixins.scss */
.input-wrapper label { .input-wrapper label {
@ -4140,8 +4340,18 @@ section p {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* line 297, ../../scss/_base.scss */ /* line 498, ../../scss/_base.scss */
.input-wrapper input.field { .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; height: 30px;
width: 100%; width: 100%;
padding: 2px 2px 1px; padding: 2px 2px 1px;
@ -4150,47 +4360,74 @@ section p {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
font-size: 16px; font-size: 16px;
} }
/* line 319, ../../scss/_base.scss */ /* line 524, ../../scss/_base.scss */
.input-wrapper.input-focused label, .input-wrapper.input-has-value label { .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); 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 { .input-wrapper.input-has-value input.field {
padding-bottom: 0px; padding-bottom: 0px;
border-width: 2px; border-width: 2px;
border-color: #5cb85c; 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 { .input-wrapper.input-error input.field {
padding-bottom: 0px; padding-bottom: 0px;
border-width: 2px; border-width: 2px;
border-color: #d9534f; 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 { .input-wrapper.input-focused input.field {
padding-bottom: 0px; padding-bottom: 0px;
border-width: 2px; border-width: 2px;
border-color: #0275d8; border-color: #0275d8;
} }
/* line 328, ../../scss/_base.scss */ /* line 558, ../../scss/_base.scss */
.input-wrapper .infos-spacer { .input-wrapper .infos-spacer {
float: right; float: right;
min-height: 10px; min-height: 10px;
min-width: 1px; 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) { [type=submit]:not(.link) {
width: 100%; transition: background 0.3s, color 0.3s;
min-height: 40px; min-height: 30px;
border: 0; border: 0;
padding: 15px 10px; padding: 10px 15px;
font-family: "Roboto Slab"; font-family: "Roboto Slab";
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
transition: background .3s; background-color: #5cb85c;
background: #eceeef; color: #fff;
color: #000; float: right;
} }
/* line 10, ../../scss/_mixins.scss */ /* line 10, ../../scss/_mixins.scss */
[type=submit]:not(.link):focus, [type=submit]:not(.link):hover { [type=submit]:not(.link):focus, [type=submit]:not(.link):hover {
@ -4203,8 +4440,9 @@ section p {
color: #fff; color: #fff;
} }
/* line 341, ../../scss/_base.scss */ /* line 580, ../../scss/_base.scss */
[type=submit].link { [type=submit].link {
transition: background 0.3s, color 0.3s;
color: #0275d8; color: #0275d8;
font-size: inherit; font-size: inherit;
text-decoration: none; text-decoration: none;
@ -4213,7 +4451,6 @@ section p {
} }
/* line 10, ../../scss/_mixins.scss */ /* line 10, ../../scss/_mixins.scss */
[type=submit].link:focus, [type=submit].link:hover { [type=submit].link:focus, [type=submit].link:hover {
color: #014c8c;
text-decoration: underline; text-decoration: underline;
} }
/* line 10, ../../scss/_mixins.scss */ /* line 10, ../../scss/_mixins.scss */
@ -4221,16 +4458,26 @@ section p {
cursor: pointer; 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 { .btn {
width: 100%; transition: background 0.3s, color 0.3s;
min-height: 40px; min-height: 30px;
border: 0; border: 0;
padding: 15px 10px; padding: 10px 15px;
font-family: "Roboto Slab"; font-family: "Roboto Slab";
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
transition: background .3s;
display: block; display: block;
} }
/* line 10, ../../scss/_mixins.scss */ /* line 10, ../../scss/_mixins.scss */
@ -4239,7 +4486,7 @@ section p {
cursor: pointer; cursor: pointer;
} }
/* line 356, ../../scss/_base.scss */ /* line 608, ../../scss/_base.scss */
.btn-primary-hov { .btn-primary-hov {
color: #000; color: #000;
} }

View file

@ -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 %}
<section>{% include "account/block-form.html" %}</section>
{% endblock %}

View file

@ -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 %}
<section>
{% trans "Vous êtes déjà déconnecté-e." %}
</section>
{% endblock %}

View file

@ -1,4 +1,5 @@
{% load static %} {% load i18n static %}
{% load account allauth_ens %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@ -7,7 +8,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %} - {{ request.site.name }}</title>
{# Responsive UI #} {# Responsive UI #}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -34,10 +35,21 @@
<div class="wrapper"> <div class="wrapper">
<header> <header>
<button type="button" class="history-back">
<img src="{% static "allauth_ens/images/64px-Chevron_left_font_awesome.svg.png" %}">
</button>
<h1>{% block header-title %}{% endblock %}</h1> <h1>{% block header-title %}{% endblock %}</h1>
<div class="right">
{% get_home_url as home_url %}
<a href="{{ home_url }}">{{ request.site.name }}</a>
{% if user.is_authenticated %}
{% get_profile_url as profile_url %}
<a class="connect-status" href="{{ profile_url }}">
<i class="fa fa-user"></i>{% user_display request.user %}
</a>
{% else %}
<div class="connect-status">
<i class="fa fa-user"></i>{% trans "Not Connected" %}
</div>
{% endif %}
</div>
</header> </header>
{% include "account/block-messages.html" %} {% include "account/block-messages.html" %}

View file

@ -1,20 +1,29 @@
{% load i18n %}
{% load widget_tweaks %} {% load widget_tweaks %}
<form action="{% url "account_login" %}" method="post"> {% csrf_token %}
{% csrf_token %} <ul class="input-list">
<ul class="input-list"> {% for field in form %}
{% for field in form %} {% with field|field_type as type %}
<li class="input-wrapper"> <li class="input-wrapper {% if type == "booleanfield" %}input-skip{% endif %}">
<label for="{{ field.id_for_label }}">{{ field.label }}</label> {% if type == "booleanfield" %}
{% render_field field class+="field" autocomplete="off" autocapitalize="none" placeholder="" %} <label for="{{ field.id_for_label }}">
<div class="infos-spacer"></div> {{ field.label }}
{% if field.help_text %} {% render_field field class+="field" %}
<p class="help">{{ field.help_text|safe }}</p> </label>
{% endif %} {% else %}
</li> <label for="{{ field.id_for_label }}">{{ field.label }}</label>
{% render_field field class+="field" autocomplete="off" autocapitalize="none" placeholder="" %}
{% endif %}
<div class="infos-spacer"></div>
<ul class="messages">
{% if field.help_text %}
<li>{{ field.help_text|safe }}</li>
{% endif %}
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
<input type="submit" value="{% trans "Sign In" %}"> </li>
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"> {% endwith %}
</form> {% endfor %}
</ul>

View file

@ -0,0 +1,9 @@
{% block messages-container %}
<div class="messages-container">
<ul class="messages-list">
{% block message-list %}{% endblock %}
</ul>
</div>
{% endblock %}

View file

@ -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 %}
<li class="message error">{{ error }}</li>
{% endfor %}
{% endfor %}
{% endblock %}

View file

@ -1,11 +1,15 @@
{% if messages %} {% extends "account/block-messages-base.html" %}
<div class="messages-container">
<ul class="messages-list"> {% block messages-container %}
{% for message in messages %} {% if messages %}{{ block.super }}{% endif %}
<li class="message {{ message.level_tag }}"> {% endblock %}
{{ message }}
</li> {% block message-list %}
{% endfor %}
</ul> {% for message in messages %}
</div> <li class="message {{ message.level_tag }}">
{% endif %} {{ message }}
</li>
{% endfor %}
{% endblock %}

View file

@ -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 %}
<section>
{% if emailaddresses %}
<p>
{% blocktrans %}
The following e-mail addresses are associated with your account:
{% endblocktrans %}
</p>
<ul class="emailaddress-list">
{% for emailaddress in emailaddresses %}
<li class="emailaddress">
<ul class="summary">
<li class="email">
{{ emailaddress.email }}
</li>
{% if emailaddress.verified %}
<li class="verified-status verified" title="{% trans "This email address is verified." %}">
<i class="fa fa-check"></i>
</li>
{% else %}
<li class="verified-status unverified" title="{% trans "This email address is not verified." %}">
<i class="fa fa-question"></i>
</li>
{% endif %}
{% if emailaddress.primary %}
<li class="primary" title="{% trans "This is your primary email address." %}">
<i class="fa fa-star"></i>
</li>
{% endif %}
</ul>
<ul class="actions">
<li class="remove">
<form action="{% url "account_email" %}" method="post">
{% csrf_token %}
<input type="hidden" name="email" value="{{ emailaddress.email }}">
<button type="submit" class="link" name="action_remove">
{% trans "Remove" %}
</button>
</form>
</li>
{% if not emailaddress.verified %}
<li class="verify">
<form action="{% url "account_email" %}" method="post">
{% csrf_token %}
<input type="hidden" name="email" value="{{ emailaddress.email }}">
<button type="submit" class="link" name="action_send">
{% trans "Re-send verification" %}
</button>
</form>
</li>
{% endif %}
{% if not emailaddress.primary %}
<li class="primary">
<form action="{% url "account_email" %}" method="post">
{% csrf_token %}
<input type="hidden" name="email" value="{{ emailaddress.email }}">
<button type="submit" class="link" name="action_primary">
{% trans "Make primary" %}
</button>
</form>
</li>
{% endif %}
</ul>
</li>
{% endfor %}
</ul>
{% else %}
<p>
{% 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 %}
</p>
{% endif %}
<form action="{% url "account_email" %}" method="post" class="form-inline">
{% include "account/block-form.html" with form=form %}
<button type="submit" class="link" name="action_add">{% trans "Add E-mail" %}</button>
</form>
</section>
{% endwith %}
{% endblock %}

View file

@ -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 %}
<section>
{% if confirmation %}
{% user_display confirmation.email_address.user as user_display %}
<p>
{% blocktrans with confirmation.email_address.email as email %}
Please confirm that <b>{{ email }}</b> is an e-mail address for user
{{ user_display }}.
{% endblocktrans %}
</p>
<form action="{% url "account_confirm_email" confirmation.key %}" method="post">
{% csrf_token %}
<input type="submit" value="{% trans "Confirm" %}">
</form>
{% else %}
{% url "account_email" as email_url %}
<p>
{% blocktrans %}
This e-mail confirmation link expired or is invalid.<br>
Please <a href="{{ email_url }}">issue a new e-mail confirmation request</a>.
{% endblocktrans %}
</p>
{% endif %}
</section>
{% endblock %}

View file

@ -1,13 +1,9 @@
{% extends "account/base.html" %} {% extends "account/base.html" %}
{% load i18n %} {% load i18n %}
{% load account socialaccount %} {% load account socialaccount allauth_ens %}
{% block title %}{% trans "Sign In" %} - {{ site.name }}{% endblock %} {% block title %}{% trans "Sign In" %}{% endblock %}
{% block header-title %} {% block header-title %}{% trans "Sign In" %}{% endblock %}
{% blocktrans with site.name as site_name %}
Sign in {{ site_name }}
{% endblocktrans %}
{% endblock %}
{% block messages-extra %} {% block messages-extra %}
{% if form.errors or user.is_authenticated %} {% if form.errors or user.is_authenticated %}
@ -57,7 +53,17 @@
{% endif %} {% endif %}
<section> <section>
{% include "account/block-form.html" with form=form %} <ul class="actions">
<li><a href="{{ signup_url }}">{% trans "Sign Up" %}</a></li>
<li><a href="{% url "account_reset_password" %}">{% trans "Forgot Password?" %}</a>
</ul>
<form action="{% url "account_login" %}" method="post">
{% include "account/block-form.html" with form=form %}
<input type="submit" value="{% trans "Sign In" %}">
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
{% endif %}
</form>
</section> </section>
{% endblock %} {% endblock %}

View file

@ -1,12 +1,8 @@
{% extends "account/base.html" %} {% extends "account/base.html" %}
{% load i18n %} {% load i18n %}
{% block title %}{% trans "Sign Out" %} - {{ site.name }}{% endblock %} {% block title %}{% trans "Sign Out" %}{% endblock %}
{% block header-title %} {% block header-title %}{% trans "Sign Out" %}{% endblock %}
{% blocktrans with site.name as site_name %}
Sign out {{ site_name }}
{% endblocktrans %}
{% endblock %}
{% block content %} {% block content %}

View file

@ -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 %}
<section>
<form action="{% url "account_change_password" %}" method="post">
{% include "account/block-form.html" with form=form submit_value=submit_value %}
<input type="submit" value="{% trans "Change Password" %}">
</form>
</section>
{% endblock %}

View file

@ -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 %}
<section>
<p>
{% blocktrans %}
Forgotten your password? Enter your e-mail address below, and we'll send
you an e-mail allowing you to reset it.
{% endblocktrans %}
</p>
<form action="{% url "account_reset_password" %}" method="post">
{% include "account/block-form.html" with form=form %}
<input type="submit" value="{% trans "Reset Password" %}">
</form>
</section>
{% endblock %}

View file

@ -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 %}
<section>
<p>
{% blocktrans %}
We have sent you an e-mail. Please contact us if you do not receive it within a few minutes.
{% endblocktrans %}
</p>
</section>
{% endblock %}

View file

@ -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 %}
<section>
<p>
{% blocktrans %}
Your password is now changed.
{% endblocktrans %}
</p>
</section>
{% endblock %}

View file

@ -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 %}
<section>
<p>
{% blocktrans %}
Your account does not have a password yet. Add one to authenticate without
third parties.
{% endblocktrans %}
</p>
<hr>
<form action="{% url "account_set_password" %}" method="post">
{% include "account/block-form.html" with form=form %}
<input type="submit" value="{% trans "Set Password" %}">
</form>
</section>
{% endblock %}

View file

@ -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 %}
<section>
<ul class="method-list">
<li class="method-wrapper">
<a href="{% url "account_change_password" %}">{% trans "Change password" %}</a>
</li>
<li class="method-wrapper">
<a href="{% url "account_email" %}">{% trans "Manage emails" %}</a>
</li>
<li class="method-wrapper">
<a href="{% url "socialaccount_connections" %}">{% trans "Check account connections" %}</a>
</li>
</ul>
</section>
{% endblock %}

View file

@ -0,0 +1,24 @@
{% extends "account/base.html" %}
{% load i18n %}
{% block title %}{% trans "Signup" %}{% endblock %}
{% block header-title %}{% trans "Signup" %}{% endblock %}
{% block content %}
<section>
<ul class="actions">
<li>
<a href="{{ login_url }}">{% trans "Already have an account?" %}</a>
</li>
</ul>
<form action="{% url "account_signup" %}" method="post">
{% include "account/block-form.html" with form=form %}
<input type="submit" value="{% trans "Sign Up" %}">
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
{% endif %}
</form>
</section>
{% endblock %}

View file

@ -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 %}
<section>
<p>
{% blocktrans %}
We are sorry, but the sign up is currently closed.
{% endblocktrans %}
</p>
</section>
{% endblock %}

View file

@ -1,12 +1,9 @@
{% extends "account/base.html" %} {% extends "account/base.html" %}
{% load i18n %} {% load i18n %}
{% load socialaccount %} {% load socialaccount allauth_ens_social %}
{% load allauth_ens_social %}
{% block title %}{% trans "Account Connections" %} - {{ request.site.name }}{% endblock %} {% block title %}{% trans "Account Connections" %}{% endblock %}
{% block header-title %} {% block header-title %}{% trans "Account Connections" %}{% endblock %}
{% trans "Account Connections" %} - {{ request.site.name }}
{% endblock %}
{% block content %} {% block content %}
@ -23,41 +20,46 @@
{% endif %} {% endif %}
</p> </p>
<ul class="provider-list"> <ul class="provider-list">
{% get_providers_with_accounts user as providers_with_accounts %} {% get_accounts_by_providers user as accounts_by_providers %}
{% for provider in providers_with_accounts %} {% for provider, accounts in accounts_by_providers.items %}
<li class="provider"> <li class="provider">
<ul class="heading"> <ul class="heading">
<li> <li class="connect">
<a class="connect" <a href="{% provider_login_url provider.id process="connect" scope=scope auth_params=auth_params %}">
href="{% provider_login_url provider.provider.id process="connect" scope=scope auth_params=auth_params %}">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</a> </a>
</li> </li>
<li> <li class="name">
<b>{{ provider.provider.name }}</b> {{ provider.name }}
</li> </li>
</ul> </ul>
{% if provider.accounts %} {% if accounts %}
<ul class="connected-list">
{% for account in accounts %}
<ul class="connected-account-list">
{% for base_account in provider.accounts %}
<li> <li>
<span> <span class="connected-delete">
<small style="font-size: 14px"> <form action="{% url "socialaccount_connections" %}" method="post">
{% firstof base_account.extra_data.name base_account.email %} {% csrf_token %}
</small> <input type="hidden" name="account" value="{{ account.id }}">
<button type="submit" class="link"><i class="fa fa-remove"></i></button>
</form>
</span> </span>
<span> <span class="connected-label">
{% with base_account.get_provider_account as account %} <i class="fa fa-user"></i>
<form action="{% url "socialaccount_connections" %}" method="post"> {% with account.get_profile_url as profile_url %}
{% csrf_token %} {% trans "Connected Account - No ID" as fallback_label %}
<input type="hidden" name="account" value="{{ base_account.id }}"> {% firstof account.extra_data.name account.extra_data.username fallback_label as account_label %}
<input type="submit" class="link" value="{% trans "Remove" %}"> {% if profile_url %}
</form> <a href="{{ profile_url }}" target="blank">{{ account_label }}</a>
{% endwith %} {% else %}
{{ account_label }}
{% endif %}
{% endwith %}
</span> </span>
</li> </li>

View file

@ -24,3 +24,13 @@
</a> </a>
</li> </li>
{% endfor %} {% endfor %}
{% block extra_js %}
{{ block.super }}
<script type="text/javascript">
$( function() { prepareShorcuts(); } );
</script>
{% endblock %}