a11y: switch top links to ul/li (#40926) #256
|
@ -250,9 +250,9 @@ h3, .h3 {
|
|||
}
|
||||
a:not(.login-link) {
|
||||
@extend %nav-chevron-link;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
a.logout {
|
||||
border-bottom: none;
|
||||
}
|
||||
a.login-link,
|
||||
.toplinks--togglable-btn {
|
||||
|
@ -265,22 +265,27 @@ h3, .h3 {
|
|||
}
|
||||
}
|
||||
}
|
||||
.logged-in {
|
||||
display: block;
|
||||
@include floating-nav;
|
||||
.toplinks--togglable-menu {
|
||||
z-index: 100;
|
||||
top: 100%;
|
||||
@media ($max-mobile-viewport) {
|
||||
right: 0;
|
||||
}
|
||||
@include floating-nav;
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
.toplinks--list-item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.toplinks--panel-mask {
|
||||
@include mask(-1);
|
||||
background-color: transparent;
|
||||
}
|
||||
.toplinks--togglable-btn.toggled {
|
||||
+ .logged-in,
|
||||
+ .toplinks--togglable-menu,
|
||||
~ .toplinks--panel-mask {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
@ -79,8 +79,7 @@ $header-content-margin: 5px;
|
|||
padding: 0;
|
||||
box-shadow: unset;
|
||||
|
||||
.logged-in,
|
||||
.login {
|
||||
.toplinks--list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -100,12 +99,15 @@ $header-content-margin: 5px;
|
|||
top: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
li {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: $header-height;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
font-family: 'FontAwesome';
|
||||
|
@ -115,7 +117,6 @@ $header-content-margin: 5px;
|
|||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login a {
|
||||
text-transform: uppercase;
|
||||
|
|
|
@ -173,7 +173,7 @@ div#toplinks {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.logged-in, .login {
|
||||
.toplinks--list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
@ -181,6 +181,7 @@ div#toplinks {
|
|||
margin: 0 .3rem;
|
||||
}
|
||||
|
||||
&-item,
|
||||
a {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
|
@ -197,6 +198,7 @@ div#toplinks {
|
|||
background: center / contain no-repeat url('/assets/profile:icon');
|
||||
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: "·";
|
||||
}
|
||||
|
|
|
@ -95,17 +95,11 @@
|
|||
|
||||
// User-info
|
||||
#toplinks {
|
||||
// Reset user links
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
// position
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
height: $topLinks_height;
|
||||
padding: 0;
|
||||
line-height: $topLinks_height;
|
||||
|
||||
a {
|
||||
|
@ -115,7 +109,7 @@
|
|||
}
|
||||
|
||||
// user icon
|
||||
&::before {
|
||||
li:first-child::before {
|
||||
content: "\f2c0";
|
||||
font-family: fontawesome;
|
||||
margin-right: .33em;
|
||||
|
|
|
@ -12,6 +12,7 @@ $ff-ss-serif: 'Source Sans Pro', sans-serif;
|
|||
$ff-script: 'Dancing Script', 'Brush Script MT', cursive;
|
||||
|
||||
$topLinks_height: 2.5rem;
|
||||
$toplinks-style: none;
|
||||
|
||||
// font sizes
|
||||
$fz-small: 0.875em;
|
||||
|
|
|
@ -105,7 +105,7 @@ p {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
.login {
|
||||
> a {
|
||||
a {
|
||||
@extend .pk-button;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -64,7 +64,7 @@ div#header-wrapper {
|
|||
}
|
||||
|
||||
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;
|
||||
content: "\f007"; /* user */
|
||||
padding-right: 1ex;
|
||||
|
|
|
@ -471,7 +471,7 @@ div#toplinks {
|
|||
max-width: 100%;
|
||||
margin-top: 1px;
|
||||
}
|
||||
span.logged-in {
|
||||
.logged-in {
|
||||
background: $body-background;
|
||||
border-radius: 1.5em;
|
||||
padding: 1.2ex 1.5em;
|
||||
|
|
|
@ -594,11 +594,9 @@ div#login-page {
|
|||
}
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
.user-info--separator {
|
||||
&::after {
|
||||
.login .toplinks--list-item:not(:last-child)::after {
|
||||
content: "/";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.connected-user {
|
||||
|
|
|
@ -49,3 +49,14 @@ $toplinks-border: null !default;
|
|||
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;
|
||||
right: 1rem;
|
||||
text-transform: uppercase;
|
||||
.toplinks--list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-item {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@ a:hover {
|
|||
border: 0;
|
||||
box-shadow: none;
|
||||
.logged-in {
|
||||
a:first-child::after {
|
||||
.toplinks--list-item:first-child a::after {
|
||||
content: "|";
|
||||
}
|
||||
.logout {
|
||||
|
|
|
@ -30,18 +30,14 @@ button::-moz-focus-inner {
|
|||
box-shadow: none;
|
||||
padding-left: 0.5em;
|
||||
width: $width - $nav-menu-side - $pwa-desktop-nav-width;
|
||||
a, span {
|
||||
a, span, .toplinks--list-item::after {
|
||||
color: $darkblue;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-size: 0.812rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
span {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
a.hello {
|
||||
padding-left: 10px;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
@ -52,6 +48,13 @@ button::-moz-focus-inner {
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.toplinks--list-item:first-child::after {
|
||||
margin-left: 0.6em;
|
||||
content: " - ";
|
||||
}
|
||||
.registration {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
a.logout {
|
||||
background: url(img/CROIX.svg) center right no-repeat;
|
||||
padding-right: 30px;
|
||||
|
|
|
@ -74,7 +74,7 @@ div#header-wrapper {
|
|||
width: 400px;
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
span.logged-in {
|
||||
.logged-in {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
a {
|
||||
|
|
|
@ -201,7 +201,7 @@ div.gru-nav {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
ul {
|
||||
ul:not(.toplinks--list) {
|
||||
margin: 0;
|
||||
> li > a {
|
||||
font-weight: 500;
|
||||
|
|
|
@ -477,48 +477,49 @@ div#main-content-wrapper,
|
|||
|
||||
// Toplinks
|
||||
#toplinks {
|
||||
// reset
|
||||
position: static;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
line-height: 1.25;
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Keep Space for burger btn
|
||||
margin-right: $nav-btn-width-mobile;
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-right: $nav-btn-width-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
.toplinks--list {
|
||||
// layout
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> span {
|
||||
span {
|
||||
margin-right: $theme-gutter;
|
||||
}
|
||||
// login / registration & account in 2 lines
|
||||
.registration {
|
||||
display: block;
|
||||
}
|
||||
span.sep, .account-link {
|
||||
.account-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// add icon
|
||||
> span {
|
||||
.toplinks--list-item-home,
|
||||
.toplinks--sublist--logged-in,
|
||||
.toplinks--sublist--login {
|
||||
padding-left: calc( 20px + .66em);
|
||||
background: no-repeat left center;
|
||||
background-size: 20px auto;
|
||||
line-height: $fz-h4;
|
||||
&.login {
|
||||
&.toplinks--sublist--login {
|
||||
background-image: url(img/user.svg);
|
||||
}
|
||||
&.logged-in {
|
||||
&.toplinks--sublist--logged-in {
|
||||
background-image: url(img/deconnexion.svg);
|
||||
}
|
||||
&.theme-back-home {
|
||||
&.toplinks--list-item-home {
|
||||
background-image: url(img/home.svg);
|
||||
// hide back home link on mobile
|
||||
@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)
|
||||
|
|
|
@ -98,3 +98,5 @@ $back-top-layout-position: static (center);
|
|||
|
||||
$footer-full-width-background: false;
|
||||
$footer-background: $primary-color;
|
||||
|
||||
$toplinks-style: none;
|
||||
|
|
|
@ -1,25 +1,30 @@
|
|||
{% if include_top_links != False %}
|
||||
<div id="toplinks">
|
||||
<ul class="toplinks--list {{ user.is_authenticated|yesno:"logged-in,login" }}">
|
||||
{% block user-info %}
|
||||
{% if user.is_authenticated %}
|
||||
{% block logged-in %}
|
||||
<span class="logged-in">
|
||||
<li class="toplinks--list-item">
|
||||
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
|
||||
<span class="connected-user">{% block user-info-user-name %}{% include "includes/user-info-user-name.html" %}{% endblock %}</span>{% if account_url %}</a>{% endif %}
|
||||
</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.
|
||||
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}{% include "includes/user-info-logout-label.html" %}{% endblock %}</a>
|
||||
</span>
|
||||
</li>
|
||||
{% endblock %}
|
||||
{% else %}
|
||||
{% block login %}
|
||||
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
|
||||
<li class="toplinks--list-item">
|
||||
<a accesskey="2" class="login-link" href="{{ login_url }}"
|
||||
>{% block user-info-login-label %}{% include "includes/user-info-login-label.html" %}{% endblock %}
|
||||
{% if registration_url and include_registration_link != False %}
|
||||
</a>
|
||||
<span class="user-info--separator"></span>
|
||||
</li><li class="toplinks--list-item">
|
||||
<a class="registration" href="{{registration_url}}"
|
||||
>{% block user-info-registration-label %}{% include "includes/user-info-registration-label.html" %}{% endblock %}{% endif %}</a></span>
|
||||
>{% 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>
|
||||
{% endif %}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{% extends "includes/user-info.html" %}
|
||||
|
||||
{% block logged-in %}
|
||||
<li class="toplinks--list-item">
|
||||
<div class="toplinks--toggled-wrapper">
|
||||
<button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
|
||||
<svg class="toplinks-icon">
|
||||
|
@ -10,7 +11,9 @@
|
|||
{% include "includes/user-info-user-name.html" %}
|
||||
</span>
|
||||
</button>
|
||||
<ul class="toplinks--togglable-menu">
|
||||
{{ block.super }}
|
||||
</ul>
|
||||
<div class="toplinks--panel-mask"></div>
|
||||
<script>
|
||||
const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
|
||||
|
@ -20,6 +23,7 @@
|
|||
});
|
||||
</script>
|
||||
</div>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block user-info-login-label %}
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
{% extends "includes/user-info.html" %}
|
||||
|
||||
{% block user-info %}
|
||||
<div id="toplinks">
|
||||
{% if user.is_authenticated %}
|
||||
<span class="logged-in">
|
||||
<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>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
{{ block.super }}
|
||||
|
||||
{% if mel_link %}
|
||||
<div class="mel-link-wrapper">
|
||||
<li class="mel-link-wrapper">
|
||||
<a href="{{ mel_link }}">
|
||||
<img src="{{portal_url}}assets/mel:logo" alt="MEL" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
@ -2,12 +2,13 @@
|
|||
|
||||
{% block user-info %}
|
||||
{% if user.is_authenticated %}
|
||||
<a class="hello" href="{{ account_url }}"><span>Bonjour {{ user.first_name }}</span></a><span> -
|
||||
</span><a accesskey="o" class="logout" href="{{ logout_url }}">Déconnexion</a>
|
||||
<li class="toplinks--list-item">
|
||||
<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 %}
|
||||
<a class="login" href="{{ login_url }}">Connexion</a>
|
||||
<span class="sep"> - </span>
|
||||
<a class="registration" href="{{ registration_url }}">Inscription</a>
|
||||
<li class="toplinks--list-item"><a class="login" href="{{ login_url }}">Connexion</a>
|
||||
</li><li class="toplinks--list-item"><a class="registration" href="{{ registration_url }}">Inscription</a></li>
|
||||
{% endif %}
|
||||
<a class="home" href="{{ portal_url }}">Accueil</a>
|
||||
<li class="toplinks--list-item"><a class="home" href="{{ portal_url }}">Accueil</a></li>
|
||||
{% endblock %}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
{% extends "includes/user-info.html" %}
|
||||
|
||||
{% block login %}
|
||||
<span class="login">
|
||||
{# below stanza modified and moved in first position #}
|
||||
{% if registration_url and include_registration_link != False %}
|
||||
<li class="toplinks--list-item">
|
||||
<span class="pre-register">Pas de compte ?</span>
|
||||
<span class="user-info--separator"></span>
|
||||
<a class="registration" href="{{registration_url}}">
|
||||
|
@ -11,12 +11,13 @@
|
|||
{% include "includes/user-info-registration-label.html" %}
|
||||
{% endblock %}
|
||||
</a>
|
||||
<span class="user-info--separator"></span>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="toplinks--list-item">
|
||||
<a accesskey="2" class="login-link" href="{{ login_url }}">
|
||||
{% block user-info-login-label %}
|
||||
{% include "includes/user-info-login-label.html" %}
|
||||
{% endblock %}
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
{% endblock %}
|
||||
|
|
|
@ -1,22 +1,32 @@
|
|||
{% extends "includes/user-info.html" %}
|
||||
|
||||
{% block user-info %}
|
||||
<li class="toplinks--list-item toplinks--list-item-home">
|
||||
<span class="theme-back-home">
|
||||
<a href="{{portal_url}}" title="retour à l’accueil">Accueil</a>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{% if user.is_authenticated %}
|
||||
<span class="logged-in">
|
||||
<ul class="toplinks--sublist toplinks--sublist--logged-in">
|
||||
<li class="toplinks--sublist-item">
|
||||
{% if account_url %}<a class="account-link" href="{{ account_url }}">{% endif %}
|
||||
<span class="connected-user">{% block user-info-user-name %}{{user.first_name}} {{user.last_name}}{% endblock %}</span>{% if account_url %}</a>{% endif %}
|
||||
</li>
|
||||
<li class="toplinks--sublist-item">
|
||||
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}Déconnexion{% endblock %}</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<ul class="toplinks--sublist toplinks--sublist--login">
|
||||
<li class="toplinks--sublist-item">
|
||||
<span class="login"><a accesskey="2" class="login-link" href="{{ login_url }}"
|
||||
>{% block user-info-login-label %}Connexion{% endblock %}
|
||||
{% if registration_url and include_registration_link != False %}</a>{% endif %}
|
||||
<span class="sep">/</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></span>
|
||||
>{% block user-info-registration-label %}Inscription{% endblock %}{% endif %}</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% 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.