Add + adjust text copy component

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.
  ******************************************************************************/

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"
         );

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">

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>