# HG changeset patch
# User Guido Berhoerster <guido+booket@berhoerster.name>
# Date 1410199301 -7200
# Node ID 4786df0aec03d2f49d5fb5b958727965040f2d5a
# Parent  82c50265c8dcdbd01070ead7c29b696f10e1af36
Display URL and hostname

Display the hostname after the title and the full URL below it

diff -r 82c50265c8dc -r 4786df0aec03 booket.css
--- a/booket.css	Mon Sep 08 19:34:11 2014 +0200
+++ b/booket.css	Mon Sep 08 20:01:41 2014 +0200
@@ -240,6 +240,10 @@
     padding: .25em 0 0 0;    
 }
 
+ul#bookmark-list > li p {
+  margin: 0;
+}
+
 ul#bookmark-list > li ~ li {
     margin: .25em 0 0 0;    
 }
@@ -284,9 +288,13 @@
     color: #07316e;
 }
 
-dl.bookmark-metadata {
+.bookmark-hostname,
+.bookmark-metadata {
     color: #555753;
     font-size: .75em;
+}
+
+dl.bookmark-metadata {
     margin: .25em 0 0 0;
 }
 
diff -r 82c50265c8dc -r 4786df0aec03 booket.html
--- a/booket.html	Mon Sep 08 19:34:11 2014 +0200
+++ b/booket.html	Mon Sep 08 20:01:41 2014 +0200
@@ -132,13 +132,18 @@
         </template>
         <template id="bookmark-template">
           <li>
-            <a class="bookmark-link" target="_blank"></a><ul
-            class="tag-list"></ul>
+            <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>
diff -r 82c50265c8dc -r 4786df0aec03 booket.js
--- a/booket.js	Mon Sep 08 19:34:11 2014 +0200
+++ b/booket.js	Mon Sep 08 20:01:41 2014 +0200
@@ -1031,6 +1031,8 @@
     var newNode;
     var bookmarkElement;
     var linkElement;
+    var hostnameElement;
+    var urlElement;
     var ctimeElement;
     var mtimeElement;
     var tagListElement;
@@ -1044,6 +1046,13 @@
     linkElement.textContent = linkElement.title = bookmark.title;
     linkElement.href = bookmark.url;
 
+    hostnameElement = bookmarkElement.querySelector('.bookmark-hostname');
+    hostnameElement.textContent = (linkElement.hostname !== '') ?
+        '[' + linkElement.hostname + ']' : '';
+
+    urlElement = bookmarkElement.querySelector('.bookmark-url');
+    urlElement.textContent = bookmark.url;
+
     ctimeElement = bookmarkElement.querySelector('.ctime');
     ctimeElement.dateTime = bookmark.ctime.toISOString();
     ctimeElement.textContent = bookmark.ctime.toString();