浏览代码

[fix] wrap categories on small screens ++ some code formatting - closes #647

Adam Tauber 8 年前
父节点
当前提交
bf92aa3fdd

+ 1
- 1
searx/static/themes/oscar/css/logicodev.min.css
文件差异内容过多而无法显示
查看文件


+ 1
- 1
searx/static/themes/oscar/css/pointhi.min.css
文件差异内容过多而无法显示
查看文件


+ 11
- 10
searx/static/themes/oscar/less/logicodev/advanced.less 查看文件

@@ -1,7 +1,8 @@
1 1
 #advanced-search-container {
2
-    display:none;
3
-    text-align:left;
4
-    margin-bottom:1rem;
2
+    display: none;
3
+    text-align: left;
4
+    margin-bottom: 1rem;
5
+    clear: both;
5 6
 
6 7
     label, .input-group-addon {
7 8
         font-size: 1.2rem;
@@ -11,9 +12,8 @@
11 12
         border-right: none;
12 13
         color: @dark-gray;
13 14
         padding-bottom: 0.4rem;
14
-        padding-top: 0.4rem;
15
-        padding-left: 0.5rem;
16
-        padding-right: 0.5rem;
15
+        padding-right: 0.7rem;
16
+        padding-left: 0.7rem;
17 17
     }
18 18
 
19 19
     label:last-child, .input-group-addon:last-child {
@@ -26,7 +26,7 @@
26 26
 
27 27
     input[type="radio"]:checked + label{
28 28
         color: @black;
29
-        font-weight:bold;
29
+        font-weight: bold;
30 30
         border-bottom: @light-green 5px solid;
31 31
     }
32 32
     select {
@@ -59,10 +59,11 @@ Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
59 59
 }
60 60
 
61 61
 #check-advanced:checked ~ #advanced-search-container {
62
-    display:block;
62
+    display: block;
63 63
 }
64 64
 
65 65
 .advanced {
66
-    margin-top:1rem;
67
-    text-align:right;
66
+    padding: 0;
67
+    margin-top: 0.3rem;
68
+    text-align: right;
68 69
 }

+ 9
- 4
searx/static/themes/oscar/less/logicodev/search.less 查看文件

@@ -1,18 +1,23 @@
1 1
 .search_categories, #categories {
2 2
   text-transform: capitalize;
3 3
   margin-bottom: 0.5rem;
4
+  display: flex;
5
+  flex-wrap: wrap;
6
+  flex-flow: row wrap;
7
+  align-content: stretch;
4 8
 
5 9
   label, .input-group-addon {
10
+    flex-grow: 1;
11
+    flex-basis: auto;
6 12
     font-size: 1.2rem;
7
-    font-weight:normal;
13
+    font-weight: normal;
8 14
     background-color: white;
9 15
     border: @mild-gray 1px solid;
10 16
     border-right: none;
11 17
     color: @dark-gray;
12 18
     padding-bottom: 0.4rem;
13 19
     padding-top: 0.4rem;
14
-    padding-left: 0.5rem;
15
-    padding-right: 0.5rem;
20
+    text-align: center;
16 21
   }
17 22
   label:last-child, .input-group-addon:last-child {
18 23
       border-right: @mild-gray 1px solid;
@@ -20,7 +25,7 @@
20 25
 
21 26
   input[type="checkbox"]:checked + label {
22 27
     color: @black;
23
-    font-weight:bold;
28
+    font-weight: bold;
24 29
     border-bottom: @light-green 5px solid;
25 30
   }
26 31
 }

+ 12
- 11
searx/static/themes/oscar/less/pointhi/advanced.less 查看文件

@@ -1,7 +1,8 @@
1 1
 #advanced-search-container {
2
-    display:none;
3
-    text-align:center;
4
-    margin-bottom:1rem;
2
+    display: none;
3
+    text-align: center;
4
+    margin-bottom: 1rem;
5
+    clear: both;
5 6
 
6 7
     label, .input-group-addon {
7 8
         font-size: 1.3rem;
@@ -11,7 +12,6 @@
11 12
         border-right: none;
12 13
         color: #333;
13 14
         padding-bottom: 0.8rem;
14
-        padding-top: 0.8rem;
15 15
         padding-left: 1.2rem;
16 16
         padding-right: 1.2rem;
17 17
     }
@@ -19,14 +19,14 @@
19 19
     label:last-child, .input-group-addon:last-child {
20 20
         border-right: #DDD 1px solid;
21 21
     }
22
-    
22
+
23 23
     input[type="radio"] {
24 24
         display: none;
25 25
     }
26
-    
27
-    input[type="radio"]:checked + label{
26
+
27
+    input[type="radio"]:checked + label {
28 28
         color: black;
29
-        font-weight:bold;
29
+        font-weight: bold;
30 30
         background-color: #EEE;
31 31
     }
32 32
 }
