jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: adjust form input box sizes.

Browse Source 
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.
This commit is contained in:
evazion
2021-02-16 02:47:37 -06:00
parent e215fd1c47
commit b8d95ace64
16 changed files with 48 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/src/javascripts/post_mode_menu.js
View File

@@ -124,12 +124,6 @@ PostModeMenu.open_edit = function(post_id) {
$("#quick-edit-div").slideDown("fast"); $("#quick-edit-div").slideDown("fast");
$("#quick-edit-form").attr("data-post-id", post_id); $("#quick-edit-form").attr("data-post-id", post_id);
$("#post_tag_string").val($post.data("tags") + " ").focus().selectEnd(); $("#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) { PostModeMenu.click = function(e) {

27
app/javascript/src/styles/common/simple_form.scss
View File

@@ -31,12 +31,17 @@ form.simple_form {
margin-bottom: 1em; margin-bottom: 1em;
input[type=text], input[type=file], input[type=password], input[type=email] { input[type=text], input[type=file], input[type=password], input[type=email] {
max-width: 20em; width: 100%;
max-width: 25em;
} }
.hint { .hint {
@extend .fineprint; @extend .fineprint;
padding-left: 1em; padding-left: 1em;
@media (max-width: 660px) {
display: none;
}
} }
input.validation-error { input.validation-error {
@@ -48,10 +53,20 @@ form.simple_form {
padding-left: 0; padding-left: 0;
display: block; display: block;
} }
textarea {
width: 100%;
max-width: 60rem;
max-height: 15rem;
&.text { height: 20vh; }
&.dtext { height: 40vh; }
}
} }
textarea { select[multiple] {
width: 70%; height: 20vh;
max-height: 15rem;
} }
label { label {
@@ -80,6 +95,7 @@ form.simple_form {
form.inline-form { form.inline-form {
display: table; display: table;
width: 100%;
> div.input { > div.input {
display: table-row; display: table-row;
@@ -87,12 +103,13 @@ form.inline-form {
label { label {
text-align: right; text-align: right;
padding-right: 1em;
white-space: nowrap;
width: 1%;
} }
label, input { label, input {
display: table-cell; display: table-cell;
padding-right: 1em;
white-space: nowrap;
line-height: 1em; line-height: 1em;
} }
} }

29
app/javascript/src/styles/specific/posts.scss
View File

@@ -155,10 +155,6 @@ div#c-posts {
margin: 1em 0 0.5em; margin: 1em 0 0.5em;
} }
#edit textarea {
width: 100%;
}
#favlist { #favlist {
word-wrap: break-word; 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, 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. */ /* Container for the tag edit <textarea>, header, and related tags buttons. */
#tags-container { #tags-container {
max-width: 60rem;
div.header { div.header {
line-height: 1.5em; 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%;
}
}

2
app/logical/dtext_input.rb
View File

@@ -20,7 +20,7 @@ class DtextInput < SimpleForm::Inputs::Base
if options[:inline] if options[:inline]
t.concat @builder.text_field(attribute_name, merged_input_options) t.concat @builder.text_field(attribute_name, merged_input_options)
else 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 end
t.concat t.tag.div(id: "dtext-preview", class: "dtext-preview prose") t.concat t.tag.div(id: "dtext-preview", class: "dtext-preview prose")

2
app/views/api_keys/_form.html.erb
View File

@@ -1,6 +1,6 @@
<%= edit_form_for(api_key, html: { class: "stacked-hints" }) do |f| %> <%= 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 :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 :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" %> <%= f.submit "Create" %>
<% end %> <% end %>

4
app/views/artist_commentaries/_form.html.erb
View File

@@ -14,10 +14,10 @@
<%= f.input :post_id, as: :hidden, input_html: { value: post.id } %> <%= 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_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_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") %> <% if post.has_tag?("commentary") %>
<%= f.input :remove_commentary_tag, as: :boolean %> <%= f.input :remove_commentary_tag, as: :boolean %>

4
app/views/artists/_form.html.erb
View File

@@ -1,9 +1,9 @@
<%= edit_form_for(@artist) do |f| %> <%= edit_form_for(@artist) do |f| %>
<%= f.input :name, as: :string, input_html: { "data-autocomplete": "tag" } %> <%= 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 :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? %> <% if @artist.wiki_page.present? %>
<div class="input"> <div class="input">

2
app/views/bulk_update_requests/_form.html.erb
View File

@@ -20,7 +20,7 @@
<% end %> <% end %>
</p> </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? %> <% if @bulk_update_request.new_record? %>
<div class="input"> <div class="input">

2
app/views/news_updates/edit.html.erb
View File

@@ -3,7 +3,7 @@
<h1>Edit Update</h1> <h1>Edit Update</h1>
<%= edit_form_for(@news_update) do |f| %> <%= 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" %> <%= f.button :submit, "Submit" %>
<% end %> <% end %>
</div> </div>

2
app/views/news_updates/new.html.erb
View File

@@ -3,7 +3,7 @@
<h1>New Update</h1> <h1>New Update</h1>
<%= edit_form_for(@news_update) do |f| %> <%= 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" %> <%= f.button :submit, "Submit" %>
<% end %> <% end %>
</div> </div>

2
app/views/pool_elements/_new.html.erb
View File

@@ -3,7 +3,7 @@
<div class="input"> <div class="input">
<label>Pool Name</label> <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>
<div class="input"> <div class="input">

6
app/views/posts/partials/show/_edit.html.erb
View File

@@ -42,8 +42,8 @@
</fieldset> </fieldset>
<% end %> <% end %>
<%= f.input :parent_id, label: "Parent", input_html: { size: 60 }, as: :string %> <%= f.input :parent_id, label: "Parent", as: :string %>
<%= f.input :source, input_html: { size: 60 } %> <%= f.input :source %>
<div class="input fixed-width-container" id="tags-container"> <div class="input fixed-width-container" id="tags-container">
<div class="header"> <div class="header">
@@ -59,7 +59,7 @@
</div> </div>
<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> </div>
<%= render "related_tags/buttons" %> <%= render "related_tags/buttons" %>

12
app/views/uploads/new.html.erb
View File

@@ -35,7 +35,7 @@
</div> </div>
<div class="upload_source_container"> <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" %> <%= tag.button "Similar", id: "similar-button" %>
</div> </div>
@@ -48,8 +48,8 @@
<a href="#" id="toggle-artist-commentary">show »</a> <a href="#" id="toggle-artist-commentary">show »</a>
<div class="artist-commentary" style="display: none;"> <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_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: { size: "60x5", value: params[:artist_commentary_desc] } %> <%= f.input :artist_commentary_desc, as: :text, label: "Original Description", input_html: { value: params[:artist_commentary_desc] } %>
</div> </div>
</div> </div>
@@ -58,8 +58,8 @@
<a href="#" id="toggle-commentary-translation">show »</a> <a href="#" id="toggle-commentary-translation">show »</a>
<div class="commentary-translation" style="display: none;"> <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_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: { size: "60x5", value: params[:translated_commentary_desc] } %> <%= f.input :translated_commentary_desc, as: :text, label: "Translated Description", input_html: { value: params[:translated_commentary_desc] } %>
</div> </div>
</div> </div>
@@ -76,7 +76,7 @@
</a> </a>
</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: 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" %> <%= render "related_tags/buttons" %>
</div> </div>

6
app/views/users/edit.html.erb
View File

@@ -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 :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 :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 :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>
<fieldset id="advanced-settings-section"> <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 :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 :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 :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.", :input_html => {:size => "40x5"} %> <%= 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> </fieldset>
<%= f.button :submit, "Submit" %> <%= f.button :submit, "Submit" %>

2
app/views/wiki_pages/_form.html.erb
View File

@@ -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." %> <%= 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? %> <% 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 %> <% end %>
<%= f.input :body, as: :dtext %> <%= f.input :body, as: :dtext %>

2
app/views/wiki_pages/new.html.erb
View File

@@ -13,7 +13,7 @@
<%= edit_form_for(@wiki_page) do |f| %> <%= edit_form_for(@wiki_page) do |f| %>
<%= f.input :title, error: false, input_html: { data: { autocomplete: "tag" } } %> <%= 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.input :body, as: :dtext %>
<%= f.submit "Submit" %> <%= f.submit "Submit" %>
<%= dtext_preview_button "wiki_page_body" %> <%= dtext_preview_button "wiki_page_body" %>