From b8d95ace64d78ffef2b663930235e590f0e672d0 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 16 Feb 2021 02:47:37 -0600
Subject: [PATCH] css: adjust form input box sizes.

Adjust input boxes to fit the screen better on mobile, and to use
consistent sizes throughout the site (no ad-hoc overrides to make
certain input boxes a bit bigger in random places).

On desktop, this makes most input boxes a bit taller and narrower. On
mobile, it makes input boxes the full width of the screen.

This most notably affects the tag edit box, the comment and forum
post box, the wiki page edit box, and the commentary box.
---
 .../src/javascripts/post_mode_menu.js         |  6 ----
 .../src/styles/common/simple_form.scss        | 27 +++++++++++++----
 app/javascript/src/styles/specific/posts.scss | 29 ++-----------------
 app/logical/dtext_input.rb                    |  2 +-
 app/views/api_keys/_form.html.erb             |  2 +-
 app/views/artist_commentaries/_form.html.erb  |  4 +--
 app/views/artists/_form.html.erb              |  4 +--
 app/views/bulk_update_requests/_form.html.erb |  2 +-
 app/views/news_updates/edit.html.erb          |  2 +-
 app/views/news_updates/new.html.erb           |  2 +-
 app/views/pool_elements/_new.html.erb         |  2 +-
 app/views/posts/partials/show/_edit.html.erb  |  6 ++--
 app/views/uploads/new.html.erb                | 12 ++++----
 app/views/users/edit.html.erb                 |  6 ++--
 app/views/wiki_pages/_form.html.erb           |  2 +-
 app/views/wiki_pages/new.html.erb             |  2 +-
 16 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/app/javascript/src/javascripts/post_mode_menu.js b/app/javascript/src/javascripts/post_mode_menu.js
index d1f3fa871..2a518f62f 100644
--- a/app/javascript/src/javascripts/post_mode_menu.js
+++ b/app/javascript/src/javascripts/post_mode_menu.js
@@ -124,12 +124,6 @@ PostModeMenu.open_edit = function(post_id) {
   $("#quick-edit-div").slideDown("fast");
   $("#quick-edit-form").attr("data-post-id", post_id);
   $("#post_tag_string").val($post.data("tags") + " ").focus().selectEnd();
-
-  /* Set height of tag edit box to fit content. */
-  $("#post_tag_string").height(80); // min height: 80px.
-  var padding = $("#post_tag_string").innerHeight() - $("#post_tag_string").height();
-  var height = $("#post_tag_string").prop("scrollHeight") - padding;
-  $("#post_tag_string").height(height);
 }
 
 PostModeMenu.click = function(e) {
diff --git a/app/javascript/src/styles/common/simple_form.scss b/app/javascript/src/styles/common/simple_form.scss
index 338f316f4..6f2ed942c 100644
--- a/app/javascript/src/styles/common/simple_form.scss
+++ b/app/javascript/src/styles/common/simple_form.scss
@@ -31,12 +31,17 @@ form.simple_form {
     margin-bottom: 1em;
 
     input[type=text], input[type=file], input[type=password], input[type=email] {
-      max-width: 20em;
+      width: 100%;
+      max-width: 25em;
     }
 
     .hint {
       @extend .fineprint;
       padding-left: 1em;
+
+      @media (max-width: 660px) {
+        display: none;
+      }
     }
 
     input.validation-error {
@@ -48,10 +53,20 @@ form.simple_form {
         padding-left: 0;
         display: block;
       }
+
+      textarea {
+        width: 100%;
+        max-width: 60rem;
+        max-height: 15rem;
+
+        &.text  { height: 20vh; }
+        &.dtext { height: 40vh; }
+      }
     }
 
-    textarea {
-      width: 70%;
+    select[multiple] {
+      height: 20vh;
+      max-height: 15rem;
     }
 
     label {
@@ -80,6 +95,7 @@ form.simple_form {
 
 form.inline-form {
   display: table;
+  width: 100%;
 
   > div.input {
     display: table-row;
@@ -87,12 +103,13 @@ form.inline-form {
 
     label {
       text-align: right;
+      padding-right: 1em;
+      white-space: nowrap;
+      width: 1%;
     }
 
     label, input {
       display: table-cell;
-      padding-right: 1em;
-      white-space: nowrap;
       line-height: 1em;
     }
   }
diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss
index 56e651cef..82fc193c1 100644
--- a/app/javascript/src/styles/specific/posts.scss
+++ b/app/javascript/src/styles/specific/posts.scss
@@ -155,10 +155,6 @@ div#c-posts {
       margin: 1em 0 0.5em;
     }
 
-    #edit textarea {
-      width: 100%;
-    }
-
     #favlist {
       word-wrap: break-word;
     }
@@ -188,14 +184,6 @@ div#c-posts {
       }
     }
   }
-
-  div#quick-edit-div {
-    textarea {
-      width: 70%;
-      height: 4em;
-      display: block;
-    }
-  }
 }
 
 body[data-post-current-image-size="large"] #post-options .image-view-large-link,
