Created helper for checkbox and radio button groups
This commit is contained in:
Godwin
parent
f52f282c43
commit
cd60109664
@ -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 {
|
||||
|
||||
@ -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, (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
= row do
|
||||
= row class: 'view-object' do
|
||||
= columns(medium: 12) do
|
||||
%h2=_!workshop.title
|
||||
.workshop-interest
|
||||
@ -30,11 +30,10 @@
|
||||
- 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
|
||||
= 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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user