From 30dcae3b1bf9782d494f6695d57fa12a3d5a9b60 Mon Sep 17 00:00:00 2001
From: ccd0 <admin@containerchan.org>
Date: Fri, 27 Jan 2017 06:49:37 -0800
Subject: [PATCH] Limit size of Sauce documentation and move important stuff to
 top.

---
 src/General/Settings/Sauce.html | 41 ++++++++++++++++++---------------
 src/css/style.css               | 14 ++++++++++-
 2 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/General/Settings/Sauce.html b/src/General/Settings/Sauce.html
index ea8bd3575..bee13122d 100644
--- a/src/General/Settings/Sauce.html
+++ b/src/General/Settings/Sauce.html
@@ -1,20 +1,25 @@
 <div class="warning"><code>Sauce</code> is disabled.</div>
-<div>Lines starting with a <code>#</code> will be ignored.</div>
-<div>You can specify a display text by appending <code>;text:[text]</code> to the URL.</div>
-<div>You can specify the applicable boards by appending <code>;boards:[board1],[board2]</code>.</div>
-<div>You can specify the applicable file types by appending <code>;types:[extension1],[extension2]</code>.</div>
-<div>You can specify a regular expression the filename must match by appending <code>;regexp:[regular expression]</code>.</div>
-<ul>These parameters will be replaced by their corresponding values in the URL and displayed text:
-  <li><code>%TURL</code>: Thumbnail URL.</li>
-  <li><code>%URL</code>: Full image URL.</li>
-  <li><code>%IMG</code>: Full image URL for GIF, JPG, and PNG; thumbnail URL for other types.</li>
-  <li><code>%MD5</code>: MD5 hash in base64.</li>
-  <li><code>%sMD5</code>: MD5 hash in base64 using <code>-</code> and <code>_</code>.</li>
-  <li><code>%hMD5</code>: MD5 hash in hexadecimal.</li>
-  <li><code>%name</code>: Original file name.</li>
-  <li><code>%$0</code>: Matched regular expression within the filename.</li>
-  <li><code>%$1</code>, <code>%$2</code>, <code>%$3</code>, ... : Subexpressions within the matched regular expression.</li>
-  <li><code>%board</code>: Current board.</li>
-  <li><code>%%</code>, <code>%semi</code>: Literal <code>%</code> and <code>;</code>.</li>
-</ul>
+<input id="sauce-doc-expand" type="checkbox" hidden>
+<div id="sauce-doc">
+  <label for="sauce-doc-expand">[expand]</label>
+  <div>These parameters will be replaced by their corresponding values in the URL and displayed text:</div>
+  <ul>
+    <li><code>%IMG</code>: Full image URL for GIF, JPG, and PNG; thumbnail URL for other types.</li>
+    <li><code>%URL</code>: Full image URL.</li>
+    <li><code>%TURL</code>: Thumbnail URL.</li>
+    <li><code>%name</code>: Original file name.</li>
+    <li><code>%board</code>: Current board.</li>
+    <li><code>%MD5</code>: MD5 hash in base64.</li>
+    <li><code>%sMD5</code>: MD5 hash in base64 using <code>-</code> and <code>_</code>.</li>
+    <li><code>%hMD5</code>: MD5 hash in hexadecimal.</li>
+    <li><code>%$0</code>: Matched regular expression within the filename.</li>
+    <li><code>%$1</code>, <code>%$2</code>, <code>%$3</code>, ... : Subexpressions within the matched regular expression.</li>
+    <li><code>%%</code>, <code>%semi</code>: Literal <code>%</code> and <code>;</code>.</li>
+  </ul>
+  <div>Lines starting with a <code>#</code> will be ignored.</div>
+  <div>You can specify a display text by appending <code>;text:[text]</code> to the URL.</div>
+  <div>You can specify the applicable boards by appending <code>;boards:[board1],[board2]</code>.</div>
+  <div>You can specify the applicable file types by appending <code>;types:[extension1],[extension2]</code>.</div>
+  <div>You can specify a regular expression the filename must match by appending <code>;regexp:[regular expression]</code>.</div>
+</div>
 <textarea hidden name="sauces" class="field" spellcheck="false"></textarea>
diff --git a/src/css/style.css b/src/css/style.css
index 0c9953344..036029baa 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -610,8 +610,20 @@ div[data-checked="false"] > .suboption-list {
 .section-main a, .section-filter a, .section-advanced a {
   text-decoration: underline;
 }
+#sauce-doc-expand:not(:checked) ~ #sauce-doc {
+  max-height: 130px;
+  overflow: auto;
+}
+#sauce-doc > label {
+  float: right;
+  margin: 0 5px;
+}
+/* XXX for OneeChan */
+#sauce-doc-expand + .riceCheck {
+  display: none;
+}
 .section-sauce textarea {
-  height: 350px;
+  height: 430px;
 }
 .section-advanced .field[name="boardnav"] {
   width: 100%;