Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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...
commit eea5f3b41780f16f18195b6b665eeea6f02856c0 1 parent 1698190
Jason Cale authored
2  ...avascripts/application/featured_section_helper.js → ...ts/javascripts/application/equal_height_helper.js
... ... @@ -1,5 +1,5 @@
1 1 (function($) {
2   - $.fn.featuredSection = function (options) {
  2 + $.fn.equalHeightHelper = function (options) {
3 3 var _this = $(this);
4 4
5 5 var settings = $.extend({
3  app/assets/javascripts/application/on_ready.js
@@ -2,6 +2,7 @@ jQuery(function($) {
2 2 $("#notes_to_editors").addToggleLink(".notes_to_editors");
3 3 $("#featured-news-articles").featuredSectionCarousel();
4 4 $("abbr.time_ago").timeago();
5   - $('section.featured_items').featuredSection({selectorsToResize: ['h2 a', 'p.summary', 'div.image_summary']});
  5 + $('section.featured_items').equalHeightHelper({selectorsToResize: ['h2 a', 'p.summary', 'div.image_summary']});
  6 + $('section.article_group').equalHeightHelper({selectorsToResize: ['article']});
6 7 $('.change_notes').policyUpdateNotes({link:'.metadata'});
7 8 });
1  app/assets/stylesheets/website.css
@@ -4,5 +4,6 @@
4 4 * the top of the compiled file, but it's generally better to create a new file per style scope.
5 5 *
6 6 *= require_tree ./shared
  7 + *= require 'website/layout'
7 8 *= require_tree ./website
8 9 */
52 app/assets/stylesheets/website/article_section.scss
... ... @@ -0,0 +1,52 @@
  1 +@import "../shared/utils";
  2 +
  3 +#content {
  4 + section.article_section {
  5 + padding-top: 1.5em;
  6 +
  7 + h1 {
  8 + margin: 0 0 0.65em 0;
  9 + padding-bottom: 0.25em;
  10 + border-bottom: 1px solid #ddd;
  11 + padding-left: 3%;
  12 + }
  13 +
  14 + div.articles {
  15 + padding-left: 1%;
  16 + }
  17 +
  18 + article {
  19 + padding: 0em 1% 1em 2%;
  20 +
  21 + h2.article_title {
  22 + @include type-14;
  23 + margin-bottom: 0;
  24 + }
  25 +
  26 + span.metadata {
  27 + display: block;
  28 + @include type-12;
  29 + margin-bottom: 0;
  30 + color: #777;
  31 + }
  32 +
  33 + @media screen and (min-width: 1024px) {
  34 + width: 29%;
  35 + float: left;
  36 + }
  37 + }
  38 +
  39 + article.last {
  40 + border-right: none;
  41 + }
  42 + }
  43 +
  44 + p.readmore {
  45 + @include type-14;
  46 + margin-bottom: 0;
  47 + background: #fdfdfd;
  48 + border-bottom: 1px solid #d5d5d5;
  49 + border-top: 1px solid #ddd;
  50 + padding: 0.5em 1.5em 0.5em 1.5em;
  51 + }
  52 +}
6 app/assets/stylesheets/website/layout.scss
@@ -155,6 +155,12 @@
155 155 margin-left: 1%;
156 156 }
157 157
  158 + .g3f, .g2f {
  159 + section h1 {
  160 + margin-left: 2%;
  161 + }
  162 + }
  163 +
158 164 .page_detail {
159 165 @include clearfix;
160 166 background: #eee;
163 app/assets/stylesheets/website/organisations.scss
... ... @@ -1,13 +1,8 @@
1 1 @import "../shared/utils";
2 2
3 3 #content {
4   - .organisation {
5   - .page_header {
6   - h1.page_title {
7   - padding-top: 0;
8   - }
9   - }
10 4
  5 + .organisation {
11 6 h2.category {
12 7 @include type-16;
13 8 display: inline;
@@ -15,102 +10,122 @@
15 10 margin-bottom: 0;
16 11 }
17 12
18   - p {
19   - @include type-14;
  13 + section.article_section {
  14 + border-right: 1px solid #ddd;
20 15 }
  16 + }
21 17
22   - h3 {
23   - @include type-16;
24   - margin-bottom: 0.75em;
  18 + .g2f section.org_news {
  19 + padding-top: 1.5em;
  20 + border-right: 1px solid #ddd;
  21 +
  22 + h1 {
  23 + margin: 0;
  24 + margin-left: 0;
  25 + padding-bottom: 0.25em;
  26 + border-bottom: 1px solid #bbb;
  27 + padding-left: 3%;
25 28 }
26 29
27   - .page_detail {
28   - background: #fff;
29   - border-top: 0;
  30 + section.featured_carousel {
  31 + border-bottom: none;
30 32 }
31 33
32   - .page_detail .adr {
33   - p {
34   - margin-bottom: 0;
  34 + p.readmore {
  35 + border-top: 1px solid #ccc;
  36 + }
  37 + }
  38 +
  39 + .sidebar {
  40 + background: #f5f5f5;
  41 + border-bottom: 1px solid #ddd;
  42 +
  43 + section.info {
  44 + padding: 1.5em 4% 0 4%;
  45 +
  46 + h1 {
  47 + margin-bottom: 0.525em;
  48 + margin-left: 0;
35 49 }
  50 + }
36 51
37   - p.postal-code {
38   - margin-bottom: 0.857em;
  52 + #about_us {
  53 + p.about {
  54 + @include type-14;
  55 + margin-bottom: 0;
39 56 }
40 57 }
41 58
42   - .organisation_contact {
43   - margin-bottom: 1em;
  59 + #ministers {
  60 + padding-left: 0;
  61 + padding-right: 0;
44 62
45   - h3 {
46   - margin-bottom: 0.25em;
  63 + h1 {
  64 + padding-left: 4%;
47 65 }
48 66
49   - p.email, p.tel {
50   - @include type-12;
51   - margin-bottom: 0.25em;
52   - font-weight: bold;
53   - .type {
54   - font-weight: normal;
55   - }
  67 + ul {
  68 + margin-bottom: 0;
  69 + border-top: 1px solid #ddd;
  70 +
56 71 }
57   - }
58   - }
59 72
60   - p.all_announcements {
61   - margin-top: 0;
62   - border-top: 0;
63   - background: #fdfdfd;
64   - border-bottom: 1px solid #bbb;
65   - border-top: 1px solid #ddd;
66   - margin-bottom: 1.5em;
67   - }
  73 + li {
  74 + position: relative;
  75 + padding-left: 100px;
  76 + padding-right: 12px;
  77 + margin-bottom: 0;
  78 + border-bottom: 1px solid #ddd;
  79 + padding-bottom: 1em;
  80 + padding-top: 0.75em;
  81 + min-height: 5em;
  82 + background: #eee;
  83 +
  84 + h3 {
  85 + margin-bottom: 0.375em;
  86 + }
68 87
69   - section.org_news h1 {
70   - margin-left: 2%;
71   - }
  88 + p {
  89 + @include type-14;
  90 + margin-bottom: 0;
  91 + }
72 92
73   - #ministers {
74   - li.ministerial_role, li.board_member_role {
75   - position: relative;
76   - padding-left: 60px;
77   - h3 {
78   - margin-bottom: 0.6665em;
79   - }
80   - .image_holder {
81   - width: 50px;
82   - position: absolute;
83   - top: 0;
84   - left: 0;
  93 + img {
  94 + width: 70px;
  95 + position: absolute;
  96 + top: 0.75em;
  97 + left: 4%;
  98 + border: 1px solid #bbb;
  99 + }
85 100 }
86 101 }
87   - }
88 102
89   - #board_members {
90   - h3 {
91   - margin-bottom: 0.6665em;
92   - }
93   - }
  103 + #child_organisations {
  104 + ul {
  105 + margin-bottom: 0;
  106 + padding-bottom: 1.5em;
94 107
95   - nav.organisations_type_links {
96   - p:last-child {
97   - margin-bottom: 0;
  108 + li {
  109 + margin-bottom: 0.4285em;
  110 + }
  111 + }
98 112 }
99 113 }
100 114
101   - .organisation_type:first-child {
102   - border-top: 0px;
  115 + .organisation_contact {
  116 + margin-bottom: 1em;
103 117
104   - h1 {
105   - margin-top: 0;
  118 + h3 {
  119 + margin-bottom: 0.25em;
106 120 }
107   - }
108   -
109   - .organisation_type {
110   - border-top: 1px solid #bbb;
111 121
112   - h1 {
113   - margin: 1em 2% 0em 2%;
  122 + p.email, p.tel {
  123 + @include type-12;
  124 + margin-bottom: 0.25em;
  125 + font-weight: bold;
  126 + .type {
  127 + font-weight: normal;
  128 + }
114 129 }
115 130 }
116 131 }
16 app/helpers/application_helper.rb
@@ -150,4 +150,20 @@ def featured_grid_class(count=0)
150 150 "g1f"
151 151 end
152 152 end
  153 +
  154 + def article_section(title, collection, options = {}, &block)
  155 + content_tag(:section, id: options[:id], class: "article_section") do
  156 + concat content_tag(:h1, title)
  157 + div = content_tag(:div, class: "group articles") do
  158 + collection.each do |item|
  159 + article = content_tag_for(:article, item) do
  160 + block.call(item).html_safe
  161 + end.html_safe
  162 + concat article
  163 + end
  164 + end
  165 + concat div
  166 + concat content_tag(:p, options[:more], class: "readmore") if options[:more]
  167 + end
  168 + end
153 169 end
2  app/helpers/organisation_helper.rb
@@ -25,6 +25,6 @@ def current_organisation_navigation_path(params)
25 25 def organisation_view_all_tag(organisation, kind)
26 26 path = send(:"#{kind}_organisation_path", @organisation)
27 27 text = (kind == :announcements) ? "news & speeches" : kind
28   - content_tag(:span, safe_join(['View all', @organisation.name, link_to(text, path)], ' '), class: "view_all")
  28 + content_tag(:span, safe_join(['View all', content_tag(:span, @organisation.name, class: "visuallyhidden"), link_to(text, path)], ' '), class: "view_all")
29 29 end
30 30 end
173 app/views/organisations/show.html.erb
@@ -5,78 +5,121 @@
5 5 <%= render 'header', organisation: @organisation %>
6 6 </div>
7 7
8   - <div class="g3f page_detail">
9   - <div class="g2">
10   - <p class="description"><%= format_with_html_line_breaks(@organisation.description) %></p>
11   - <p class="about">
12   - <%= link_to "Read more about #{@organisation.name}", about_organisation_path(@organisation), title: "Further information about #{@organisation.name}" %>
13   - </p>
14   - </div>
15   - <div class="g1">
16   - <% roles = [@organisation.top_ministerial_role, @organisation.top_civil_servant].compact %>
17   - <% if @organisation.ministerial_roles.any? %>
18   - <section id="ministers">
19   - <%= render_list_of_ministerial_roles(roles) do |role| %>
20   - <div class="image_holder">
21   - <%= image_for_ministerial_role(role) %>
22   - </div>
23   - <h3>
24   - <% if role.is_a?(MinisterialRole) %>
25   - <%= link_to role.name, role %>
26   - <% else %>
27   - <%= role.name %>
28   - <% end %>
29   - </h3>
30   - <p class="current_appointee"><%= role.current_person_name %></p>
31   - <p class="view_all">
32   - <% if role.is_a?(MinisterialRole) %>
33   - View all <%= @organisation.name %> <%= link_to 'ministers', ministers_organisation_path(@organisation) %>
34   - <% else %>
35   - View <%= @organisation.name %> <%= link_to 'management team', management_team_organisation_path(@organisation) %>
  8 + <div class="g3f">
  9 + <div class="g2f">
  10 + <% if @featured_news_articles.any? %>
  11 + <section class="org_news">
  12 + <h1>News from our office</h1>
  13 + <section class="featured_carousel" id="featured-news-articles">
  14 + <% @featured_news_articles.each do |news_article| %>
  15 + <%= content_tag_for(:article, news_article) do %>
  16 + <h2><%= link_to news_article.title, public_document_path(news_article), class: "title" %></h2>
  17 + <p class="summary"><%= news_article.summary %></p>
  18 + <div class="meta">
  19 + <span class="published_at">Posted <%= time_ago(news_article.published_at, class: 'published_at') %> ago</span>
  20 + <% news_article.policy_areas.uniq.each do |pa| %>
  21 + <%= link_to pa.name, policy_area_path(pa), class: "policy_area tag" %>
  22 + <% end %>
  23 + </div>
36 24 <% end %>
37   - </p>
38   - <% end %>
  25 + <% end %>
  26 + </section>
  27 + <p class="readmore"><%= organisation_view_all_tag(@organisation, :announcements) %></p>
39 28 </section>
40 29 <% end %>
41   - </div>
42   - </div>
43   -<% end %>
44 30
45   -<div class="g3f">
46   - <section class="org_news">
47   - <h1>Organisation news</h1>
48   - <% if @featured_news_articles.any? %>
49   - <section class="featured_carousel" id="featured-news-articles">
50   - <% @featured_news_articles.each do |news_article| %>
51   - <%= content_tag_for(:article, news_article) do %>
52   - <h2><%= link_to news_article.title, public_document_path(news_article), class: "title" %></h2>
53   - <p class="summary"><%= news_article.summary %></p>
54   - <div class="meta">
55   - <span class="published_at">Posted <%= time_ago(news_article.published_at, class: 'published_at') %> ago</span>
56   - <% news_article.policy_areas.uniq.each do |pa| %>
57   - <%= link_to pa.name, policy_area_path(pa), class: "policy_area tag" %>
58   - <% end %>
59   - </div>
60   - <% end %>
  31 + <% if @policies.any? %>
  32 + <div class="g3f">
  33 + <%= article_section("Our policies", @policies, {id: 'policies', more: organisation_view_all_tag(@organisation, :policies)}) do |policy| %>
  34 + <h2 class="article_title"><%= link_to policy.title, public_document_path(policy), title: "View #{policy.title}", class: "title" %></h2>
  35 + <span class="metadata">
  36 + Updated <%= time_ago(policy.updated_at, class: 'updated_at') %>
  37 + </span>
61 38 <% end %>
62   - </section>
63   - <% end %>
64   - <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>
65   - </section>
  39 + </div>
  40 + <% end %>
  41 +
  42 + <% if @publications.any? %>
  43 + <div class="g3f">
  44 + <%= article_section("Publications", @publications, {id: 'publications', more: organisation_view_all_tag(@organisation, :publications)}) do |publication| %>
  45 + <h2 class="article_title"><%= link_to publication.title, public_document_path(publication), title: "View #{publication.title}" %></h2>
  46 + <span class="metadata">
  47 + Updated <%= time_ago(publication.updated_at, class: 'updated_at') %>
  48 + </span>
  49 + <% end %>
  50 + </div>
  51 + <% end %>
66 52
67   - <div class="g1 related_documents"><%= render partial: "documents/policy_areas", object: @organisation.policy_areas %></div>
68   - <div class="g1 related_documents"><%= render partial: "documents/policies", object: @policies, locals: { more: organisation_view_all_tag(@organisation, :policies) } %></div>
69   - <div class="g1 related_documents"><%= render partial: "documents/publications", object: @publications, locals: { more: organisation_view_all_tag(@organisation, :publications) } %></div>
70   - <div class="g1 related_documents"><%= render partial: "corporate_publications", object: @corporate_publications %></div>
71   - <div class="g1 related_documents"><%= render partial: "documents/speeches", object: @speeches, locals: { more: organisation_view_all_tag(@organisation, :announcements) } %></div>
72   - <div class="g1 related_documents"><%= render partial: "documents/consultations", object: @consultations, locals: { more: organisation_view_all_tag(@organisation, :consultations) } %></div>
  53 + <% if @consultations.any? %>
  54 + <div class="g3f">
  55 + <%= article_section("Consultations", @consultations, {id: 'consultations', more: organisation_view_all_tag(@organisation, :consultations)}) do |consultation| %>
  56 + <h2 class="article_title"><%= link_to consultation.title, public_document_path(consultation), title: "View #{consultation.title}" %></h2>
  57 + <span class="metadata">
  58 + Updated <%= time_ago(consultation.updated_at, class: 'updated_at') %>
  59 + </span>
  60 + <% end %>
  61 + </div>
  62 + <% end %>
73 63
74   - <% if @organisation.child_organisations.any? %>
75   - <div class="g1 related_documents">
76   - <section id="child_organisations">
77   - <h1>Associated organisations</h1>
78   - <%= render partial: "organisations/list", locals: {organisations: @organisation.child_organisations} %>
  64 + <% if @speeches.any? %>
  65 + <div class="g3f">
  66 + <%= article_section("Speeches", @speeches, {id: 'speeches', more: organisation_view_all_tag(@organisation, :announcements)}) do |speech| %>
  67 + <h2 class="article_title"><%= link_to speech.title, public_document_path(speech), title: "View #{speech.title}", class: 'title' %></h2>
  68 + <span class="metadata">
  69 + Updated <%= time_ago(speech.updated_at, class: 'updated_at') %>
  70 + </span>
  71 + <% end %>
  72 + </div>
  73 + <% end %>
  74 +
  75 + </div>
  76 +
  77 + <div class="g1f sidebar">
  78 + <section id="about_us" class="info">
  79 + <h1>About us</h1>
  80 + <p class="about">
  81 + <span class="description"><%= format_with_html_line_breaks(@organisation.description) %></span>
  82 + <a href="<%= about_organisation_path(@organisation) %>" title='<%= "Further information about #{@organisation.name}" %>'>Read more<span class="visuallyhidden"> about <%= @organisation.name %></span>.</a>
  83 + </p>
79 84 </section>
  85 +
  86 + <% roles = [@organisation.top_ministerial_role, @organisation.top_civil_servant].compact %>
  87 + <% if roles.any? %>
  88 + <section id="ministers" class="info">
  89 + <h1>Our people</h1>
  90 + <%= render_list_of_ministerial_roles(roles) do |role| %>
  91 + <div class="image_holder">
  92 + <%= image_for_ministerial_role(role) %>
  93 + </div>
  94 + <h3>
  95 + <% if role.is_a?(MinisterialRole) %>
  96 + <%= link_to role.name, role %>
  97 + <% else %>
  98 + <%= role.name %>
  99 + <% end %>
  100 + </h3>
  101 + <p class="current_appointee"><%= role.current_person_name %></p>
  102 + <p class="view_all">
  103 + <% if role.is_a?(MinisterialRole) %>
  104 + View all <span class="visuallyhidden"><%= @organisation.name %></span> <%= link_to 'ministers', ministers_organisation_path(@organisation) %>
  105 + <% else %>
  106 + View <span class="visuallyhidden"><%= @organisation.name %></span> <%= link_to 'management team', management_team_organisation_path(@organisation) %>
  107 + <% end %>
  108 + </p>
  109 + <% end %>
  110 + </section>
  111 + <% end %>
  112 +
  113 + <% if @organisation.child_organisations.any? %>
  114 + <section id="child_organisations" class="info">
  115 + <h1>Associated organisations</h1>
  116 + <%= render partial: "organisations/list", locals: {organisations: @organisation.child_organisations} %>
  117 + </section>
  118 + <% end %>
80 119 </div>
81   - <% end %>
  120 + </div>
  121 +<% end %>
  122 +
  123 +<div class="g3f">
  124 + <div class="g1 related_documents"><%= render partial: "documents/policy_areas", object: @organisation.policy_areas, title: "Our policy areas" %></div>
82 125 </div>
4 test/functional/organisations_controller_test.rb
@@ -190,10 +190,8 @@ class OrganisationsControllerTest < ActionController::TestCase
190 190
191 191 test "should display a link to the announcements page for the organisation" do
192 192 organisation = create(:organisation)
193   -
194 193 get :show, id: organisation
195   -
196   - assert_select ".all_announcements a[href='#{announcements_organisation_path(organisation)}']"
  194 + assert_select "nav a[href='#{announcements_organisation_path(organisation)}']"
197 195 end
198 196
199 197 test "presents the contact details of the organisation using hcard" do
6 test/javascripts/featured_section_helper_test.js → test/javascripts/equal_height_helper_test.js
... ... @@ -1,4 +1,4 @@
1   -module("Featured section with 3 items", {
  1 +module("Equal Height Helper", {
2 2 setup: function() {
3 3 this.container = $('<section class="featured_items"></section>');
4 4 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
28 28 ok(this.container.find('#item_2 h2').height() < this.container.find('#item_1 h2').height());
29 29
30 30 // apply the plugin
31   - this.container.featuredSection({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 100});
  31 + this.container.equalHeightHelper({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 100});
32 32
33 33 equal(this.container.find('#item_2 h2').css('min-height'), this.container.find('#item_1 h2').css('height'));
34 34 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
40 40 test("if the the specified breakpoint element width is below specified breakpoint there should be no min-height restriction", function () {
41 41 $("#qunit-fixture").width('200px');
42 42 // apply the plugin setting the breakpoint to wider than the breakpointSelector element width
43   - this.container.featuredSection({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 300});
  43 + this.container.equalHeightHelper({selectorsToResize: ['h2'], breakpointSelector: '#qunit-fixture', breakpointWidth: 300});
44 44
45 45 equal(this.container.find('#item_2 h2').css('min-height'), "0px");
46 46 equal(this.container.find('#item_3 h2').css('min-height'), "0px");
2  test/javascripts/qunit.js
@@ -11,6 +11,6 @@
11 11 //= require multiple_file_upload_test
12 12 //= require featured_section_carousel_test
13 13 //= require organisation_contact_form_test
14   -//= require featured_section_helper_test
  14 +//= require equal_height_helper_test
15 15 //= require document_publishing_test
16 16 //= require policy_update_notes_test

0 comments on commit eea5f3b

Please sign in to comment.
Something went wrong with that request. Please try again.