Browse files

First pass at laying out organisations page, still requires a fair am…

…ount of work but is closer.

  - Also generalised js helper to set heights equal to largest when floated (name change of plugin).
  • Loading branch information...
1 parent 1698190 commit eea5f3b41780f16f18195b6b665eeea6f02856c0 Jason Cale committed Feb 3, 2012
View
2 ...ts/application/featured_section_helper.js → ...cripts/application/equal_height_helper.js
@@ -1,5 +1,5 @@
(function($) {
- $.fn.featuredSection = function (options) {
+ $.fn.equalHeightHelper = function (options) {
var _this = $(this);
var settings = $.extend({
View
3 app/assets/javascripts/application/on_ready.js
@@ -2,6 +2,7 @@ jQuery(function($) {
$("#notes_to_editors").addToggleLink(".notes_to_editors");
$("#featured-news-articles").featuredSectionCarousel();
$("abbr.time_ago").timeago();
- $('section.featured_items').featuredSection({selectorsToResize: ['h2 a', 'p.summary', 'div.image_summary']});
+ $('section.featured_items').equalHeightHelper({selectorsToResize: ['h2 a', 'p.summary', 'div.image_summary']});
+ $('section.article_group').equalHeightHelper({selectorsToResize: ['article']});
$('.change_notes').policyUpdateNotes({link:'.metadata'});
});
View
1 app/assets/stylesheets/website.css
@@ -4,5 +4,6 @@
* the top of the compiled file, but it's generally better to create a new file per style scope.
*
*= require_tree ./shared
+ *= require 'website/layout'
*= require_tree ./website
*/
View
52 app/assets/stylesheets/website/article_section.scss
@@ -0,0 +1,52 @@
+@import "../shared/utils";
+
+#content {
+ section.article_section {
+ padding-top: 1.5em;
+
+ h1 {
+ margin: 0 0 0.65em 0;
+ padding-bottom: 0.25em;
+ border-bottom: 1px solid #ddd;
+ padding-left: 3%;
+ }
+
+ div.articles {
+ padding-left: 1%;
+ }
+
+ article {
+ padding: 0em 1% 1em 2%;
+
+ h2.article_title {
+ @include type-14;
+ margin-bottom: 0;
+ }
+
+ span.metadata {
+ display: block;
+ @include type-12;
+ margin-bottom: 0;
+ color: #777;
+ }
+
+ @media screen and (min-width: 1024px) {
+ width: 29%;
+ float: left;
+ }
+ }
+
+ article.last {
+ border-right: none;
+ }
+ }
+
+ p.readmore {
+ @include type-14;
+ margin-bottom: 0;
+ background: #fdfdfd;
+ border-bottom: 1px solid #d5d5d5;
+ border-top: 1px solid #ddd;
+ padding: 0.5em 1.5em 0.5em 1.5em;
+ }
+}
View
6 app/assets/stylesheets/website/layout.scss
@@ -155,6 +155,12 @@
margin-left: 1%;
}
+ .g3f, .g2f {
+ section h1 {
+ margin-left: 2%;
+ }
+ }
+
.page_detail {
@include clearfix;
background: #eee;
View
163 app/assets/stylesheets/website/organisations.scss
@@ -1,116 +1,131 @@
@import "../shared/utils";
#content {
- .organisation {
- .page_header {
- h1.page_title {
- padding-top: 0;
- }
- }
+ .organisation {
h2.category {
@include type-16;
display: inline;
margin-right: 0.5em;
margin-bottom: 0;
}
- p {
- @include type-14;
+ section.article_section {
+ border-right: 1px solid #ddd;
}
+ }
- h3 {
- @include type-16;
- margin-bottom: 0.75em;
+ .g2f section.org_news {
+ padding-top: 1.5em;
+ border-right: 1px solid #ddd;
+
+ h1 {
+ margin: 0;
+ margin-left: 0;
+ padding-bottom: 0.25em;
+ border-bottom: 1px solid #bbb;
+ padding-left: 3%;
}
- .page_detail {
- background: #fff;
- border-top: 0;
+ section.featured_carousel {
+ border-bottom: none;
}
- .page_detail .adr {
- p {
- margin-bottom: 0;
+ p.readmore {
+ border-top: 1px solid #ccc;
+ }
+ }
+
+ .sidebar {
+ background: #f5f5f5;
+ border-bottom: 1px solid #ddd;
+
+ section.info {
+ padding: 1.5em 4% 0 4%;
+
+ h1 {
+ margin-bottom: 0.525em;
+ margin-left: 0;
}
+ }
- p.postal-code {
- margin-bottom: 0.857em;
+ #about_us {
+ p.about {
+ @include type-14;
+ margin-bottom: 0;
}
}
- .organisation_contact {
- margin-bottom: 1em;
+ #ministers {
+ padding-left: 0;
+ padding-right: 0;
- h3 {
- margin-bottom: 0.25em;
+ h1 {
+ padding-left: 4%;
}
- p.email, p.tel {
- @include type-12;
- margin-bottom: 0.25em;
- font-weight: bold;
- .type {
- font-weight: normal;
- }
+ ul {
+ margin-bottom: 0;
+ border-top: 1px solid #ddd;
+
}
- }
- }
- p.all_announcements {
- margin-top: 0;
- border-top: 0;
- background: #fdfdfd;
- border-bottom: 1px solid #bbb;
- border-top: 1px solid #ddd;
- margin-bottom: 1.5em;
- }
+ li {
+ position: relative;
+ padding-left: 100px;
+ padding-right: 12px;
+ margin-bottom: 0;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 1em;
+ padding-top: 0.75em;
+ min-height: 5em;
+ background: #eee;
+
+ h3 {
+ margin-bottom: 0.375em;
+ }
- section.org_news h1 {
- margin-left: 2%;
- }
+ p {
+ @include type-14;
+ margin-bottom: 0;
+ }
- #ministers {
- li.ministerial_role, li.board_member_role {
- position: relative;
- padding-left: 60px;
- h3 {
- margin-bottom: 0.6665em;
- }
- .image_holder {
- width: 50px;
- position: absolute;
- top: 0;
- left: 0;
+ img {
+ width: 70px;
+ position: absolute;
+ top: 0.75em;
+ left: 4%;
+ border: 1px solid #bbb;
+ }
}
}
- }
- #board_members {
- h3 {
- margin-bottom: 0.6665em;
- }
- }
+ #child_organisations {
+ ul {
+ margin-bottom: 0;
+ padding-bottom: 1.5em;
- nav.organisations_type_links {
- p:last-child {
- margin-bottom: 0;
+ li {
+ margin-bottom: 0.4285em;
+ }
+ }
}
}
- .organisation_type:first-child {
- border-top: 0px;
+ .organisation_contact {
+ margin-bottom: 1em;
- h1 {
- margin-top: 0;
+ h3 {
+ margin-bottom: 0.25em;
}
- }
-
- .organisation_type {
- border-top: 1px solid #bbb;
- h1 {
- margin: 1em 2% 0em 2%;
+ p.email, p.tel {
+ @include type-12;
+ margin-bottom: 0.25em;
+ font-weight: bold;
+ .type {
+ font-weight: normal;
+ }
}
}
}
View
16 app/helpers/application_helper.rb
@@ -150,4 +150,20 @@ def featured_grid_class(count=0)
"g1f"
end
end
+
+ def article_section(title, collection, options = {}, &block)
+ content_tag(:section, id: options[:id], class: "article_section") do
+ concat content_tag(:h1, title)
+ div = content_tag(:div, class: "group articles") do
+ collection.each do |item|
+ article = content_tag_for(:article, item) do
+ block.call(item).html_safe
+ end.html_safe
+ concat article
+ end
+ end
+ concat div
+ concat content_tag(:p, options[:more], class: "readmore") if options[:more]
+ end
+ end
end
View
2 app/helpers/organisation_helper.rb
@@ -25,6 +25,6 @@ def current_organisation_navigation_path(params)
def organisation_view_all_tag(organisation, kind)
path = send(:"#{kind}_organisation_path", @organisation)
text = (kind == :announcements) ? "news & speeches" : kind
- content_tag(:span, safe_join(['View all', @organisation.name, link_to(text, path)], ' '), class: "view_all")
+ content_tag(:span, safe_join(['View all', content_tag(:span, @organisation.name, class: "visuallyhidden"), link_to(text, path)], ' '), class: "view_all")
end
end
View
173 app/views/organisations/show.html.erb
@@ -5,78 +5,121 @@
<%= render 'header', organisation: @organisation %>
</div>
- <div class="g3f page_detail">
- <div class="g2">
- <p class="description"><%= format_with_html_line_breaks(@organisation.description) %></p>
- <p class="about">
- <%= link_to "Read more about #{@organisation.name}", about_organisation_path(@organisation), title: "Further information about #{@organisation.name}" %>
- </p>
- </div>
- <div class="g1">
- <% roles = [@organisation.top_ministerial_role, @organisation.top_civil_servant].compact %>
- <% if @organisation.ministerial_roles.any? %>
- <section id="ministers">
- <%= render_list_of_ministerial_roles(roles) do |role| %>
- <div class="image_holder">
- <%= image_for_ministerial_role(role) %>
- </div>
- <h3>
- <% if role.is_a?(MinisterialRole) %>
- <%= link_to role.name, role %>
- <% else %>
- <%= role.name %>
- <% end %>
- </h3>
- <p class="current_appointee"><%= role.current_person_name %></p>
- <p class="view_all">
- <% if role.is_a?(MinisterialRole) %>
- View all <%= @organisation.name %> <%= link_to 'ministers', ministers_organisation_path(@organisation) %>
- <% else %>
- View <%= @organisation.name %> <%= link_to 'management team', management_team_organisation_path(@organisation) %>
+ <div class="g3f">
+ <div class="g2f">
+ <% if @featured_news_articles.any? %>
+ <section class="org_news">
+ <h1>News from our office</h1>
+ <section class="featured_carousel" id="featured-news-articles">
+ <% @featured_news_articles.each do |news_article| %>
+ <%= content_tag_for(:article, news_article) do %>
+ <h2><%= link_to news_article.title, public_document_path(news_article), class: "title" %></h2>
+ <p class="summary"><%= news_article.summary %></p>
+ <div class="meta">
+ <span class="published_at">Posted <%= time_ago(news_article.published_at, class: 'published_at') %> ago</span>
+ <% news_article.policy_areas.uniq.each do |pa| %>
+ <%= link_to pa.name, policy_area_path(pa), class: "policy_area tag" %>
+ <% end %>
+ </div>
<% end %>
- </p>
- <% end %>
+ <% end %>
+ </section>
+ <p class="readmore"><%= organisation_view_all_tag(@organisation, :announcements) %></p>
</section>
<% end %>
- </div>
- </div>
-<% end %>
-<div class="g3f">
- <section class="org_news">
- <h1>Organisation news</h1>
- <% if @featured_news_articles.any? %>
- <section class="featured_carousel" id="featured-news-articles">
- <% @featured_news_articles.each do |news_article| %>
- <%= content_tag_for(:article, news_article) do %>
- <h2><%= link_to news_article.title, public_document_path(news_article), class: "title" %></h2>
- <p class="summary"><%= news_article.summary %></p>
- <div class="meta">
- <span class="published_at">Posted <%= time_ago(news_article.published_at, class: 'published_at') %> ago</span>
- <% news_article.policy_areas.uniq.each do |pa| %>
- <%= link_to pa.name, policy_area_path(pa), class: "policy_area tag" %>
- <% end %>
- </div>
- <% end %>
+ <% if @policies.any? %>
+ <div class="g3f">
+ <%= article_section("Our policies", @policies, {id: 'policies', more: organisation_view_all_tag(@organisation, :policies)}) do |policy| %>
+ <h2 class="article_title"><%= link_to policy.title, public_document_path(policy), title: "View #{policy.title}", class: "title" %></h2>
+ <span class="metadata">
+ Updated <%= time_ago(policy.updated_at, class: 'updated_at') %>
+ </span>
<% end %>
- </section>
- <% end %>
- <p class="further_articles all_announcements">View all <%= @organisation.name %> <%= link_to "news & speeches", announcements_organisation_path(@organisation), title: "View all #{@organisation.name} news & speeches" %></p>
- </section>
+ </div>
+ <% end %>
+
+ <% if @publications.any? %>
+ <div class="g3f">
+ <%= article_section("Publications", @publications, {id: 'publications', more: organisation_view_all_tag(@organisation, :publications)}) do |publication| %>
+ <h2 class="article_title"><%= link_to publication.title, public_document_path(publication), title: "View #{publication.title}" %></h2>
+ <span class="metadata">
+ Updated <%= time_ago(publication.updated_at, class: 'updated_at') %>
+ </span>
+ <% end %>
+ </div>
+ <% end %>
- <div class="g1 related_documents"><%= render partial: "documents/policy_areas", object: @organisation.policy_areas %></div>
- <div class="g1 related_documents"><%= render partial: "documents/policies", object: @policies, locals: { more: organisation_view_all_tag(@organisation, :policies) } %></div>
- <div class="g1 related_documents"><%= render partial: "documents/publications", object: @publications, locals: { more: organisation_view_all_tag(@organisation, :publications) } %></div>
- <div class="g1 related_documents"><%= render partial: "corporate_publications", object: @corporate_publications %></div>
- <div class="g1 related_documents"><%= render partial: "documents/speeches", object: @speeches, locals: { more: organisation_view_all_tag(@organisation, :announcements) } %></div>
- <div class="g1 related_documents"><%= render partial: "documents/consultations", object: @consultations, locals: { more: organisation_view_all_tag(@organisation, :consultations) } %></div>
+ <% if @consultations.any? %>
+ <div class="g3f">
+ <%= article_section("Consultations", @consultations, {id: 'consultations', more: organisation_view_all_tag(@organisation, :consultations)}) do |consultation| %>
+ <h2 class="article_title"><%= link_to consultation.title, public_document_path(consultation), title: "View #{consultation.title}" %></h2>
+ <span class="metadata">
+ Updated <%= time_ago(consultation.updated_at, class: 'updated_at') %>
+ </span>
+ <% end %>
+ </div>
+ <% end %>
- <% if @organisation.child_organisations.any? %>
- <div class="g1 related_documents">
- <section id="child_organisations">
- <h1>Associated organisations</h1>
- <%= render partial: "organisations/list", locals: {organisations: @organisation.child_organisations} %>
+ <% if @speeches.any? %>
+ <div class="g3f">
+ <%= article_section("Speeches", @speeches, {id: 'speeches', more: organisation_view_all_tag(@organisation, :announcements)}) do |speech| %>
+ <h2 class="article_title"><%= link_to speech.title, public_document_path(speech), title: "View #{speech.title}", class: 'title' %></h2>
+ <span class="metadata">
+ Updated <%= time_ago(speech.updated_at, class: 'updated_at') %>
+ </span>
+ <% end %>
+ </div>
+ <% end %>
+
+ </div>
+
+ <div class="g1f sidebar">
+ <section id="about_us" class="info">
+ <h1>About us</h1>
+ <p class="about">
+ <span class="description"><%= format_with_html_line_breaks(@organisation.description) %></span>
+ <a href="<%= about_organisation_path(@organisation) %>" title='<%= "Further information about #{@organisation.name}" %>'>Read more<span class="visuallyhidden"> about <%= @organisation.name %></span>.</a>
+ </p>
</section>
+
+ <% roles = [@organisation.top_ministerial_role, @organisation.top_civil_servant].compact %>
+ <% if roles.any? %>
+ <section id="ministers" class="info">
+ <h1>Our people</h1>
+ <%= render_list_of_ministerial_roles(roles) do |role| %>
+ <div class="image_holder">
+ <%= image_for_ministerial_role(role) %>
+ </div>
+ <h3>
+ <% if role.is_a?(MinisterialRole) %>
+ <%= link_to role.name, role %>
+ <% else %>
+ <%= role.name %>
+ <% end %>
+ </h3>
+ <p class="current_appointee"><%= role.current_person_name %></p>
+ <p class="view_all">
+ <% if role.is_a?(MinisterialRole) %>
+ View all <span class="visuallyhidden"><%= @organisation.name %></span> <%= link_to 'ministers', ministers_organisation_path(@organisation) %>
+ <% else %>
+ View <span class="visuallyhidden"><%= @organisation.name %></span> <%= link_to 'management team', management_team_organisation_path(@organisation) %>
+ <% end %>
+ </p>
+ <% end %>
+ </section>
+ <% end %>
+
+ <% if @organisation.child_organisations.any? %>
+ <section id="child_organisations" class="info">
+ <h1>Associated organisations</h1>
+ <%= render partial: "organisations/list", locals: {organisations: @organisation.child_organisations} %>
+ </section>
+ <% end %>
</div>
- <% end %>
+ </div>
+<% end %>
+
+<div class="g3f">
+ <div class="g1 related_documents"><%= render partial: "documents/policy_areas", object: @organisation.policy_areas, title: "Our policy areas" %></div>
</div>
View
4 test/functional/organisations_controller_test.rb
@@ -190,10 +190,8 @@ class OrganisationsControllerTest < ActionController::TestCase
test "should display a link to the announcements page for the organisation" do
organisation = create(:organisation)
-
get :show, id: organisation
-
- assert_select ".all_announcements a[href='#{announcements_organisation_path(organisation)}']"
+ assert_select "nav a[href='#{announcements_organisation_path(organisation)}']"
end
test "presents the contact details of the organisation using hcard" do
View
6 ...vascripts/featured_section_helper_test.js → test/javascripts/equal_height_helper_test.js
@@ -1,4 +1,4 @@
-module("Featured section with 3 items", {
+module("Equal Height Helper", {
setup: function() {
this.container = $('<section class="featured_items"></section>');
this.container.append($('<article id="item_1"></article>'));
@@ -28,7 +28,7 @@ test("should resize supplied elements to equal the element with the largest heig
ok(this.container.find('#item_2 h2').height() < this.container.find('#item_1 h2').height());
// apply the plugin
- this.container.featuredSection({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 100});
+ this.container.equalHeightHelper({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 100});
equal(this.container.find('#item_2 h2').css('min-height'), this.container.find('#item_1 h2').css('height'));
equal(this.container.find('#item_2 h2').css('height'), this.container.find('#item_1 h2').css('height'));
@@ -40,7 +40,7 @@ test("should resize supplied elements to equal the element with the largest heig
test("if the the specified breakpoint element width is below specified breakpoint there should be no min-height restriction", function () {
$("#qunit-fixture").width('200px');
// apply the plugin setting the breakpoint to wider than the breakpointSelector element width
- this.container.featuredSection({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 300});
+ this.container.equalHeightHelper({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 300});
equal(this.container.find('#item_2 h2').css('min-height'), "0px");
equal(this.container.find('#item_3 h2').css('min-height'), "0px");
View
2 test/javascripts/qunit.js
@@ -11,6 +11,6 @@
//= require multiple_file_upload_test
//= require featured_section_carousel_test
//= require organisation_contact_form_test
-//= require featured_section_helper_test
+//= require equal_height_helper_test
//= require document_publishing_test
//= require policy_update_notes_test

0 comments on commit eea5f3b

Please sign in to comment.