From 2220ecaf53fa4ab121e4e617a6c9ce8f5475975e Mon Sep 17 00:00:00 2001 From: Godwin Date: Thu, 2 Jun 2016 20:23:41 -0700 Subject: [PATCH] Long tail of style and accessibility fixes --- .gitignore | 1 + app/assets/javascripts/editor.js | 6 +-- app/assets/stylesheets/_application.scss | 61 +++++++++++++++++------- app/helpers/application_helper.rb | 36 ++++++++++++++ app/views/workshops/_show.html.haml | 6 +-- app/views/workshops/new.html.haml | 10 +--- vendor/assets/javascripts/pen.js | 2 +- 7 files changed, 89 insertions(+), 33 deletions(-) diff --git a/.gitignore b/.gitignore index 2685fea..cc90ddb 100644 --- a/.gitignore +++ b/.gitignore @@ -73,6 +73,7 @@ brakeman.html /app/assets/stylesheets/translations/* /app/assets/stylesheets/web-fonts/* /app/assets/stylesheets/translations/* +/app/assets/stylesheets/editor/* # Ignore test artifacts /config/locales/data/html_records/* diff --git a/app/assets/javascripts/editor.js b/app/assets/javascripts/editor.js index ed4c0be..9e7aca9 100644 --- a/app/assets/javascripts/editor.js +++ b/app/assets/javascripts/editor.js @@ -11,11 +11,11 @@ editor: editor, class: 'pen', textarea: '', - list: ['p', 'h3', 'h4', 'blockquote', 'insertorderedlist', 'insertunorderedlist', 'bold', 'italic', 'underline', 'strikethrough', 'createlink', 'insertimage'], + list: ['p', 'h1', 'h2', 'blockquote', 'insertorderedlist', 'insertunorderedlist', 'bold', 'italic', 'underline', 'strikethrough', 'createlink', 'insertimage'], title: { 'p': 'Paragraph', - 'h3': 'Major Heading', - 'h4': 'Minor Heading', + 'h1': 'Major Heading', + 'h2': 'Minor Heading', 'blockquote': 'Quotation', 'insertorderedlist': 'Ordered List', 'insertunorderedlist': 'Unordered List', diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index bf8354e..ac8930c 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -216,16 +216,26 @@ textarea, .textarea { } } -.textarea { +.textarea, .workshop-description { > :first-child { margin-top: 0; } + > :last-child { margin-bottom: 0; } + p { font-size: 1.125em; } + + h1 { + font-size: 1.667em; + } + + h2 { + font-size: 1.25em; + } } input { @@ -257,6 +267,14 @@ input { } } + &.big input { + @include font-family(secondary); + + .composition & { + margin-top: 1em; + } + } + label, &.focused label { position: absolute; @@ -290,15 +308,6 @@ input { will-change: box-shadow; } - &.big input { - font-size: 2em; - @include font-family(secondary); - - .composition & { - margin-top: 1em; - } - } - &:focus, &:active, &:focus { label { @@ -772,12 +781,12 @@ ul.warnings li, .user-nav-bar { position: absolute; right: 0; - width: auto; text-align: right; top: 1em; font-size: 0.9em; width: 100%; padding-left: 13em; + padding-right: 1em; a { display: block; @@ -839,7 +848,7 @@ ul.warnings li, background-color: inherit; @include _(transform, rotate(135deg)); @include _(transition, 'transform 200ms ease-in-out, background-color 200ms ease-in-out'); - @include _(box-shadow, 0.2em -0.1em 0.8em -0.4em #000); + @include _(box-shadow, 0.2em -0.4em 0.8em -0.4em #000); } &.enabled { @@ -879,7 +888,6 @@ ul.warnings li, #main { position: relative; - max-width: (rems(68) - $sidebar-width) * 2; background-color: $white; padding-bottom: rems(2); @@ -1223,6 +1231,14 @@ $header-tilt: 8deg; } } + .number-field, + .email-field, + .text-field { + &.big input { + font-size: 2em; + } + } + .flex-column { display: flex; align-items: flex-start; @@ -1566,10 +1582,12 @@ input[type="submit"]:focus, @include _(animation, fade-out ease-in-out 500ms infinite alternate both); } -input:focus, -textarea:focus, -.textarea { - @include _(animation, none); +body { + input:focus, + textarea:focus, + .textarea { + @include _(animation, none); + } } @include breakpoint(large) { @@ -2153,12 +2171,19 @@ html[data-lingua-franca-example="html"] { @include translation-pointer; } +.workshop-notes { + p { + font-size: 1em; + } +} + .workshop-list { list-style: none; padding: 0 2em; .workshop-description { - max-height: 10em; + font-size: 0.8em; + max-height: 20em; padding: 1em; overflow: hidden; } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 72fc43e..027ee51 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -665,6 +665,42 @@ module ApplicationHelper _!((p * 10000).to_i.to_s.gsub(/^(.*)(\d\d)$/, '\1.\2%')) end + def richtext(text, reduce_headings = 2) + return '' unless text.present? + return _!(text). + gsub(/<(\/?)h4>/, '<\1h' + (reduce_headings + 4).to_s + '>'). + gsub(/<(\/?)h3>/, '<\1h' + (reduce_headings + 3).to_s + '>'). + gsub(/<(\/?)h2>/, '<\1h' + (reduce_headings + 2).to_s + '>'). + gsub(/<(\/?)h1>/, '<\1h' + (reduce_headings + 1).to_s + '>'). + html_safe + end + + def textarea(name, value, options = {}) + label_id = "#{name.to_s}-label" + description_id = nil + html = label_tag(name, nil, id: label_id) + + if options[:warning].present? + description_id = "#{name.to_s}-label" unless options[:help].present? + html += content_tag(:div, _(options[:warning], :s, 2), id: description_id, class: 'warning-info') + end + + if options[:help].present? + description_id = "#{name.to_s}-label" + html += content_tag(:div, _(options[:help], :s, 2), id: description_id, class: 'input-field-help') + end + + html += content_tag(:div, value.present? ? value.html_safe : '', + id: name, + class: 'textarea', + data: { name: name }, + lang: options[:lang], + aria: { labeledby: label_id, describedby: description_id } + ) + + return content_tag(:div, html, class: ['text-area-field', 'input-field']).html_safe + end + private def _form_field(type, name, value, options) if type == 'check_box' diff --git a/app/views/workshops/_show.html.haml b/app/views/workshops/_show.html.haml index 0e8e1c4..9631b02 100644 --- a/app/views/workshops/_show.html.haml +++ b/app/views/workshops/_show.html.haml @@ -9,7 +9,7 @@ - if preview.blank? && workshop.can_show_interest?(current_user) = form_tag toggle_workshop_interest_path(workshop.conference.slug, workshop.id) do = button_tag (workshop.interested?(current_user) ? :remove_interest : :show_interest), :value => :toggle_interest, :class => (workshop.interested?(current_user) ? :delete : :add) - =_!(workshop.info).html_safe if workshop.info.present? + = richtext workshop.info - if preview.blank? && translations_available_for_editing .actions - translations_available_for_editing.each do |locale| @@ -55,6 +55,6 @@ %h3=_'articles.workshops.headings.needs','What do you need?' %p= _!((needs.map { |x| _"workshop.options.needs.#{x}" }).join(', ').to_s.html_safe) - if workshop.notes.present? - = columns(medium: 12) do + = columns(medium: 12, class: 'workshop-notes') do %h3=_'articles.workshops.headings.notes','Notes' - =_!(workshop.notes).html_safe + = richtext workshop.notes, 3 diff --git a/app/views/workshops/new.html.haml b/app/views/workshops/new.html.haml index b56921d..f1b9bc7 100644 --- a/app/views/workshops/new.html.haml +++ b/app/views/workshops/new.html.haml @@ -26,10 +26,7 @@ .original-text %h4=_'translate.content.Translation_of' .value=@workshop.title! - .text-area-field.input-field - = label_tag :info - .input-field-help=_'articles.workshops.paragraphs.info', :s, 2 - .textarea#info{lang: @translation, data: {name: :info}}=(@info || '').html_safe + = textarea :info, @info, help: 'articles.workshops.paragraphs.info', lang: @translation - if @is_translating .original-text %h4=_'translate.content.Translation_of' @@ -80,10 +77,7 @@ = label_tag :needs_facilitators do = _'workshop.options.needs_facilitators', 'Needs Additional Facilitators' = columns(medium: 12) do - .text-area-field.input-field - = label_tag :notes - .warning-info=_'articles.workshops.paragraphs.notes','Notes are only viewable by conference hosts and workshop facilitators' - .textarea#notes{data: {name: :notes}}=(@workshop.notes || '').html_safe + = textarea :notes, @workshop.notes, warning: 'articles.workshops.paragraphs.notes' = columns(medium: 12) do .actions.next-prev = button_tag :save, value: :save diff --git a/vendor/assets/javascripts/pen.js b/vendor/assets/javascripts/pen.js index e65e212..ee2d603 100644 --- a/vendor/assets/javascripts/pen.js +++ b/vendor/assets/javascripts/pen.js @@ -85,7 +85,7 @@ stayMsg: 'Are you going to leave here?', textarea: '', list: [ - 'blockquote', 'h2', 'h3', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule', + 'blockquote', 'h1', 'h2', 'p', 'code', 'insertorderedlist', 'insertunorderedlist', 'inserthorizontalrule', 'indent', 'outdent', 'bold', 'italic', 'underline', 'createlink', 'insertimage' ], titles: {},