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

Browse Source
This commit is contained in:
Adam Tauber 2016-07-27 02:08:24 +02:00
parent 350a84520d
commit bf92aa3fdd
10 changed files with 56 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
searx/static/themes/oscar/css/logicodev.min.css vendored
View File

Binary file not shown.

BIN
searx/static/themes/oscar/css/pointhi.min.css vendored
View File

Binary file not shown.

21
searx/static/themes/oscar/less/logicodev/advanced.less
View File

@ -1,7 +1,8 @@
#advanced-search-container { #advanced-search-container {
display:none; display: none;
text-align:left; text-align: left;
margin-bottom:1rem; margin-bottom: 1rem;
clear: both;
label, .input-group-addon { label, .input-group-addon {
font-size: 1.2rem; font-size: 1.2rem;
@ -11,9 +12,8 @@
border-right: none; border-right: none;
color: @dark-gray; color: @dark-gray;
padding-bottom: 0.4rem; padding-bottom: 0.4rem;
padding-top: 0.4rem; padding-right: 0.7rem;
padding-left: 0.5rem; padding-left: 0.7rem;
padding-right: 0.5rem;
} }
label:last-child, .input-group-addon:last-child { label:last-child, .input-group-addon:last-child {
@ -26,7 +26,7 @@
input[type="radio"]:checked + label{ input[type="radio"]:checked + label{
color: @black; color: @black;
font-weight:bold; font-weight: bold;
border-bottom: @light-green 5px solid; border-bottom: @light-green 5px solid;
} }
select { select {
@ -59,10 +59,11 @@ Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
} }
#check-advanced:checked ~ #advanced-search-container { #check-advanced:checked ~ #advanced-search-container {
display:block; display: block;
} }
.advanced { .advanced {
margin-top:1rem; padding: 0;
text-align:right; margin-top: 0.3rem;
text-align: right;
} }

13
searx/static/themes/oscar/less/logicodev/search.less
View File

@ -1,18 +1,23 @@
.search_categories, #categories { .search_categories, #categories {
text-transform: capitalize; text-transform: capitalize;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
align-content: stretch;
label, .input-group-addon { label, .input-group-addon {
flex-grow: 1;
flex-basis: auto;
font-size: 1.2rem; font-size: 1.2rem;
font-weight:normal; font-weight: normal;
background-color: white; background-color: white;
border: @mild-gray 1px solid; border: @mild-gray 1px solid;
border-right: none; border-right: none;
color: @dark-gray; color: @dark-gray;
padding-bottom: 0.4rem; padding-bottom: 0.4rem;
padding-top: 0.4rem; padding-top: 0.4rem;
padding-left: 0.5rem; text-align: center;
padding-right: 0.5rem;
} }
label:last-child, .input-group-addon:last-child { label:last-child, .input-group-addon:last-child {
border-right: @mild-gray 1px solid; border-right: @mild-gray 1px solid;
@ -20,7 +25,7 @@
input[type="checkbox"]:checked + label { input[type="checkbox"]:checked + label {
color: @black; color: @black;
font-weight:bold; font-weight: bold;
border-bottom: @light-green 5px solid; border-bottom: @light-green 5px solid;
} }
} }

23
searx/static/themes/oscar/less/pointhi/advanced.less
View File

@ -1,7 +1,8 @@
#advanced-search-container { #advanced-search-container {
display:none; display: none;
text-align:center; text-align: center;
margin-bottom:1rem; margin-bottom: 1rem;
clear: both;
label, .input-group-addon { label, .input-group-addon {
font-size: 1.3rem; font-size: 1.3rem;
@ -11,7 +12,6 @@
border-right: none; border-right: none;
color: #333; color: #333;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
padding-top: 0.8rem;
padding-left: 1.2rem; padding-left: 1.2rem;
padding-right: 1.2rem; padding-right: 1.2rem;
} }
@ -19,14 +19,14 @@
label:last-child, .input-group-addon:last-child { label:last-child, .input-group-addon:last-child {
border-right: #DDD 1px solid; border-right: #DDD 1px solid;
} }
input[type="radio"] { input[type="radio"] {
display: none; display: none;
} }
input[type="radio"]:checked + label{ input[type="radio"]:checked + label {
color: black; color: black;
font-weight:bold; font-weight: bold;
background-color: #EEE; background-color: #EEE;
} }
} }
@ -36,10 +36,11 @@
} }
#check-advanced:checked ~ #advanced-search-container { #check-advanced:checked ~ #advanced-search-container {
display:block; display: block;
} }
.advanced { .advanced {
margin-top:1rem; padding: 0;
text-align:right; margin-top: 0.3rem;
text-align: right;
} }

16
searx/static/themes/oscar/less/pointhi/search.less
View File

@ -1,19 +1,23 @@
.search_categories, #categories { .search_categories, #categories {
text-transform: capitalize; text-transform: capitalize;
margin-bottom:1.5rem; margin-bottom: 1.5rem;
margin-top:1.5rem; margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
align-content: stretch;
label, .input-group-addon { label, .input-group-addon {
flex-grow: 1;
flex-basis: auto;
font-size: 1.3rem; font-size: 1.3rem;
font-weight:normal; font-weight: normal;
background-color: white; background-color: white;
border: #DDD 1px solid; border: #DDD 1px solid;
border-right: none; border-right: none;
color: #333; color: #333;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
padding-top: 0.8rem; padding-top: 0.8rem;
padding-left: 1.2rem; text-align: center;
padding-right: 1.2rem;
} }
label:last-child, .input-group-addon:last-child { label:last-child, .input-group-addon:last-child {
@ -22,7 +26,7 @@
input[type="checkbox"]:checked + label{ input[type="checkbox"]:checked + label{
color: black; color: black;
font-weight:bold; font-weight: bold;
background-color: #EEE; background-color: #EEE;
} }
} }

18
searx/templates/oscar/advanced.html
View File

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

4
searx/templates/oscar/categories.html
View File

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

4
searx/templates/oscar/search.html
View File

@ -6,5 +6,7 @@
<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> <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>
</span> </span>
</div> </div>
{% include 'oscar/advanced.html' %} <div class="input-group col-sm-12 advanced">
{% include 'oscar/advanced.html' %}
</div>
</form><!-- / #search_form_full --> </form><!-- / #search_form_full -->

2
searx/templates/oscar/search_full.html
View File

@ -11,7 +11,7 @@
<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> <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>
</span> </span>
</div> </div>
<div class="input-group col-md-8 col-md-offset-2"> <div class="col-md-8 col-md-offset-2 advanced">
{% include 'oscar/advanced.html' %} {% include 'oscar/advanced.html' %}
</div> </div>