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: $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;

View file

@ -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%);

View file

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

View file

@ -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();
}
});
});
}

View file

@ -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;
}

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>
<html>
@ -7,7 +8,7 @@
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<title>{% block title %}{% endblock %} - {{ request.site.name }}</title>
{# Responsive UI #}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -34,10 +35,21 @@
<div class="wrapper">
<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>
<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>
{% include "account/block-messages.html" %}

View file

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

View file

@ -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 %}

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" %}
{% 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 %}
</p>
<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">
<ul class="heading">
<li>
<a class="connect"
href="{% provider_login_url provider.provider.id process="connect" scope=scope auth_params=auth_params %}">
<li class="connect">
<a href="{% provider_login_url provider.id process="connect" scope=scope auth_params=auth_params %}">
<i class="fa fa-plus"></i>
</a>
</li>
<li>
<b>{{ provider.provider.name }}</b>
<li class="name">
{{ provider.name }}
</li>
</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>
<span>
<small style="font-size: 14px">
{% firstof base_account.extra_data.name base_account.email %}
</small>
<span class="connected-delete">
<form action="{% url "socialaccount_connections" %}" method="post">
{% csrf_token %}
<input type="hidden" name="account" value="{{ account.id }}">
<button type="submit" class="link"><i class="fa fa-remove"></i></button>
</form>
</span>
<span>
{% with base_account.get_provider_account as account %}
<form action="{% url "socialaccount_connections" %}" method="post">
{% csrf_token %}
<input type="hidden" name="account" value="{{ base_account.id }}">
<input type="submit" class="link" value="{% trans "Remove" %}">
</form>
{% endwith %}
<span class="connected-label">
<i class="fa fa-user"></i>
{% with account.get_profile_url as profile_url %}
{% trans "Connected Account - No ID" as fallback_label %}
{% firstof account.extra_data.name account.extra_data.username fallback_label as account_label %}
{% if profile_url %}
<a href="{{ profile_url }}" target="blank">{{ account_label }}</a>
{% else %}
{{ account_label }}
{% endif %}
{% endwith %}
</span>
</li>

View file

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