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,34 +1,36 @@
<div id="tag-list"> <div id="tag-list-wrapper">
<div class="search"> <div id="tag-list">
<form> <div class="search">
<input type="text" name="query" placeholder="Search tags..."/> <form>
<button type="submit" name="search">Search</button> <input type="text" name="query" placeholder="Search tags..."/>
</form> <button type="submit" name="search">Search</button>
</form>
<ul class="order"> <ul class="order">
<li> <li>
<a class="big-button" href="#/tags/order=name,asc">Tags</a> <a class="big-button" href="#/tags/order=name,asc">Tags</a>
</li> </li>
<li> <li>
<a class="big-button" href="#/tags/order=creation_time,desc">Recent</a> <a class="big-button" href="#/tags/order=creation_time,desc">Recent</a>
</li> </li>
<li> <li>
<a class="big-button" href="#/tags/order=usage_count,desc">Popular</a> <a class="big-button" href="#/tags/order=usage_count,desc">Popular</a>
</li> </li>
</ul> </ul>
</div> </div>
<div class="pagination-target"> <div class="pagination-target">
<table class="tags"> <table class="tags">
<thead> <thead>
<th class="name">Tag name</th> <th class="name">Tag name</th>
<th class="implications">Implications</th> <th class="implications">Implications</th>
<th class="suggestions">Suggestions</th> <th class="suggestions">Suggestions</th>
<th class="usages">Usages</th> <th class="usages">Usages</th>
<th class="banned">Usable?</th> <th class="banned">Usable?</th>
</thead> </thead>
<tbody> <tbody>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>