Improve base template

This commit is contained in:
Aurélien Delobelle 2017-10-18 16:45:15 +02:00
parent 8640a96c52
commit f097a32a4f
4 changed files with 119 additions and 82 deletions

View file

@ -171,11 +171,17 @@ header {
& > * { & > * {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 15px;
line-height: 28px; line-height: 28px;
} }
& .connect-status { & > * > * {
display: inline-block;
height: 100%;
width: 100%;
padding: 0 15px;
}
& #connect-status {
font-weight: normal; font-weight: normal;
.fa { .fa {

View file

@ -4020,18 +4020,24 @@ header .right {
/* line 172, ../../scss/_base.scss */ /* line 172, ../../scss/_base.scss */
header .right > * { header .right > * {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 15px;
line-height: 28px; line-height: 28px;
} }
/* line 178, ../../scss/_base.scss */ /* line 177, ../../scss/_base.scss */
header .right .connect-status { header .right > * > * {
display: inline-block;
height: 100%;
width: 100%;
padding: 0 15px;
}
/* line 184, ../../scss/_base.scss */
header .right #connect-status {
font-weight: normal; font-weight: normal;
} }
/* line 181, ../../scss/_base.scss */ /* line 187, ../../scss/_base.scss */
header .right .connect-status .fa { header .right #connect-status .fa {
margin-right: 10px; margin-right: 10px;
} }
/* line 187, ../../scss/_base.scss */ /* line 193, ../../scss/_base.scss */
header h1 { header h1 {
flex: 1 0 auto; flex: 1 0 auto;
padding: 15px 35px; padding: 15px 35px;
@ -4041,11 +4047,11 @@ header h1 {
/************ /************
* Messages * * Messages *
************/ ************/
/* line 201, ../../scss/_base.scss */ /* line 207, ../../scss/_base.scss */
.messages-container { .messages-container {
padding: 0 15px; padding: 0 15px;
} }
/* line 204, ../../scss/_base.scss */ /* line 210, ../../scss/_base.scss */
.messages-container::after { .messages-container::after {
display: block; display: block;
content: ""; content: "";
@ -4053,30 +4059,30 @@ header h1 {
height: 2px; height: 2px;
} }
/* line 212, ../../scss/_base.scss */ /* line 218, ../../scss/_base.scss */
.messages-list { .messages-list {
padding: 10px 0; padding: 10px 0;
} }
/* line 222, ../../scss/_base.scss */ /* line 228, ../../scss/_base.scss */
.message { .message {
padding: 5px; padding: 5px;
font-size: 14px; font-size: 14px;
color: #292b2c; color: #292b2c;
} }
/* line 217, ../../scss/_base.scss */ /* line 223, ../../scss/_base.scss */
.message.info { .message.info {
color: #28a1c5; color: #28a1c5;
} }
/* line 217, ../../scss/_base.scss */ /* line 223, ../../scss/_base.scss */
.message.success { .message.success {
color: #3d8b3d; color: #3d8b3d;
} }
/* line 217, ../../scss/_base.scss */ /* line 223, ../../scss/_base.scss */
.message.warning { .message.warning {
color: #df8a13; color: #df8a13;
} }
/* line 217, ../../scss/_base.scss */ /* line 223, ../../scss/_base.scss */
.message.error { .message.error {
color: #b52b27; color: #b52b27;
} }
@ -4084,13 +4090,13 @@ header h1 {
/*********** /***********
* Content * * Content *
***********/ ***********/
/* line 241, ../../scss/_base.scss */ /* line 247, ../../scss/_base.scss */
section > * + * { section > * + * {
margin-top: 15px; margin-top: 15px;
} }
/* Methods list */ /* Methods list */
/* line 251, ../../scss/_base.scss */ /* line 257, ../../scss/_base.scss */
.method-list { .method-list {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -4098,12 +4104,12 @@ section > * + * {
margin: -7.5px; margin: -7.5px;
} }
/* line 258, ../../scss/_base.scss */ /* line 264, ../../scss/_base.scss */
.method-wrapper { .method-wrapper {
flex: 1 50%; flex: 1 50%;
padding: 7.5px; padding: 7.5px;
} }
/* line 262, ../../scss/_base.scss */ /* line 268, ../../scss/_base.scss */
.method-wrapper a { .method-wrapper a {
transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
min-height: 30px; min-height: 30px;
@ -4127,11 +4133,11 @@ section > * + * {
} }
/* Connected accounts list */ /* Connected accounts list */
/* line 275, ../../scss/_base.scss */ /* line 281, ../../scss/_base.scss */
.provider-list > li:not(:first-child) { .provider-list > li:not(:first-child) {
margin-top: 5px; margin-top: 5px;
} }
/* line 279, ../../scss/_base.scss */ /* line 285, ../../scss/_base.scss */
.provider-list > li > .heading { .provider-list > li > .heading {
height: 45px; height: 45px;
width: 100%; width: 100%;
@ -4143,16 +4149,16 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 287, ../../scss/_base.scss */ /* line 293, ../../scss/_base.scss */
.provider-list > li > .heading > * { .provider-list > li > .heading > * {
float: left; float: left;
height: 100%; height: 100%;
} }
/* line 292, ../../scss/_base.scss */ /* line 298, ../../scss/_base.scss */
.provider-list > li > .heading > .connect, .provider-list > li > .heading > .brand-icon { .provider-list > li > .heading > .connect, .provider-list > li > .heading > .brand-icon {
text-align: center; text-align: center;
} }
/* line 296, ../../scss/_base.scss */ /* line 302, ../../scss/_base.scss */
.provider-list > li > .heading > .connect a { .provider-list > li > .heading > .connect a {
transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
display: inline-block; display: inline-block;
@ -4170,22 +4176,22 @@ section > * + * {
background-color: #4cae4c; background-color: #4cae4c;
text-decoration: none; text-decoration: none;
} }
/* line 319, ../../scss/_base.scss */ /* line 325, ../../scss/_base.scss */
.provider-list > li > .heading > .brand-icon { .provider-list > li > .heading > .brand-icon {
padding: 10px; padding: 10px;
width: 45px; width: 45px;
color: #0275d8; color: #0275d8;
} }
/* line 325, ../../scss/_base.scss */ /* line 331, ../../scss/_base.scss */
.provider-list > li > .heading > .name { .provider-list > li > .heading > .name {
padding: 10px; padding: 10px;
font-weight: bold; font-weight: bold;
} }
/* line 331, ../../scss/_base.scss */ /* line 337, ../../scss/_base.scss */
.provider-list > li > .connected-list { .provider-list > li > .connected-list {
padding: 0 15px; padding: 0 15px;
} }
/* line 335, ../../scss/_base.scss */ /* line 341, ../../scss/_base.scss */
.provider-list > li > .connected-list > li { .provider-list > li > .connected-list > li {
height: 30px; height: 30px;
} }
@ -4195,13 +4201,13 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 340, ../../scss/_base.scss */ /* line 346, ../../scss/_base.scss */
.provider-list > li > .connected-list > li > * { .provider-list > li > .connected-list > li > * {
float: left; float: left;
display: block; display: block;
height: 100%; height: 100%;
} }
/* line 346, ../../scss/_base.scss */ /* line 352, ../../scss/_base.scss */
.provider-list > li > .connected-list > li > .connected-delete [type=submit] { .provider-list > li > .connected-list > li > .connected-delete [type=submit] {
background-color: #d9534f; background-color: #d9534f;
color: #fff; color: #fff;
@ -4212,28 +4218,28 @@ section > * + * {
.provider-list > li > .connected-list > li > .connected-delete [type=submit]:focus, .provider-list > li > .connected-list > li > .connected-delete [type=submit]:hover { .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; background-color: #d43f3a;
} }
/* line 357, ../../scss/_base.scss */ /* line 363, ../../scss/_base.scss */
.provider-list > li > .connected-list > li > .connected-label { .provider-list > li > .connected-list > li > .connected-label {
padding: 7px 15px; padding: 7px 15px;
width: calc(100% - 30px); width: calc(100% - 30px);
border-bottom: 1px solid #d9534f; border-bottom: 1px solid #d9534f;
font-size: 12px; font-size: 12px;
} }
/* line 364, ../../scss/_base.scss */ /* line 370, ../../scss/_base.scss */
.provider-list > li > .connected-list > li > .connected-label .fa { .provider-list > li > .connected-list > li > .connected-label .fa {
margin-right: 5px; margin-right: 5px;
} }
/* line 371, ../../scss/_base.scss */ /* line 377, ../../scss/_base.scss */
.provider-list form { .provider-list form {
display: inline-block; display: inline-block;
} }
/* E-mail adresses list */ /* E-mail adresses list */
/* line 380, ../../scss/_base.scss */ /* line 386, ../../scss/_base.scss */
.emailaddress-list .emailaddress { .emailaddress-list .emailaddress {
border-bottom: 1px dotted #464a4c; border-bottom: 1px dotted #464a4c;
} }
/* line 384, ../../scss/_base.scss */ /* line 390, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary { .emailaddress-list .emailaddress .summary {
height: 45px; height: 45px;
} }
@ -4243,13 +4249,13 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 389, ../../scss/_base.scss */ /* line 395, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > * { .emailaddress-list .emailaddress .summary > * {
float: left; float: left;
height: 100%; height: 100%;
padding: 12px; padding: 12px;
} }
/* line 395, ../../scss/_base.scss */ /* line 401, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status { .emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status {
float: right; float: right;
width: 45px; width: 45px;
@ -4257,24 +4263,24 @@ section > * + * {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
/* line 403, ../../scss/_base.scss */ /* line 409, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .email { .emailaddress-list .emailaddress .summary > .email {
padding: 12px; padding: 12px;
font-weight: bold; font-weight: bold;
} }
/* line 408, ../../scss/_base.scss */ /* line 414, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .primary { .emailaddress-list .emailaddress .summary > .primary {
color: #014c8c; color: #014c8c;
} }
/* line 412, ../../scss/_base.scss */ /* line 418, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .verified { .emailaddress-list .emailaddress .summary > .verified {
color: #5cb85c; color: #5cb85c;
} }
/* line 416, ../../scss/_base.scss */ /* line 422, ../../scss/_base.scss */
.emailaddress-list .emailaddress .summary > .unverified { .emailaddress-list .emailaddress .summary > .unverified {
color: #f0ad4e; color: #f0ad4e;
} }
/* line 421, ../../scss/_base.scss */ /* line 427, ../../scss/_base.scss */
.emailaddress-list .emailaddress .actions { .emailaddress-list .emailaddress .actions {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -4284,14 +4290,14 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 426, ../../scss/_base.scss */ /* line 432, ../../scss/_base.scss */
.emailaddress-list .emailaddress .actions > * { .emailaddress-list .emailaddress .actions > * {
float: right; float: right;
margin-right: 10px; margin-right: 10px;
font-size: 12px; font-size: 12px;
} }
/* line 438, ../../scss/_base.scss */ /* line 444, ../../scss/_base.scss */
.actions { .actions {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -4301,7 +4307,7 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 443, ../../scss/_base.scss */ /* line 449, ../../scss/_base.scss */
.actions > * { .actions > * {
float: right; float: right;
margin-right: 10px; margin-right: 10px;
@ -4311,7 +4317,7 @@ section > * + * {
/********* /*********
* Forms * * Forms *
*********/ *********/
/* line 475, ../../scss/_base.scss */ /* line 481, ../../scss/_base.scss */
.input-wrapper { .input-wrapper {
position: relative; position: relative;
display: block; display: block;
@ -4324,7 +4330,7 @@ section > * + * {
content: ""; content: "";
clear: both; clear: both;
} }
/* line 483, ../../scss/_base.scss */ /* line 489, ../../scss/_base.scss */
.input-wrapper label { .input-wrapper label {
padding-left: 0; padding-left: 0;
width: 100%; width: 100%;
@ -4340,7 +4346,7 @@ section > * + * {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
/* line 498, ../../scss/_base.scss */ /* line 504, ../../scss/_base.scss */
.input-wrapper:not(.input-skip) label { .input-wrapper:not(.input-skip) label {
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
@ -4350,7 +4356,7 @@ section > * + * {
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transform-origin: left top; transform-origin: left top;
} }
/* line 510, ../../scss/_base.scss */ /* line 516, ../../scss/_base.scss */
.input-wrapper input.field:not([type=checkbox]) { .input-wrapper input.field:not([type=checkbox]) {
height: 30px; height: 30px;
width: 100%; width: 100%;
@ -4360,63 +4366,63 @@ section > * + * {
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 524, ../../scss/_base.scss */ /* line 530, ../../scss/_base.scss */
.input-wrapper input[type="checkbox"] { .input-wrapper input[type="checkbox"] {
vertical-align: sub; vertical-align: sub;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }
/* line 544, ../../scss/_base.scss */ /* line 550, ../../scss/_base.scss */
.input-wrapper:not(.input-skip).input-focused label, .input-wrapper:not(.input-skip).input-has-value label { .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 549, ../../scss/_base.scss */ /* line 555, ../../scss/_base.scss */
.input-wrapper:not(.input-skip).input-focused label { .input-wrapper:not(.input-skip).input-focused label {
color: inherit; color: inherit;
} }
/* line 531, ../../scss/_base.scss */ /* line 537, ../../scss/_base.scss */
.input-wrapper.input-has-value { .input-wrapper.input-has-value {
color: #5cb85c; color: #5cb85c;
} }
/* line 535, ../../scss/_base.scss */ /* line 541, ../../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 531, ../../scss/_base.scss */ /* line 537, ../../scss/_base.scss */
.input-wrapper.input-error { .input-wrapper.input-error {
color: #d9534f; color: #d9534f;
} }
/* line 535, ../../scss/_base.scss */ /* line 541, ../../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 531, ../../scss/_base.scss */ /* line 537, ../../scss/_base.scss */
.input-wrapper.input-focused { .input-wrapper.input-focused {
color: #0275d8; color: #0275d8;
} }
/* line 535, ../../scss/_base.scss */ /* line 541, ../../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 558, ../../scss/_base.scss */ /* line 564, ../../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 */ /* line 572, ../../scss/_base.scss */
.input-wrapper .messages > * { .input-wrapper .messages > * {
padding-top: 5px; padding-top: 5px;
font-size: 12px; font-size: 12px;
} }
/* line 574, ../../scss/_base.scss */ /* line 580, ../../scss/_base.scss */
[type=submit]:not(.link) { [type=submit]:not(.link) {
transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
min-height: 30px; min-height: 30px;
@ -4440,7 +4446,7 @@ section > * + * {
color: #fff; color: #fff;
} }
/* line 580, ../../scss/_base.scss */ /* line 586, ../../scss/_base.scss */
[type=submit].link { [type=submit].link {
transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
color: #0275d8; color: #0275d8;
@ -4458,18 +4464,18 @@ section > * + * {
cursor: pointer; cursor: pointer;
} }
/* line 590, ../../scss/_base.scss */ /* line 596, ../../scss/_base.scss */
.form-inline { .form-inline {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
} }
/* line 598, ../../scss/_base.scss */ /* line 604, ../../scss/_base.scss */
.form-inline [type=submit] { .form-inline [type=submit] {
font-size: 14px; font-size: 14px;
} }
/* line 603, ../../scss/_base.scss */ /* line 609, ../../scss/_base.scss */
.btn { .btn {
transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
min-height: 30px; min-height: 30px;
@ -4486,7 +4492,7 @@ section > * + * {
cursor: pointer; cursor: pointer;
} }
/* line 608, ../../scss/_base.scss */ /* line 614, ../../scss/_base.scss */
.btn-primary-hov { .btn-primary-hov {
color: #000; color: #000;
} }

View file

@ -8,7 +8,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>{% block title %}{% endblock %} - {{ request.site.name }}</title> <title>{% block title %}{% endblock %}{% if request.site.name %} - {{ request.site.name }}{% endif %}</title>
{# Responsive UI #} {# Responsive UI #}
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -39,18 +39,39 @@
<header> <header>
<h1>{% block header-title %}{% endblock %}</h1> <h1>{% block header-title %}{% endblock %}</h1>
<div class="right"> <div class="right">
{% get_home_url as home_url %}
<a href="{{ home_url }}">{{ request.site.name }}</a> <div id="view-site">
{% if user.is_authenticated %} {% get_home_url as home_url %}
{% get_profile_url as profile_url %} {% if home_url %}
<a class="connect-status" href="{{ profile_url }}"> <a href="{{ home_url }}">
<i class="fa fa-user"></i>{% user_display request.user %} {{ request.site.name|default:"Voir le site" }}
</a> </a>
{% else %} {% else %}
<div class="connect-status"> <span>{{ request.site.name }}</span>
<i class="fa fa-user"></i>{% trans "Not Connected" %} {% endif %}
</div>
<div id="connect-status">
{% if user.is_authenticated %}
{% get_profile_url as profile_url %}
{% if profile_url %}
<a href="{{ profile_url }}">
<i class="fa fa-user"></i>
{% user_display user %}
</a>
{% else %}
<span>
<i class="fa fa-user"></i>
{% user_display user %}
</span>
{% endif %}
{% else %}
<span>
<i class="fa fa-user"></i>
{% trans "Not Connected" %}
</span>
{% endif %}
</div> </div>
{% endif %}
</div> </div>
</header> </header>

View file

@ -1,7 +1,7 @@
import django import django
from django import template from django import template
from django.conf import settings from django.conf import settings
from django.urls import reverse from django.shortcuts import resolve_url
register = template.Library() register = template.Library()
@ -15,10 +15,14 @@ else:
@simple_tag @simple_tag
def get_home_url(): def get_home_url():
home_url = getattr(settings, 'ACCOUNT_HOME_URL', None) home_url = getattr(settings, 'ACCOUNT_HOME_URL', None)
return reverse(home_url) if home_url is not None else '/' if home_url is None:
return None
return resolve_url(home_url)
@simple_tag @simple_tag
def get_profile_url(): def get_profile_url():
profile_url = getattr(settings, 'ACCOUNT_DETAILS_URL', None) profile_url = getattr(settings, 'ACCOUNT_DETAILS_URL', None)
return reverse(profile_url) if profile_url is not None else '/' if profile_url is None:
return None
return resolve_url(profile_url)