a11y: switch top links to ul/li (#40926) #256
|
@ -250,9 +250,9 @@ h3, .h3 {
|
||||||
}
|
}
|
||||||
a:not(.login-link) {
|
a:not(.login-link) {
|
||||||
@extend %nav-chevron-link;
|
@extend %nav-chevron-link;
|
||||||
&:last-child {
|
}
|
||||||
border-bottom: none;
|
a.logout {
|
||||||
}
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
a.login-link,
|
a.login-link,
|
||||||
.toplinks--togglable-btn {
|
.toplinks--togglable-btn {
|
||||||
|
@ -265,22 +265,27 @@ h3, .h3 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.logged-in {
|
.toplinks--togglable-menu {
|
||||||
display: block;
|
|
||||||
@include floating-nav;
|
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
@media ($max-mobile-viewport) {
|
@media ($max-mobile-viewport) {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
@include floating-nav;
|
||||||
display: none;
|
display: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
.toplinks--list-item {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.toplinks--panel-mask {
|
.toplinks--panel-mask {
|
||||||
@include mask(-1);
|
@include mask(-1);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
.toplinks--togglable-btn.toggled {
|
.toplinks--togglable-btn.toggled {
|
||||||
+ .logged-in,
|
+ .toplinks--togglable-menu,
|
||||||
~ .toplinks--panel-mask {
|
~ .toplinks--panel-mask {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
|
@ -79,8 +79,7 @@ $header-content-margin: 5px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-shadow: unset;
|
box-shadow: unset;
|
||||||
|
|
||||||
.logged-in,
|
.toplinks--list {
|
||||||
.login {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -100,20 +99,22 @@ $header-content-margin: 5px;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
li {
|
||||||
flex: 1 1 50%;
|
flex: 1 1 50%;
|
||||||
color: white;
|
}
|
||||||
font-weight: bold;
|
}
|
||||||
height: $header-height;
|
|
||||||
|
|
||||||
&::before {
|
a {
|
||||||
content: ' ';
|
color: white;
|
||||||
font-family: 'FontAwesome';
|
font-weight: bold;
|
||||||
font-size: 2.5em;
|
height: $header-height;
|
||||||
display: block;
|
&::before {
|
||||||
padding-top: 15px;
|
content: ' ';
|
||||||
font-weight: lighter;
|
font-family: 'FontAwesome';
|
||||||
}
|
font-size: 2.5em;
|
||||||
|
display: block;
|
||||||
|
padding-top: 15px;
|
||||||
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -173,7 +173,7 @@ div#toplinks {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logged-in, .login {
|
.toplinks--list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
@ -181,6 +181,7 @@ div#toplinks {
|
||||||
margin: 0 .3rem;
|
margin: 0 .3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-item,
|
||||||
a {
|
a {
|
||||||
color: black;
|
color: black;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -197,6 +198,7 @@ div#toplinks {
|
||||||
background: center / contain no-repeat url('/assets/profile:icon');
|
background: center / contain no-repeat url('/assets/profile:icon');
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
}
|
}
|
||||||
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -128,6 +128,6 @@ div.timetable-widget {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info--separator::after {
|
.toplinks--list-item:not(:last-child)::after {
|
||||||
content: "·";
|
content: "·";
|
||||||
}
|
}
|
||||||
|
|
|
@ -95,17 +95,11 @@
|
||||||
|
|
||||||
// User-info
|
// User-info
|
||||||
#toplinks {
|
#toplinks {
|
||||||
// Reset user links
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
color: white;
|
color: white;
|
||||||
// position
|
// position
|
||||||
top: auto;
|
top: auto;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
height: $topLinks_height;
|
height: $topLinks_height;
|
||||||
padding: 0;
|
|
||||||
line-height: $topLinks_height;
|
line-height: $topLinks_height;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
@ -115,7 +109,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// user icon
|
// user icon
|
||||||
&::before {
|
li:first-child::before {
|
||||||
content: "\f2c0";
|
content: "\f2c0";
|
||||||
font-family: fontawesome;
|
font-family: fontawesome;
|
||||||
margin-right: .33em;
|
margin-right: .33em;
|
||||||
|
|
|
@ -12,6 +12,7 @@ $ff-ss-serif: 'Source Sans Pro', sans-serif;
|
||||||
$ff-script: 'Dancing Script', 'Brush Script MT', cursive;
|
$ff-script: 'Dancing Script', 'Brush Script MT', cursive;
|
||||||
|
|
||||||
$topLinks_height: 2.5rem;
|
$topLinks_height: 2.5rem;
|
||||||
|
$toplinks-style: none;
|
||||||
|
|
||||||
// font sizes
|
// font sizes
|
||||||
$fz-small: 0.875em;
|
$fz-small: 0.875em;
|
||||||
|
|
|
@ -105,7 +105,7 @@ p {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
.login {
|
.login {
|
||||||
> a {
|
a {
|
||||||
@extend .pk-button;
|
@extend .pk-button;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -64,7 +64,7 @@ div#header-wrapper {
|
||||||
}
|
}
|
||||||
|
|
||||||
div#toplinks {
|
div#toplinks {
|
||||||
span.login a:first-child::before, span.logged-in a:first-child::before {
|
.toplinks--list-item:first-child a::before {
|
||||||
font-family: FontAwesome;
|
font-family: FontAwesome;
|
||||||
content: "\f007"; /* user */
|
content: "\f007"; /* user */
|
||||||
padding-right: 1ex;
|
padding-right: 1ex;
|
||||||
|
|
|
@ -471,7 +471,7 @@ div#toplinks {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
span.logged-in {
|
.logged-in {
|
||||||
background: $body-background;
|
background: $body-background;
|
||||||
border-radius: 1.5em;
|
border-radius: 1.5em;
|
||||||
padding: 1.2ex 1.5em;
|
padding: 1.2ex 1.5em;
|
||||||
|
|
|
@ -594,10 +594,8 @@ div#login-page {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media ($min-desktop-viewport) {
|
@media ($min-desktop-viewport) {
|
||||||
.user-info--separator {
|
.login .toplinks--list-item:not(:last-child)::after {
|
||||||
&::after {
|
content: "/";
|
||||||
content: "/";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -49,3 +49,14 @@ $toplinks-border: null !default;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toplinks--list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
fpeters marked this conversation as resolved
Outdated
|
|||||||
|
&-item {
|
||||||
|
display: inline;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -55,8 +55,13 @@ div#header {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
display: flex;
|
.toplinks--list {
|
||||||
align-items: center;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
&-item {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
a {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@ a:hover {
|
||||||
border: 0;
|
border: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
.logged-in {
|
.logged-in {
|
||||||
a:first-child::after {
|
.toplinks--list-item:first-child a::after {
|
||||||
content: "|";
|
content: "|";
|
||||||
}
|
}
|
||||||
.logout {
|
.logout {
|
||||||
|
|
|
@ -30,18 +30,14 @@ button::-moz-focus-inner {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
width: $width - $nav-menu-side - $pwa-desktop-nav-width;
|
width: $width - $nav-menu-side - $pwa-desktop-nav-width;
|
||||||
a, span {
|
a, span, .toplinks--list-item::after {
|
||||||
color: $darkblue;
|
color: $darkblue;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
font-size: 0.812rem;
|
font-size: 0.812rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
span {
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
a.hello {
|
a.hello {
|
||||||
padding-left: 10px;
|
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -52,6 +48,13 @@ button::-moz-focus-inner {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.toplinks--list-item:first-child::after {
|
||||||
|
margin-left: 0.6em;
|
||||||
|
content: " - ";
|
||||||
|
}
|
||||||
|
.registration {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
a.logout {
|
a.logout {
|
||||||
background: url(img/CROIX.svg) center right no-repeat;
|
background: url(img/CROIX.svg) center right no-repeat;
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
|
|
|
@ -74,7 +74,7 @@ div#header-wrapper {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
span.logged-in {
|
.logged-in {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
a {
|
a {
|
||||||
|
|
|
@ -201,7 +201,7 @@ div.gru-nav {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
ul {
|
ul:not(.toplinks--list) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
> li > a {
|
> li > a {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
|
@ -477,48 +477,49 @@ div#main-content-wrapper,
|
||||||
|
|
||||||
// Toplinks
|
// Toplinks
|
||||||
#toplinks {
|
#toplinks {
|
||||||
// reset
|
|
||||||
position: static;
|
position: static;
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
background: none;
|
|
||||||
box-shadow: none;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
|
@media screen and ($max-mobile-viewport) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
// Keep Space for burger btn
|
// Keep Space for burger btn
|
||||||
margin-right: $nav-btn-width-mobile;
|
margin-right: $nav-btn-width-mobile;
|
||||||
@media ($min-desktop-viewport) {
|
@media ($min-desktop-viewport) {
|
||||||
margin-right: $nav-btn-width-desktop;
|
margin-right: $nav-btn-width-desktop;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toplinks--list {
|
||||||
// layout
|
// layout
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> span {
|
span {
|
||||||
margin-right: $theme-gutter;
|
margin-right: $theme-gutter;
|
||||||
}
|
}
|
||||||
// login / registration & account in 2 lines
|
// login / registration & account in 2 lines
|
||||||
.registration {
|
.registration {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
span.sep, .account-link {
|
.account-link {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// add icon
|
// add icon
|
||||||
> span {
|
.toplinks--list-item-home,
|
||||||
|
.toplinks--sublist--logged-in,
|
||||||
|
.toplinks--sublist--login {
|
||||||
padding-left: calc( 20px + .66em);
|
padding-left: calc( 20px + .66em);
|
||||||
background: no-repeat left center;
|
background: no-repeat left center;
|
||||||
background-size: 20px auto;
|
background-size: 20px auto;
|
||||||
line-height: $fz-h4;
|
line-height: $fz-h4;
|
||||||
&.login {
|
&.toplinks--sublist--login {
|
||||||
background-image: url(img/user.svg);
|
background-image: url(img/user.svg);
|
||||||
}
|
}
|
||||||
&.logged-in {
|
&.toplinks--sublist--logged-in {
|
||||||
background-image: url(img/deconnexion.svg);
|
background-image: url(img/deconnexion.svg);
|
||||||
}
|
}
|
||||||
&.theme-back-home {
|
&.toplinks--list-item-home {
|
||||||
background-image: url(img/home.svg);
|
background-image: url(img/home.svg);
|
||||||
// hide back home link on mobile
|
// hide back home link on mobile
|
||||||
@media (max-width: $very-small-limit) {
|
@media (max-width: $very-small-limit) {
|
||||||
|
@ -527,6 +528,14 @@ div#main-content-wrapper,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toplinks--sublist {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
&--item {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Nav (hamburger in right)
|
// Nav (hamburger in right)
|
||||||
|
|
|
@ -98,3 +98,5 @@ $back-top-layout-position: static (center);
|
||||||
|
|
||||||
$footer-full-width-background: false;
|
$footer-full-width-background: false;
|
||||||
$footer-background: $primary-color;
|
$footer-background: $primary-color;
|
||||||
|
|
||||||
|
$toplinks-style: none;
|
||||||
|
|
|
@ -1,25 +1,30 @@
|
||||||
{% if include_top_links != False %}
|
{% if include_top_links != False %}
|
||||||
<div id="toplinks">
|
<div id="toplinks">
|
||||||
{% block user-info %}
|
<ul class="toplinks--list {{ user.is_authenticated|yesno:"logged-in,login" }}">
|
||||||
{% if user.is_authenticated %}
|
{% block user-info %}
|
||||||
{% block logged-in %}
|
{% if user.is_authenticated %}
|
||||||
<span class="logged-in">
|
{% block logged-in %}
|
||||||
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
|
<li class="toplinks--list-item">
|
||||||
<span class="connected-user">{% block user-info-user-name %}{% include "includes/user-info-user-name.html" %}{% endblock %}</span>{% if account_url %}</a>{% endif %}
|
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
|
||||||
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}{% include "includes/user-info-logout-label.html" %}{% endblock %}</a>
|
<span class="connected-user">{% block user-info-user-name %}{% include "includes/user-info-user-name.html" %}{% endblock %}</span>{% if account_url %}</a>{% endif %}
|
||||||
</span>
|
</li><li class="toplinks--list-item">
|
||||||
fpeters marked this conversation as resolved
Outdated
tjund
commented
L'indentation du fichier est étonnant, c'est pour éviter les espaces mot non maitrisés ? L'indentation du fichier est étonnant, c'est pour éviter les espaces mot non maitrisés ?
fpeters
commented
L'indentation est automatique via djhtml, ça n'est pas toujours idéal mais ça n'en fait plus un sujet de discussion. L'indentation est automatique via djhtml, ça n'est pas toujours idéal mais ça n'en fait plus un sujet de discussion.
|
|||||||
{% endblock %}
|
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}{% include "includes/user-info-logout-label.html" %}{% endblock %}</a>
|
||||||
{% else %}
|
</li>
|
||||||
{% block login %}
|
{% endblock %}
|
||||||
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
|
{% else %}
|
||||||
>{% block user-info-login-label %}{% include "includes/user-info-login-label.html" %}{% endblock %}
|
{% block login %}
|
||||||
{% if registration_url and include_registration_link != False %}
|
<li class="toplinks--list-item">
|
||||||
</a>
|
<a accesskey="2" class="login-link" href="{{ login_url }}"
|
||||||
<span class="user-info--separator"></span>
|
>{% block user-info-login-label %}{% include "includes/user-info-login-label.html" %}{% endblock %}
|
||||||
<a class="registration" href="{{registration_url}}"
|
{% if registration_url and include_registration_link != False %}
|
||||||
>{% block user-info-registration-label %}{% include "includes/user-info-registration-label.html" %}{% endblock %}{% endif %}</a></span>
|
</a>
|
||||||
{% endblock %}
|
</li><li class="toplinks--list-item">
|
||||||
{% endif %}
|
<a class="registration" href="{{registration_url}}"
|
||||||
{% endblock %}
|
>{% block user-info-registration-label %}{% include "includes/user-info-registration-label.html" %}{% endblock %}{% endif %}</a>
|
||||||
fpeters marked this conversation as resolved
Outdated
tjund
commented
reste un à supprimer reste un </span> à supprimer
tjund
commented
`</span>`
fpeters
commented
J'ai supprimé ce span perdu. J'ai supprimé ce span perdu.
|
|||||||
|
</li>
|
||||||
|
{% endblock %}
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
@ -1,25 +1,29 @@
|
||||||
{% extends "includes/user-info.html" %}
|
{% extends "includes/user-info.html" %}
|
||||||
|
|
||||||
{% block logged-in %}
|
{% block logged-in %}
|
||||||
<div class="toplinks--toggled-wrapper">
|
<li class="toplinks--list-item">
|
||||||
<button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
|
<div class="toplinks--toggled-wrapper">
|
||||||
<svg class="toplinks-icon">
|
<button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
|
||||||
<use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
|
<svg class="toplinks-icon">
|
||||||
</svg>
|
<use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
|
||||||
<span class="desktop-only">
|
</svg>
|
||||||
{% include "includes/user-info-user-name.html" %}
|
<span class="desktop-only">
|
||||||
</span>
|
{% include "includes/user-info-user-name.html" %}
|
||||||
</button>
|
</span>
|
||||||
{{ block.super }}
|
</button>
|
||||||
<div class="toplinks--panel-mask"></div>
|
<ul class="toplinks--togglable-menu">
|
||||||
<script>
|
{{ block.super }}
|
||||||
const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
|
</ul>
|
||||||
const toplinksMask = document.querySelector('.toplinks--panel-mask')
|
<div class="toplinks--panel-mask"></div>
|
||||||
toplinksMask.addEventListener('click', function(){
|
<script>
|
||||||
toplinksBtn.click()
|
const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
|
||||||
});
|
const toplinksMask = document.querySelector('.toplinks--panel-mask')
|
||||||
</script>
|
toplinksMask.addEventListener('click', function(){
|
||||||
</div>
|
toplinksBtn.click()
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block user-info-login-label %}
|
{% block user-info-login-label %}
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
{% extends "includes/user-info.html" %}
|
<div id="toplinks">
|
||||||
|
|
||||||
{% block user-info %}
|
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<span class="logged-in">
|
<span class="logged-in">
|
||||||
<span class="connected-user"><a href="{{ idp_account_url }}">{{user.first_name}} {{user.last_name}}</a></span>
|
<span class="connected-user"><a href="{{ idp_account_url }}">{{user.first_name}} {{user.last_name}}</a></span>
|
||||||
<a class="logout" href="{{ logout_url }}">Déconnexion</a>
|
<a class="logout" href="{{ logout_url }}">Déconnexion</a>
|
||||||
</span>
|
</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
</div>
|
||||||
|
|
|
@ -4,11 +4,11 @@
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
|
|
||||||
{% if mel_link %}
|
{% if mel_link %}
|
||||||
<div class="mel-link-wrapper">
|
<li class="mel-link-wrapper">
|
||||||
<a href="{{ mel_link }}">
|
<a href="{{ mel_link }}">
|
||||||
<img src="{{portal_url}}assets/mel:logo" alt="MEL" />
|
<img src="{{portal_url}}assets/mel:logo" alt="MEL" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
@ -2,12 +2,13 @@
|
||||||
|
|
||||||
{% block user-info %}
|
{% block user-info %}
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<a class="hello" href="{{ account_url }}"><span>Bonjour {{ user.first_name }}</span></a><span> -
|
<li class="toplinks--list-item">
|
||||||
</span><a accesskey="o" class="logout" href="{{ logout_url }}">Déconnexion</a>
|
<a class="hello" href="{{ account_url }}"><span>Bonjour {{ user.first_name }}</span></a>
|
||||||
|
</li>
|
||||||
|
<li class="toplinks--list-item"><a accesskey="o" class="logout" href="{{ logout_url }}">Déconnexion</a></li>
|
||||||
{% else %}
|
{% else %}
|
||||||
<a class="login" href="{{ login_url }}">Connexion</a>
|
<li class="toplinks--list-item"><a class="login" href="{{ login_url }}">Connexion</a>
|
||||||
<span class="sep"> - </span>
|
</li><li class="toplinks--list-item"><a class="registration" href="{{ registration_url }}">Inscription</a></li>
|
||||||
<a class="registration" href="{{ registration_url }}">Inscription</a>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a class="home" href="{{ portal_url }}">Accueil</a>
|
<li class="toplinks--list-item"><a class="home" href="{{ portal_url }}">Accueil</a></li>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
{% extends "includes/user-info.html" %}
|
{% extends "includes/user-info.html" %}
|
||||||
|
|
||||||
{% block login %}
|
{% block login %}
|
||||||
<span class="login">
|
{# below stanza modified and moved in first position #}
|
||||||
{# below stanza modified and moved in first position #}
|
{% if registration_url and include_registration_link != False %}
|
||||||
{% if registration_url and include_registration_link != False %}
|
<li class="toplinks--list-item">
|
||||||
<span class="pre-register">Pas de compte ?</span>
|
<span class="pre-register">Pas de compte ?</span>
|
||||||
<span class="user-info--separator"></span>
|
<span class="user-info--separator"></span>
|
||||||
<a class="registration" href="{{registration_url}}">
|
<a class="registration" href="{{registration_url}}">
|
||||||
|
@ -11,12 +11,13 @@
|
||||||
{% include "includes/user-info-registration-label.html" %}
|
{% include "includes/user-info-registration-label.html" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</a>
|
</a>
|
||||||
<span class="user-info--separator"></span>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<li class="toplinks--list-item">
|
||||||
<a accesskey="2" class="login-link" href="{{ login_url }}">
|
<a accesskey="2" class="login-link" href="{{ login_url }}">
|
||||||
{% block user-info-login-label %}
|
{% block user-info-login-label %}
|
||||||
{% include "includes/user-info-login-label.html" %}
|
{% include "includes/user-info-login-label.html" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</li>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -1,22 +1,32 @@
|
||||||
{% extends "includes/user-info.html" %}
|
{% extends "includes/user-info.html" %}
|
||||||
|
|
||||||
{% block user-info %}
|
{% block user-info %}
|
||||||
<span class="theme-back-home">
|
<li class="toplinks--list-item toplinks--list-item-home">
|
||||||
<a href="{{portal_url}}" title="retour à l’accueil">Accueil</a>
|
<span class="theme-back-home">
|
||||||
</span>
|
<a href="{{portal_url}}" title="retour à l’accueil">Accueil</a>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<span class="logged-in">
|
<ul class="toplinks--sublist toplinks--sublist--logged-in">
|
||||||
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
|
<li class="toplinks--sublist-item">
|
||||||
<span class="connected-user">{% block user-info-user-name %}{{user.first_name}} {{user.last_name}}{% endblock %}</span>{% if account_url %}</a>{% endif %}
|
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
|
||||||
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}Déconnexion{% endblock %}</a>
|
<span class="connected-user">{% block user-info-user-name %}{{user.first_name}} {{user.last_name}}{% endblock %}</span>{% if account_url %}</a>{% endif %}
|
||||||
</span>
|
</li>
|
||||||
|
<li class="toplinks--sublist-item">
|
||||||
|
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}Déconnexion{% endblock %}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
|
<ul class="toplinks--sublist toplinks--sublist--login">
|
||||||
>{% block user-info-login-label %}Connexion{% endblock %}
|
<li class="toplinks--sublist-item">
|
||||||
{% if registration_url and include_registration_link != False %}</a>{% endif %}
|
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
|
||||||
<span class="sep">/</span>
|
>{% block user-info-login-label %}Connexion{% endblock %}
|
||||||
{% if registration_url and include_registration_link != False %}<a class="registration" href="{{registration_url}}"
|
{% if registration_url and include_registration_link != False %}</a>{% endif %}
|
||||||
>{% block user-info-registration-label %}Inscription{% endblock %}{% endif %}</a></span>
|
</li>
|
||||||
|
<li class="toplinks--sublist-item">
|
||||||
|
{% if registration_url and include_registration_link != False %}<a class="registration" href="{{registration_url}}"
|
||||||
|
>{% block user-info-registration-label %}Inscription{% endblock %}{% endif %}</a></li>
|
||||||
|
</ul>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue
Le thème cinor-2021 ajoute un icon via
#toplinks::before
Pour éviter un passage à la ligne, il faudrait passer --list en inline-block
display: inline-block
Ça pétera d'autres intégrations graphiques sur l'alignement, ça ne peut pas être fait ainsi.
J'ai adapté cinor-2021.