Browse Source

[enh] add no-js support

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

+ 6 - 0
searx/templates/oscar/base.html

@@ -31,6 +31,12 @@
         searx.method = "{{ method or 'POST' }}";
         searx.autocompleter = {% if autocomplete %}true{% else %}false{% endif %};
     </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>
 <body>
     <div class="container">

+ 12 - 4
searx/templates/oscar/preferences.html

@@ -7,12 +7,15 @@
     <form method="post" action="{{ url_for('preferences') }}" id="search_form">
 
     <!-- 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><a href="#tab_engine" role="tab" data-toggle="tab">{{ _('Engines') }}</a></li>
     </ul>
 
     <!-- Tab panes -->
+    <noscript>
+        <h3>{{ _('General') }}</h3>
+    </noscript>
     <div class="tab-content">
         <div class="tab-pane active" id="tab_general">
             <fieldset>
@@ -83,20 +86,25 @@
             </div>
             </fieldset>
         </div>
-        <div class="tab-pane" id="tab_engine">
+        <div class="tab-pane active_if_nojs" id="tab_engine">
         
             <!-- 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 %}
                 <li{% if loop.first %} class="active"{% endif %}><a href="#tab_engine_{{ categ|replace(' ', '_') }}" role="tab" data-toggle="tab">{{ _(categ) }}</a></li>
                 {% endfor %}
             </ul>
         
+            <noscript>
+                <h3>{{ _('Engines') }}</h3>
+            </noscript>
         
             <!-- Tab panes -->
             <div class="tab-content">
                 {% 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">
                     <fieldset>
                     {% for search_engine in search_engines %}

+ 1 - 1
searx/templates/oscar/result_templates/images.html

@@ -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">
 </a>