[upd] css search form

This commit is contained in:
Knah Tsaeb 2015-05-05 14:34:29 +02:00
parent e76cb042fa
commit a90f15a5c2
2 changed files with 69 additions and 4 deletions

View file

@ -190,6 +190,66 @@ pre code {
color: #ffffc9; color: #ffffc9;
} }
.searchform,
.tagfilter {
display :inline-block;
text-align : left;
margin : 0;
padding: 0.3em;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.searchform input:nth-child(1),
.tagfilter input:nth-child(1){
order: 1;
flex: 1 0 auto;
align-self: stretch;
}
.searchform input:nth-child(2),
.tagfilter input:nth-child(2) {
order: 2;
flex: 0 0 20%;
align-self: stretch;
}
.searchform {
width: 70%;
}
.tagfilter {
width: 30%;
margin-left : 0.3em
}
.tagfilter input.bigbutton,
.searchform input.bigbutton,
.addform input.bigbutton {
height : auto;
margin :0;
padding : 0;
}
#pageheader #logo {
height : 50px;
}
#headerform {
max-width:80%;
margin:auto;
white-space:nowrap;
text-align:center;
display: flex;
}
@media handheld, @media handheld,
only screen and (max-width:560px) , only screen and (max-width:560px) ,
only screen and (max-device-width:854px) { only screen and (max-device-width:854px) {

View file

@ -4,12 +4,17 @@
<body> <body>
<div id="pageheader"> <div id="pageheader">
{include="page.header"} {include="page.header"}
<div id="headerform" style="width:100%; white-space:nowrap;"> <div id="headerform">
<form method="GET" class="searchform" name="searchform" style="display:inline;"><input type="text" id="searchform_value" name="searchterm" style="width:30%" value=""> <input type="submit" value="Search" class="bigbutton"></form> <form method="GET" class="searchform" name="searchform">
<form method="GET" class="tagfilter" name="tagfilter" style="display:inline;margin-left:24px;"><input type="text" name="searchtags" id="tagfilter_value" style="width:10%" value=""> <input type="submit" value="Filter by tag" class="bigbutton"></form> <input type="text" id="searchform_value" name="searchterm" value="" placeholder="Search text"/>
<input type="submit" value="Search" class="bigbutton"/>
</form>
<form method="GET" class="tagfilter" name="tagfilter">
<input type="text" name="searchtags" id="tagfilter_value" value="" placeholder="Filter by tag"/>
<input type="submit" value="Filter by tag" class="bigbutton"/>
</form>
</div> </div>
</div> </div>
<div id="linklist"> <div id="linklist">
{include="linklist.paging"} {include="linklist.paging"}