Mercurial > projects > booket
changeset 4:e78c3356b585
Hide bookmark details
Hide bookmark details and actions and only show title and tags by default
author | Guido Berhoerster <guido+booket@berhoerster.name> |
---|---|
date | Mon, 08 Sep 2014 20:05:35 +0200 |
parents | 4786df0aec03 |
children | 39c95b9826d2 |
files | booket.css booket.html |
diffstat | 2 files changed, 25 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/booket.css Mon Sep 08 20:01:41 2014 +0200 +++ b/booket.css Mon Sep 08 20:05:35 2014 +0200 @@ -242,6 +242,7 @@ ul#bookmark-list > li p { margin: 0; + display: inline-block; } ul#bookmark-list > li ~ li { @@ -294,8 +295,12 @@ font-size: .75em; } +.bookmark-actions { + margin-left: 1.5em; +} + dl.bookmark-metadata { - margin: .25em 0 0 0; + margin: .25em 0 0 2em; } dl.bookmark-metadata dt {
--- a/booket.html Mon Sep 08 20:01:41 2014 +0200 +++ b/booket.html Mon Sep 08 20:05:35 2014 +0200 @@ -132,23 +132,25 @@ </template> <template id="bookmark-template"> <li> - <p> - <a class="bookmark-link" target="_blank"></a> - <span class="bookmark-hostname"></span> - </p> - <ul class="tag-list"></ul> - <div class="bookmark-actions"> - <button type="button" name="edit-bookmark">Edit</button><button - type="button" name="delete-bookmark">Delete</button> - </div> - <dl class="bookmark-metadata"> - <dt>URL</dt> - <dd class="bookmark-url"></dd> - <dt>Added</dt> - <dd><time class="ctime"></time></dd> - <dt>Last modified</dt> - <dd><time class="mtime"></time></dd> - </dl> + <details> + <summary><p> + <a class="bookmark-link" target="_blank"></a> + <span class="bookmark-hostname"></span> + </p> + <ul class="tag-list"></ul></summary> + <div class="bookmark-actions"> + <button type="button" name="edit-bookmark">Edit</button><button + type="button" name="delete-bookmark">Delete</button> + </div> + <dl class="bookmark-metadata"> + <dt>URL</dt> + <dd class="bookmark-url"></dd> + <dt>Added</dt> + <dd><time class="ctime"></time></dd> + <dt>Last modified</dt> + <dd><time class="mtime"></time></dd> + </dl> + </details> </li> </template> </ul>