@@ -253,6 +241,8 @@ div#c-posts, div#c-uploads {
 
 /* Container for the tag edit <textarea>, header, and related tags buttons. */
 #tags-container {
+  max-width: 60rem;
+
   div.header {
     line-height: 1.5em;
 
@@ -277,18 +267,3 @@ div#c-posts, div#c-uploads {
     }
   }
 }
-
-#add-commentary-dialog {
-  input {
-    width: 70%;
-  }
-
-  input[type=checkbox] {
-    width: auto;
-  }
-
-  textarea {
-    font-size: 1em;
-    width: 100%;
-  }
-}
diff --git a/app/logical/dtext_input.rb b/app/logical/dtext_input.rb
index 77e55621a..687e99eef 100644
--- a/app/logical/dtext_input.rb
+++ b/app/logical/dtext_input.rb
@@ -20,7 +20,7 @@ class DtextInput < SimpleForm::Inputs::Base
       if options[:inline]
         t.concat @builder.text_field(attribute_name, merged_input_options)
       else
-        t.concat @builder.text_area(attribute_name, { rows: 20, cols: 30 }.merge(merged_input_options))
+        t.concat @builder.text_area(attribute_name, merged_input_options)
       end
 
       t.concat t.tag.div(id: "dtext-preview", class: "dtext-preview prose")
diff --git a/app/views/api_keys/_form.html.erb b/app/views/api_keys/_form.html.erb
index ec83e54c4..739a2b2d8 100644
--- a/app/views/api_keys/_form.html.erb
+++ b/app/views/api_keys/_form.html.erb
@@ -1,6 +1,6 @@
 <%= edit_form_for(api_key, html: { class: "stacked-hints" }) do |f| %>
   <%= f.input :name, as: :string, hint: "An optional name to help you remember what this key is for." %>
   <%= f.input :permitted_ip_addresses, label: "IP Addresses", as: :string, hint: "An optional list of IPs allowed to use this key. Leave blank to allow all IPs." %>
-  <%= f.input :permissions, as: :select, collection: ApiKey.permissions_list, hint: "An optional list of API endpoints this key can use. Ctrl+click to select multiple endpoints. Leave blank to allow all API endpoints.", input_html: { multiple: true, size: 10 } %>
+  <%= f.input :permissions, as: :select, collection: ApiKey.permissions_list, hint: "An optional list of API endpoints this key can use. Ctrl+click to select multiple endpoints. Leave blank to allow all API endpoints.", input_html: { multiple: true } %>
   <%= f.submit "Create" %>
 <% end %>
diff --git a/app/views/artist_commentaries/_form.html.erb b/app/views/artist_commentaries/_form.html.erb
index d5481f471..4e11f0d31 100644
--- a/app/views/artist_commentaries/_form.html.erb
+++ b/app/views/artist_commentaries/_form.html.erb
@@ -14,10 +14,10 @@
   <%= f.input :post_id, as: :hidden, input_html: { value: post.id } %>
 
   <%= f.input :original_title, as: :string, input_html: { value: artist_commentary.try(:original_title) } %>
-  <%= f.input :original_description, input_html: { size: "40x6", value: artist_commentary.try(:original_description) } %>
+  <%= f.input :original_description, input_html: { value: artist_commentary.try(:original_description) } %>
 
   <%= f.input :translated_title, as: :string, input_html: { value: artist_commentary.try(:translated_title) } %>
-  <%= f.input :translated_description, input_html: { size: "40x6", value: artist_commentary.try(:translated_description) } %>
+  <%= f.input :translated_description, input_html: { value: artist_commentary.try(:translated_description) } %>
 
   <% if post.has_tag?("commentary") %>
     <%= f.input :remove_commentary_tag, as: :boolean %>
