Improved tag list scaling

This commit is contained in:
Marcin Kurczewski 2014-10-19 15:25:21 +02:00
parent c852bc156b
commit 8509b5fb00
2 changed files with 55 additions and 42 deletions

View file

@ -1,22 +1,35 @@
#tag-list { #tag-list-wrapper {
min-width: 15em;
max-width: 40em;
margin: 0 auto;
text-align: center; text-align: center;
} }
#tag-list {
width: 100%;
display: inline-block;
margin: 0 auto;
}
@media all and (min-width: 67em) {
#tag-list {
width: 60em;
}
}
@media all and (max-width: 40em) {
#tag-list .implications,
#tag-list .suggestions {
display: none;
}
}
#tag-list form { #tag-list form {
float: left; float: left;
white-space: nowrap; white-space: nowrap;
} }
#tag-list form input { #tag-list form input {
width: 10em; width: 15em;
} }
#tag-list ul { #tag-list ul.order {
float: right; float: right;
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0 -0.5em 0 0;
} }
#tag-list .search:after { #tag-list .search:after {
display: block; display: block;
@ -60,11 +73,9 @@
text-align: center; text-align: center;
} }
@media all and (max-width: 40em) { #tag-list .implications,
#tag-list .implications, #tag-list .suggestions {
#tag-list .suggestions { word-break: break-all;
display: none;
}
} }
.tag-category-character, .tag-category-character,

View file

@ -1,4 +1,5 @@
<div id="tag-list"> <div id="tag-list-wrapper">
<div id="tag-list">
<div class="search"> <div class="search">
<form> <form>
<input type="text" name="query" placeholder="Search tags..."/> <input type="text" name="query" placeholder="Search tags..."/>
@ -31,4 +32,5 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</div> </div>