From bb0540e1a18f32dd09404a5081903b4fe075d026 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Fri, 5 Mar 2021 19:53:42 -0600
Subject: [PATCH] Fix #4747: BUR layout partly broken on iOS.

Move the BUR help text from the <textarea> placeholder attribute to a
<details> tag that embeds the [[help:bur_notice]] wiki page.

Also update some CSS for the <details> tag that was meant to only apply
to the user upgrades page and didn't look good here.
---
 app/helpers/bulk_update_requests_helper.rb    | 19 ----------
 app/javascript/src/styles/base/020_base.scss  |  3 --
 app/javascript/src/styles/base/040_colors.css |  4 +-
 app/javascript/src/styles/common/dtext.scss   |  8 ++++
 .../src/styles/common/utilities.scss          |  2 +
 .../src/styles/specific/user_upgrades.scss    |  4 ++
 app/views/bulk_update_requests/_form.html.erb | 37 ++++++++++---------
 app/views/user_upgrades/new.html.erb          |  2 +-
 8 files changed, 36 insertions(+), 43 deletions(-)
 delete mode 100644 app/helpers/bulk_update_requests_helper.rb

diff --git a/app/helpers/bulk_update_requests_helper.rb b/app/helpers/bulk_update_requests_helper.rb
deleted file mode 100644
index cb77f0f41..000000000
--- a/app/helpers/bulk_update_requests_helper.rb
+++ /dev/null
@@ -1,19 +0,0 @@
-module BulkUpdateRequestsHelper
-  def bur_script_example
-    <<~BUR
-      create alias bunny -> rabbit
-      remove alias bunny -> rabbit
-
-      create implication bunny -> animal
-      remove implication bunny -> animal
-
-      rename bunny -> rabbit
-
-      update bunny_focus -> animal_focus bunny
-
-      nuke bunny
-
-      category touhou -> copyright
-    BUR
-  end
-end
diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss
index 41ba4cd62..700ffa965 100644
--- a/app/javascript/src/styles/base/020_base.scss
+++ b/app/javascript/src/styles/base/020_base.scss
@@ -112,13 +112,10 @@ table tfoot {
 }
 
 details {
-  border-bottom: 1px solid var(--details-border-color);
-
   summary {
     cursor: pointer;
     user-select: none;
     outline: none;
-    line-height: 2em;
   }
 }
 
diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index f7bdda518..d10c940b3 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -255,7 +255,7 @@ html {
 
   --login-link-color: var(--red-5);
   --footer-border-color: var(--grey-1);
-  --details-border-color: var(--grey-2);
+  --divider-border-color: var(--grey-2);
 
   --jquery-ui-widget-content-background: var(--body-background-color);
   --jquery-ui-widget-content-text-color: var(--text-color);
@@ -446,7 +446,7 @@ body[data-current-user-theme="dark"] {
 
   --login-link-color: var(--red-4);
   --footer-border-color: var(--grey-7);
-  --details-border-color: var(--grey-7);
+  --divider-border-color: var(--grey-7);
 
   --jquery-ui-widget-content-text-color: var(--text-color);
   --jquery-ui-widget-content-background: var(--grey-8);
diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss
index e56a37ebb..0669d7fb0 100644
--- a/app/javascript/src/styles/common/dtext.scss
+++ b/app/javascript/src/styles/common/dtext.scss
@@ -131,6 +131,14 @@ div.prose {
   .spoiler {
     background: var(--dtext-spoiler-background-color);
   }
+
+  details {
+    margin-bottom: 1em;
+
+    summary {
+      margin-bottom: 1em;
+    }
+  }
 }
 
 // avoid empty gaps beneath dtext blocks in table rows.
diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index 9f43d783a..22f375b2f 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/app/javascript/src/styles/common/utilities.scss
@@ -42,6 +42,8 @@ $spacer: 0.25rem; /* 4px */
 .space-x-4 > * + * { margin-left: 4 * $spacer; }
 .space-y-4 > * + * { margin-top: 4 * $spacer; }
 
+.divide-y-1 > * + * { border-top: 1px solid var(--divider-border-color); }
+
 .align-top { vertical-align: top; }
 
 .flex-auto { flex: 1 1 auto; }
diff --git a/app/javascript/src/styles/specific/user_upgrades.scss b/app/javascript/src/styles/specific/user_upgrades.scss
index a4a9993ba..66aa57ae4 100644
--- a/app/javascript/src/styles/specific/user_upgrades.scss
+++ b/app/javascript/src/styles/specific/user_upgrades.scss
@@ -1,5 +1,9 @@
 div#c-user-upgrades {
   div#a-new {
+    summary {
+      padding: 1rem 0;
+    }
+
     table#feature-comparison {
       colgroup#basic {
         background-color: var(--user-upgrade-basic-background-color);
diff --git a/app/views/bulk_update_requests/_form.html.erb b/app/views/bulk_update_requests/_form.html.erb
index 8e654913f..806689568 100644
--- a/app/views/bulk_update_requests/_form.html.erb
+++ b/app/views/bulk_update_requests/_form.html.erb
@@ -1,25 +1,26 @@
 <%= edit_form_for(@bulk_update_request) do |f| %>
-  <p>
-    Request aliases or implications using the format shown below. An <b>alias</b> makes the first tag a
-    synonym for the second tag. An <b>implication</b> makes the first tag automatically add the second tag.
-    A <b>rename</b> replaces the first tag with the second tag without making it a permanent alias.
-    An <b>update</b> moves multiple tags and pools at once.
-  </p>
+  <div class="prose">
+    <details>
+      <summary>Help: How to make a bulk update request</summary>
 
-  <p>
-    <% if @bulk_update_request.new_record? && @bulk_update_request.forum_topic.present? %>
-      This request will be attached to
-      <%= link_to "topic ##{@bulk_update_request.forum_topic_id}: #{@bulk_update_request.forum_topic.title}", @bulk_update_request.forum_topic %>.
-      <%= f.input :forum_topic_id, as: :hidden, input_html: { value: params.dig(:bulk_update_request, :forum_topic_id) } %>
-    <% elsif @bulk_update_request.new_record? && @bulk_update_request.forum_topic.blank? %>
-      This request will create a new forum topic. To attach this request to an existing topic, find
-      the forum topic and click "Request alias/implication" at the top of the page.
+      <%= embed_wiki "help:bur_notice" %>
+    </details>
 
-      <%= f.input :title, label: "Forum Title", as: :string %>
-    <% end %>
-  </p>
+    <p>
+      <% if @bulk_update_request.new_record? && @bulk_update_request.forum_topic.present? %>
+        This request will be attached to
+        <%= link_to "topic ##{@bulk_update_request.forum_topic_id}: #{@bulk_update_request.forum_topic.title}", @bulk_update_request.forum_topic %>.
+        <%= f.input :forum_topic_id, as: :hidden, input_html: { value: params.dig(:bulk_update_request, :forum_topic_id) } %>
+      <% elsif @bulk_update_request.new_record? && @bulk_update_request.forum_topic.blank? %>
+        This request will create a new forum topic. To attach this request to an existing topic, find
+        the forum topic and click "Request alias/implication" at the top of the page.
 
-  <%= f.input :script, label: "Request", as: :text, placeholder: bur_script_example %>
+        <%= f.input :title, label: "Forum Title", as: :string %>
+      <% end %>
+    </p>
+  </div>
+
+  <%= f.input :script, label: "Request", as: :text %>
 
   <% if @bulk_update_request.new_record? %>
     <div class="input">
diff --git a/app/views/user_upgrades/new.html.erb b/app/views/user_upgrades/new.html.erb
index b25b1f81e..67249de7c 100644
--- a/app/views/user_upgrades/new.html.erb
+++ b/app/views/user_upgrades/new.html.erb
@@ -119,7 +119,7 @@
 
     <h2 class="mb-4">Frequently Asked Questions</h2>
 
-    <div id="frequently-asked-questions">
+    <div id="frequently-asked-questions" class="divide-y-1">
       <details>
         <summary>What are the benefits of <%= Danbooru.config.canonical_app_name %> Gold?</summary>