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 Sep 08 20:05:35 2014 +0200 (2014-09-08)
parents 4786df0aec03
children 39c95b9826d2
files booket.css booket.html
line diff
     1.1 --- a/booket.css	Mon Sep 08 20:01:41 2014 +0200
     1.2 +++ b/booket.css	Mon Sep 08 20:05:35 2014 +0200
     1.3 @@ -242,6 +242,7 @@
     1.4  
     1.5  ul#bookmark-list > li p {
     1.6    margin: 0;
     1.7 +  display: inline-block;
     1.8  }
     1.9  
    1.10  ul#bookmark-list > li ~ li {
    1.11 @@ -294,8 +295,12 @@
    1.12      font-size: .75em;
    1.13  }
    1.14  
    1.15 +.bookmark-actions {
    1.16 +    margin-left: 1.5em;
    1.17 +}
    1.18 +
    1.19  dl.bookmark-metadata {
    1.20 -    margin: .25em 0 0 0;
    1.21 +    margin: .25em 0 0 2em;
    1.22  }
    1.23  
    1.24  dl.bookmark-metadata dt {
     2.1 --- a/booket.html	Mon Sep 08 20:01:41 2014 +0200
     2.2 +++ b/booket.html	Mon Sep 08 20:05:35 2014 +0200
     2.3 @@ -132,23 +132,25 @@
     2.4          </template>
     2.5          <template id="bookmark-template">
     2.6            <li>
     2.7 -            <p>
     2.8 -              <a class="bookmark-link" target="_blank"></a>
     2.9 -              <span class="bookmark-hostname"></span>
    2.10 -            </p>
    2.11 -            <ul class="tag-list"></ul>
    2.12 -            <div class="bookmark-actions">
    2.13 -              <button type="button" name="edit-bookmark">Edit</button><button
    2.14 -              type="button" name="delete-bookmark">Delete</button>
    2.15 -            </div>
    2.16 -            <dl class="bookmark-metadata">
    2.17 -              <dt>URL</dt>
    2.18 -              <dd class="bookmark-url"></dd>
    2.19 -              <dt>Added</dt>
    2.20 -              <dd><time class="ctime"></time></dd>
    2.21 -              <dt>Last modified</dt>
    2.22 -              <dd><time class="mtime"></time></dd>
    2.23 -            </dl>
    2.24 +            <details>
    2.25 +              <summary><p>
    2.26 +                  <a class="bookmark-link" target="_blank"></a>
    2.27 +                  <span class="bookmark-hostname"></span>
    2.28 +                </p>
    2.29 +                <ul class="tag-list"></ul></summary>
    2.30 +              <div class="bookmark-actions">
    2.31 +                <button type="button" name="edit-bookmark">Edit</button><button
    2.32 +                type="button" name="delete-bookmark">Delete</button>
    2.33 +              </div>
    2.34 +              <dl class="bookmark-metadata">
    2.35 +                <dt>URL</dt>
    2.36 +                <dd class="bookmark-url"></dd>
    2.37 +                <dt>Added</dt>
    2.38 +                <dd><time class="ctime"></time></dd>
    2.39 +                <dt>Last modified</dt>
    2.40 +                <dd><time class="mtime"></time></dd>
    2.41 +              </dl>
    2.42 +            </details>
    2.43            </li>
    2.44          </template>
    2.45        </ul>