Skip to content

Commit

Permalink
Merge pull request #93 from alphagov/contact-show-redesign
Browse files Browse the repository at this point in the history
Redesign of contact show page and related changes
  • Loading branch information
matthewford committed Mar 10, 2014
2 parents 1aa266c + e497e06 commit f9c0f19
Show file tree
Hide file tree
Showing 13 changed files with 169 additions and 176 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/frontend/helpers/_page-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
margin-top: 0;
background-repeat: no-repeat;
background-position: 0 8px;
margin-bottom: 10px;

h1 {
@include ig-core-48;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/frontend/views/_common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -140,4 +140,4 @@ input[type="email"] {
}
}
}
}
}
52 changes: 35 additions & 17 deletions app/assets/stylesheets/frontend/views/_details.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
.details-page {
#header {
margin-top: $gutter;
padding-bottom: $gutter-one-third;
margin-bottom: $gutter-one-third;
}
.page-header {
margin-bottom: $gutter;

.type {
@include core-27;
color: #6e777b;
}

@media (max-width: 800px) {
margin-bottom: 0;
Expand All @@ -21,7 +30,7 @@

.block-container {
border-bottom: 1px solid $grey-2;
padding-bottom: $gutter-one-third;
padding-bottom: $gutter;
margin: 0 $gutter;
margin-bottom: $gutter-one-third;

Expand All @@ -46,9 +55,15 @@
}
}

h2 {
@include core-36;
font-weight: 700;
margin-bottom: $gutter;
}

h3 {
@include ig-core-24;
font-weight: bold;
@include core-24;
font-weight: 700;

@media (max-width: 640px) {
padding-top: 0;
Expand Down Expand Up @@ -143,13 +158,11 @@
}

li {
float: left;
width: $one-third;

@media (max-width: 640px) {
float: none;
width: $full-width;
margin-bottom: $gutter-two-thirds;
padding-top: 5px;
padding-bottom: 5px;
}

a,
Expand All @@ -158,8 +171,8 @@
}

a {
@include ig-core-24;
font-weight: bold;
@include ig-core-16;
font-weight: 700;
}
}
}
Expand Down Expand Up @@ -195,18 +208,18 @@

.online-contact {
@include core-19;
font-weight: bold;

li {
margin-bottom: 5px;
}


}

