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>