Improved post search appearance on small screens

This commit is contained in:
Marcin Kurczewski 2014-10-19 13:12:11 +02:00
parent 614834c99c
commit 6788be8993
2 changed files with 13 additions and 4 deletions

View file

@ -3,16 +3,26 @@
}
.post-list .search {
margin-bottom: 1em;
margin: 0 auto 1em auto;
text-align: left;
}
@media all and (min-width: 57em) {
.post-list .search {
min-width: 50em;
}
}
@media all and (max-width: 57em) {
.post-list .search {
min-width: 100%;
}
}
.post-list .search:after {
display: block;
content: '';
clear: both;
}
.post-list .search input {
width: 20em;
max-width: 20em;
}
.post-list .search button {
margin-left: 0.25em;

View file

@ -158,8 +158,7 @@ App.Presenters.PostListPresenter = function(
if ($firstPost.length === 0) {
return;
}
$el.find('.search').css('margin-left', $firstPost.offset().left - $list.offset().left);
$el.find('.search').css('margin-right', $list.width() - ($lastPost.offset().left - $list.offset().left + $lastPost.width()));
$el.find('.search').width($lastPost.offset().left + $lastPost.width() - $firstPost.offset().left);
}
function postTagButtonClicked(e) {