forked from zaclys/searxng
		
	[simple] checkboxes can get the focusable
Do note that checkboxes in the engine tab are displayed reversed.
See: 3408d061aa/searx/templates/simple/preferences.html (L313)
A checkbox for an engine is checked when the engine is disabled.
			
			
This commit is contained in:
		
							parent
							
								
									0ddcc12474
								
							
						
					
					
						commit
						3d9e48b84e
					
				
					 6 changed files with 220 additions and 168 deletions
				
			
		|  | @ -13,3 +13,7 @@ | |||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| input.checkbox-onoff[type="checkbox"]::before { | ||||
|   transition: left 0.25s; | ||||
| } | ||||
|  |  | |||
|  | @ -96,10 +96,13 @@ | |||
|   --color-toolkit-select-border: #ddd; | ||||
|   --color-toolkit-select-background-hover: #bbb; | ||||
|   --color-toolkit-input-text-font: #222; | ||||
|   --color-toolkit-checkbox-onoff-background: #ddd; | ||||
|   --color-toolkit-checkbox-onoff-label-background: #3050ff; | ||||
|   --color-toolkit-checkbox-onoff-checked-background: #aaa; | ||||
|   --color-toolkit-checkbox-label-background: #fff; | ||||
|   --color-toolkit-checkbox-onoff-off-background: #ddd; | ||||
|   --color-toolkit-checkbox-onoff-on-background: #ddd; | ||||
|   --color-toolkit-checkbox-onoff-on-mark-background: #3050ff; | ||||
|   --color-toolkit-checkbox-onoff-on-mark-color: #fff; | ||||
|   --color-toolkit-checkbox-onoff-off-mark-background: #aaa; | ||||
|   --color-toolkit-checkbox-onoff-off-mark-color: #fff; | ||||
|   --color-toolkit-checkbox-label-background: #ddd; | ||||
|   --color-toolkit-checkbox-label-border: #ddd; | ||||
|   --color-toolkit-checkbox-input-border: #3050ff; | ||||
|   --color-toolkit-engine-tooltip-border: #ddd; | ||||
|  | @ -199,10 +202,13 @@ | |||
|   --color-toolkit-select-border: #555; | ||||
|   --color-toolkit-select-background-hover: #333; | ||||
|   --color-toolkit-input-text-font: #fff; | ||||
|   --color-toolkit-checkbox-onoff-background: #3c3b31; | ||||
|   --color-toolkit-checkbox-onoff-label-background: #58f; | ||||
|   --color-toolkit-checkbox-onoff-checked-background: #ddd; | ||||
|   --color-toolkit-checkbox-label-background: #fff; | ||||
|   --color-toolkit-checkbox-onoff-off-background: #3c3b31; | ||||
|   --color-toolkit-checkbox-onoff-on-background: #3c3b31; | ||||
|   --color-toolkit-checkbox-onoff-on-mark-background: #58f; | ||||
|   --color-toolkit-checkbox-onoff-on-mark-color: #222; | ||||
|   --color-toolkit-checkbox-onoff-off-mark-background: #ddd; | ||||
|   --color-toolkit-checkbox-onoff-off-mark-color: #222; | ||||
|   --color-toolkit-checkbox-label-background: #222; | ||||
|   --color-toolkit-checkbox-label-border: #333; | ||||
|   --color-toolkit-checkbox-input-border: #58f; | ||||
|   --color-toolkit-engine-tooltip-border: #333; | ||||
|  |  | |||
|  | @ -80,6 +80,55 @@ | |||
|     text-align: center; | ||||
|   } | ||||
| 
 | ||||
