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 { .post-list .search {
margin-bottom: 1em; margin: 0 auto 1em auto;
text-align: left; 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 { .post-list .search:after {
display: block; display: block;
content: ''; content: '';
clear: both; clear: both;
} }
.post-list .search input { .post-list .search input {
width: 20em; max-width: 20em;
} }
.post-list .search button { .post-list .search button {
margin-left: 0.25em; margin-left: 0.25em;

View file

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