.phone-list {
.tel {
float: left;
width: $one-third;
padding-bottom: $gutter;

@media (max-width: 640px) {
float: none;
Expand Down Expand Up @@ -284,8 +297,14 @@
}
}

.phone-number {
margin-bottom: $gutter*2;
.phone-number, .email {
margin-bottom: $gutter*1.5;

h4 {
@include core-19;
font-weight: 700;
margin-bottom: 0.5em;
}

&:last-child {
margin-bottom: 0;
Expand All @@ -301,7 +320,7 @@
}

.note {
margin-top: $gutter;
margin-top: 0.5em;
}
}

Expand All @@ -313,8 +332,7 @@
}

.adr {
margin-top: $gutter-half;
margin-bottom: $gutter*2;
margin-bottom: $gutter*1.5;
}

&:last-child .adr,
Expand Down
9 changes: 0 additions & 9 deletions app/views/admin/contacts/_form.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
</div>
</div>
<%= f.input :quick_link_1, label: false, placeholder: "Link", input_html: { class: "span4" } %>
<%= f.input :quick_link_description_1, label: false, placeholder: "Description", input_html: { rows: 5, class: "span9" }, hint: formatting_help_link %>

<div class="control-group">
<%= f.label :quick_link_title_2, "Link 2", class: "control-label" %>
Expand All @@ -30,7 +29,6 @@
</div>
</div>
<%= f.input :quick_link_2, label: false, placeholder: "Link", input_html: { class: "span4" } %>
<%= f.input :quick_link_description_2, label: false, placeholder: "Description", input_html: { rows: 5, class: "span9" }, hint: formatting_help_link %>

<div class="control-group">
<%= f.label :quick_link_title_3, "Link 3", class: "control-label" %>
Expand All @@ -39,13 +37,6 @@
</div>
</div>
<%= f.input :quick_link_3, label: false, placeholder: "Link", input_html: { class: "span4" } %>
<%= f.input :quick_link_description_3, label: false, placeholder: "Description", input_html: { rows: 5, class: "span9" }, hint: formatting_help_link %>
</fieldset>

<fieldset class="form-horizontal">
<legend>Online Transaction</legend>
<%= f.input :online_transaction_link, label: "Link", input_html: { class: "span4" } %>
<%= f.input :online_transaction_description, label: "Description", input_html: { rows: 5, class: "span9" }, hint: formatting_help_link %>
</fieldset>

<div class='form-actions form-horizontal'>
Expand Down
3 changes: 1 addition & 2 deletions app/views/contact_form_links/_contact_form_link.html.erb
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<li class="vcard">
<%= link_to contact_form_link.title, contact_form_link.link, rel: 'external', class:'url fn' %>
<%= govspeak contact_form_link.description %>
<%= link_to contact_form_link.description, contact_form_link.link, rel: 'external', class:'url fn link-underline' %>
</li>
58 changes: 21 additions & 37 deletions app/views/contacts/_contact_offline_details.html.erb
Original file line number Diff line number Diff line change
@@ -1,48 +1,32 @@
<% if contact.phone_numbers.any? or contact.post_addresses.any? %>
<div class="block-container block-contact clearfix block-container-last">
<% if contact.phone_numbers.any? %>
<div class="block-container block-contact clearfix <% if contact.post_addresses.empty? then 'block-container-last' end %>">
<div class="block-1">
<div class="inner-block">
<h3>
Offline
Phone
</h3>
</div>
</div>
<div class="block-2">
<div class="inner-block">
<% if contact.phone_numbers.any? %>
<div class="block-container clearfix <%= 'block-container-last' if contact.post_addresses.none? %>">
<h3>
Phone
</h3>

<div class="contact">
<% if contact.more_info_phone_number.present? %>
<%= govspeak contact.more_info_phone_number.to_s %>
<br>
<% end%>

<%= render contact.phone_numbers %>
</div>
</div>
<% end %>

<% if contact.post_addresses.any? %>
<div class="block-container clearfix block-container-last">
<h3>
Post
</h3>

<% if contact.more_info_post_address.present? %>
<div class="contact">
<%= govspeak contact.more_info_post_address.to_s %>
<br>
</div>
<% end%>
<div class="block-2">
<%= render contact.phone_numbers %>
</div>
</div>
<% end %>

<%= render contact.post_addresses %>
</div>
<% end %>
<% if contact.post_addresses.any? %>
<div class="block-container block-contact clearfix <%= if contact.query_response_time == false then 'block-container-last' end %>">
<div class="block-1">
<div class="inner-block">
<h3>
Post
</h3>
</div>
</div>
<div class="block-2">
<%= render contact.post_addresses %>
</div>

</div>
<% end %>
<% end %>

78 changes: 35 additions & 43 deletions app/views/contacts/_contact_online_details.html.erb
Original file line number Diff line number Diff line change
@@ -1,47 +1,39 @@
<% if contact.contact_form_links.any? or contact.email_addresses.any? %>
<div class="block-container block-contact clearfix online-contact">
<div class="block-1">
<div class="inner-block">
<h3>
Online
</h3>
</div>
</div>
<div class="block-2">
<div class="inner-block">
<% if contact.contact_form_links.any? %>
<div class="block-container clearfix <%= 'block-container-last' if contact.email_addresses.none? %>">
<% if contact.email_addresses.any? %>
<h3>
Useful links
</h3>
<% end %>
<div class="useful-links <%= 'contact' if contact.email_addresses.any? %>">
<%= govspeak contact.more_info_contact_form.to_s %>

<ul class="list-plain">
<%= render contact.contact_form_links %>
</ul>
</div>
</div>
<% end %>
<% if contact.email_addresses.any? %>
<div class="block-container clearfix block-container-last">
<% if contact.email_addresses.any? %>
<h3>
Email
</h3>
<% end %>
<div class="email <%= 'contact' if contact.contact_form_links.any? %>">
<%= govspeak contact.more_info_email_address.to_s %>

<ul class="list-plain">
<%= render contact.email_addresses %>
</ul>
</div>
<% if contact.contact_form_links.any? %>
<div class="block-container block-contact clearfix online-contact">
<h2>
Online Forms
</h2>

<div class="block-inner">
<div class="block-2 block-pull-left">
<div class="useful-links <%= 'contact' if contact.email_addresses.any? %>">
<ul class="form-links list-plain">
<%= render contact.contact_form_links %>
</ul>
<%= govspeak contact.more_info_contact_form.to_s %>
</div>
<% end %>
</div>
</div>
</div>
<% end -%>
<% if contact.email_addresses.any? %>
<div class="block-container block-contact clearfix online-contact">
<div class="block-1">
<div class="inner-block">
<h3>
Email
</h3>
</div>
</div>
<div class="block-2">
<div class="email">
<%= govspeak contact.more_info_email_address.to_s %>
<ul class="list-plain">
<%= render contact.email_addresses %>
</ul>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<% end %>
32 changes: 0 additions & 32 deletions app/views/contacts/_contact_top_details.html.erb
Original file line number Diff line number Diff line change
@@ -1,36 +1,4 @@
<div class="block-container contact-intro clearfix">
<div class="inner-block">
<ul class="quick-links list-plain">
<% if contact.quick_link_title_1.present? && contact.quick_link_1.present? %>
<li>
<%= link_to contact.quick_link_title_1, contact.quick_link_1 %>
<% if contact.quick_link_description_1.present? %>
<p>
<%= contact.quick_link_description_1 %>
</p>
<% end -%>
</li>
<% end %>
<% if contact.quick_link_title_2.present? && contact.quick_link_2.present? %>
<li>
<%= link_to contact.quick_link_title_2, contact.quick_link_2 %>
<% if contact.quick_link_description_2.present? %>
<p>
<%= contact.quick_link_description_2 %>
</p>
<% end -%>
</li>
<% end %>
<% if contact.quick_link_title_3.present? && contact.quick_link_3.present? %>
<li>
<%= link_to contact.quick_link_title_3, contact.quick_link_3 %>
<% if contact.quick_link_description_3.present? %>
<p>
<%= contact.quick_link_description_3 %>
</p>
<% end -%>
</li>
<% end %>
</ul>
</div>
</div>
Loading

0 comments on commit f9c0f19

Please sign in to comment.