|   .category { | ||||
|     .ltr-margin-right(0.5rem); | ||||
| 
 | ||||
|     label { | ||||
|       border: 2px solid transparent; | ||||
|       padding: 0.2rem 0.4rem; | ||||
|       .rounded-corners-tiny; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .category input[type="checkbox"]:checked + label { | ||||
|     border: 2px solid var(--color-categories-item-border-selected); | ||||
|   } | ||||
| 
 | ||||
|   table.table_engines { | ||||
|     td { | ||||
|       height: 3.75rem; | ||||
|     } | ||||
| 
 | ||||
|     th.name { | ||||
|       /* stylelint-disable */ | ||||
|       label { | ||||
|         cursor: pointer; | ||||
|       } | ||||
|       /* stylelint-enable */ | ||||
| 
 | ||||
|       .engine-tooltip { | ||||
|         margin-top: 1.8rem; | ||||
|         .ltr-left(calc((100% - 85em) / 2 + 10em)); | ||||
|         max-width: 40rem; | ||||
| 
 | ||||
|         .engine-description { | ||||
|           margin-top: 0.5rem; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
| 
 | ||||
|     .engine-group { | ||||
|       .ltr-text-align-left(); | ||||
|       font-weight: normal; | ||||
|       background: var(--color-settings-engine-group-background); | ||||
|     } | ||||
| 
 | ||||
|     .name, | ||||
|     .shortcut { | ||||
|       .ltr-text-align-left(); | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   table.cookies { | ||||
|     width: 100%; | ||||
|     direction: ltr; | ||||
|  | @ -109,25 +158,6 @@ | |||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .category { | ||||
|     .ltr-margin-right(0.5rem); | ||||
| 
 | ||||
|     label { | ||||
|       border: 2px solid transparent; | ||||
|       padding: 0.2rem 0.4rem; | ||||
|       .rounded-corners-tiny; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .category input[type="checkbox"]:checked + label { | ||||
|     border: 2px solid var(--color-categories-item-border-selected); | ||||
|   } | ||||
| 
 | ||||
|   .name, | ||||
|   .shortcut { | ||||
|     .ltr-text-align-left(); | ||||
|   } | ||||
| 
 | ||||
|   .preferences_back { | ||||
|     background: none repeat scroll 0 0 var(--color-btn-background); | ||||
|     color: var(--color-btn-font); | ||||
|  | @ -153,24 +183,6 @@ | |||
|       width: 100%; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   th.name { | ||||
|     .engine-tooltip { | ||||
|       margin-top: 1.8rem; | ||||
|       .ltr-left(calc((100% - 85em) / 2 + 10em)); | ||||
|       max-width: 40rem; | ||||
| 
 | ||||
|       .engine-description { | ||||
|         margin-top: 0.5rem; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   .engine-group { | ||||
|     .ltr-text-align-left(); | ||||
|     font-weight: normal; | ||||
|     background: var(--color-settings-engine-group-background); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| @media screen and (max-width: @tablet) { | ||||
|  |  | |||
|  | @ -378,92 +378,126 @@ select { | |||
| } | ||||
| 
 | ||||
| /* -- checkbox-onoff -- */ | ||||
| @supports (border-radius: 50px) { | ||||
|   .checkbox-onoff { | ||||
|     display: inline-block; | ||||
|     width: 40px; | ||||
|     height: 10px; | ||||
|     background: var(--color-toolkit-checkbox-onoff-background); | ||||
|     margin: 8px 1rem; | ||||
|     position: relative; | ||||
|     border-radius: 50px; | ||||
| input.checkbox-onoff[type="checkbox"] { | ||||
|   -webkit-appearance: none; | ||||
|   -moz-appearance: none; | ||||
|   appearance: none; | ||||
|   cursor: pointer; | ||||
|   display: inline-block; | ||||
|   width: 2.5em; | ||||
|   height: 0.7em; | ||||
|   box-shadow: none !important; | ||||
|   margin: 0 16px; | ||||
|   border-radius: 10px; | ||||
|   position: relative; | ||||
| 
 | ||||
|     label { | ||||
|       display: block; | ||||
|       width: 20px; | ||||
|       height: 20px; | ||||
|       position: absolute; | ||||
|       top: -5px; | ||||
|       cursor: pointer; | ||||
|       border-radius: 50px; | ||||
|       transition: all 0.4s ease; | ||||
|       left: 27px; | ||||
|       background-color: var(--color-toolkit-checkbox-onoff-label-background); | ||||
|     } | ||||
|   /* focus & hover */ | ||||
|   &:focus, | ||||
|   &:hover { | ||||
|     outline: none; | ||||
|   } | ||||
| 
 | ||||
|     input[type=checkbox] { | ||||
|       visibility: hidden; | ||||
|   &:focus::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     width: 3.5em; | ||||
|     height: 1.65em; | ||||
|     border: 1px solid var(--color-btn-background); | ||||
|     border-radius: 12px; | ||||
|     box-shadow: var(--color-btn-background) 0 0 3px; | ||||
|     z-index: 10000; | ||||
|     top: -0.55em; | ||||
|     left: -0.6em; | ||||
|   } | ||||
| 
 | ||||
|       &:checked + label { | ||||
|         left: -5px; | ||||
|         background: var(--color-toolkit-checkbox-onoff-checked-background); | ||||
|       } | ||||
|     } | ||||
|   &::before { | ||||
|     position: absolute; | ||||
|     top: -0.5em; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|     font-size: 0.75em; | ||||
|     width: 1.875em; | ||||
|     height: 1.875em; | ||||
|     border-radius: 50%; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| /* check mark | ||||
| reversed-checkbox displays unchecked checkedboxes as checked, and vice versa. | ||||
| see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313 | ||||
| */ | ||||
| input.checkbox-onoff[type="checkbox"], | ||||
| .reversed-checkbox input.checkbox-onoff[type="checkbox"]:checked { | ||||
|   background: var(--color-toolkit-checkbox-onoff-off-background); | ||||
| 
 | ||||
|   &::before { | ||||
|     left: -0.5em; | ||||
|     content: "\2715"; | ||||
|     color: var(--color-toolkit-checkbox-onoff-off-mark-color); | ||||
|     background: var(--color-toolkit-checkbox-onoff-off-mark-background); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| input.checkbox-onoff[type="checkbox"]:checked, | ||||
| .reversed-checkbox input.checkbox-onoff[type="checkbox"] { | ||||
|   background: var(--color-toolkit-checkbox-onoff-on-background); | ||||
| 
 | ||||
|   &::before { | ||||
|     left: calc(100% - 1.5em); | ||||
|     content: "\2713"; | ||||
|     color: var(--color-toolkit-checkbox-onoff-on-mark-color); | ||||
|     background: var(--color-toolkit-checkbox-onoff-on-mark-background); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| /* -- checkbox -- */ | ||||
| @supports (transform: rotate(-45deg)) { | ||||
|   .checkbox { | ||||
|   input[type=checkbox]:not(.checkbox-onoff) { | ||||
|     -webkit-appearance: none; | ||||
|     -moz-appearance: none; | ||||
|     appearance: none; | ||||
| 
 | ||||
|     width: 20px; | ||||
|     height: 20px; | ||||
|     cursor: pointer; | ||||
|     position: relative; | ||||
|     margin: 20px auto; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|     border: 2px solid var(--color-toolkit-checkbox-input-border); | ||||
|     .rounded-corners(0.3em); | ||||
| 
 | ||||
|     label { | ||||
|       width: 20px; | ||||
|       height: 20px; | ||||
|       cursor: pointer; | ||||
|     &::after { | ||||
|       content: ''; | ||||
|       width: 9px; | ||||
|       height: 5px; | ||||
|       position: absolute; | ||||
|       top: 0; | ||||
|       left: 0; | ||||
|       background: var(--color-toolkit-checkbox-label-background); | ||||
|       .rounded-corners; | ||||
| 
 | ||||
|       &::after { | ||||
|         content: ''; | ||||
|         width: 9px; | ||||
|         height: 5px; | ||||
|         position: absolute; | ||||
|         top: 4px; | ||||
|         left: 4px; | ||||
|         border: 3px solid var(--color-toolkit-checkbox-label-border); | ||||
|         border-top: none; | ||||
|         border-right: none; | ||||
|         background: transparent; | ||||
|         opacity: 0; | ||||
|         transform: rotate(-45deg); | ||||
|       } | ||||
|       top: 3px; | ||||
|       left: 2px; | ||||
|       border: 3px solid var(--color-toolkit-checkbox-label-border); | ||||
|       border-top: none; | ||||
|       border-right: none; | ||||
|       background: transparent; | ||||
|       opacity: 0; | ||||
|       transform: rotate(-45deg); | ||||
|     } | ||||
| 
 | ||||
|     input[type=checkbox] { | ||||
|       visibility: hidden; | ||||
| 
 | ||||
|       &:checked + label::after { | ||||
|         border-color: var(--color-toolkit-checkbox-input-border); | ||||
|         opacity: 1; | ||||
|       } | ||||
|     &:checked::after { | ||||
|       border-color: var(--color-toolkit-checkbox-input-border); | ||||
|       opacity: 1; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|     // disabled : can''t be focused, show only the check mark | ||||
|     input[disabled] + label { | ||||
|       background-color: transparent !important; | ||||
|       cursor: inherit; | ||||
|     } | ||||
|   // disabled : can't be focused, show only the check mark | ||||
|   input[type=checkbox][disabled]:not(.checkbox-onoff) { | ||||
|     border: inherit; | ||||
|     background-color: transparent !important; | ||||
|     cursor: inherit; | ||||
|   } | ||||
| 
 | ||||
|     // if not checked and possible to checked then display a "light" check mark on hover | ||||
|     input:not(:checked):not([readonly]):not([disabled]) + label:hover::after { | ||||
|       opacity: 0.5; | ||||
|     } | ||||
|   // if not checked and possible to checked then display a "light" check mark on hover | ||||
|   input.checkbox[type=checkbox]:not(:checked):not([disabled]):not(.checkbox-onoff):hover::after { | ||||
|     opacity: 0.5; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
|  |  | |||
|  | @ -72,19 +72,13 @@ | |||
| {%- endmacro -%} | ||||
| 
 | ||||
| {%- macro checkbox_onoff(name, checked) -%} | ||||
| <div class="checkbox-onoff">{{- '' -}} | ||||
|     <input type="checkbox" value="None" id="{{ name }}" name="{{ name }}" {% if checked %}checked{% endif %}/>{{- '' -}} | ||||
|     <label for="{{ name }}"></label>{{- '' -}} | ||||
| </div> | ||||
|   <input type="checkbox" name="{{ name }}" id="{{ name }}" value="None" class="checkbox-onoff" {% if checked %}checked{% endif %} /> | ||||
| {%- endmacro -%} | ||||
| 
 | ||||
| {%- macro checkbox(name, checked, readonly, disabled) -%} | ||||
| <div class="checkbox">{{- '' -}} | ||||
|     {%- if checked == '?' -%} | ||||
|       {{ icon_small('warning') }} | ||||
|     {%- else -%} | ||||
|       <input type="checkbox" value="None" id="{{ name }}" name="{{ name }}" {% if checked %}checked{% endif %}{% if readonly %} readonly="readonly" {% endif %}{% if disabled %} disabled="disabled" {% endif %}/>{{- '' -}} | ||||
|       <label for="{{ name }}"></label>{{- '' -}} | ||||
|     {%- endif -%} | ||||
| </div> | ||||
| {%- macro checkbox(name, checked, disabled) -%} | ||||
| {%- if checked == '?' -%} | ||||
|   {{- icon_small('warning') -}} | ||||
| {%- else -%} | ||||
|   <input type="checkbox"{% if name %} name="{{ name }}"{% endif %} value="None"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %} /> | ||||
| {%- endif -%} | ||||
| {%- endmacro -%} | ||||
|  |  | |||
|  | @ -23,13 +23,13 @@ | |||
| {% if search_engine.about is defined %} | ||||
| {% set about = search_engine.about %} | ||||
| <div class="engine-tooltip" role="tooltip">{{- "" -}} | ||||
|     <p class="engine-description"></p> | ||||
|     <p class="engine-description"></p>{{- "" -}} | ||||
|     <p><a href="{{about.website}}" rel="noreferrer">{{about.website}}</a></p> | ||||
|     {%- if about.wikidata_id -%}<p><a href="https://www.wikidata.org/wiki/{{about.wikidata_id}}" rel="noreferrer">wikidata.org/wiki/{{about.wikidata_id}}</a></p>{%- endif -%} | ||||
|     {%- if search_engine.enable_http %}<p>{{ icon_big('exclamation-sign', 'No HTTPS') }}{{ _('No HTTPS')}}</p>{% endif -%} | ||||
|     {%- if reliabilities.get(search_engine.name, {}).errors or reliabilities.get(search_engine.name, {}).checker -%} | ||||
|     <a href="{{ url_for('stats', engine=search_engine.name|e) }}" title="{{ _('View error logs and submit a bug report') }}"> | ||||
|       {{ _('View error logs and submit a bug report') }} | ||||
|       {{ _('View error logs and submit a bug report') -}} | ||||
|     </a> | ||||
|     {%- endif -%} | ||||
| 
 | ||||
|  | @ -89,7 +89,7 @@ | |||
|     </div>{{- "" -}} | ||||
| </td> | ||||
| {%- else -%} | ||||
| <td class="{{ label }}"><span>{{ r }}</span></td> | ||||
| <td class="{{ label }}">{% if r %}<span>{{ r }}</span>{% endif %}</td> | ||||
| {%- endif -%} | ||||
| {%- endmacro -%} | ||||
| 
 | ||||
|  | @ -98,7 +98,7 @@ | |||
| {% block content %} | ||||
| <h1>{{ _('Preferences') }}</h1> | ||||
| 
 | ||||
| <form id="search_form" method="post" action="{{ url_for('preferences') }}" autocomplete="off"> | ||||
| <form id="search_form" method="post" action="{{ url_for('preferences') }}" autocomplete="off" class="reversed-checkbox"> | ||||
| 
 | ||||
| {{ tabs_open() }} | ||||
| 
 | ||||
|  | @ -182,9 +182,9 @@ | |||
|       <legend>{{ _('Interface language') }}</legend> | ||||
|       <p class="value"> | ||||
|         <select name='locale'> | ||||
|           {% for locale_id,locale_name in locales.items() | sort %} | ||||
|           {%- for locale_id,locale_name in locales.items() | sort -%} | ||||
|           <option value="{{ locale_id }}" {% if locale_id == current_locale %}selected="selected"{% endif %}>{{ locale_name }}</option> | ||||
|           {% endfor %} | ||||
|           {%- endfor -%} | ||||
|         </select> | ||||
|       </p> | ||||
|       <div class="description">{{ _('Change the language of the layout') }}</div> | ||||
|  | @ -290,17 +290,17 @@ | |||
|       <p>{{_('This tab does not show up for search results, but you can search the engines listed here via bangs.')}}</p> | ||||
|     {% endif %} | ||||
|     <div class="scrollx"> | ||||
|     <table class="striped"> | ||||
|       <tr> | ||||
|         <th class="engine_checkbox">{{ _("Allow") }}</th> | ||||
|         <th class="name">{{ _("Engine name") }}</th> | ||||
|         <th class="shortcut">{{ _("Shortcut") }}</th> | ||||
|         <th>{{ _("Supports selected language") }}</th> | ||||
|         <th>{{ _("SafeSearch") }}</th> | ||||
|         <th>{{ _("Time range") }}</th> | ||||
|         <th>{{ _("Response time") }}</th> | ||||
|         <th>{{ _("Max time") }}</th> | ||||
|         <th>{{ _("Reliability") }}</th> | ||||
|     <table class="striped table_engines"> | ||||
|       <tr>{{- "" -}} | ||||
|         <th class="engine_checkbox">{{ _("Allow") }}</th>{{- "" -}} | ||||
|         <th class="name">{{ _("Engine name") }}</th>{{- "" -}} | ||||
|         <th class="shortcut">{{ _("Shortcut") }}</th>{{- "" -}} | ||||
|         <th>{{ _("Supports selected language") }}</th>{{- "" -}} | ||||
|         <th>{{ _("SafeSearch") }}</th>{{- "" -}} | ||||
|         <th>{{ _("Time range") }}</th>{{- "" -}} | ||||
|         <th>{{ _("Response time") }}</th>{{- "" -}} | ||||
|         <th>{{ _("Max time") }}</th>{{- "" -}} | ||||
|         <th>{{ _("Reliability") }}</th>{{- "" -}} | ||||
|       </tr> | ||||
|       {% for group, engines in engines_by_category[categ] | group_engines_in_tab %} | ||||
|       {% if loop.length > 1 %} | ||||
|  | @ -309,22 +309,24 @@ | |||
|       {% for search_engine in engines %} | ||||
|       {% if not search_engine.private %} | ||||
|       {% set engine_id = 'engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_') %} | ||||
|       <tr> | ||||
|         <td class="engine_checkbox">{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}</td> | ||||
|         <th class="name" data-engine-name="{{ search_engine.name }}">{% if search_engine.enable_http %}{{ icon_big('warning', 'No HTTPS') }}{% endif %} | ||||
|           {{ search_engine.name }} | ||||
|           {%- if search_engine.about and search_engine.about.language %} | ||||
|       <tr>{{- "" -}} | ||||
|         <td>{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}</td>{{- "" -}} | ||||
|         <th class="name" data-engine-name="{{ search_engine.name }}">{% if search_engine.enable_http %}{{ icon_big('warning', 'No HTTPS') }}{% endif -%} | ||||
|           <label for="{{ engine_id }}"> | ||||
|             {{- search_engine.name -}} | ||||
|             {%- if search_engine.about and search_engine.about.language -%} | ||||
|               ({{search_engine.about.language | upper}}) | ||||
|           {%- endif %} | ||||
|           {{ engine_about(search_engine) }} | ||||
|         </th> | ||||
|         <td class="shortcut">{{ shortcuts[search_engine.name] }}</td> | ||||
|         <td>{{ checkbox(engine_id + '_supported_languages', supports[search_engine.name]['supports_selected_language'], true, true) }}</td> | ||||
|         <td>{{ checkbox(engine_id + '_safesearch', supports[search_engine.name]['safesearch'], true, true) }}</td> | ||||
|         <td>{{ checkbox(engine_id + '_time_range_support', supports[search_engine.name]['time_range_support'], true, true) }}</td> | ||||
|         {{ engine_time(search_engine.name) }} | ||||
|         <td class="{{ 'danger' if stats[search_engine.name]['warn_timeout'] else '' }}">{{ search_engine.timeout }}</td> | ||||
|         {{ engine_reliability(search_engine.name) }} | ||||
|             {%- endif -%} | ||||
|           </label> | ||||
|           {{- engine_about(search_engine) -}} | ||||
|         </th>{{- "" -}} | ||||
|         <td class="shortcut">{{ shortcuts[search_engine.name] }}</td>{{- "" -}} | ||||
|         <td>{{ checkbox(None, supports[search_engine.name]['supports_selected_language'], true) }}</td>{{- "" -}} | ||||
|         <td>{{ checkbox(None, supports[search_engine.name]['safesearch'], true) }}</td>{{- "" -}} | ||||
|         <td>{{ checkbox(None, supports[search_engine.name]['time_range_support'], true) }}</td>{{- "" -}} | ||||
|         {{- engine_time(search_engine.name) -}} | ||||
|         <td class="{{ 'danger' if stats[search_engine.name]['warn_timeout'] else '' }}">{{ search_engine.timeout }}</td>{{- "" -}} | ||||
|         {{ engine_reliability(search_engine.name) -}} | ||||
|       </tr> | ||||
|       {% endif %} | ||||
|       {% endfor %} | ||||
|  | @ -377,20 +379,20 @@ | |||
|   {{ tab_footer() }} | ||||
| 
 | ||||
|   {{ tab_header('maintab', 'cookies', _('Cookies')) }} | ||||
|      <p class="text-muted"> | ||||
|         {{ _('This is the list of cookies and their values SearXNG is storing on your computer.') }}<br /> | ||||
|         {{ _('With that list, you can assess SearXNG transparency.') }}<br /> | ||||
|      <p class="text-muted">{{- "" -}} | ||||
|         {{- _('This is the list of cookies and their values SearXNG is storing on your computer.') }}<br />{{- "" -}} | ||||
|         {{- _('With that list, you can assess SearXNG transparency.') }}<br />{{- "" -}} | ||||
|      </p> | ||||
|      {% if cookies %} | ||||
|      <table class="cookies"> | ||||
|        <tr> | ||||
|           <th>{{ _('Cookie name') }}</th> | ||||
|           <th>{{ _('Value') }}</th> | ||||
|        <tr>{{- "" -}} | ||||
|           <th>{{ _('Cookie name') }}</th>{{- "" -}} | ||||
|           <th>{{ _('Value') }}</th>{{- "" -}} | ||||
|        </tr> | ||||
|        {% for cookie in cookies %} | ||||
|        <tr> | ||||
|           <td>{{ cookie }}</td> | ||||
|           <td>{{ cookies[cookie] }}</td> | ||||
|        <tr>{{- "" -}} | ||||
|           <td>{{ cookie }}</td>{{- "" -}} | ||||
|           <td>{{ cookies[cookie] }}</td>{{- "" -}} | ||||
|        </tr> | ||||
|        {% endfor %} | ||||
|      </table> | ||||
|  |  | |||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 Alexandre Flament
						Alexandre Flament