[enh] add no-js support

* image results have url, which can be clicked
* preferences full functionable without js
pull/1/head
Thomas Pointhuber 10 years ago
parent b4829891f9
commit 25312c53e1

@ -31,6 +31,12 @@
searx.method = "{{ method or 'POST' }}"; searx.method = "{{ method or 'POST' }}";
searx.autocompleter = {% if autocomplete %}true{% else %}false{% endif %}; searx.autocompleter = {% if autocomplete %}true{% else %}false{% endif %};
</script> </script>
<noscript>
<style type="text/css">
.tab-content > .active_if_nojs {display: block;}
.hide_if_nojs {display: none !important;overflow:none !important;}
</style>
</noscript>
</head> </head>
<body> <body>
<div class="container"> <div class="container">

@ -7,12 +7,15 @@
<form method="post" action="{{ url_for('preferences') }}" id="search_form"> <form method="post" action="{{ url_for('preferences') }}" id="search_form">
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="margin-bottom:20px;"> <ul class="nav nav-tabs hide_if_nojs" role="tablist" style="margin-bottom:20px;">
<li class="active"><a href="#tab_general" role="tab" data-toggle="tab">{{ _('General') }}</a></li> <li class="active"><a href="#tab_general" role="tab" data-toggle="tab">{{ _('General') }}</a></li>
<li><a href="#tab_engine" role="tab" data-toggle="tab">{{ _('Engines') }}</a></li> <li><a href="#tab_engine" role="tab" data-toggle="tab">{{ _('Engines') }}</a></li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
<noscript>
<h3>{{ _('General') }}</h3>
</noscript>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="tab_general"> <div class="tab-pane active" id="tab_general">
<fieldset> <fieldset>
@ -83,20 +86,25 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div class="tab-pane" id="tab_engine"> <div class="tab-pane active_if_nojs" id="tab_engine">
<!-- Nav tabs --> <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="margin-bottom:20px;"> <ul class="nav nav-tabs hide_if_nojs" role="tablist" style="margin-bottom:20px;">
{% for (categ,search_engines) in categs %} {% for (categ,search_engines) in categs %}
<li{% if loop.first %} class="active"{% endif %}><a href="#tab_engine_{{ categ|replace(' ', '_') }}" role="tab" data-toggle="tab">{{ _(categ) }}</a></li> <li{% if loop.first %} class="active"{% endif %}><a href="#tab_engine_{{ categ|replace(' ', '_') }}" role="tab" data-toggle="tab">{{ _(categ) }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<noscript>
<h3>{{ _('Engines') }}</h3>
</noscript>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <div class="tab-content">
{% for (categ,search_engines) in categs %} {% for (categ,search_engines) in categs %}
<div class="tab-pane{% if loop.first %} active{% endif %}" id="tab_engine_{{ categ|replace(' ', '_') }}"> <noscript><label>{{ _(categ) }}</label>
</noscript>
<div class="tab-pane{% if loop.first %} active{% endif %} active_if_nojs" id="tab_engine_{{ categ|replace(' ', '_') }}">
<div class="container-fluid"> <div class="container-fluid">
<fieldset> <fieldset>
{% for search_engine in search_engines %} {% for search_engine in search_engines %}

@ -1,4 +1,4 @@
<a href="#" data-toggle="modal" data-target="#modal-{{ index }}"> <a href="{{ result.img_src }}" data-toggle="modal" data-target="#modal-{{ index }}">
<img src="{{ result.img_src }}" alt="{{ result.title|e }}" class="img-thumbnail"> <img src="{{ result.img_src }}" alt="{{ result.title|e }}" class="img-thumbnail">
</a> </a>

Loading…
Cancel
Save