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,20 +99,22 @@ $header-content-margin: 5px;
|
|||
top: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
li {
|
||||
flex: 1 1 50%;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
font-family: 'FontAwesome';
|
||||
font-size: 2.5em;
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: $header-height;
|
||||
&::before {
|
||||
content: ' ';
|
||||
font-family: 'FontAwesome';
|
||||
font-size: 2.5em;
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,10 +594,8 @@ div#login-page {
|
|||
}
|
||||
|
||||
@media ($min-desktop-viewport) {
|
||||
.user-info--separator {
|
||||
&::after {
|
||||
content: "/";
|
||||
}
|
||||
.login .toplinks--list-item:not(:last-child)::after {
|
||||
content: "/";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -49,3 +49,14 @@ $toplinks-border: null !default;
|
|||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toplinks--list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
&-item {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -55,8 +55,13 @@ div#header {
|
|||
text-overflow: ellipsis;
|
||||
right: 1rem;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.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">
|
||||
{% block user-info %}
|
||||
{% if user.is_authenticated %}
|
||||
{% block logged-in %}
|
||||
<span class="logged-in">
|
||||
{% 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 %}
|
||||
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}{% include "includes/user-info-logout-label.html" %}{% endblock %}</a>
|
||||
</span>
|
||||
{% endblock %}
|
||||
{% else %}
|
||||
{% block login %}
|
||||
<span class="login"><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>
|
||||
<a class="registration" href="{{registration_url}}"
|
||||
>{% block user-info-registration-label %}{% include "includes/user-info-registration-label.html" %}{% endblock %}{% endif %}</a></span>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
<ul class="toplinks--list {{ user.is_authenticated|yesno:"logged-in,login" }}">
|
||||
{% block user-info %}
|
||||
{% if user.is_authenticated %}
|
||||
{% block 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">
|
||||
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}{% include "includes/user-info-logout-label.html" %}{% endblock %}</a>
|
||||
</li>
|
||||
{% endblock %}
|
||||
{% else %}
|
||||
{% block login %}
|
||||
<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>
|
||||
</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>
|
||||
</li>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
@ -1,25 +1,29 @@
|
|||
{% extends "includes/user-info.html" %}
|
||||
|
||||
{% block logged-in %}
|
||||
<div class="toplinks--toggled-wrapper">
|
||||
<button aria-label="{% include "includes/user-info-user-name.html" %}" class="toplinks--togglable-btn togglable">
|
||||
<svg class="toplinks-icon">
|
||||
<use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
|
||||
</svg>
|
||||
<span class="desktop-only">
|
||||
{% include "includes/user-info-user-name.html" %}
|
||||
</span>
|
||||
</button>
|
||||
{{ block.super }}
|
||||
<div class="toplinks--panel-mask"></div>
|
||||
<script>
|
||||
const toplinksBtn = document.querySelector('.toplinks--togglable-btn')
|
||||
const toplinksMask = document.querySelector('.toplinks--panel-mask')
|
||||
toplinksMask.addEventListener('click', function(){
|
||||
toplinksBtn.click()
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<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">
|
||||
<use href="{{site_base}}/static/{{css_variant}}/img/toplinks-icon.svg#icon" />
|
||||
</svg>
|
||||
<span class="desktop-only">
|
||||
{% 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')
|
||||
const toplinksMask = document.querySelector('.toplinks--panel-mask')
|
||||
toplinksMask.addEventListener('click', function(){
|
||||
toplinksBtn.click()
|
||||
});
|
||||
</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 %}
|
||||
{# 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>
|
||||
{% endif %}
|
||||
</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 %}
|
||||
<span class="theme-back-home">
|
||||
<a href="{{portal_url}}" title="retour à l’accueil">Accueil</a>
|
||||
</span>
|
||||
<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">
|
||||
{% 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 %}
|
||||
<a accesskey="o" class="logout" href="{{ logout_url }}">{% block user-info-logout-label %}Déconnexion{% endblock %}</a>
|
||||
</span>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<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>
|
||||
{% if registration_url and include_registration_link != False %}<a class="registration" href="{{registration_url}}"
|
||||
>{% block user-info-registration-label %}Inscription{% endblock %}{% endif %}</a></span>
|
||||
<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 %}
|
||||
</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 %}
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in New Issue