entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

a11y: switch top links to ul/li (#40926)
gitea/publik-base-theme/pipeline/head This commit looks good Details

This commit is contained in:
Frédéric Péters 2023-05-07 11:59:58 +02:00
parent 6b9aee0a99
commit f29730f88a
25 changed files with 181 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/alpes-maritimes-2022/_custom.scss
View File

@ -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;
} }

29
static/amiens-metropole/_header.scss
View File

@ -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;
} }
} }

4
static/armentieres/_header.scss
View File

@ -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;
} }
} }
} }

2
static/bethune-bruay/_custom.scss
View File

@ -128,6 +128,6 @@ div.timetable-widget {
} }
} }
.user-info--separator::after { .toplinks--list-item:not(:last-child)::after {
content: "·"; content: "·";
} }

8
static/cinor-2021/_custom.scss
View File

@ -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;

1
static/cinor-2021/_vars.scss
View File

@ -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;

2
static/clermont-ici/_custom.scss
View File

@ -105,7 +105,7 @@ p {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.login { .login {
> a { a {
@extend .pk-button; @extend .pk-button;
} }
} }

2
static/clisson-sevre-et-maine-agglo/_custom.scss
View File

@ -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;

2
static/grandlyon-glc/_custom.scss
View File

@ -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;

6
static/haute-garonne-cd31/_custom.scss
View File

@ -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: "/";
}
} }
} }

11
static/includes/_user-info.scss
View File

@ -49,3 +49,14 @@ $toplinks-border: null !default;
padding-right: 0; padding-right: 0;
} }
} }
.toplinks--list {
margin: 0;
padding: 0;
list-style: none;
&-item {
display: inline;
margin: 0;
padding: 0;
}
}

9
static/lille-metropole-2022/_custom.scss
View File

@ -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;
} }

2
static/loire-atlantique-cd44/_custom.scss
View File

@ -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 {

13
static/metz-metropole-2019/_custom.scss
View File

@ -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;

2
static/saone-et-loire-cd71-2019/_custom.scss
View File

@ -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 {

2
static/toulouse-2022/_custom.scss
View File

@ -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;

33
static/villeneuve-dascq/_custom.scss
View File

@ -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)

2
static/villeneuve-dascq/_vars.scss
View File

@ -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;

47
templates/includes/user-info.html
View File

@ -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">
{% 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>
</li>
{% endblock %}
{% endif %}
{% endblock %}
</ul>
</div> </div>
{% endif %} {% endif %}

42
templates/variants/alpes-maritimes-2022/includes/user-info.html
View File

@ -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 %}

6
templates/variants/grandlyon-glc/includes/user-info.html
View File

@ -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&eacute;connexion</a> <a class="logout" href="{{ logout_url }}">D&eacute;connexion</a>
</span> </span>
{% endif %} {% endif %}
{% endblock %} </div>

4
templates/variants/lille-metropole-2022/includes/user-info.html
View File

@ -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 %}

13
templates/variants/metz-metropole-2019/includes/user-info.html
View File

@ -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 %}

13
templates/variants/toulouse-2022/includes/user-info.html
View File

@ -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 %}

38
templates/variants/villeneuve-dascq/includes/user-info.html
View File

@ -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 %}