From 886ddecfa7c7572844eb7573bd136c21a7aa6d61 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Sun, 31 Oct 2021 16:12:14 -0700
Subject: [PATCH] Improve appearance of bookmark cards with h2, hiding url
 element.

---
 .../etiquette_flask/static/css/cards.css      |  1 +
 frontends/etiquette_flask/static/js/cards.js  | 48 ++++++++++++-------
 .../etiquette_flask/templates/bookmarks.html  |  8 +++-
 .../etiquette_flask/templates/cards.html      | 12 ++++-
 4 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/frontends/etiquette_flask/static/css/cards.css b/frontends/etiquette_flask/static/css/cards.css
index 2b51b5a..7f77aff 100644
--- a/frontends/etiquette_flask/static/css/cards.css
+++ b/frontends/etiquette_flask/static/css/cards.css
@@ -102,6 +102,7 @@
 
 .bookmark_card .bookmark_url
 {
+    display: none;
 }
 
 .bookmark_card input
diff --git a/frontends/etiquette_flask/static/js/cards.js b/frontends/etiquette_flask/static/js/cards.js
index d189d58..0a8d47a 100644
--- a/frontends/etiquette_flask/static/js/cards.js
+++ b/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;
 }
 
diff --git a/frontends/etiquette_flask/templates/bookmarks.html b/frontends/etiquette_flask/templates/bookmarks.html
index 68dc28f..d97e6ba 100644
--- a/frontends/etiquette_flask/templates/bookmarks.html
+++ b/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;
     }
 
diff --git a/frontends/etiquette_flask/templates/cards.html b/frontends/etiquette_flask/templates/cards.html
index a60e4ef..9e5732b 100644
--- a/frontends/etiquette_flask/templates/cards.html
+++ b/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 %}