diff --git a/app/views/artists/_form.html.erb b/app/views/artists/_form.html.erb
index d4a200708..8a72d56fb 100644
--- a/app/views/artists/_form.html.erb
+++ b/app/views/artists/_form.html.erb
@@ -1,9 +1,9 @@
 <%= edit_form_for(@artist) do |f| %>
   <%= f.input :name, as: :string, input_html: { "data-autocomplete": "tag" } %>
 
-  <%= f.input :other_names_string, label: "Other names", as: :text, input_html: { size: "50x1" }, hint: '<b style="color: red;">NEW</b> Separate names with spaces, not commas. Use underscores for spaces inside names.'.html_safe %>
+  <%= f.input :other_names_string, label: "Other names", as: :string, hint: "Separate names with spaces, not commas. Use underscores for spaces inside names." %>
   <%= f.input :group_name %>
-  <%= f.input :url_string, :label => "URLs", :as => :text, :input_html => {:size => "50x15", :value => params.dig(:artist, :url_string) || @artist.urls.join("\n")}, :hint => "You can prefix a URL with - to mark it as dead." %>
+  <%= f.input :url_string, label: "URLs", as: :text, input_html: { value: params.dig(:artist, :url_string) || @artist.urls.join("\n")}, hint: "You can prefix a URL with - to mark it as dead." %>
 
   <% if @artist.wiki_page.present? %>
     <div class="input">
diff --git a/app/views/bulk_update_requests/_form.html.erb b/app/views/bulk_update_requests/_form.html.erb
index 41cef73d0..b54170eae 100644
--- a/app/views/bulk_update_requests/_form.html.erb
+++ b/app/views/bulk_update_requests/_form.html.erb
@@ -20,7 +20,7 @@
     <% end %>
   </p>
 
-  <%= f.input :script, label: "Request", as: :text, placeholder: bur_script_example, input_html: { size: "50x15" } %>
+  <%= f.input :script, label: "Request", as: :text, placeholder: bur_script_example %>
 
   <% if @bulk_update_request.new_record? %>
     <div class="input">
diff --git a/app/views/news_updates/edit.html.erb b/app/views/news_updates/edit.html.erb
index 8f9819322..a54ce0c04 100644
--- a/app/views/news_updates/edit.html.erb
+++ b/app/views/news_updates/edit.html.erb
@@ -3,7 +3,7 @@
     <h1>Edit Update</h1>
 
     <%= edit_form_for(@news_update) do |f| %>
-      <%= f.input :message, :hint => "Use HTML for formatting", :input_html => {:size => "30x5"} %>
+      <%= f.input :message, hint: "Use HTML for formatting" %>
       <%= f.button :submit, "Submit" %>
     <% end %>
   </div>
diff --git a/app/views/news_updates/new.html.erb b/app/views/news_updates/new.html.erb
index b0f0e64de..d3303fe4e 100644
--- a/app/views/news_updates/new.html.erb
+++ b/app/views/news_updates/new.html.erb
@@ -3,7 +3,7 @@
     <h1>New Update</h1>
 
     <%= edit_form_for(@news_update) do |f| %>
-      <%= f.input :message, :hint => "Use HTML for formatting", :input_html => {:size => "30x5"} %>
+      <%= f.input :message, hint: "Use HTML for formatting" %>
       <%= f.button :submit, "Submit" %>
     <% end %>
   </div>
diff --git a/app/views/pool_elements/_new.html.erb b/app/views/pool_elements/_new.html.erb
index 59a355121..a90a72bfe 100644
--- a/app/views/pool_elements/_new.html.erb
+++ b/app/views/pool_elements/_new.html.erb
@@ -3,7 +3,7 @@
 
   <div class="input">
     <label>Pool Name</label>
-    <span id="pool-name-container"><%= text_field_tag "pool_name", "", :size => 20, :data => { autocomplete: "pool" } %></span>
+    <span id="pool-name-container"><%= text_field_tag "pool_name", "", :data => { autocomplete: "pool" } %></span>
   </div>
 
   <div class="input">