@@ -36,10 +36,11 @@
36 36
 }
37 37
 
38 38
 #check-advanced:checked ~ #advanced-search-container {
39
-    display:block;
39
+    display: block;
40 40
 }
41 41
 
42 42
 .advanced {
43
-    margin-top:1rem;
44
-    text-align:right;
43
+    padding: 0;
44
+    margin-top: 0.3rem;
45
+    text-align: right;
45 46
 }

+ 10
- 6
searx/static/themes/oscar/less/pointhi/search.less 查看文件

@@ -1,19 +1,23 @@
1 1
 .search_categories, #categories {
2 2
     text-transform: capitalize;
3
-    margin-bottom:1.5rem;
4
-    margin-top:1.5rem;
3
+    margin-bottom: 1.5rem;
4
+    margin-top: 1.5rem;
5
+    display: flex;
6
+    flex-wrap: wrap;
7
+    align-content: stretch;
5 8
 
6 9
     label, .input-group-addon {
10
+        flex-grow: 1;
11
+        flex-basis: auto;
7 12
         font-size: 1.3rem;
8
-        font-weight:normal;
13
+        font-weight: normal;
9 14
         background-color: white;
10 15
         border: #DDD 1px solid;
11 16
         border-right: none;
12 17
         color: #333;
13 18
         padding-bottom: 0.8rem;
14 19
         padding-top: 0.8rem;
15
-        padding-left: 1.2rem;
16
-        padding-right: 1.2rem;
20
+        text-align: center;
17 21
     }
18 22
 
19 23
     label:last-child, .input-group-addon:last-child {
@@ -22,7 +26,7 @@
22 26
 
23 27
     input[type="checkbox"]:checked + label{
24 28
         color: black;
25
-        font-weight:bold;
29
+        font-weight: bold;
26 30
         background-color: #EEE;
27 31
     }
28 32
 }

+ 8
- 10
searx/templates/oscar/advanced.html 查看文件

@@ -1,11 +1,9 @@
1
-<div class="input-group col-sm-12 advanced">
2
-    <input type="checkbox" name="advanced_search" id="check-advanced" {% if advanced_search %} checked="checked"{% endif %}>
3
-    <label for="check-advanced">
4
-        <span class="glyphicon glyphicon-cog"></span>
5
-        {{ _('Advanced settings') }}
6
-    </label>
7
-    <div id="advanced-search-container">
8
-        {% include 'oscar/categories.html' %}
9
-        {% include 'oscar/time-range.html' %}
10
-    </div>
1
+<input type="checkbox" name="advanced_search" id="check-advanced" {% if advanced_search %} checked="checked"{% endif %}>
2
+<label for="check-advanced">
3
+    <span class="glyphicon glyphicon-cog"></span>
4
+    {{ _('Advanced settings') }}
5
+</label>
6
+<div id="advanced-search-container">
7
+    {% include 'oscar/categories.html' %}
8
+    {% include 'oscar/time-range.html' %}
11 9
 </div>

+ 2
- 2
searx/templates/oscar/categories.html 查看文件

@@ -2,13 +2,13 @@
2 2
 {% if rtl %}
3 3
     {% for category in categories | reverse %}
4 4
         <input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />
5
-        <label class="input-group-addon" for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
5
+        <label for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
6 6
         </label>
7 7
     {% endfor %}
8 8
 {% else %}
9 9
     {% for category in categories %}
10 10
         <input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />
11
-        <label class="input-group-addon" for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
11
+        <label for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
12 12
     {% endfor %}
13 13
 {% endif %}
14 14
 </div>

+ 3
- 1
searx/templates/oscar/search.html 查看文件

@@ -6,5 +6,7 @@
6 6
             <button type="submit" class="btn btn-default"><span class="hide_if_nojs">{{ icon('search') }}</span><span class="hidden active_if_nojs">{{ _('Start search') }}</span></button>
7 7
         </span>
8 8
     </div>
9
-    {% include 'oscar/advanced.html' %}
9
+    <div class="input-group col-sm-12 advanced">
10
+        {% include 'oscar/advanced.html' %}
11
+    </div>
10 12
 </form><!-- / #search_form_full -->

+ 1
- 1
searx/templates/oscar/search_full.html 查看文件

@@ -11,7 +11,7 @@
11 11
             <button type="submit" class="btn btn-default input-lg"><span class="hide_if_nojs">{{ icon('search') }}</span><span class="hidden active_if_nojs">{{ _('Start search') }}</span></button>
12 12
         </span>
13 13
     </div>
14
-    <div class="input-group col-md-8 col-md-offset-2">
14
+    <div class="col-md-8 col-md-offset-2  advanced">
15 15
         {% include 'oscar/advanced.html' %}
16 16
     </div>
17 17