[feat] Added skip link, improved HTML landmark usage
style.less - Added .skip-link & .sr-only base.html - Added skip-link - Added optional skip_link_id block - Added header element - main -> div, as it's a full application container and not the main content 404.html - div -> main index.html - div -> main preferences.html - added main results.html - Added skip_link_id to "results" - Moved search.html to header block - div#results -> main#results - div#sidebar -> aside#sidebar
This commit is contained in:
Denperidge
parent
e86bfa163b
commit
5ca05af8a0
@ -1160,3 +1160,31 @@ summary.title {
|
||||
pre code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
top: auto;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
&:focus {
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
z-index: 6000;
|
||||
|
||||
padding: 0.7rem;
|
||||
background: var(--color-btn-background);
|
||||
color: var(--color-btn-font);
|
||||
}
|
||||
|
||||
&:link, &:visited, &:hover, &:active {
|
||||
color: white; /* Normalise the color */
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{% extends "simple/base.html" %}
|
||||
{% block content %}
|
||||
<div class="center">
|
||||
<main id="main" class="center">
|
||||
<h1>{{ _('Page not found') }}</h1>
|
||||
{% autoescape false %}
|
||||
<p>{{ _('Go to %(search_page)s.', search_page='<a href="{}">{}</a>'.format(url_for('index'), _('search page'))) }}</p>
|
||||
{% endautoescape %}
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
@ -31,7 +31,9 @@
|
||||
<link rel="apple-touch-icon" href="{{ url_for('static', filename='img/favicon.png') }}">
|
||||
</head>
|
||||
<body class="{{ endpoint }}_endpoint" >
|
||||
<main id="main_{{ self._TemplateReference__context.name|replace("simple/", "")|replace(".html", "") }}" class="{{body_class}}">
|
||||
<a class="sr-only skip-link" href="#{% block skip_link_id %}main{% endblock %}">Skip to main content</a>
|
||||
<div id="main_{{ self._TemplateReference__context.name|replace("simple/", "")|replace(".html", "") }}" class="{{body_class}}">
|
||||
<header>
|
||||
{% if errors %}
|
||||
<div class="dialog-error" role="alert">
|
||||
<a href="#" class="close" aria-label="close" title="close">×</a>
|
||||
@ -59,9 +61,10 @@
|
||||
</nav>
|
||||
{% block header %}
|
||||
{% endblock %}
|
||||
</header>
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
<footer>
|
||||
<p>
|
||||
{{ _('Powered by') }} <a href="{{ url_for('info', pagename='about') }}">searxng</a> - {{ searx_version }} — {{ _('a privacy-respecting, open metasearch engine') }}<br>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{% extends "simple/base.html" %}
|
||||
{% from 'simple/icons.html' import icon_big %}
|
||||
{% block content %}
|
||||
<div class="index">
|
||||
<main id="main" class="index">
|
||||
<div class="title"><h1>SearXNG</h1></div>
|
||||
{% include 'simple/simple_search.html' %}
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
@ -152,7 +152,7 @@
|
||||
{%- block linkto_preferences -%}{%- endblock -%}
|
||||
|
||||
{%- block content -%}
|
||||
|
||||
<main id="main">
|
||||
<h1>{{ _('Preferences') }}</h1>
|
||||
|
||||
<form id="search_form" method="post" action="{{ url_for('preferences') }}" autocomplete="off">
|
||||
@ -258,4 +258,5 @@
|
||||
{%- include 'simple/preferences/footer.html' -%}
|
||||
|
||||
</form>{{- '' -}}
|
||||
</main>
|
||||
{%- endblock -%}
|
||||
|
||||
@ -9,22 +9,24 @@
|
||||
{%- endmacro %}
|
||||
{% block title %}{% if query_in_title %}{{- q|e }} - {% endif %}{% endblock %}
|
||||
{% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q|e }}" href="{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&categories={{ selected_categories|join(",") | replace(' ','+') }}&pageno={{ pageno }}&time_range={{ time_range }}&language={{ current_language }}&safesearch={{ safesearch }}&format=rss">{% endblock %}
|
||||
{% block content %}
|
||||
{% block skip_link_id %}results{% endblock %}
|
||||
{% block header %}
|
||||
{% include 'simple/search.html' %}
|
||||
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
{% if results and results|map(attribute='template')|unique|list|count == 1 %}
|
||||
{% set only_template = 'only_template_' + results[0]['template']|default('default')|replace('.html', '') %}
|
||||
{% else %}
|
||||
{% set only_template = '' %}
|
||||
{% endif %}
|
||||
|
||||
<div id="results" class="{{ only_template }}">
|
||||
<main id="results" class="{{ only_template }}">
|
||||
|
||||
{%- if answers -%}
|
||||
{%- include 'simple/elements/answers.html' -%}
|
||||
{%- endif %}
|
||||
|
||||
<div id="sidebar">
|
||||
<aside id="sidebar">
|
||||
|
||||
{%- if number_of_results != '0' -%}
|
||||
<p id="result_count"><small>{{ _('Number of results') }}: {{ number_of_results }}</small></p>
|
||||
@ -56,7 +58,7 @@
|
||||
{%- endif -%}
|
||||
|
||||
<div id="sidebar-end-collapsible"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{%- if corrections -%}
|
||||
{%- include 'simple/elements/corrections.html' -%}
|
||||
@ -145,5 +147,5 @@
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user