mirror of
https://github.com/searxng/searxng.git
synced 2024-11-23 11:21:00 +00:00
[fix] wrap categories on small screens ++ some code formatting - closes #647
This commit is contained in:
parent
350a84520d
commit
bf92aa3fdd
10 changed files with 58 additions and 47 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,7 +1,8 @@
|
|||
#advanced-search-container {
|
||||
display:none;
|
||||
text-align:left;
|
||||
margin-bottom:1rem;
|
||||
display: none;
|
||||
text-align: left;
|
||||
margin-bottom: 1rem;
|
||||
clear: both;
|
||||
|
||||
label, .input-group-addon {
|
||||
font-size: 1.2rem;
|
||||
|
@ -11,9 +12,8 @@
|
|||
border-right: none;
|
||||
color: @dark-gray;
|
||||
padding-bottom: 0.4rem;
|
||||
padding-top: 0.4rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-right: 0.7rem;
|
||||
padding-left: 0.7rem;
|
||||
}
|
||||
|
||||
label:last-child, .input-group-addon:last-child {
|
||||
|
@ -26,7 +26,7 @@
|
|||
|
||||
input[type="radio"]:checked + label{
|
||||
color: @black;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
border-bottom: @light-green 5px solid;
|
||||
}
|
||||
select {
|
||||
|
@ -59,10 +59,11 @@ Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
|
|||
}
|
||||
|
||||
#check-advanced:checked ~ #advanced-search-container {
|
||||
display:block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.advanced {
|
||||
margin-top:1rem;
|
||||
text-align:right;
|
||||
padding: 0;
|
||||
margin-top: 0.3rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
@ -1,18 +1,23 @@
|
|||
.search_categories, #categories {
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-flow: row wrap;
|
||||
align-content: stretch;
|
||||
|
||||
label, .input-group-addon {
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
font-size: 1.2rem;
|
||||
font-weight:normal;
|
||||
font-weight: normal;
|
||||
background-color: white;
|
||||
border: @mild-gray 1px solid;
|
||||
border-right: none;
|
||||
color: @dark-gray;
|
||||
padding-bottom: 0.4rem;
|
||||
padding-top: 0.4rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
label:last-child, .input-group-addon:last-child {
|
||||
border-right: @mild-gray 1px solid;
|
||||
|
@ -20,7 +25,7 @@
|
|||
|
||||
input[type="checkbox"]:checked + label {
|
||||
color: @black;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
border-bottom: @light-green 5px solid;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
#advanced-search-container {
|
||||
display:none;
|
||||
text-align:center;
|
||||
margin-bottom:1rem;
|
||||
display: none;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
clear: both;
|
||||
|
||||
label, .input-group-addon {
|
||||
font-size: 1.3rem;
|
||||
|
@ -11,7 +12,6 @@
|
|||
border-right: none;
|
||||
color: #333;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-top: 0.8rem;
|
||||
padding-left: 1.2rem;
|
||||
padding-right: 1.2rem;
|
||||
}
|
||||
|
@ -19,14 +19,14 @@
|
|||
label:last-child, .input-group-addon:last-child {
|
||||
border-right: #DDD 1px solid;
|
||||
}
|
||||
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label{
|
||||
|
||||
input[type="radio"]:checked + label {
|
||||
color: black;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
background-color: #EEE;
|
||||
}
|
||||
}
|
||||
|
@ -36,10 +36,11 @@
|
|||
}
|
||||
|
||||
#check-advanced:checked ~ #advanced-search-container {
|
||||
display:block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.advanced {
|
||||
margin-top:1rem;
|
||||
text-align:right;
|
||||
padding: 0;
|
||||
margin-top: 0.3rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
@ -1,19 +1,23 @@
|
|||
.search_categories, #categories {
|
||||
text-transform: capitalize;
|
||||
margin-bottom:1.5rem;
|
||||
margin-top:1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: stretch;
|
||||
|
||||
label, .input-group-addon {
|
||||
flex-grow: 1;
|
||||
flex-basis: auto;
|
||||
font-size: 1.3rem;
|
||||
font-weight:normal;
|
||||
font-weight: normal;
|
||||
background-color: white;
|
||||
border: #DDD 1px solid;
|
||||
border-right: none;
|
||||
color: #333;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-top: 0.8rem;
|
||||
padding-left: 1.2rem;
|
||||
padding-right: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label:last-child, .input-group-addon:last-child {
|
||||
|
@ -22,7 +26,7 @@
|
|||
|
||||
input[type="checkbox"]:checked + label{
|
||||
color: black;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
background-color: #EEE;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 %}>
|
||||
<label for="check-advanced">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
{{ _('Advanced settings') }}
|
||||
</label>
|
||||
<div id="advanced-search-container">
|
||||
{% include 'oscar/categories.html' %}
|
||||
{% include 'oscar/time-range.html' %}
|
||||
</div>
|
||||
<input type="checkbox" name="advanced_search" id="check-advanced" {% if advanced_search %} checked="checked"{% endif %}>
|
||||
<label for="check-advanced">
|
||||
<span class="glyphicon glyphicon-cog"></span>
|
||||
{{ _('Advanced settings') }}
|
||||
</label>
|
||||
<div id="advanced-search-container">
|
||||
{% include 'oscar/categories.html' %}
|
||||
{% include 'oscar/time-range.html' %}
|
||||
</div>
|
||||
|
|
|
@ -2,13 +2,13 @@
|
|||
{% if rtl %}
|
||||
{% 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 %} />
|
||||
<label class="input-group-addon" for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
|
||||
<label for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
|
||||
</label>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for category in categories %}
|
||||
<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 %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
@ -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>
|
||||
</span>
|
||||
</div>
|
||||
{% include 'oscar/advanced.html' %}
|
||||
<div class="input-group col-sm-12 advanced">
|
||||
{% include 'oscar/advanced.html' %}
|
||||
</div>
|
||||
</form><!-- / #search_form_full -->
|
||||
|
|
|
@ -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>
|
||||
</span>
|
||||
</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' %}
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in a new issue