diff --git a/app/views/posts/partials/show/_edit.html.erb b/app/views/posts/partials/show/_edit.html.erb
index 2c99860dc..787bdd27e 100644
--- a/app/views/posts/partials/show/_edit.html.erb
+++ b/app/views/posts/partials/show/_edit.html.erb
@@ -42,8 +42,8 @@
     </fieldset>
   <% end %>
 
-  <%= f.input :parent_id, label: "Parent", input_html: { size: 60 }, as: :string %>
-  <%= f.input :source, input_html: { size: 60 } %>
+  <%= f.input :parent_id, label: "Parent", as: :string %>
+  <%= f.input :source %>
 
   <div class="input fixed-width-container" id="tags-container">
     <div class="header">
@@ -59,7 +59,7 @@
     </div>
 
     <div>
-      <%= f.input :tag_string, label: false, hint: "Ctrl+Enter to submit", input_html: { size: "60x5", "data-autocomplete": "tag-edit", "data-shortcut": "e", value: post.presenter.split_tag_list_text + " " } %>
+      <%= f.input :tag_string, label: false, hint: "Ctrl+Enter to submit", input_html: { "data-autocomplete": "tag-edit", "data-shortcut": "e", value: post.presenter.split_tag_list_text + " " } %>
     </div>
 
     <%= render "related_tags/buttons" %>
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index 1ac675c6a..1e3b34dd4 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -35,7 +35,7 @@
         </div>
 
         <div class="upload_source_container">
-          <%= f.input :source, as: :string, placeholder: "Enter the URL to upload here", input_html: { size: 50, value: params[:url] } %>
+          <%= f.input :source, as: :string, placeholder: "Enter the URL to upload here", input_html: { value: params[:url] } %>
           <%= tag.button "Similar", id: "similar-button" %>
         </div>
 
@@ -48,8 +48,8 @@
           <a href="#" id="toggle-artist-commentary">show »</a>
 
           <div class="artist-commentary" style="display: none;">
-            <%= f.input :artist_commentary_title, as: :string, label: "Original Title", input_html: { size: 60, value: params[:artist_commentary_title] } %>
-            <%= f.input :artist_commentary_desc, as: :text, label: "Original Description", input_html: { size: "60x5", value: params[:artist_commentary_desc] } %>
+            <%= f.input :artist_commentary_title, as: :string, label: "Original Title", input_html: { value: params[:artist_commentary_title] } %>
+            <%= f.input :artist_commentary_desc, as: :text, label: "Original Description", input_html: { value: params[:artist_commentary_desc] } %>
           </div>
         </div>
 
@@ -58,8 +58,8 @@
           <a href="#" id="toggle-commentary-translation">show »</a>
 
           <div class="commentary-translation" style="display: none;">
-            <%= f.input :translated_commentary_title, as: :string, label: "Translated Title", input_html: { size: 60, value: params[:translated_commentary_title] } %>
-            <%= f.input :translated_commentary_desc, as: :text, label: "Translated Description", input_html: { size: "60x5", value: params[:translated_commentary_desc] } %>
+            <%= f.input :translated_commentary_title, as: :string, label: "Translated Title", input_html: { value: params[:translated_commentary_title] } %>
+            <%= f.input :translated_commentary_desc, as: :text, label: "Translated Description", input_html: { value: params[:translated_commentary_desc] } %>
           </div>
         </div>
 
@@ -76,7 +76,7 @@
             </a>
           </div>
 
-          <%= f.input :tag_string, label: false, hint: "Ctrl+Enter to submit", input_html: { size: "60x5", "data-autocomplete": "tag-edit", "data-shortcut": "e", value: params[:tag_string] } %>
+          <%= f.input :tag_string, label: false, hint: "Ctrl+Enter to submit", input_html: { "data-autocomplete": "tag-edit", "data-shortcut": "e", value: params[:tag_string] } %>
           <%= render "related_tags/buttons" %>
         </div>
 
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 3915d25ad..557927ea3 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -46,7 +46,7 @@
         <%= f.input :receive_email_notifications, as: :select, include_blank: false, collection: [["Yes", "true"], ["No", "false"]], hint: "Receive an email when you receive a new dmail." %>
         <%= f.input :time_zone, include_blank: false, hint: "The timezone to use for timestamps." %>
         <%= f.input :comment_threshold, hint: "Comments at or below this score will be hidden by default.", input_html: { min: -100, max: 5 } %>
