[IMP] search-form: improve ui & fix bug on mobile
Bug fix on mobile that was displaying the button on a new line. Smaller input/button sizes to win some space for breadcrumb nav. Vertical alignment of search-form.
This commit is contained in:
parent
c5b9af9192
commit
52e49eda47
@ -29,6 +29,20 @@
|
||||
color: @gray-lighter;
|
||||
}
|
||||
|
||||
> .o_sub_nav #o_sub-menu #searchbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> form {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
> .form-control {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .o_sub_nav #o_sub-menu .o_breadcrumb {
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
@ -288,7 +302,7 @@ main.index {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: @card_margin-bottom;
|
||||
min-height: @card_min-height;
|
||||
padding-top: 56%;
|
||||
background-color: @doc_paper;
|
||||
will-change: transform;
|
||||
.deep-2;
|
||||
@ -319,12 +333,13 @@ main.index {
|
||||
figcaption {
|
||||
.opacity(1);
|
||||
display: block;
|
||||
font-weight: @fw_regular;
|
||||
font-weight: @fw_bold;
|
||||
font-family: @headings-font-family;
|
||||
color: @headings-color;
|
||||
margin: 0;
|
||||
background-color: white;
|
||||
font-size: 1.2em;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
.o-position-absolute(0);
|
||||
@ -369,30 +384,28 @@ main.index {
|
||||
}
|
||||
|
||||
.card.top {
|
||||
padding: 10% 0 8%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0 0 2%;
|
||||
|
||||
.o-gradient();
|
||||
.animation(fadeIn 1s);
|
||||
.box-shadow(none);
|
||||
.transform-origin(50% 0px 0px);
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) {
|
||||
padding-top: 12%;
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
padding: 12% 0 5%;
|
||||
}
|
||||
|
||||
#wrap.index & {
|
||||
padding: 0 0 4%;
|
||||
|
||||
@media screen and (min-width: @screen-sm-min) {
|
||||
padding-top: 12%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: @screen-lg-min) {
|
||||
padding-top: 8%;
|
||||
}
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
padding: 10% 0 2%;
|
||||
}
|
||||
@media screen and (min-width: @screen-lg-min) {
|
||||
padding: 8% 0 4%;
|
||||
}
|
||||
|
||||
|
||||
&.stacked{
|
||||
background:transparent;
|
||||
|
@ -10,11 +10,11 @@
|
||||
|
||||
{%- if pagename != "search" and builder != "singlehtml" %}
|
||||
<li id="searchbox" style="display: none; margin: 0 0 0 10px;" role="search">
|
||||
<form class="search form-inline" action="{{ pathto('search') }}" method="get">
|
||||
<form class="search form-inline input-group-sm" action="{{ pathto('search') }}" method="get">
|
||||
<input type="text" class="form-control" name="q" id="q" placeholder="Search..." />
|
||||
<input type="hidden" name="area" value="default" />
|
||||
<input type="hidden" name="check_keywords" value="yes" />
|
||||
<button type="submit" value="Go" class="btn btn-default">Go</button>
|
||||
<button type="submit" value="Go" class="btn btn-default btn-sm">Go</button>
|
||||
</form>
|
||||
</li>
|
||||
<script type="text/javascript">$('#searchbox').show(0);</script>
|
||||
|
Loading…
Reference in New Issue
Block a user