Long tail of style and accessibility fixes
This commit is contained in:
Godwin
parent
844fe3d467
commit
2220ecaf53
1
.gitignore
vendored
1
.gitignore
vendored
@ -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/*
|
||||
|
||||
@ -11,11 +11,11 @@
|
||||
editor: editor,
|
||||
class: 'pen',
|
||||
textarea: '<textarea name="' + name + '"></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',
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
2
vendor/assets/javascripts/pen.js
vendored
2
vendor/assets/javascripts/pen.js
vendored
@ -85,7 +85,7 @@
|
||||
stayMsg: 'Are you going to leave here?',
|
||||
textarea: '<textarea name="content"></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: {},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user