From 3a3d456bd2d3123fa6d1a360d16e317e7c70ee17 Mon Sep 17 00:00:00 2001 From: evazion Date: Fri, 17 Jul 2020 13:05:40 -0500 Subject: [PATCH] html: standardize font sizes and heading tags. Standardize font sizes and heading tags (

-

) to be more consistent across the site. Changes: * Introduce font size CSS variables and start replacing hardcoded font sizes with standard sizes. * Change header tags to use only one

per page. One

per page is recommended for SEO purposes. Usually this is for the page title, like in forum threads or wiki pages. * Standardize on

for section headers in sidebars and

for smaller subsection headers. Don't use

-

. * In DText, make h1-h4 headers all the same size. Standard wiki style is to ignore h1-h3 and start at h4. * In DText, make h4-h6 the same size as the h1-h3 tags outside of DText. * In the tag list, change the

and

tag category headers to

. * Make usernames in comments and forum posts smaller. Also change the

tag for the commenter name to
. * Make the tag list, paginator, and nav menu smaller on mobile. * Change h1#app-name-header to a#app-name-header. --- app/javascript/src/styles/base/000_vars.scss | 18 +++++------ app/javascript/src/styles/base/020_base.scss | 9 +++--- app/javascript/src/styles/common/dtext.scss | 12 ++++---- .../src/styles/common/main_layout.scss | 4 --- .../src/styles/common/messages.scss | 6 +++- .../src/styles/common/page_header.scss | 4 +-- app/javascript/src/styles/specific/pools.scss | 12 -------- app/javascript/src/styles/specific/posts.scss | 8 ++--- .../src/styles/specific/site_map.scss | 4 --- .../src/styles/specific/z_responsive.scss | 11 +------ app/logical/tag_category.rb | 5 ---- app/presenters/tag_set_presenter.rb | 5 +++- app/views/bulk_update_requests/show.html.erb | 1 - .../comments/partials/show/_comment.html.erb | 4 +-- app/views/dmails/show.html.erb | 4 +-- app/views/forum_posts/_forum_post.html.erb | 4 +-- app/views/forum_posts/destroy.js.erb | 3 +- app/views/layouts/default.html.erb | 2 +- app/views/modqueue/_sidebar.html.erb | 6 ++-- app/views/posts/index.html.erb | 2 +- .../posts/partials/common/_search.html.erb | 2 +- .../posts/partials/index/_blacklist.html.erb | 2 +- app/views/posts/partials/index/_edit.html.erb | 2 +- .../posts/partials/index/_excerpt.html.erb | 8 ++--- .../posts/partials/index/_mode_menu.html.erb | 2 +- .../posts/partials/index/_options.html.erb | 2 +- .../posts/partials/index/_related.html.erb | 2 +- app/views/posts/show.html.erb | 6 ++-- app/views/related_tags/_source_tags.html.erb | 2 +- app/views/related_tags/_tag_column.html.erb | 2 +- app/views/static/error.html.erb | 2 +- app/views/static/search_timeout.html.erb | 6 ++-- app/views/static/site_map.html.erb | 30 +++++++++---------- app/views/wiki_pages/_recent_changes.html.erb | 2 +- app/views/wiki_pages/_sidebar.html.erb | 2 +- config/danbooru_default_config.rb | 5 ---- config/initializers/inflections.rb | 5 ++-- 37 files changed, 83 insertions(+), 123 deletions(-) diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss index af4897f49..78a4c20bb 100644 --- a/app/javascript/src/styles/base/000_vars.scss +++ b/app/javascript/src/styles/base/000_vars.scss @@ -1,13 +1,11 @@ -$h1_size: 2em; -$h2_size: 1.5em; -$h3_size: 1.16667em; -$h4_size: 1em; -$dtext_h1_size: 2em; -$dtext_h2_size: 1.8em; -$dtext_h3_size: 1.6em; -$dtext_h4_size: 1.4em; -$dtext_h5_size: 1.2em; -$dtext_h6_size: 1em; +:root { + --text-sm: 0.9em; + --text-md: 1em; + --text-lg: 1.16667em; + --text-xl: 1.5em; + --text-xxl: 2em; +} + $h1_padding: 0.8em 0 0.25em 0; $h2_padding: 0.8em 0 0.25em 0; $h3_padding: 0.8em 0 0.25em 0; diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss index 352f46349..6549f06bd 100644 --- a/app/javascript/src/styles/base/020_base.scss +++ b/app/javascript/src/styles/base/020_base.scss @@ -25,22 +25,23 @@ dt { font-weight: bold; } -h1, h2, h3, h4, h5, h6 { +h1, h2, h3, h4, h5, h6, .heading { font-family: Tahoma, Verdana, Helvetica, sans-serif; + font-weight: bold; line-height: 1.5em; color: var(--header-color); } h1 { - font-size: $h1_size; + font-size: var(--text-xxl); } h2 { - font-size: $h2_size; + font-size: var(--text-lg); } h3, h4, h5, h6 { - font-size: $h3_size; + font-size: var(--text-md); } fieldset { diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss index 6a9066af4..caf314053 100644 --- a/app/javascript/src/styles/common/dtext.scss +++ b/app/javascript/src/styles/common/dtext.scss @@ -9,32 +9,32 @@ div.prose { } h1 { - font-size: $dtext_h1_size; + font-size: var(--text-xl); padding: $h1_padding; } h2 { - font-size: $dtext_h2_size; + font-size: var(--text-xl); padding: $h2_padding; } h3 { - font-size: $dtext_h3_size; + font-size: var(--text-xl); padding: $h3_padding; } h4 { - font-size: $dtext_h4_size; + font-size: var(--text-xl); padding: $h4_padding; } h5 { - font-size: $dtext_h5_size; + font-size: var(--text-lg); padding: $h4_padding; } h6 { - font-size: $dtext_h6_size; + font-size: var(--text-md); padding: $h4_padding; } diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss index 1af5253b4..31311a6a2 100644 --- a/app/javascript/src/styles/common/main_layout.scss +++ b/app/javascript/src/styles/common/main_layout.scss @@ -6,10 +6,6 @@ div#page { padding: 0 10px; aside#sidebar { - h1 { - font-size: $h3_size; - } - #options-box i.fa-bookmark { margin-right: 0.25em; } diff --git a/app/javascript/src/styles/common/messages.scss b/app/javascript/src/styles/common/messages.scss index 4d70c0103..b38857027 100644 --- a/app/javascript/src/styles/common/messages.scss +++ b/app/javascript/src/styles/common/messages.scss @@ -15,6 +15,10 @@ div.list-of-messages { width: 12em; margin-right: 1em; + div.author-name { + font-weight: bold; + } + a.message-timestamp { font-style: italic; font-size: 0.90em; @@ -42,7 +46,7 @@ div.list-of-messages { margin: 0 0 1em; width: auto; - h4 { + div.author-name { display: inline; margin-right: 0.5em; } diff --git a/app/javascript/src/styles/common/page_header.scss b/app/javascript/src/styles/common/page_header.scss index ea89e5394..11301b97e 100644 --- a/app/javascript/src/styles/common/page_header.scss +++ b/app/javascript/src/styles/common/page_header.scss @@ -3,8 +3,8 @@ } header#top { - h1#app-name-header { - font-size: 2em; + #app-name-header { + font-size: var(--text-xxl); margin: 0 30px; } diff --git a/app/javascript/src/styles/specific/pools.scss b/app/javascript/src/styles/specific/pools.scss index 9ef7f703f..93d90cc3f 100644 --- a/app/javascript/src/styles/specific/pools.scss +++ b/app/javascript/src/styles/specific/pools.scss @@ -27,17 +27,9 @@ div#add-to-pool-dialog { margin-left: 1em; cursor: pointer; } - - h1 { - font-size: $h3_size; - } } div#c-pools { - h1 { - font-size: $h2_size; - } - textarea { height: 10em; } @@ -50,10 +42,6 @@ div#c-pools { } div#c-pool-orders, div#c-favorite-group-orders { - h1 { - font-size: $h2_size; - } - div#a-edit { ul.ui-sortable { list-style-type: none; diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 03a8eb93c..f6dfee59f 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -274,10 +274,6 @@ div#c-posts { &.post-notice-search { background: var(--post-search-notice-background); } } - aside#sidebar #tag-list h2 { - font-size: $h4_size; - } - aside#sidebar > section > ul { margin-bottom: 1em; @@ -308,7 +304,7 @@ div#c-posts { div#a-index { menu#post-sections { margin-bottom: 0.5em; - font-size: $h3_size; + font-size: var(--text-lg); li { padding: 0 1em 0.5em 0; @@ -331,7 +327,7 @@ div#c-posts { menu#post-sections { margin: 0; - font-size: $h3_size; + font-size: var(--text-lg); li { padding: 0 1em 0 0; diff --git a/app/javascript/src/styles/specific/site_map.scss b/app/javascript/src/styles/specific/site_map.scss index cd015c5d1..11c2b7e9b 100644 --- a/app/javascript/src/styles/specific/site_map.scss +++ b/app/javascript/src/styles/specific/site_map.scss @@ -7,10 +7,6 @@ div#c-static { section { flex: 1; - h1 { - font-size: $h3_size; - } - ul { margin-bottom: 1.5em; } diff --git a/app/javascript/src/styles/specific/z_responsive.scss b/app/javascript/src/styles/specific/z_responsive.scss index e775572a5..8c9a61ed2 100644 --- a/app/javascript/src/styles/specific/z_responsive.scss +++ b/app/javascript/src/styles/specific/z_responsive.scss @@ -4,20 +4,12 @@ div#page { margin: 0 0.5rem; padding: 0; - - aside#sidebar { - font-size: $h3_size; - } } header#top { position: relative; text-align: center; - h1#app-name-header { - display: inline; - } - #maintoggle { display: block; font-weight: bold; @@ -28,7 +20,6 @@ } nav#nav { - font-size: $h3_size; line-height: 2em; display: none; @@ -53,7 +44,7 @@ } div.paginator { - font-size: $h2_size; + font-size: var(--text-lg); padding: 1em 0 0; li { diff --git a/app/logical/tag_category.rb b/app/logical/tag_category.rb index ea3d40b7c..92c9f3819 100644 --- a/app/logical/tag_category.rb +++ b/app/logical/tag_category.rb @@ -25,11 +25,6 @@ class TagCategory @@short_name_mapping ||= Hash[Danbooru.config.full_tag_config_info.map { |k, v| [v["short"], k] }] end - # Returns a hash mapping for split_tag_list_html (presenters/tag_set_presenter.rb) - def header_mapping - @@header_mapping ||= Hash[Danbooru.config.full_tag_config_info.map { |k, v| [k, v["header"]] }] - end - # Returns a hash mapping for related tag buttons (javascripts/related_tag.js.erb) def related_button_mapping @@related_button_mapping ||= Hash[Danbooru.config.full_tag_config_info.map { |k, v| [k, v["relatedbutton"]] }] diff --git a/app/presenters/tag_set_presenter.rb b/app/presenters/tag_set_presenter.rb index 6182b2073..d10a92f46 100644 --- a/app/presenters/tag_set_presenter.rb +++ b/app/presenters/tag_set_presenter.rb @@ -35,7 +35,10 @@ class TagSetPresenter typetags = tags_for_category(category) if typetags.any? - html << TagCategory.header_mapping[category] if headers + if headers + html << %{

#{category.capitalize.pluralize(typetags.size)}

} + end + html << %{
    } typetags.each do |tag| html << build_list_item(tag, current_query: current_query, show_extra_links: show_extra_links, name_only: name_only, humanize_tags: humanize_tags) diff --git a/app/views/bulk_update_requests/show.html.erb b/app/views/bulk_update_requests/show.html.erb index f81923425..d37f61260 100644 --- a/app/views/bulk_update_requests/show.html.erb +++ b/app/views/bulk_update_requests/show.html.erb @@ -12,7 +12,6 @@
-

Script

<%= format_text @bulk_update_request.processor.to_dtext %>
diff --git a/app/views/comments/partials/show/_comment.html.erb b/app/views/comments/partials/show/_comment.html.erb index 9df4db8b5..0dea551d8 100644 --- a/app/views/comments/partials/show/_comment.html.erb +++ b/app/views/comments/partials/show/_comment.html.erb @@ -17,12 +17,12 @@ <% end %> data-is-voted="<%= comment.voted_by?(CurrentUser.user) %>">
-

+
<%= link_to_user comment.creator %> <% if comment.is_deleted? %> (deleted) <% end %> -

+
<%= link_to time_ago_in_words_tagged(comment.created_at), post_path(comment.post, anchor: "comment_#{comment.id}"), class: "message-timestamp" %>
diff --git a/app/views/dmails/show.html.erb b/app/views/dmails/show.html.erb index bca9226e1..59161e80f 100644 --- a/app/views/dmails/show.html.erb +++ b/app/views/dmails/show.html.erb @@ -4,8 +4,7 @@
-

