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

This commit is contained in:
Adam Tauber 2016-07-27 02:08:24 +02:00
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

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;
} }

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;
} }
} }

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;
} }
@ -24,9 +24,9 @@
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;
} }

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;
} }
} }

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>

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>

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

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>