projects/booket

changeset 3:4786df0aec03

Display URL and hostname

Display the hostname after the title and the full URL below it
author Guido Berhoerster <guido+booket@berhoerster.name>
date Mon Sep 08 20:01:41 2014 +0200 (2014-09-08)
parents 82c50265c8dc
children e78c3356b585
files booket.css booket.html booket.js
line diff
     1.1 --- a/booket.css	Mon Sep 08 19:34:11 2014 +0200
     1.2 +++ b/booket.css	Mon Sep 08 20:01:41 2014 +0200
     1.3 @@ -240,6 +240,10 @@
     1.4      padding: .25em 0 0 0;    
     1.5  }
     1.6  
     1.7 +ul#bookmark-list > li p {
     1.8 +  margin: 0;
     1.9 +}
    1.10 +
    1.11  ul#bookmark-list > li ~ li {
    1.12      margin: .25em 0 0 0;    
    1.13  }
    1.14 @@ -284,9 +288,13 @@
    1.15      color: #07316e;
    1.16  }
    1.17  
    1.18 -dl.bookmark-metadata {
    1.19 +.bookmark-hostname,
    1.20 +.bookmark-metadata {
    1.21      color: #555753;
    1.22      font-size: .75em;
    1.23 +}
    1.24 +
    1.25 +dl.bookmark-metadata {
    1.26      margin: .25em 0 0 0;
    1.27  }
    1.28  
     2.1 --- a/booket.html	Mon Sep 08 19:34:11 2014 +0200
     2.2 +++ b/booket.html	Mon Sep 08 20:01:41 2014 +0200
     2.3 @@ -132,13 +132,18 @@
     2.4          </template>
     2.5          <template id="bookmark-template">
     2.6            <li>
     2.7 -            <a class="bookmark-link" target="_blank"></a><ul
     2.8 -            class="tag-list"></ul>
     2.9 +            <p>
    2.10 +              <a class="bookmark-link" target="_blank"></a>
    2.11 +              <span class="bookmark-hostname"></span>
    2.12 +            </p>
    2.13 +            <ul class="tag-list"></ul>
    2.14              <div class="bookmark-actions">
    2.15                <button type="button" name="edit-bookmark">Edit</button><button
    2.16                type="button" name="delete-bookmark">Delete</button>
    2.17              </div>
    2.18              <dl class="bookmark-metadata">
    2.19 +              <dt>URL</dt>
    2.20 +              <dd class="bookmark-url"></dd>
    2.21                <dt>Added</dt>
    2.22                <dd><time class="ctime"></time></dd>
    2.23                <dt>Last modified</dt>
     3.1 --- a/booket.js	Mon Sep 08 19:34:11 2014 +0200
     3.2 +++ b/booket.js	Mon Sep 08 20:01:41 2014 +0200
     3.3 @@ -1031,6 +1031,8 @@
     3.4      var newNode;
     3.5      var bookmarkElement;
     3.6      var linkElement;
     3.7 +    var hostnameElement;
     3.8 +    var urlElement;
     3.9      var ctimeElement;
    3.10      var mtimeElement;
    3.11      var tagListElement;
    3.12 @@ -1044,6 +1046,13 @@
    3.13      linkElement.textContent = linkElement.title = bookmark.title;
    3.14      linkElement.href = bookmark.url;
    3.15  
    3.16 +    hostnameElement = bookmarkElement.querySelector('.bookmark-hostname');
    3.17 +    hostnameElement.textContent = (linkElement.hostname !== '') ?
    3.18 +        '[' + linkElement.hostname + ']' : '';
    3.19 +
    3.20 +    urlElement = bookmarkElement.querySelector('.bookmark-url');
    3.21 +    urlElement.textContent = bookmark.url;
    3.22 +
    3.23      ctimeElement = bookmarkElement.querySelector('.ctime');
    3.24      ctimeElement.dateTime = bookmark.ctime.toISOString();
    3.25      ctimeElement.textContent = bookmark.ctime.toString();