Improve appearance of bookmark cards with h2, hiding url element.

frontends/etiquette_flask/static/css/cards.css

@@ -102,6 +102,7 @@
 
 .bookmark_card .bookmark_url
 {
+    display: none;
 }
 
 .bookmark_card input

frontends/etiquette_flask/static/js/cards.js

@@ -72,7 +72,7 @@ function drag_drop(event)
 cards.bookmarks = {};
 
 cards.bookmarks.create =
-function create(bookmark, add_delete_button)
+function create(bookmark, add_author, add_delete_button, add_url_element)
 {
     const bookmark_card = document.createElement("div");
     bookmark_card.className = "bookmark_card"
@@ -84,27 +84,39 @@ function create(bookmark, add_delete_button)
     bookmark_title.innerText = bookmark.display_name;
     bookmark_card.appendChild(bookmark_title);
 
-    const bookmark_url = document.createElement("a");
-    bookmark_url.className = "bookmark_url";
-    bookmark_url.href = bookmark.url;
-    bookmark_url.innerText = bookmark.url;
-    bookmark_card.appendChild(bookmark_url);
-
-    const bookmark_toolbox = document.createElement("div");
-    bookmark_toolbox.className = "bookmark_toolbox"
-    bookmark_card.appendChild(bookmark_toolbox);
+    // The URL element is always display:none, but its presence is useful in
+    // facilitating the Editor object. If this bookmark will not be editable,
+    // there is no need for it.
+    if (add_url_element)
+    {
+        const bookmark_url = document.createElement("a");
+        bookmark_url.className = "bookmark_url";
+        bookmark_url.href = bookmark.url;
+        bookmark_url.innerText = bookmark.url;
+        bookmark_card.appendChild(bookmark_url);
+    }
 
+    // If more tools are added, this will become an `or`.
+    // I just want to have the structure in place now.
     if (add_delete_button)
     {
-        const delete_button = document.createElement("button");
-        delete_button.className = "red_button button_with_confirm";
-        delete_button.dataset.onclick = "return delete_bookmark_form(event);";
-        delete_button.dataset.prompt = "Delete Bookmark?";
-        delete_button.dataset.cancelClass = "gray_button";
-        delete_button.innerText = "Delete";
-        bookmark_toolbox.appendChild(delete_button);
-        common.init_button_with_confirm(delete_button);
+        const bookmark_toolbox = document.createElement("div");
+        bookmark_toolbox.className = "bookmark_toolbox"
+        bookmark_card.appendChild(bookmark_toolbox);
+
+        if (add_delete_button)
+        {
+            const delete_button = document.createElement("button");
+            delete_button.className = "red_button button_with_confirm";
+            delete_button.dataset.onclick = "return delete_bookmark_form(event);";
+            delete_button.dataset.prompt = "Delete Bookmark?";
+            delete_button.dataset.cancelClass = "gray_button";
+            delete_button.innerText = "Delete";
+            bookmark_toolbox.appendChild(delete_button);
+            common.init_button_with_confirm(delete_button);
+        }
     }
+
     return bookmark_card;
 }
 

frontends/etiquette_flask/templates/bookmarks.html

@@ -23,6 +23,11 @@
     flex: 0 0 auto;
     flex-direction: column;
 }
+.bookmark_card h2 .editor_input
+{
+    font-size: inherit;
+    font-weight: inherit;
+}
 </style>
 </head>
 
@@ -32,7 +37,7 @@
         <div id="bookmark_list">
             <h2>Bookmarks</h2>
             {% for bookmark in bookmarks %}
-            {{cards.create_bookmark_card(bookmark, add_delete_button=True)}}
+            {{cards.create_bookmark_card(bookmark, add_delete_button=True, add_url_element=True)}}
             {% endfor %}
 
             <div id="new_bookmark_card" class="bookmark_card">
@@ -114,6 +119,7 @@ function ed_on_save(ed)
         ed.save();
 
         ed.elements["title"].display.href = response.data.url;
+        ed.elements["title"].display.title = response.data.url;
         ed.elements["url"].display.href = response.data.url;
     }
 

frontends/etiquette_flask/templates/cards.html

@@ -65,12 +65,19 @@ draggable=true
 
 {# BOOKMARK ###################################################################}
 
-{% macro create_bookmark_card(bookmark, add_delete_button=False, add_author=True) %}
+{% macro create_bookmark_card(bookmark, add_author=True, add_delete_button=False, add_url_element=False) %}
 <div class="bookmark_card" data-id="{{bookmark.id}}">
-    <a href="{{bookmark.url}}" class="bookmark_title">{{bookmark.display_name}}</a>
+    <h2><a href="{{bookmark.url}}" class="bookmark_title" title="{{bookmark.url}}">{{bookmark.display_name}}</a></h2>
 
+    {# The URL element is always display:none, but its presence is useful in #}
+    {# facilitating the Editor object. If this bookmark will not be editable, #}
+    {# there is no need for it. #}
+    {% if add_url_element %}
     <a href="{{bookmark.url}}" class="bookmark_url">{{bookmark.url}}</a>
+    {% endif %}
 
+    {# if more tools are added, this will become an `or` #}
+    {% if add_delete_button %}
     <div class="bookmark_toolbox">
         {% if add_delete_button %}
         <button
@@ -83,6 +90,7 @@ draggable=true
         </button>
         {% endif %}
     </div>
+    {% endif %}
 
     {% if add_author %}
     {% set author = bookmark.author %}