diff options
| -rw-r--r-- | app/scss/components.scss | 59 | ||||
| -rw-r--r-- | app/scss/page.scss | 8 | ||||
| -rw-r--r-- | app/templates/packages/list.html | 37 |
3 files changed, 75 insertions, 29 deletions
diff --git a/app/scss/components.scss b/app/scss/components.scss index c55a539..f23ba4a 100644 --- a/app/scss/components.scss +++ b/app/scss/components.scss @@ -22,10 +22,20 @@ a:hover { .box { border-radius: 5px; margin: 15px 0; + padding: 0; +} + +.box h3 { + margin: 0; + padding: 1em 0.5em 0.5em 15px; + border-bottom: 1px solid #444; +} + +.box p, .box table { + margin: 1em; } .box_grey { - padding: 10px; background: #333; border: 1px solid #444; } @@ -217,3 +227,50 @@ table.fancyTable tfoot td { .EDITOR a, a.EDITOR { color: #b6f; } + +/* + Aside +*/ + +.asideright { + float: right; + margin: 0 0 0 15px; + max-width: 300px; +} + +.outsidecontainer { + position: absolute; + right: 102%; + top: 0; + width: intrinsic; /* Safari/WebKit uses a non-standard name */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +} + +@media (max-width: 1490px) { + .outsidecontainer { + display: none; + } +} + +.flatlist, .flatlist li { + list-style: none; + padding: 0; + margin: 0; +} + +.flatlist li { + display: block; +} + +.flatlist a { + display: block; + padding: 0.5em 20px; + color: #ddd; + font-weight: normal; +} + +.flatlist a:hover { + background: #444; + text-decoration: none; +} diff --git a/app/scss/page.scss b/app/scss/page.scss index 5a482c1..1127954 100644 --- a/app/scss/page.scss +++ b/app/scss/page.scss @@ -16,6 +16,8 @@ html, body { main { padding: 7px 0; + position: relative; + box-sizing: border-box; } header h1, header p, header form { @@ -44,9 +46,3 @@ footer a { footer a:hover { color: #bbb; } - -.asideright { - float: right; - margin: 0 0 0 15px; - max-width: 300px; -} diff --git a/app/templates/packages/list.html b/app/templates/packages/list.html index 5242018..79426fd 100644 --- a/app/templates/packages/list.html +++ b/app/templates/packages/list.html @@ -11,27 +11,20 @@ <input type="submit" value="Search" /> </form> - <ul> - {% for p in packages %} - <li><a href="{{ p.getDetailsURL() }}"> - {{ p.title }} by {{ p.author.display_name }} - </a></li> - {% else %} - <li><i>No packages available</i></ul> - {% endfor %} - </ul> + <aside class="box box_grey outsidecontainer"> + <h3>Tags</h3> - <h3>Tags</h3> - <div class="box box_grey alert alert-warning"> - Filtering by tag doesn't actually work yet! - </div> - <ul> - {% for t in tags %} - <li><a href="{{ url_for('packages_page', q=(query or '')+' tag:'+t.name, type=type) }}"> - {{ t.title }} - </a></li> - {% else %} - <li><i>No tags available</i></ul> - {% endfor %} - </ul> + <ul class="flatlist"> + {% for t in tags %} + <li><a href="{{ url_for('packages_page', q=(query or '')+' tag:'+t.name, type=type) }}"> + {{ t.title }} + </a></li> + {% else %} + <li><i>No tags available</i></ul> + {% endfor %} + </ul> + </aside> + + {% from "macros/packagegridtile.html" import render_pkggrid %} + {{ render_pkggrid(packages) }} {% endblock %} |