From cd6010966435dd11ca1320edc9044100658fd5bb Mon Sep 17 00:00:00 2001 From: Godwin Date: Fri, 3 Jun 2016 20:37:53 -0700 Subject: [PATCH] Created helper for checkbox and radio button groups --- app/assets/stylesheets/_application.scss | 77 +++++++++++++++++------- app/helpers/application_helper.rb | 67 +++++++++++++++++++++ app/views/workshops/_show.html.haml | 19 +++--- app/views/workshops/new.html.haml | 41 ++----------- app/views/workshops/show.html.haml | 2 +- 5 files changed, 138 insertions(+), 68 deletions(-) diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index 27b6ac3..e9da970 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -488,6 +488,20 @@ input { background-color: $colour-3; } } + + &[type="radio"] + label { + @include after { + content: '+'; + border: 0; + font-size: 2.5em; + top: -0.125em; + left: 0.05em; + line-height: 1em; + color: #FFF; + height: 1em; + width: 1em; + } + } } .other { @@ -516,25 +530,6 @@ input { font-size: 0.75em; } -// .check-box-field { -// label { -// color: $white; -// font-weight: normal; -// @include font-family(secondary); -// @include _(text-stroke, 0.5px #000); - -// @include before { -// font-size: 0.6em; -// bottom: -0.8em; -// } - -// @include after { -// font-size: 0.3em; -// bottom: -0.5em; -// } -// } -// } - .radio-button-field { label { width: 7em; @@ -585,6 +580,29 @@ form { height: 16em; } } + + &.mini-flex-form { + display: flex; + align-items: flex-start; + + .input-field { + flex: 1; + } + + button, .button { + margin-left: 1em; + height: 2.6em; + } + } +} + +fieldset { + padding: 0; + border: 0; +} + +.view-object { + margin-bottom: 3em; } .flex-form, .flex-column { @@ -628,8 +646,13 @@ form { &.next-prev { display: flex; + flex-wrap: wrap; flex-direction: row-reverse; margin: 0; + + button, .button { + margin-bottom: 1em; + } } } @@ -1219,11 +1242,23 @@ $header-tilt: 8deg; } } +@include keyframes(colour-out) { + to { + background-color: transparent; + } +} + body :focus, -input[type="submit"]:focus, +input[type="submit"]:focus { + @include _(animation, fade-out ease-in-out 500ms infinite alternate both); +} + .check-box-field input:focus + label, .radio-button-field input:focus + label { - @include _(animation, fade-out ease-in-out 500ms infinite alternate both); + @include before { + background-color: $colour-2; + @include _(animation, colour-out ease-in-out 500ms infinite alternate both); + } } body { diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index dff73af..dfb16c7 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -734,6 +734,73 @@ module ApplicationHelper return html.html_safe end + def radiobuttons(name, boxes, value, label_key, options = {}) + checkboxes(name, boxes, [value], label_key, options.merge({radiobuttons: true})) + end + + def checkboxes(name, boxes, values, label_key, options = {}) + html = '' + + label_id = nil + description_id = nil + + if options[:heading].present? + label_id ||= "#{name.to_s}-label" + html += content_tag(:h3, _(options[:heading]), id: label_id) + end + + if options[:help].present? + description_id ||= "#{name.to_s}-desc" + html += content_tag(:div, _(options[:help], :s, 2), class: 'input-field-help', id: description_id) + end + + boxes_html = '' + + values = values.present? ? values.map(&:to_s) : [] + boxes = boxes.map(&:to_s) + boxes.each do | box | + checked = values.include?(box) + values -= [box] if checked + id = nil + if options[:radiobuttons].present? + id = "#{name.to_s}_#{box}" + boxes_html += radio_button_tag(name, box, checked) + else + id = "#{name.to_s}[#{box}]" + boxes_html += check_box_tag(id, 1, checked) + end + boxes_html += label_tag(id, _("#{label_key.to_s}.#{box}")) + end + + if options[:other].present? + id = nil + if options[:radiobuttons].present? + id = "#{name.to_s}_other" + boxes_html += radio_button_tag(name, :other, values.present?) + else + id = "#{name.to_s}[other]" + boxes_html += check_box_tag(id, 1, values.present?) + end + boxes_html += label_tag id, + content_tag(:div, + text_field_tag("other_#{name.to_s}", values.first, placeholder: (_"#{label_key}.other"), required: values.present?), + class: 'other') + end + + html += content_tag(:fieldset, boxes_html.html_safe, + aria: { + labeledby: label_id, + describedby: description_id + }, + class: [ + 'check-box-field', + 'input-field', + options[:vertical] ? 'vertical' : nil + ]) + + return html.html_safe + end + private def _original_content(value, lang) content_tag(:div, ( diff --git a/app/views/workshops/_show.html.haml b/app/views/workshops/_show.html.haml index 9631b02..46b51c9 100644 --- a/app/views/workshops/_show.html.haml +++ b/app/views/workshops/_show.html.haml @@ -1,4 +1,4 @@ -= row do += row class: 'view-object' do = columns(medium: 12) do %h2=_!workshop.title .workshop-interest @@ -30,15 +30,14 @@ - elsif preview.blank? && (f.user_id == current_user.id && f.role.to_sym != :creator) || (!workshop.conference.registered?(u) && workshop.active_facilitator?(current_user)) =(link_to (_'actions.workshops.Remove'), approve_facilitate_workshop_request_path(workshop.conference.slug, workshop.id, f.user_id, 'remove'), :class => [:button, :delete]) - unless preview.present? - .actions - =(link_to (_'actions.workshops.Facilitate'), facilitate_workshop_path(workshop.conference.slug, workshop.id), :class => [:button, workshop.needs_facilitators ? :accented : :subdued]) unless workshop.facilitator?(current_user) - - if workshop.active_facilitator?(current_user) - %h4=_'articles.workshops.headings.add_facilitator','Add a facilitator' - = form_tag workshop_add_facilitator_path(workshop.conference.slug, workshop.id), :class => 'add-facilitator flex-form' do - .email-field.input-field - = email_field_tag :email, nil, required: true - = label_tag :email - = button_tag :add + =(link_to (_'actions.workshops.Facilitate'), facilitate_workshop_path(workshop.conference.slug, workshop.id), :class => [:button, workshop.needs_facilitators ? :accented : :subdued]) unless workshop.facilitator?(current_user) + - if workshop.active_facilitator?(current_user) + %h4=_'articles.workshops.headings.add_facilitator','Add a facilitator' + = form_tag workshop_add_facilitator_path(workshop.conference.slug, workshop.id), :class => 'add-facilitator mini-flex-form' do + .email-field.input-field + = email_field_tag :email, nil, required: true + = label_tag :email + = button_tag :add - languages = JSON.parse(workshop.languages || '[]') - if languages.present? = columns(medium: 6) do diff --git a/app/views/workshops/new.html.haml b/app/views/workshops/new.html.haml index 7ed003b..d95b180 100644 --- a/app/views/workshops/new.html.haml +++ b/app/views/workshops/new.html.haml @@ -23,43 +23,12 @@ = textarea :info, @info, help: 'articles.workshops.paragraphs.info', lang: @translation, original_value: @is_translating ? richtext(@workshop.info!, 4).html_safe : nil, original_lang: @workshop.locale - if !@is_translating && (@workshop.id.blank? || @can_edit) = columns(medium: 6) do - %h3=_'articles.workshops.headings.languages','Workshop Language' - .input-field-help=_'articles.workshops.paragraphs.languages', :s, 2 - .check-box-field.vertical.input-field - - [:en, :es, :fr].each do |language| - = check_box_tag "languages[#{language}]", 1, @languages && @languages.include?(language) - = label_tag "languages_#{language}" do - = _"languages.#{language}" - %h3=_'articles.workshops.headings.theme','Theme' - .input-field-help=_'articles.workshops.paragraphs.theme', :s, 2 - - theme_found = false - .check-box-field.vertical.input-field - - Workshop.all_themes.each do |theme| - - is_selected = (@workshop.theme.to_s == theme.to_s) - - theme_found ||= is_selected - = radio_button_tag :theme, theme, is_selected - = label_tag "theme_#{theme}" do - = _"workshop.options.theme.#{theme}" - - is_other = (@workshop.theme.present? && !theme_found) - = radio_button_tag :theme, :other, is_other - = label_tag "theme_other" do - .other - = text_field_tag :other_theme, (is_other ? @workshop.theme : nil), placeholder: (_"workshop.options.theme.other"), required: is_other + = checkboxes :languages, [:en, :es, :fr], @languages, 'languages', vertical: true, heading: 'articles.workshops.headings.languages', help: 'articles.workshops.paragraphs.languages' + = radiobuttons :theme, Workshop.all_themes, @workshop.theme, 'workshop.options.theme', vertical: true, heading: 'articles.workshops.headings.theme', help: 'articles.workshops.paragraphs.theme', other: true = columns(medium: 6) do - %h3=_'articles.workshops.headings.needs','What do you need?' - .input-field-help=_'articles.workshops.paragraphs.needs', :s, 2 - .check-box-field.vertical.input-field - - [:sound, :projector, :tools].each do |need| - = check_box_tag "needs[#{need.to_s}]", 1, JSON.parse(@workshop.needs || '[]').include?(need.to_s) - = label_tag "needs_#{need}" do - = _"workshop.options.needs.#{need.to_s}" - %h3=_'articles.workshops.headings.space','Type of space' - .input-field-help=_'articles.workshops.paragraphs.space', :s, 2 - .check-box-field.vertical.input-field - - [:meeting_room, :workshop, :outdoor_meeting].each do |space| - = radio_button_tag :space, space, @workshop.space == space - = label_tag "space_#{space}" do - = _"workshop.options.space.#{space}" + = checkboxes :needs, [:sound, :projector, :tools], JSON.parse(@workshop.needs || '[]'), 'workshop.options.needs', vertical: true, heading: 'articles.workshops.headings.needs', help: 'articles.workshops.paragraphs.needs' + = radiobuttons :space, [:meeting_room, :workshop, :outdoor_meeting], @workshop.space, 'workshop.options.space', vertical: true, heading: 'articles.workshops.headings.space', help: 'articles.workshops.paragraphs.space' + %h3=_'articles.workshops.headings.needs_facilitators','Looking for help?' .input-field-help=_'articles.workshops.paragraphs.needs_facilitators', :s, 2 .check-box-field.vertical.input-field diff --git a/app/views/workshops/show.html.haml b/app/views/workshops/show.html.haml index 7b7483c..bb6ab2d 100644 --- a/app/views/workshops/show.html.haml +++ b/app/views/workshops/show.html.haml @@ -15,6 +15,6 @@ = render 'workshops/show', :workshop => @workshop, :translations_available_for_editing => @translations_available_for_editing, :preview => false = row do = columns(medium: 12) do - .actions.right + .actions.next-prev = (link_to (_'actions.workshops.Edit'), edit_workshop_path(@this_conference.slug, @workshop.id), :class => [:button, :modify]) if @workshop.can_edit?(current_user) = (link_to (_'actions.workshops.Delete'), delete_workshop_path(@this_conference.slug, @workshop.id), :class => 'button delete') if @workshop.can_delete?(current_user)