Improve base template
This commit is contained in:
Aurélien Delobelle
parent
8640a96c52
commit
f097a32a4f
4 changed files with 119 additions and 82 deletions
|
|
@ -171,11 +171,17 @@ header {
|
|||
|
||||
& > * {
|
||||
flex: 0 0 auto;
|
||||
padding: 0 15px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
& .connect-status {
|
||||
& > * > * {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
& #connect-status {
|
||||
font-weight: normal;
|
||||
|
||||
.fa {
|
||||
|
|
|
|||
|
|
@ -4020,18 +4020,24 @@ header .right {
|
|||
/* 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 {
|
||||
/* line 177, ../../scss/_base.scss */
|
||||
header .right > * > * {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
/* line 184, ../../scss/_base.scss */
|
||||
header .right #connect-status {
|
||||
font-weight: normal;
|
||||
}
|
||||
/* line 181, ../../scss/_base.scss */
|
||||
header .right .connect-status .fa {
|
||||
/* line 187, ../../scss/_base.scss */
|
||||
header .right #connect-status .fa {
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* line 187, ../../scss/_base.scss */
|
||||
/* line 193, ../../scss/_base.scss */
|
||||
header h1 {
|
||||
flex: 1 0 auto;
|
||||
padding: 15px 35px;
|
||||
|
|
@ -4041,11 +4047,11 @@ header h1 {
|
|||
/************
|
||||
* Messages *
|
||||
************/
|
||||
/* line 201, ../../scss/_base.scss */
|
||||
/* line 207, ../../scss/_base.scss */
|
||||
.messages-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
/* line 204, ../../scss/_base.scss */
|
||||
/* line 210, ../../scss/_base.scss */
|
||||
.messages-container::after {
|
||||
display: block;
|
||||
content: "";
|
||||
|
|
@ -4053,30 +4059,30 @@ header h1 {
|
|||
height: 2px;
|
||||
}
|
||||
|
||||
/* line 212, ../../scss/_base.scss */
|
||||
/* line 218, ../../scss/_base.scss */
|
||||
.messages-list {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/* line 222, ../../scss/_base.scss */
|
||||
/* line 228, ../../scss/_base.scss */
|
||||
.message {
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
color: #292b2c;
|
||||
}
|
||||
/* line 217, ../../scss/_base.scss */
|
||||
/* line 223, ../../scss/_base.scss */
|
||||
.message.info {
|
||||
color: #28a1c5;
|
||||
}
|
||||
/* line 217, ../../scss/_base.scss */
|
||||
/* line 223, ../../scss/_base.scss */
|
||||
.message.success {
|
||||
color: #3d8b3d;
|
||||
}
|
||||
/* line 217, ../../scss/_base.scss */
|
||||
/* line 223, ../../scss/_base.scss */
|
||||
.message.warning {
|
||||
color: #df8a13;
|
||||
}
|
||||
/* line 217, ../../scss/_base.scss */
|
||||
/* line 223, ../../scss/_base.scss */
|
||||
.message.error {
|
||||
color: #b52b27;
|
||||
}
|
||||
|
|
@ -4084,13 +4090,13 @@ header h1 {
|
|||
/***********
|
||||
* Content *
|
||||
***********/
|
||||
/* line 241, ../../scss/_base.scss */
|
||||
/* line 247, ../../scss/_base.scss */
|
||||
section > * + * {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* Methods list */
|
||||
/* line 251, ../../scss/_base.scss */
|
||||
/* line 257, ../../scss/_base.scss */
|
||||
.method-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
|
@ -4098,12 +4104,12 @@ section > * + * {
|
|||
margin: -7.5px;
|
||||
}
|
||||
|
||||
/* line 258, ../../scss/_base.scss */
|
||||
/* line 264, ../../scss/_base.scss */
|
||||
.method-wrapper {
|
||||
flex: 1 50%;
|
||||
padding: 7.5px;
|
||||
}
|
||||
/* line 262, ../../scss/_base.scss */
|
||||
/* line 268, ../../scss/_base.scss */
|
||||
.method-wrapper a {
|
||||
transition: background 0.3s, color 0.3s;
|
||||
min-height: 30px;
|
||||
|
|
@ -4127,11 +4133,11 @@ section > * + * {
|
|||
}
|
||||
|
||||
/* Connected accounts list */
|
||||
/* line 275, ../../scss/_base.scss */
|
||||
/* line 281, ../../scss/_base.scss */
|
||||
.provider-list > li:not(:first-child) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
/* line 279, ../../scss/_base.scss */
|
||||
/* line 285, ../../scss/_base.scss */
|
||||
.provider-list > li > .heading {
|
||||
height: 45px;
|
||||
width: 100%;
|
||||
|
|
@ -4143,16 +4149,16 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 287, ../../scss/_base.scss */
|
||||
/* line 293, ../../scss/_base.scss */
|
||||
.provider-list > li > .heading > * {
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
/* line 292, ../../scss/_base.scss */
|
||||
/* line 298, ../../scss/_base.scss */
|
||||
.provider-list > li > .heading > .connect, .provider-list > li > .heading > .brand-icon {
|
||||
text-align: center;
|
||||
}
|
||||
/* line 296, ../../scss/_base.scss */
|
||||
/* line 302, ../../scss/_base.scss */
|
||||
.provider-list > li > .heading > .connect a {
|
||||
transition: background 0.3s, color 0.3s;
|
||||
display: inline-block;
|
||||
|
|
@ -4170,22 +4176,22 @@ section > * + * {
|
|||
background-color: #4cae4c;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* line 319, ../../scss/_base.scss */
|
||||
/* line 325, ../../scss/_base.scss */
|
||||
.provider-list > li > .heading > .brand-icon {
|
||||
padding: 10px;
|
||||
width: 45px;
|
||||
color: #0275d8;
|
||||
}
|
||||
/* line 325, ../../scss/_base.scss */
|
||||
/* line 331, ../../scss/_base.scss */
|
||||
.provider-list > li > .heading > .name {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* line 331, ../../scss/_base.scss */
|
||||
/* line 337, ../../scss/_base.scss */
|
||||
.provider-list > li > .connected-list {
|
||||
padding: 0 15px;
|
||||
}
|
||||
/* line 335, ../../scss/_base.scss */
|
||||
/* line 341, ../../scss/_base.scss */
|
||||
.provider-list > li > .connected-list > li {
|
||||
height: 30px;
|
||||
}
|
||||
|
|
@ -4195,13 +4201,13 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 340, ../../scss/_base.scss */
|
||||
/* line 346, ../../scss/_base.scss */
|
||||
.provider-list > li > .connected-list > li > * {
|
||||
float: left;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
/* line 346, ../../scss/_base.scss */
|
||||
/* line 352, ../../scss/_base.scss */
|
||||
.provider-list > li > .connected-list > li > .connected-delete [type=submit] {
|
||||
background-color: #d9534f;
|
||||
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 {
|
||||
background-color: #d43f3a;
|
||||
}
|
||||
/* line 357, ../../scss/_base.scss */
|
||||
/* line 363, ../../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 */
|
||||
/* line 370, ../../scss/_base.scss */
|
||||
.provider-list > li > .connected-list > li > .connected-label .fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
/* line 371, ../../scss/_base.scss */
|
||||
/* line 377, ../../scss/_base.scss */
|
||||
.provider-list form {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* E-mail adresses list */
|
||||
/* line 380, ../../scss/_base.scss */
|
||||
/* line 386, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress {
|
||||
border-bottom: 1px dotted #464a4c;
|
||||
}
|
||||
/* line 384, ../../scss/_base.scss */
|
||||
/* line 390, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary {
|
||||
height: 45px;
|
||||
}
|
||||
|
|
@ -4243,13 +4249,13 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 389, ../../scss/_base.scss */
|
||||
/* line 395, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > * {
|
||||
float: left;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
/* line 395, ../../scss/_base.scss */
|
||||
/* line 401, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status {
|
||||
float: right;
|
||||
width: 45px;
|
||||
|
|
@ -4257,24 +4263,24 @@ section > * + * {
|
|||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
/* line 403, ../../scss/_base.scss */
|
||||
/* line 409, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .email {
|
||||
padding: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* line 408, ../../scss/_base.scss */
|
||||
/* line 414, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .primary {
|
||||
color: #014c8c;
|
||||
}
|
||||
/* line 412, ../../scss/_base.scss */
|
||||
/* line 418, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .verified {
|
||||
color: #5cb85c;
|
||||
}
|
||||
/* line 416, ../../scss/_base.scss */
|
||||
/* line 422, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .summary > .unverified {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
/* line 421, ../../scss/_base.scss */
|
||||
/* line 427, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .actions {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -4284,14 +4290,14 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 426, ../../scss/_base.scss */
|
||||
/* line 432, ../../scss/_base.scss */
|
||||
.emailaddress-list .emailaddress .actions > * {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* line 438, ../../scss/_base.scss */
|
||||
/* line 444, ../../scss/_base.scss */
|
||||
.actions {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -4301,7 +4307,7 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 443, ../../scss/_base.scss */
|
||||
/* line 449, ../../scss/_base.scss */
|
||||
.actions > * {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
|
@ -4311,7 +4317,7 @@ section > * + * {
|
|||
/*********
|
||||
* Forms *
|
||||
*********/
|
||||
/* line 475, ../../scss/_base.scss */
|
||||
/* line 481, ../../scss/_base.scss */
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -4324,7 +4330,7 @@ section > * + * {
|
|||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
/* line 483, ../../scss/_base.scss */
|
||||
/* line 489, ../../scss/_base.scss */
|
||||
.input-wrapper label {
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
|
|
@ -4340,7 +4346,7 @@ section > * + * {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* line 498, ../../scss/_base.scss */
|
||||
/* line 504, ../../scss/_base.scss */
|
||||
.input-wrapper:not(.input-skip) label {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
|
@ -4350,7 +4356,7 @@ section > * + * {
|
|||
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transform-origin: left top;
|
||||
}
|
||||
/* line 510, ../../scss/_base.scss */
|
||||
/* line 516, ../../scss/_base.scss */
|
||||
.input-wrapper input.field:not([type=checkbox]) {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
|
|
@ -4360,63 +4366,63 @@ section > * + * {
|
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
font-size: 16px;
|
||||
}
|
||||
/* line 524, ../../scss/_base.scss */
|
||||
/* line 530, ../../scss/_base.scss */
|
||||
.input-wrapper input[type="checkbox"] {
|
||||
vertical-align: sub;
|
||||
width: 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 {
|
||||
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 {
|
||||
color: inherit;
|
||||
}
|
||||
/* line 531, ../../scss/_base.scss */
|
||||
/* line 537, ../../scss/_base.scss */
|
||||
.input-wrapper.input-has-value {
|
||||
color: #5cb85c;
|
||||
}
|
||||
/* line 535, ../../scss/_base.scss */
|
||||
/* line 541, ../../scss/_base.scss */
|
||||
.input-wrapper.input-has-value input.field {
|
||||
padding-bottom: 0px;
|
||||
border-width: 2px;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
/* line 531, ../../scss/_base.scss */
|
||||
/* line 537, ../../scss/_base.scss */
|
||||
.input-wrapper.input-error {
|
||||
color: #d9534f;
|
||||
}
|
||||
/* line 535, ../../scss/_base.scss */
|
||||
/* line 541, ../../scss/_base.scss */
|
||||
.input-wrapper.input-error input.field {
|
||||
padding-bottom: 0px;
|
||||
border-width: 2px;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
/* line 531, ../../scss/_base.scss */
|
||||
/* line 537, ../../scss/_base.scss */
|
||||
.input-wrapper.input-focused {
|
||||
color: #0275d8;
|
||||
}
|
||||
/* line 535, ../../scss/_base.scss */
|
||||
/* line 541, ../../scss/_base.scss */
|
||||
.input-wrapper.input-focused input.field {
|
||||
padding-bottom: 0px;
|
||||
border-width: 2px;
|
||||
border-color: #0275d8;
|
||||
}
|
||||
/* line 558, ../../scss/_base.scss */
|
||||
/* line 564, ../../scss/_base.scss */
|
||||
.input-wrapper .infos-spacer {
|
||||
float: right;
|
||||
min-height: 10px;
|
||||
min-width: 1px;
|
||||
}
|
||||
/* line 566, ../../scss/_base.scss */
|
||||
/* line 572, ../../scss/_base.scss */
|
||||
.input-wrapper .messages > * {
|
||||
padding-top: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* line 574, ../../scss/_base.scss */
|
||||
/* line 580, ../../scss/_base.scss */
|
||||
[type=submit]:not(.link) {
|
||||
transition: background 0.3s, color 0.3s;
|
||||
min-height: 30px;
|
||||
|
|
@ -4440,7 +4446,7 @@ section > * + * {
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
/* line 580, ../../scss/_base.scss */
|
||||
/* line 586, ../../scss/_base.scss */
|
||||
[type=submit].link {
|
||||
transition: background 0.3s, color 0.3s;
|
||||
color: #0275d8;
|
||||
|
|
@ -4458,18 +4464,18 @@ section > * + * {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 590, ../../scss/_base.scss */
|
||||
/* line 596, ../../scss/_base.scss */
|
||||
.form-inline {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
/* line 598, ../../scss/_base.scss */
|
||||
/* line 604, ../../scss/_base.scss */
|
||||
.form-inline [type=submit] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* line 603, ../../scss/_base.scss */
|
||||
/* line 609, ../../scss/_base.scss */
|
||||
.btn {
|
||||
transition: background 0.3s, color 0.3s;
|
||||
min-height: 30px;
|
||||
|
|
@ -4486,7 +4492,7 @@ section > * + * {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* line 608, ../../scss/_base.scss */
|
||||
/* line 614, ../../scss/_base.scss */
|
||||
.btn-primary-hov {
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<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 #}
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
|
@ -39,18 +39,39 @@
|
|||
<header>
|
||||
<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 id="view-site">
|
||||
{% get_home_url as home_url %}
|
||||
{% if home_url %}
|
||||
<a href="{{ home_url }}">
|
||||
{{ request.site.name|default:"Voir le site" }}
|
||||
</a>
|
||||
{% else %}
|
||||
<span>{{ request.site.name }}</span>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import django
|
||||
from django import template
|
||||
from django.conf import settings
|
||||
from django.urls import reverse
|
||||
from django.shortcuts import resolve_url
|
||||
|
||||
|
||||
register = template.Library()
|
||||
|
|
@ -15,10 +15,14 @@ else:
|
|||
@simple_tag
|
||||
def get_home_url():
|
||||
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
|
||||
def get_profile_url():
|
||||
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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue