From 8de2bca2c530da5872d63cb8575f2b2847eac524 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 22 Dec 2021 15:13:42 +0100
Subject: [PATCH] Add + adjust text copy component

---
 bookwyrm/static/css/bookwyrm.css              | 35 +++++++++++++++++++
 bookwyrm/static/js/bookwyrm.js                |  2 --
 bookwyrm/templates/annual_summary/layout.html |  6 ++++
 bookwyrm/templates/lists/list.html            |  4 ++-
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index b63ac072..19a7cac8 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -136,6 +136,10 @@ summary::marker {
     content: none;
 }
 
+summary {
+    cursor: pointer;
+}
+
 .detail-pinned-button summary {
     position: absolute;
     right: 0;
@@ -586,6 +590,37 @@ ol.ordered-list li::before {
     min-height: calc(2 * var(--height-basis));
 }
 
+/* Copy
+ ******************************************************************************/
+
+.horizontal-copy {
+    display:  flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .75rem;
+}
+
+.horizontal-copy textarea {
+    min-width: initial;
+    white-space: nowrap;
+}
+
+.horizontal-copy button {
+    align-self: stretch;
+    height: unset;
+}
+
+.vertical-copy {
+    display:  flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: .75rem;
+}
+
+.vertical-copy button {
+    width: 100%;
+}
+
 /* Dimensions
  * @todo These could be in rem.
  ******************************************************************************/
diff --git a/bookwyrm/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js
index 2b78bf51..2e446a85 100644
--- a/bookwyrm/static/js/bookwyrm.js
+++ b/bookwyrm/static/js/bookwyrm.js
@@ -465,10 +465,8 @@ let BookWyrm = new class {
 
         copyButtonEl.textContent = textareaEl.dataset.copytextLabel;
         copyButtonEl.classList.add(
-            "mt-2",
             "button",
             "is-small",
-            "is-fullwidth",
             "is-primary",
             "is-light"
         );
diff --git a/bookwyrm/templates/annual_summary/layout.html b/bookwyrm/templates/annual_summary/layout.html
index 0b46e725..4b757224 100644
--- a/bookwyrm/templates/annual_summary/layout.html
+++ b/bookwyrm/templates/annual_summary/layout.html
@@ -51,6 +51,12 @@
         <div class="columns mt-3">
             <div class="column is-three-fifths is-offset-one-fifth">
 
+            {% if year_key %}
+                <div class="horizontal-copy mb-5">
+                    <textarea rows="1" readonly class="textarea is-small" aria-labelledby="embed-label" data-copytext data-copytext-label="{% trans 'Copy address' %}" data-copytext-success="{% trans 'Copied!' %}">{{ request.scheme|add:"://"|add:request.get_host|add:request.path }}?key={{ year_key }}</textarea>
+                </div>
+            {% endif %}
+
             {% if user == summary_user %}
             {% if year_key %}
                 <div class="columns mb-2">
diff --git a/bookwyrm/templates/lists/list.html b/bookwyrm/templates/lists/list.html
index 412ca470..836ca864 100644
--- a/bookwyrm/templates/lists/list.html
+++ b/bookwyrm/templates/lists/list.html
@@ -190,7 +190,9 @@
             <h2 class="title is-5 mt-6" id="embed-label">
                 {% trans "Embed this list on a website" %}
             </h2>
-            <textarea readonly class="textarea is-small" aria-labelledby="embed-label" data-copytext data-copytext-label="{% trans 'Copy embed code' %}" data-copytext-success="{% trans 'Copied!' %}"><iframe style="border-width:0;" id="bookwyrm_list_embed" width="400" height="600" title="{% blocktrans with list_name=list.name site_name=site.name owner=list.user.display_name %}{{ list_name }}, a list by {{owner}} on {{ site_name }}{% endblocktrans %}" src="{{ embed_url }}"></iframe></textarea>
+            <div class="vertical-copy">
+                <textarea readonly class="textarea is-small" aria-labelledby="embed-label" data-copytext data-copytext-label="{% trans 'Copy embed code' %}" data-copytext-success="{% trans 'Copied!' %}"><iframe style="border-width:0;" id="bookwyrm_list_embed" width="400" height="600" title="{% blocktrans with list_name=list.name site_name=site.name owner=list.user.display_name %}{{ list_name }}, a list by {{owner}} on {{ site_name }}{% endblocktrans %}" src="{{ embed_url }}"></iframe></textarea>
+            </div>
         </div>
 
     </section>