Show Message

-

<%= @dmail.title %>

+

<%= @dmail.title %>

  • Sender: <%= link_to_user @dmail.from %>
    • @@ -13,7 +12,6 @@
  • Date: <%= compact_time(@dmail.created_at) %>
-

Body

<%= format_text(@dmail.body) %> diff --git a/app/views/forum_posts/_forum_post.html.erb b/app/views/forum_posts/_forum_post.html.erb index 36e802f49..4f08f5fa9 100644 --- a/app/views/forum_posts/_forum_post.html.erb +++ b/app/views/forum_posts/_forum_post.html.erb @@ -6,12 +6,12 @@ <% end %> data-creator="<%= forum_post.creator.name %>">
-

+
<%= link_to_user forum_post.creator %> <% if forum_post.is_deleted? %> (deleted) <% end %> -

+
<%= link_to time_ago_in_words_tagged(forum_post.created_at), forum_post, class: "message-timestamp" %>
diff --git a/app/views/forum_posts/destroy.js.erb b/app/views/forum_posts/destroy.js.erb index 6f187f01c..146cb8573 100644 --- a/app/views/forum_posts/destroy.js.erb +++ b/app/views/forum_posts/destroy.js.erb @@ -1,2 +1 @@ - -$("article[data-forum-post-id=<%= @forum_post.id %>] div.author h4").append(" (deleted)"); +$("article[data-forum-post-id=<%= @forum_post.id %>] div.author div.author-name").append(" (deleted)"); diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb index e389762f9..d09e51a01 100644 --- a/app/views/layouts/default.html.erb +++ b/app/views/layouts/default.html.erb @@ -50,7 +50,7 @@ <%= render "news_updates/listing" %>
-