-        <%= f.input :blacklisted_tags, hint: "Posts with these tags will be hidden. Put each tag on a separate line. <a href='/wiki_pages/help:blacklists'>View help.</a>".html_safe, :input_html => {:size => "40x5", :data => {:autocomplete => "tag-query"}} %>
+        <%= f.input :blacklisted_tags, hint: "Posts with these tags will be hidden. Put each tag on a separate line. <a href='/wiki_pages/help:blacklists'>View help.</a>".html_safe, :input_html => { :data => {:autocomplete => "tag-query"}} %>
       </fieldset>
 
       <fieldset id="advanced-settings-section">
@@ -70,8 +70,8 @@
         <%= f.input :disable_cropped_thumbnails, :as => :select, :hint => "Disable cropped (square) thumbnails on mobile", :collection => [["No", "false"], ["Yes", "true"]], :include_blank => false %>
         <%= f.input :enable_desktop_mode, :as => :select, :collection => [["No", "false"], ["Yes", "true"]], :include_blank => false, :hint => "Use the desktop layout on mobile" %>
 
-        <%= f.input :favorite_tags, :label => "Frequent tags", :hint => "A list of tags that you use often. They will appear when using the list of Related Tags.", :input_html => { :rows => 5, :data => { :autocomplete => "tag-query" } } %>
-        <%= f.input :custom_style, :label => "Custom <a href='https://en.wikipedia.org/wiki/Cascading_Style_Sheets'>CSS</a> style".html_safe, :hint => "CSS rules to apply to the whole site.", :input_html => {:size => "40x5"} %>
+        <%= f.input :favorite_tags, :label => "Frequent tags", :hint => "A list of tags that you use often. They will appear when using the list of Related Tags.", :input_html => { :data => { :autocomplete => "tag-query" } } %>
+        <%= f.input :custom_style, :label => "Custom <a href='https://en.wikipedia.org/wiki/Cascading_Style_Sheets'>CSS</a> style".html_safe, :hint => "CSS rules to apply to the whole site." %>
       </fieldset>
 
       <%= f.button :submit, "Submit" %>
diff --git a/app/views/wiki_pages/_form.html.erb b/app/views/wiki_pages/_form.html.erb
index 2ff231fd8..5db3146bd 100644
--- a/app/views/wiki_pages/_form.html.erb
+++ b/app/views/wiki_pages/_form.html.erb
@@ -5,7 +5,7 @@
     <%= f.input :title, error: false, input_html: { data: { autocomplete: "tag" } }, hint: "Change to rename this wiki page. Update any wikis linking to this page first." %>
 
     <% if !@wiki_page.tag&.artist? || @wiki_page.other_names.present? %>
-      <%= f.input :other_names_string, as: :text, input_html: { size: "30x1" }, label: "Other names (#{link_to_wiki "help", "help:translated_tags"})".html_safe, hint: "Names used for this tag on other sites such as Pixiv. Separate with spaces." %>
+      <%= f.input :other_names_string, as: :string, label: "Other names (#{link_to_wiki "help", "help:translated_tags"})".html_safe, hint: "Names used for this tag on other sites such as Pixiv. Separate with spaces." %>
     <% end %>
 
     <%= f.input :body, as: :dtext %>
diff --git a/app/views/wiki_pages/new.html.erb b/app/views/wiki_pages/new.html.erb
index aa796d340..a212649b3 100644
--- a/app/views/wiki_pages/new.html.erb
+++ b/app/views/wiki_pages/new.html.erb
@@ -13,7 +13,7 @@
 
   <%= edit_form_for(@wiki_page) do |f| %>
     <%= f.input :title, error: false, input_html: { data: { autocomplete: "tag" } } %>
-    <%= f.input :other_names_string, as: :text, input_html: { size: "30x1" }, label: "Other names (#{link_to_wiki "help", "help:translated_tags"})".html_safe, hint: "Names used for this tag on other sites such as Pixiv. Separate with spaces." %>
+    <%= f.input :other_names_string, as: :string, label: "Other names (#{link_to_wiki "help", "help:translated_tags"})".html_safe, hint: "Names used for this tag on other sites such as Pixiv. Separate with spaces." %>
     <%= f.input :body, as: :dtext %>
     <%= f.submit "Submit" %>
     <%= dtext_preview_button "wiki_page_body" %>