jandieman
/
searxng
mirror of https://github.com/searxng/searxng.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[simple] introduce page_with_header.html template 

Previously the preferences & stats templates contained the markup:

<a href="{{ url_for('index') }}"><h1><span>SearXNG</span></h1></a>

There are many things wrong with this:

1. the markup was duplicated

2. the CSS needed to be changed whenever a new page wanted to use this
   header (since the CSS used page-specific selectors)

3. h1 should be reserved for the actual page title
   (e.g. Preferences or Engine stats)

4. the image was set via CSS which also set:

       span { visibility: hidden; }

   which however removes the alternative text from the accessibility
   tree (meaning screen readers will ignore it).

This commit fixes all these problems.
This commit is contained in:
Martin Fischer 2022-01-30 09:39:21 +01:00
parent 2a6d84dab5
commit 6f0ec7e58f
6 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
searx/static/themes/simple/src/less/style.less
View File

@ -79,9 +79,7 @@ main {
flex: 1; flex: 1;
} }
#main_preferences, .page_with_header {
#main_about,
#main_stats {
margin: 2em auto; margin: 2em auto;
width: 85em; width: 85em;
} }
@ -101,16 +99,8 @@ footer {
} }
} }
#main_preferences h1, .page_with_header .logo {
#main_stats h1 { height: 40px;
background: url('../img/searxng.png') no-repeat;
background-size: contain;
min-height: 40px;
margin: 0 auto;
span {
visibility: hidden;
}
} }
input[type="submit"], input[type="submit"],
@ -647,9 +637,7 @@ article[data-vim-selected].category-social {
} }
@media screen and (max-width: @tablet) { @media screen and (max-width: @tablet) {
#main_preferences, .page_with_header {
#main_about,
#main_stats {
margin: 2rem 0.5rem; margin: 2rem 0.5rem;
width: auto; width: auto;
} }

2
searx/templates/simple/about.html
View File

@ -1,4 +1,4 @@
{% extends 'simple/base.html' %} {% extends 'simple/page_with_header.html' %}
{% block content %} {% block content %}
{{ help.about | safe }} {{ help.about | safe }}
{% include "__common__/aboutextend.html" ignore missing %} {% include "__common__/aboutextend.html" ignore missing %}

4
searx/templates/simple/base.html
View File

@ -35,7 +35,7 @@
<link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml"> <link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
</head> </head>
<body class="{{ endpoint }}_endpoint" > <body class="{{ endpoint }}_endpoint" >
<main id="main_{{ self._TemplateReference__context.name|replace("simple/", "")|replace(".html", "") }}"> <main id="main_{{ self._TemplateReference__context.name|replace("simple/", "")|replace(".html", "") }}" class="{{body_class}}">
{% if errors %} {% if errors %}
<div class="dialog-error" role="alert"> <div class="dialog-error" role="alert">
<a href="#" class="close" aria-label="close" title="close">×</a> <a href="#" class="close" aria-label="close" title="close">×</a>
@ -47,6 +47,8 @@
</div> </div>
{% endif %} {% endif %}
{% block header %}
{% endblock %}
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</main> </main>

5
searx/templates/simple/page_with_header.html Normal file
View File

@ -0,0 +1,5 @@
{% set body_class = "page_with_header" %}
{% extends "simple/base.html" %}
{% block header %}
<a href="{{ url_for('index') }}"><img class="logo" src="{{ url_for('static', filename='img/searxng.png') }}" alt="SearXNG"></a>
{% endblock %}

7
searx/templates/simple/preferences.html
View File

@ -1,7 +1,7 @@
{% from 'simple/macros.html' import tabs_open, tabs_close, tab_header, tab_footer, checkbox_onoff, checkbox %} {% from 'simple/macros.html' import tabs_open, tabs_close, tab_header, tab_footer, checkbox_onoff, checkbox %}
{% from 'simple/icons.html' import icon_big %} {% from 'simple/icons.html' import icon_big %}
{% extends "simple/base.html" %} {% extends "simple/page_with_header.html" %}
{%- macro plugin_preferences(section) -%} {%- macro plugin_preferences(section) -%}
{%- for plugin in plugins -%} {%- for plugin in plugins -%}
@ -95,10 +95,7 @@
{% block head %} {% endblock %} {% block head %} {% endblock %}
{% block content %} {% block content %}
<h1>{{ _('Preferences') }}</h1>
<a href="{{ url_for('index') }}"><h1><span>SearXNG</span></h1></a>
<h2>{{ _('Preferences') }}</h2>
<form id="search_form" method="post" action="{{ url_for('preferences') }}"> <form id="search_form" method="post" action="{{ url_for('preferences') }}">

7
searx/templates/simple/stats.html
View File

@ -1,7 +1,7 @@
{% from 'simple/icons.html' import icon_big %} {% from 'simple/icons.html' import icon_big %}
{% from '__common__/new_issue.html' import new_issue with context %} {% from '__common__/new_issue.html' import new_issue with context %}
{% extends "simple/base.html" %} {% extends "simple/page_with_header.html" %}
{%- macro th_sort(column_order, column_name) -%} {%- macro th_sort(column_order, column_name) -%}
{% if selected_engine_name %} {% if selected_engine_name %}
@ -15,10 +15,7 @@
{% block head %} {% endblock %} {% block head %} {% endblock %}
{% block content %} {% block content %}
<h1>{% if selected_engine_name %}<a href="{{ url_for('stats') }}">{% endif %}{{ _('Engine stats') }}{% if selected_engine_name %}</a> - {{ selected_engine_name }}{% endif %}</h1>
<a href="{{ url_for('index') }}"><h1><span>SearXNG</span></h1></a>
<h2>{% if selected_engine_name %}<a href="{{ url_for('stats') }}">{% endif %}{{ _('Engine stats') }}{% if selected_engine_name %}</a> - {{ selected_engine_name }}{% endif %}</h2>
{% if not engine_stats.get('time') %} {% if not engine_stats.get('time') %}
{{ _('There is currently no data available. ') }} {{ _('There is currently no data available. ') }}