ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved tag list scaling

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

35
public_html/css/tag-list.css
View file

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

62
public_html/templates/tag-list.tpl
View file

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