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-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) {

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

@@ -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;
}
}

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

@@ -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%;
}
}

2
app/logical/dtext_input.rb
View File

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

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| %>
<%= 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 %>

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 :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 %>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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