Commit 73769cf1 authored by Raphael's avatar Raphael

Questionnaire dynamic HTML form!

parent 33759ef0
import React from 'react'
export default function Input({label, name, required}){ return (
<label className="label">
{label}
<input className="grow" name={name} required={required}/>
</label>
)}
import React from 'react'
const values = {
no: 0,
yes: 1,
other: 2,
blank: 3,
}
export default class Answer extends React.Component {
state = {
note: '',
value: values.blank,
}
label = ({text, v})=>{
const checked = v === this.state.value
const name = 'c-'+this.props.name
const id = name+'-'+v
return (<div className='flex'>
<input value={v}
checked={checked}
id={id}
name={name}
onChange={this.choose}
type='checkbox'
/>
<label htmlFor={id} className={checked?'checked':''}>
{text}
</label>
</div>
)
}
note = (ev) => {
this.setState({note: ev.target.value})
}
choose = (ev) => {
this.setState({focus: parseInt(ev.target.value)})
}
choose = (ev) => {
const v = parseInt(ev.target.value)
this.setState({value: (v === this.state.value) ? values.blank : v})
}
render(){
const {children, name, q} = this.props
const question = children || q
const note = this.state.note
const v = this.state.value
const required_not_blank = v!==1 && v!==values.blank
const exp = <input placeholder={
`Explanation${required_not_blank?' required':''}`
}
className='ynq-e grow'
name={'e-'+name}
onChange={this.note}
required={required_not_blank}
value={note}
/>
return (
<div className={['ynq', required_not_blank?'required':''].join(' ')}>
<div className='ynq-q'>{question}</div>
<div className='ynq-c flex wrap'>
{this.label({v:values.yes, text:'Yes'})}
{this.label({v:values.no, text:'No'})}
{0===v && exp}
{this.label({v:values.other, text:'Qualified'})}
{(v >= 2) && exp}
</div>
</div>
)
}
}
......@@ -14,10 +14,10 @@ html {
line-height:1;
}
body, body > div, .body, html {height:100vh;}
body, input {
body, input, textarea {
font-family: sans-serif;
}
body, input, .h ol, .h p, .h ul {
body, input, textarea, .h ol, .h p, .h ul {
font-size: 1rem;
}
body {
......@@ -29,13 +29,12 @@ body {
}
h1, h2, h3 {
font-weight: normal;
line-height:1.5;
margin: 0 1rem;
}
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
p, .p, dl, input, label, ol, pre, table, ul {
p, .p, h1, h2, h3, dl, input, label, ol, pre, table, textarea, ul {
line-height: 1.5;
}
p, .p, dl, ol, pre, table, ul {
......@@ -122,11 +121,18 @@ a[href].donate span {
display:flex;
margin:1rem;
}
label:hover {background:#E0E0E0;}
.label, .block {
padding:1rem;
}
.block {
display: block;
}
.row {
display:flex;
padding:1rem 0;
}
.flex {
.flex, .label {
display:flex;
}
.wrap {flex-wrap: wrap;}
......@@ -190,14 +196,79 @@ ul.endorsements, .endorsements ul {
padding-left: 1.25em;
}
input:invalid {
border-color: red;
box-shadow: none;
}
.form32 input, .form32 textarea {
background: 0;
border-color: inherit;
border-style: solid;
}
.form32 input {
border: solid;
border-width: 0 0 1px;
padding-left: .5em;
padding: 0 .5em;
}
.form32 input:invalid {
border-right-width: 1px;
}
/* .form32 .required::after { content: '*'; } */
.form32 textarea {
border-width: 1px;
box-sizing: border-box;
display:block;
height: 3.125em;
min-height: 3.125em;
margin: 0 0 0 -.5em;
padding: 0 .5em;
resize: vertical;
width: calc(100% + .5em);
}
.ynq {
border: #EEE 1px solid;
margin: 0 .75em .5em;
padding: .25em 0 0;
position: relative;
}
input:invalid {
color: red;
.ynq-q {
margin: 0 0 .25em;
}
.ynq-e, .ynq-q, .ynq label {
padding: 0 .5em;
}
.ynq label, .ynq input[type=checkbox] {
cursor: pointer;
}
.ynq-e, .ynq label {
border-color: #EEE;
border-style: solid;
border-width: 1px 1px 1px;
margin: 0 0 -1px 0;
}
.ynq label.checked {
border-color: #000;
}
.ynq input[type=checkbox] {
margin: 0;
width: 0;
}
.ynq .checked + .ynq-e {
border-width: 1px 1px 1px 0;
border-color: inherit;
}
.ynq label:last-child {
border-width: 1px;
}
.ynq input:focus + label {
outline: -webkit-focus-ring-color auto 5px;
}
.ynq input:checked + label {
background: #EEE;
}
.segment, label, .ynq {
page-break-inside: avoid;
}
.legal h1 a, .legal h2 a, .legal h3 a {
background: 0;
color: #000;
......@@ -273,4 +344,14 @@ td, th {border: 1px solid;}
.no-print, .no-print * {
display: none !important;
}
}
\ No newline at end of file
textarea, .form32 textarea {
resize: none;
}
}
.form32 input::placeholder, .form32 textarea::placeholder {
color: #C0C0C0;
text-align: right;
font-size: 75%;
position: relative;
top: -.5rem;
}
import Helmet from 'react-helmet'
import React from 'react'
import Input from '../components/input'
const today = (new Date()).toISOString().substring(0,10)
const Page = () => (
......@@ -41,42 +42,41 @@ const Page = () => (
</p>
</li>
</ol>
<label className="box">
Candidate's Name
<input className="grow"/>
</label>
<p className="flex wrap">
<Input name='name' label="Candidate's Name" required={true}/>
<div className="box wrap">
<label className="row grow">
<span>Elective Office</span>
<input className="grow"/>
<input name='office' required={true} className="grow"/>
</label>
<label className="row grow">
District/Position
<input className="grow"/>
<input name='position' required={true} className="grow"/>
</label>
</p>
</div>
<label className="p">
<input name="civility" type="radio"/>
<input value='1' name="civility" type="radio"/>
Yes, I agree to uphold the Civility Pledge in my campaign.
</label>
<label className="p">
<input name="civility" type="radio"/>
<input value='0' name="civility" type="radio"/>
No, I do not agree to uphold the Civility Pledge in my campaign.
</label>
<p className="flex wrap">
<label className="row">
<div className="flex wrap">
<label className="label">
Date{' '}
<input
name='date'
pattern="[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])"
placeholder="YYYY-MM-DD"
required={true}
size="11"
defaultValue={today}
/>
</label>
<label className="row grow">
Signature <input className="grow"/>
<label className="label grow">
Signature <input name='signature' required={true} className='grow'/>
</label>
</p>
</div>
</div>
)
......
import Helmet from 'react-helmet'
import React from 'react'
import A from '../../components/ynq'
import Input from '../../components/input'
const title = 'Candidate Questionnaire'
const today = (new Date()).toISOString().substring(0,10)
const Page = () => (
<div className="form32">
<div className='form32'>
<Helmet>
<title>{title}</title>
</Helmet>
<h1>{title}</h1>
<pre>{`
Page 1 of 3 Rev New
Candidate Name
Position sought
Legislative District
Campaign
Information
Campaign Name
Web page
Campaign Email address
Campaign mailing address
Campaign phone number
Manager
Consultant(s)
Candidate Qualifications: Education, employment, community, union, civic, or political
party
activities, previous campaign experience, and other relevant experience.
-
Please answer the following questions:* Yes No Qualified
1 Are you known as a Democrat?
2 Do you support the 32nd LD Platform, and the planks regarding
Civil & Human Rights, Corporate Power, Economic Justice,
Environment, Government Reform, Human Services, Immigration,
and Media Reform?
3 Should government assist individuals, and families who are
without sufficient food, shelter, or basic necessities through no
fault of their own?
4 Do you support the right of workers, including public workers, to
bargain and strike?
5 Should the wages paid to workers in Washington State be raised
incrementally towards the goal of living wages?
6 Should all employers in Washington State provide their
employees paid “Sick Leave”?
7 Should transportation policy discourage the use of private
automobiles, and encourage shorter commutes, and use of
public-transit?
8 Should local governments be allowed to preempt state law, and
the will of the people when establishing municipal policy?
Page 2 of 3 Rev New
9 Should our government seek to alter the human activities that
are creating the conditions contributing to disastrous climate
change?
10 Will you support locally the Washington State Growth
Management Act?
11 Should railroads first consider the safety of people, property, and
the environment adjacent to their right-of-ways when
transporting a hazardous materials through populated locals.
12 Do you support amending the U.S. Constitution to lessen the
influence of money in politics, and declare that corporations do
not have the rights of people?
* If you chose “no” or “qualified” as your answer for a question, please explain below with the
question’s corresponding number:
-
-
-
-
-
If you are not one of the top two chosen for the General Election, and aDemocratic
opponentof yours is,doyouforesee any reasonfor younot to supporthimorher?
Whoaretheindividualsandorganizationscurrentlyendorsingyou,andwhowillyouseekto
endorseyouinthisrace?
What is your campaign theme? How will your campaign appeal to the voters?
What isyourcampaignplan;howmuchdoorbellingwillyoudo,howmanymailingsare
Page 3 of 3 Rev New
-
-
-
Ihavereadthisquestionnaireandunderstandandapprovethecontentandallprovided
information.
Printed Name Date
Signature
What is the goal for your campaign fundraising?
Why will you win the election?
`}</pre>
<Input name='name' label='Candidate name' required={true}/>
<Input name='office' label='Elective office sought' required={true}/>
<Input name='legal-entity' label='Campaign legal entity'/>
<Input name='email' label='Email' required={true}/>
<Input name='website' label='Website'/>
<Input name='mail' label='Mailing address'/>
<Input name='phone' label='Phone'/>
<Input name='manager' label='Manager'/>
<Input name='consultants' label='Consultant(s)'/>
<Input
label='Individual endorsements'
name='endorsements'
/>
<Input
label='Organization endorsements'
name='endorsements-org'
/>
<Input
label='Seeking endorsements of'
name='endorsements-seek'
/>
<Input
label='Campaign theme'
name='theme'
/>
<Input
label='Staff count expected'
name='staff'
/>
<Input
label='Budget estimate'
name='budget'
/>
<Input
label='Fundraising goal'
name='fund-goal'
/>
{/* <h2>Questions</h2> */}
<label className='block'>
What record of performance, ability, personal qualities, and positions on issues distinguish you as a candidate?
<textarea name='record'/>
</label>
<Input
label='How will your campaign appeal to voters?'
name='appeal'
/>
<Input
label='Opponents'
name='opponents'
/>
<A name='support-nominee'>
Will you support a Democratic candidate in the general election
from the top 2 of the primary if you do not advance?
</A>
<Input
label='Doorbelling plan'
name='doorbell'
/>
<Input
label='Mail campaign plan'
name='mailings'
/>
<label className='block'>
Other campaign plans
<textarea name='plan'/>
</label>
<label className='block'>
Why will you win the election?
<textarea name='win'/>
</label>
<p className='segment' style={{
'page-break-before': 'always',
}}>
Please answer the following questions: 'Yes', 'No', or 'Qualified'.
<br/>
Explain each 'No' and 'Qualified'.
</p>
<A name='democrat'>
Are you known as a Democrat?
</A>
<A name='platform'>
Do you support the 32nd LD platform, and the planks regarding
civil & human rights,
corporate power,
economic justice,
the environment,
government reform,
human services,
immigration,
and media reform?
</A>
<A name='assist'>
Should government assist individuals, and families who are without sufficient food, shelter, or basic necessities through no fault of their own?
</A>
<A name='strike'>
Do you support the right of workers, including public workers, to bargain and strike?
</A>
<A name='wage'>
Should the wages paid to workers in Washington State be raised incrementally towards the goal of living wages?
</A>
<A name='sick-leave'>
Should all employers in Washington State provide their employees paid sick leave?
</A>
<A name='transit'>
Should transportation policy discourage the use of private automobiles, and encourage shorter commutes, and use of public-transit?
</A>
<A name='save-climate'>
Should our government seek to alter the human activities that are creating the conditions contributing to disastrous climate change?
</A>
<A name='growth'>
Will you support locally the Washington State Growth Management Act?
</A>
<A name='pay-hazmat'>
Should railroad companies be responsible for damages from transporting hazardous materials?
</A>
<A name='amend-money-politics'>
Do you support amending the U.S. Constitution to lessen the influence of money in politics and declare that corporations do not have the rights of people?
</A>
<div className='segment'>
<p><b>
I have read this questionnaire and understand and approve the content and all provided information.
</b></p>
<Input label='Printed Name' required={true}/>
<div className='flex wrap'>
<label className='label'>
Date{' '}
<input
defaultValue={today}
name='date'
pattern='[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])'
placeholder='YYYY-MM-DD'
required={true}
size='11'
/>
</label>
<label className='label grow'>
Signature <input name='signature' className='grow'/>
</label>
</div>
</div>
</div>
)
export default Page
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment