Skip to content

Commit

Permalink
New layout for Contact page
Browse files Browse the repository at this point in the history
Contact page now has a much clearer structure, with fold-out
sections that guide the user to the right contact method.

This will need translating to Welsh!

Removed the `flash[:notice]` handling since it’s no longer
used in Core.

Part of mysociety/alaveteli#74.
  • Loading branch information
zarino authored and lizconlan committed Jul 6, 2016
1 parent 61a22e5 commit d8df394
Show file tree
Hide file tree
Showing 4 changed files with 257 additions and 89 deletions.
46 changes: 46 additions & 0 deletions assets/stylesheets/responsive/_houdini.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// Houdini is a custom-written CSS+HTML library for
// showing and hiding elements on a page using just
// checkboxes and radio buttons.

// Relies on the "+" adjacent/next sibling selector and
// the ":checked" pseudo-class, which means this doesn't
// work in IE8 or below.

// Example use:
//
// <label class="houdini-label" for="input1">Click me...</label>
// <input class="houdini-input" type="checkbox" id="input1">
// <div class="houdini-target">...To show and hide me</div>

// Or an example where the input remains visible to the user,
// and is placed before the label (eg: to be floated right, so it
// appears to the right of the label, like a normal checkbox):
//
// <input class="houdini-input houdini-input--visible" type="checkbox" id="input2">
// <label class="houdini-label" for="input2">Click me...</label>
// <div class="houdini-target">...To show and hide me</div>

// The three elements must be placed sequentially in the document,
// either label+input+target or input+label+target.

// Each label+input pair must have matching `id` and `for` attributes.
// You cannot nest the input inside the label.

.houdini-input {
position: absolute;
opacity: 0;
}

.houdini-input--visible {
position: static;
opacity: 1;
}

.houdini-target {
display: none;

.houdini-input:checked + &,
.houdini-input:checked + .houdini-label + & {
display: block;
}
}
74 changes: 74 additions & 0 deletions assets/stylesheets/responsive/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ $error-border: $color_red;
$action-bg: lighten($color_yellow, 25%);
$action-border: $color_yellow;

@import "responsive/houdini";

/* General styles */
body{
background-color: $body-bg;
Expand Down Expand Up @@ -1283,6 +1285,78 @@ dd {
margin-left: 0;
}

.contact-page__goal {
label {
font-size: 0.6em;
color: inherit;
line-height: inherit;

background-color: mix($color_blue, $body-bg, 15%);
border: 1px solid mix($color_blue, $body-bg, 35%);
padding: 1em;
border-radius: 0.2em;

&:hover {
background-color: mix($color_blue, $body-bg, 20%);
border-color: mix($color_blue, $body-bg, 40%);
}
}
}

.contact-page__options {
margin-bottom: 3em;

li {
margin-bottom: 1em;
}
}

.contact-form {
background-color: mix($color_yellow, $body-bg, 15%);
padding: 1em;
margin-top: 1em;

@media(min-width: 30em){
padding: 2em;
}

label {
margin-bottom: 0.3em;
}

input[type="text"],
input[type="email"] {
width: 20em;
max-width: 100%;
}

textarea,
input.message-subject {
width: 100%;
}
}

.contact-form__understand {
position: relative;
padding-left: 2em;
padding-bottom: 1.5em;
margin-bottom: 1.5em;
border-bottom: 1px solid mix($color_yellow, darken($body-bg, 20%), 15%);

input[type="checkbox"] {
position: absolute;
left: 0;
top: 0.4em;
}

label {
font-size: 1em;
margin-bottom: 0;
}
}



/* Display of sidebars */
#header_right,
#right_column {
Expand Down
62 changes: 62 additions & 0 deletions lib/views/help/_contact_form.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<%= form_for :contact, :html => {:class => 'contact-form'} do |f| %>

<p class="contact-form__understand">
<input type="checkbox" id="understand" required="required">
<label for="understand" class="form_label">
I understand that WhatDoTheyKnow is <strong>not</strong> run by the
government, and the WhatDoTheyKnow volunteers <strong>cannot</strong>
help me with personal matters relating to government services.
</label>
</p>

<% if not @user %>
<p>
<label class="form_label" for="contact_name">My name:</label>
<%= f.text_field :name, :size => 20 %>
(or <%= link_to "sign in", signin_url(:r => request.fullpath) %>)
</p>

<p>
<label class="form_label" for="contact_email">My email:</label>
<%= f.text_field :email, :size => 20 %>
</p>
<% end %>

<p>
<label class="form_label" for="contact_subject">My message is about:</label>
<%= f.text_field :subject, :size => 50, :class => "message-subject" %>
</p>

<p>
<label class="form_label" for="contact_message">
My message to the WhatDoTheyKnow volunteers:
</label>
<%= f.text_area :message, :rows => 10, :cols => 60 %>
</p>

<p style="display:none;">
<%= f.label :comment, 'Do not fill in this field' %>
<%= f.text_field :comment %>
</p>

<% if !@last_request.nil? %>
<p>
<label class="form_label" for="contact_message">Include link to request:</label>
<%=request_link(@last_request) %>
<%= submit_tag "remove", :name => 'remove' %>
</p>
<% end %>
<% if !@last_body.nil? %>
<p>
<label class="form_label" for="contact_message">Include link to authority:</label>
<%=public_body_link(@last_body) %>
<%= submit_tag "remove", :name => 'remove' %>
</p>
<% end %>

<div class="form_button">
<%= hidden_field_tag(:submitted_contact_form, 1) %>
<%= submit_tag "Send message to WhatDoTheyKnow volunteers", :disable_with => "Sending..." %>
</div>

<% end %>
164 changes: 75 additions & 89 deletions lib/views/help/contact.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -2,109 +2,95 @@

<%= foi_error_messages_for :contact %>

<div id="contact_preamble">
<%= render :partial => 'sidebar' %>

<% if !flash[:notice] %>
<h1>Contact an authority to get official information</h1>
<ul>
<li><a href="<%= new_request_path %>">Go here</a> to make a request, in public, for information
from UK public authorities.</li>
<h1>Contact us</h1>
<p>Who do you need to contact?</p>

<div class="contact-page">

<h2 class="contact-page__goal" id="government">
<label class="houdini-label" for="goal1">
I want to contact a <strong>government department</strong>
– for example, Visas and Immigration, the Home Office, HMRC,
or the Department for Work and Pensions.
</label>
</h2>

<input class="houdini-input" type="radio" name="goals" id="goal1">
<div class="houdini-target contact-page__options">
<ul>
<li>
Asking for private information about yourself?
Please read our help page about
<a href="<%= help_requesting_path(:anchor => 'data_protection') %>">data protection</a>.
If you want to make a public Freedom Of Information
request to a UK government department, you can
<a href="<%= select_authority_path %>">start here</a>.
</li>
<li>
If you need to discuss personal matters with a
UK government department, you should
<a href="https://www.gov.uk/">find them on GOV.UK</a>.
</li>
<li>
If you’re having trouble getting the service you require
from a government body then your MP’s office can often
help. You can <a href="https://www.writetothem.com/">write
to your MP on WriteToThem.com</a>.
</li>
</ul>
</div>

<h1>Take up an issue with Government</h1>
<h2 class="contact-page__goal" id="authority">
<label class="houdini-label" for="goal2">
I want to contact a public authority, like my
<strong>local council, hospital, or school</strong>.
</label>
</h2>

<input class="houdini-input" type="radio" name="goals" id="goal2">
<div class="houdini-target contact-page__options">
<ul>
<li><a href="http://www.writetothem.com">Write to your MP,
local councillor or other representative</a>.
<li><a href="http://www.number10.gov.uk/">Number 10</a> is a good place to start if you would like to take an issue up with central government. </li>
<li>
If you want to make a public Freedom Of Information
request to a UK council or public authority, you can
<a href="<%= select_authority_path %>">start here</a>.
</li>
<li>
If you need to discuss personal matters with a
UK council, you should <a href="https://www.gov.uk/">find
them on GOV.UK</a>.
</li>
<li>
If you want to write to your MP, local councillor, or
other representative, you can
<a href="https://www.writetothem.com/">write to your MP
on WriteToThem.com</a>.
</li>
</ul>
</div>

<h2 class="contact-page__goal" id="wdtk">
<label class="houdini-label" for="goal3">
I have another issue, or feedback relating to the
WhatDoTheyKnow.com website, that I want to raise with the
<strong>team that runs WhatDoTheyKnow</strong>.
</label>
</h2>

<% end %>

<h1>Contact the WhatDoTheyKnow team</h1>
<% if !flash[:notice] %>
<ul>
<input class="houdini-input" type="radio" name="goals" id="goal3">
<div class="houdini-target contact-page__options">
<ul>
<li>
Please read the <a href="<%= help_about_path %>">help page</a> first, as it may
answer your question quicker.
First, try checking <a href="<%= help_about_path %>">our
extensive help pages</a>, which contain a solution for most
issues and questions you might have.
</li>
<li>
If your issue isn’t covered by our help pages, you can
directly contact the volunteers who run WhatDoTheyKnow:

<li>We'd love to hear how you've found using this site.
Either fill in this form, or send an email to <a
href="mailto:<%=@contact_email%>"><%=@contact_email%></a>
<%= render :partial => "help/contact_form" %>
</li>

<li>We are a <strong>charity</strong> and not part of the
Government.</li>
</ul>
<% end %>
</div>

<%= form_for :contact do |f| %>

<% if not @user %>
<p>
<label class="form_label" for="contact_name">Your name:</label>
<%= f.text_field :name, :size => 20 %>
(or <%= link_to "sign in", signin_url(:r => request.fullpath) %>)
</p>

<p>
<label class="form_label" for="contact_email">Your email:</label>
<%= f.text_field :email, :size => 20 %>
</p>
<% end %>

<p>
<label class="form_label" for="contact_subject">Subject:</label>
<%= f.text_field :subject, :size => 50 %>
</p>

<p>
<label class="form_label" for="contact_message">Message to website:</label>
<%= f.text_area :message, :rows => 10, :cols => 60 %>
</p>

<p style="display:none;">
<%= f.label :comment, 'Do not fill in this field' %>
<%= f.text_field :comment %>
</p>

<% if !@last_request.nil? %>
<p>
<label class="form_label" for="contact_message">Include link to request:</label>
<%=request_link(@last_request) %>
<%= submit_tag "remove", :name => 'remove' %>
</p>
<% end %>
<% if !@last_body.nil? %>
<p>
<label class="form_label" for="contact_message">Include link to authority:</label>
<%=public_body_link(@last_body) %>
<%= submit_tag "remove", :name => 'remove' %>
</p>
<% end %>

<p class="form_note">
We can only help you with <strong>technical problems</strong>, or questions
about Freedom of Information. See the top of this page if you would like to
contact the Government.
</P>


<div class="form_button">
<%= hidden_field_tag(:submitted_contact_form, 1) %>
<%= submit_tag "Send message to the charity", :disable_with => "Sending..." %>
&lt;-- we run this site, not the Government!
</ul>
</div>

<% end %>


</div>

0 comments on commit d8df394

Please sign in to comment.