<%= link_to Danbooru.config.app_name, "/" %>

+ <%= link_to Danbooru.config.app_name, root_path, id: "app-name-header", class: "heading" %>
diff --git a/app/views/modqueue/_sidebar.html.erb b/app/views/modqueue/_sidebar.html.erb index 0ee352052..e11458f16 100644 --- a/app/views/modqueue/_sidebar.html.erb +++ b/app/views/modqueue/_sidebar.html.erb @@ -12,7 +12,7 @@ <%= render "posts/partials/index/blacklist" %>
Status
+

Status

  • <%= link_to "status:pending", modqueue_index_path(search: { tags: "status:pending" }) %> @@ -33,7 +33,7 @@

    Uploaders
    +

    Uploaders

      <% @uploaders.each do |uploader, count| %>
    • @@ -46,7 +46,7 @@

      Tags
      +

      Tags

      <%= render "tag_list", tags: @artist_tags %> <%= render "tag_list", tags: @copyright_tags %> diff --git a/app/views/posts/index.html.erb b/app/views/posts/index.html.erb index 093dc49cc..1b5330f92 100644 --- a/app/views/posts/index.html.erb +++ b/app/views/posts/index.html.erb @@ -6,7 +6,7 @@ <%= render "posts/partials/index/blacklist" %>
      -

      Tags

      +

      Tags

      <%= @post_set.tag_list_html(current_query: params[:tags], show_extra_links: policy(Post).show_extra_links?) %>
      diff --git a/app/views/posts/partials/common/_search.html.erb b/app/views/posts/partials/common/_search.html.erb index 08fc1de6f..a790825e5 100644 --- a/app/views/posts/partials/common/_search.html.erb +++ b/app/views/posts/partials/common/_search.html.erb @@ -1,7 +1,7 @@ <%# path, tags %>

<%= format_text(post_set.pool.description) %> @@ -57,10 +57,10 @@

<% end %> <% elsif post_set.favgroup.present? %> -

+

Favorite Group: <%= link_to post_set.favgroup.pretty_name, favorite_group_path(post_set.favgroup) %> -

+ Creator: <%= link_to_user post_set.favgroup.creator %> <% elsif post_set.has_blank_wiki? %>

There is currently no wiki page for the tag <%= link_to_wiki post_set.tag.pretty_name %>. You can <%= link_to "create one", new_wiki_page_path(wiki_page: { title: post_set.tag.name }), rel: "nofollow" %>.

diff --git a/app/views/posts/partials/index/_mode_menu.html.erb b/app/views/posts/partials/index/_mode_menu.html.erb index 3f42e70c4..d7c5a9464 100644 --- a/app/views/posts/partials/index/_mode_menu.html.erb +++ b/app/views/posts/partials/index/_mode_menu.html.erb @@ -1,6 +1,6 @@ <% if policy(Post).can_use_mode_menu? %>
-

Mode

+

Mode