Skip to content

Loading…

Tree indents #32

Merged
merged 13 commits into from

4 participants

@tombye
Government Digital Service member

Added indents to commodity tree structure.

Also made all nodes the colour of links, added changes to open/close controls & the footer links.

This is part of story number 39478515

@saulius saulius commented on the diff
app/assets/stylesheets/tariff.scss
((40 lines not shown))
+ &.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul {
@saulius
saulius added a note

:clap:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@saulius

I'm not a designer, but is this table heading alignment intentional? https://dl.dropbox.com/u/1818899/alignment.png

@jabley

This is missing today's deployment slot.

@JordanHatch JordanHatch merged commit a3d671b into master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 19, 2012
  1. @saulius
  2. @tombye

    Add indents sprite

    tombye committed
  3. @tombye

    Optimise image

    tombye committed
  4. @tombye

    Add indents to commodities

    tombye committed
  5. @tombye
Commits on Nov 21, 2012
  1. @tombye

    Add indents to commodity tree structure

    tombye committed
    Also added new footer links
  2. @tombye

    IE fixes & add column headers paragraph

    tombye committed
    Also includes some tidying
  3. @tombye
Commits on Nov 28, 2012
  1. @tombye
Commits on Dec 4, 2012
  1. @tombye
  2. @tombye
  3. @tombye
  4. @tombye

    Apply new format to page header

    tombye committed
View
BIN app/assets/images/commodity-indents.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
56 app/assets/javascripts/commodities.js.erb
@@ -36,10 +36,31 @@ GOVUK.tariff = {
var $parentNodes = $('.has_children', context),
isCommodityTree = false,
$controls,
- effectAll;
+ effectAll,
+ controlHover,
+ clickBranch;
if (!$parentNodes.length) { return; }
+ clickBranch = function ($branch, $childList, action) {
+ var titleTxt = {
+ 'open' : 'Click to close',
+ 'close' : 'Click to open'
+ },
+ listAction = (action === 'open') ? 'removeClass' : 'addClass',
+ branchAction = (action === 'open') ? 'addClass' : 'removeClass';
+
+ $childList[listAction]('visuallyhidden');
+ $branch[branchAction]('open')
+ .attr('title', titleTxt[action]);
+ };
+
+ controlHover = function (action) {
+ return function (evt) {
+ $(evt.target)[action + 'Class']('description-hover');
+ }
+ };
+
$parentNodes.each(function (idx) {
var $parentNode = $(this),
$childList;
@@ -57,44 +78,45 @@ GOVUK.tariff = {
$childList.addClass('visuallyhidden');
}
+ $parentNode.attr('title', 'Click to close');
+
// allow expansion based on clicking
$parentNode.on('click', function(e) {
e.stopPropagation();
if ($childList.is('.visuallyhidden')) {
- $childList.removeClass('visuallyhidden');
- $(this).addClass('open');
+ clickBranch($(this), $childList, 'open');
}
else {
- $childList.addClass('visuallyhidden');
- $(this).removeClass('open');
+ clickBranch($(this), $childList, 'close');
}
return false;
- });
+ })
+ .on('mouseover', controlHover('add'))
+ .on('mouseout', controlHover('remove'));
});
if (isCommodityTree) {
- $controls = '<ul class="tree-controls">' +
- '<li><a href="#">open all</a></li>' +
- '<li><a href="#">close all</a></li>' +
- '</ul>';
+ $controls = '<p class="tree-controls">' +
+ '<a href="#">open all</a> / ' +
+ '<a href="#">close all</a>' +
+ '</p>';
effectAll = function (ctrlIdx) {
$parentNodes.each(function (idx) {
var $this = $(this);
if (ctrlIdx === 0) {
- $this.children('span').addClass('open');
- $this.children('ul').removeClass('visuallyhidden');
+ clickBranch($(this), $childList, 'open');
} else {
- $this.children('span').removeClass('open');
- $this.children('ul').addClass('visuallyhidden');
+ clickBranch($(this), $childList, 'close');
}
});
};
$parentNodes.closest('div.inner').append($controls);
- $('ul.tree-controls a', context).each(function (idx) {
- $(this).on('click', function () {
+ $('p.tree-controls a', context).each(function (idx) {
+ $(this)
+ .on('click', function () {
effectAll(idx);
return false;
});
@@ -282,7 +304,7 @@ GOVUK.tariff = {
@description initializes namespace
*/
initialize : function () {
- var $infoPara = $('.page-header hgroup p'),
+ var $infoPara = $('p.tariff-date'),
$form = $('#date-filter'),
namespace = this;
View
252 app/assets/stylesheets/tariff.scss
@@ -1,4 +1,6 @@
@import "_conditionals.scss";
+@import "_colours.scss";
+@import "_shims.scss";
/* global variables */
@@ -235,6 +237,31 @@ $expand-arrow-space: 9 + $token-padding;
background: #fff;
}
+// generates commodity tree items based on the level
+@mixin indented-item($level) {
+ $left-pos: -984px;
+
+ @if $level == 1 {
+ padding-left: px(($token-width - $token-padding) + $token-space);
+ background-position: $left-pos 0.5em;
+ } @else {
+ margin-left: px(($token-width * 2) + ($token-width * ($level - 2))) * -1;
+ padding-left: px(($token-width * 2) + ($token-width * ($level - 1)));
+ background-position: $left-pos + (12px * ($level - 1)) 0.5em;
+ }
+}
+
+@mixin indented-list($levels) {
+ $indent-level: 1;
+
+ @while $indent-level < $levels {
+ &.level-#{$indent-level} {
+ @include indented-item($indent-level);
+ }
+ $indent-level: $indent-level + 1;
+ }
+}
+
/* end mixins */
.visuallyhidden {
@@ -254,7 +281,7 @@ mark {
}
.tariff .article-container {
- padding-bottom:2em;
+ padding-bottom:em(25, 19);
position:relative;
}
@@ -297,16 +324,31 @@ mark {
}
}
-.tariff header.page-header hgroup p {
- a {
- font-size:em(14, 16);
- display:inline-block;
- margin-left:1em;
+.tariff header.page-header hgroup form p {
+ margin-top:0;
+}
+
+.tariff p.tariff-date,
+.tariff .date-filter-search {
+ font-size: em(14, 16);
+ padding: 0 px($top-level-padding) px($top-level-padding) 52%;
+ margin: -2em 0 0;
+ line-height: 2em;
+ background: #fff;
+
+ @include ie(6) {
+ zoom: 1;
}
}
-.tariff header.page-header hgroup form p {
- margin-top:0;
+.tariff p.tariff-date a {
+ font-size:em(14, 16);
+ display:inline-block;
+ margin-left:1em;
+}
+
+.tariff p.sections-context {
+ padding-right:em(81, 14);
}
.commodities .chapter-code,
@@ -422,15 +464,16 @@ article.tariff {
}
.tariff-search {
- text-align:right;
font-size:em(14, 16);
line-height:2em;
background:#fff;
- height:2em;
- padding:0.5em px($top-level-padding) 0.5em px($token-space);
+ padding:0 px($top-level-padding) 0 px($token-space);
a {
- float:left;
+ display: block;
+ width: 8em;
+ position: relative;
+ z-index: 1;
}
p {
@@ -450,10 +493,6 @@ article.tariff {
}
}
-.sections-context {
- padding-right:em(81, 14);
-}
-
#commodity_search_q {
width: 8em;
}
@@ -659,10 +698,11 @@ article dd {
dl h1 {
font-size: 100%;
margin: 0;
- padding-bottom:px($top-level-padding);
+ padding-bottom: px($top-level-padding);
line-height: 1.5em;
color: #333;
}
+
dl h1 .identifier {
font-weight:400;
}
@@ -815,10 +855,49 @@ dl.chapter-headings {
list-style-image:none;
}
+.tariff .commodity-tree-note {
+ background: #fff;
+ margin: 0 0 0 px($token-width + $token-space) * -1;
+ padding: px($token-padding) em(137, 14) 0 px($token-width + $token-space);
+ line-height: (20 / 12);
+ color: $grey-40;
+ @extend %contain-floats;
+
+ @include ie(6) {
+ position: relative;
+ }
+
+ /* the parent needs to have the same font-size as the tree so zooming works */
+ span,
+ em {
+ font-size: em(12, 14);
+ }
+
+ span {
+ position: absolute;
+ left: -9999em;
+ }
+
+ em {
+ font-style: normal;
+ float: left;
+
+ &.code {
+ float: right;
+ width: 6em;
+ margin-right: -6em;
+ }
+ }
+}
+
ul.commodities {
- @include selected-section($commodity-padding);
- @include underlined-ordered-list;
@include contain-float;
+ background: #fff;
+ margin-top: 0;
+ margin-bottom: 0;
+ margin-left: -1px * ($token-width + $token-space);
+ padding-left: px($token-padding);
+ padding-right: em($top-level-padding, 14);
position:relative; /* to give z-index */
li {
@@ -826,8 +905,83 @@ ul.commodities {
margin: 0;
padding: 0;
position:relative;
+ background-image: url(commodity-indents.png);
+ background-repeat: no-repeat;
+ background-color: transparent;
@include contain-float;
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ @include indented-list(13);
+
+ a,
+ ul {
+ border-bottom: solid 1px #eee;
+ }
+
+ &:last-child > a,
+ &:last-child > ul {
+ border-bottom: none;
+ }
+
+ @include ie-lte(8) {
+ &.last-child > a,
+ &.last-child > ul {
+ border-bottom: none;
+ }
+ }
+
+ /* Not ASCII art but CSS to patch IE6's lack of a descendant selector */
+ @include ie(6) {
+ &.last-child ul a,
+ &.last-child ul ul,
+ &.last-child ul li a,
+ &.last-child ul li ul,
+ &.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li ul {
@saulius
saulius added a note

:clap:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ border-bottom: solid 1px #eee;
+ }
+
+ &.last-child a,
+ &.last-child ul,
+ &.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul,
+ &.last-child ul li.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul li.last-child ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child a,
+ &.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul li.last-child ul {
+ border-bottom: none;
+ }
+ }
+
a {
margin:0;
text-decoration:none;
@@ -841,7 +995,7 @@ ul.commodities {
font-size: em(14, 19);
line-height:1.5;
float: left;
- display: block;
+ display: inline;
&.description {
padding-right:8.6em;
@@ -887,14 +1041,14 @@ ul.commodities {
}
}
- li:last-child {
- border-bottom: 0;
- }
-
ul {
margin: 0;
- padding-left: em($token-width, 14);
+ padding-left: 0;
clear: both;
+
+ @include ie-lte(7) {
+ margin-left: -16px;
+ }
}
}
@@ -1004,16 +1158,15 @@ dl.tariff-fragments dd.declarable {
}
}
-ul.tree-controls {
- margin-left:px($top-level-padding);
+p.tree-controls {
+ margin-left: px($token-width);
+ margin-bottom: 0;
padding:0;
-}
-ul.tree-controls li {
- font-size:1em;
- line-height:1.5;
- display:inline;
- padding-right:px($top-level-padding);
+ a {
+ font-size:1em;
+ line-height:1.5;
+ }
}
.conditions article,
@@ -1208,14 +1361,16 @@ article.search-results {
.date-filter-search {
line-height:2em;
+ font-size:1em;
input {
margin-right:1em;
}
- .tariff header hgroup & p {
- font-size:1em;
- padding:0;
+ p {
+ padding: 0;
+ margin: 0;
+ line-height: 2em;
}
.button {
@@ -1228,16 +1383,26 @@ article.search-results {
.related-module {
background: #fff;
font-size:em(14, 16);
- padding:1em;
+ padding:0 1em 7em px($token-width);
@include contain-float;
+ h1 {
+ font-size: 1em;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ color: $grey-40;
+ }
+
+ ul {
+ margin: 0;
+ padding: 0;
+ }
+
a {
}
address{
- float:left;
- width:50%;
- text-align:center;
font-style:normal;
a {
@@ -1301,6 +1466,7 @@ article.search-results {
}
li.has_children .description {
+ color: #2E3191;
padding-left: px($expand-arrow-space);
margin-left: -1 * px($expand-arrow-space);
background-image: image-url("expand-collapse-transparent.png");
@@ -1310,9 +1476,15 @@ article.search-results {
position:relative; /* to give z-index */
}
+ li.has_children .description:hover,
+ li.has_children .description-hover {
+ color: #2E8ACA;
+ }
+
li.has_children a .description {
margin-left: 0;
}
+
li.has_children .open {
background-position:0 -385px;
}
View
12 app/helpers/commodities_helper.rb
@@ -1,4 +1,16 @@
module CommoditiesHelper
+ def leaf_position(commodity)
+ if commodity.last_child?
+ " last-child"
+ else
+ ""
+ end
+ end
+
+ def commodity_level(commodity)
+ "level-#{commodity.number_indents}"
+ end
+
def commodity_tree(main_commodity, commodities)
if commodities.any?
content_tag(:dl, class: 'commodities') do
View
8 app/models/commodity.rb
@@ -73,4 +73,12 @@ def children
[]
end
end
+
+ def last_child?
+ if casted_by.present?
+ self.goods_nomenclature_sid == casted_by.commodities.select{|c| c.parent_sid == self.parent_sid }.last.goods_nomenclature_sid
+ else
+ false
+ end
+ end
end
View
4 app/views/commodities/_commodity.html.erb
@@ -1,10 +1,10 @@
<% if commodity.has_children? %>
- <li class="has_children">
+ <li class="has_children <%= commodity_level(commodity)%><%= leaf_position(commodity) %>">
<span class="description open" id="commodity-<%= commodity.short_code %>"><%= commodity %></span>
<ul><%= render commodity.children %></ul>
</li>
<% else %>
- <li>
+ <li class="<%= commodity_level(commodity)%><%= leaf_position(commodity) %>">
<a class="js-pjax" href="<%= commodity_path(commodity) %>" title="View complete information for this commodity">
<span class="description open" id="commodity-<%= commodity.short_code %>"><%= commodity %></span>
<span class="identifier" aria-describedby="commodity-<%= commodity.short_code %>">
View
1 app/views/headings/show.html.erb
@@ -14,6 +14,7 @@
<dl>
<dt class="heading-code" title="Heading code"><%= @heading.display_short_code %></dt>
<dd><h1><%= @heading %></h1>
+ <p class="commodity-tree-note"><span>The number following each commodity's </span><em>Description</em><span> is its </span><em class="code">Code</em></p>
<ul class="commodities">
<%= render @commodities.root_commodities %>
</ul>
View
34 app/views/layouts/application.html.erb
@@ -25,26 +25,32 @@
<div id="pjax-container" class="article-container group">
<%= yield %>
</div>
- <%= form_for @tariff_date, method: :post, url: change_date_path, html: { class: 'date-filter-search related-module', id: 'date-filter' } do |f| %>
- <p>This tariff is for
- <%= f.label :day, 'Day', { class: 'visuallyhidden' } %>
- <%= select_day(f.object.date, {}, { id: 'tariff_date_day' }) %>
- <%= f.label :month, 'Month', { class: 'visuallyhidden' } %>
- <%= select_month(f.object.date, {}, { id: 'tariff_date_month' }) %>
- <%= f.label :year, 'Year', { class: 'visuallyhidden' } %>
- <%= select_year(f.object.date, {end_year: (Date.today - 15.years).year, start_year: (Date.today + 1.year).year }, { id: 'tariff_date_year' }) %>
- <%= f.button 'Set date', name: nil, class: 'btn button right' %>
- </p>
- <% end %>
- <div class="related-module">
+ <%= form_for @tariff_date, method: :post, url: change_date_path, html: { class: 'date-filter-search related-module', id: 'date-filter' } do |f| %>
+ <p>This tariff is for
+ <%= f.label :day, 'Day', { class: 'visuallyhidden' } %>
+ <%= select_day(f.object.date, {}, { id: 'tariff_date_day' }) %>
+ <%= f.label :month, 'Month', { class: 'visuallyhidden' } %>
+ <%= select_month(f.object.date, {}, { id: 'tariff_date_month' }) %>
+ <%= f.label :year, 'Year', { class: 'visuallyhidden' } %>
+ <%= select_year(f.object.date, {end_year: (Date.today - 15.years).year, start_year: (Date.today + 1.year).year }, { id: 'tariff_date_year' }) %>
+ <%= f.button 'Set date', name: nil, class: 'btn button right' %>
+ </p>
+ <% end %>
+ <section class="related-module">
+ <h1>Further help with trade tariff classification</h1>
+ <ul>
+ <li><a href="https://www.gov.uk/finding-commodity-codes" target="_blank" rel="external">What are commodity codes?</a></li>
+ <li><a href="https://www.gov.uk/specialist/classification-of-goods" target="_blank" rel="external">Guide to classifying imports and exports using the UK Integrated Tariff</a></li>
+ <li>
<address class="vcard">
<a class="fn org url" href="http://search2.hmrc.gov.uk/kb5/hmrc/contactus/view.page?record=dMVkEC6liWE" target="_blank" rel="external">
HMRC VAT, Excise and Customs Helpline
</a>
<a href="tel:+448450109000" class="tel">0845 010 9000</a>
</address>
- <%= yield(:classnumber) %>
- </div>
+ </li>
+ </ul>
+ </section>
</section>
</div>
</body>
View
5 app/views/shared/_header.html.erb
@@ -4,11 +4,9 @@
<span>Service</span>
Trade Tariff
</h1>
- <p class="tariff-date <%= @section_css %>">This tariff is for <%= @tariff_date.date.to_formatted_s(:rfc822) %> <a href="#date-filter">change date</a></p>
</hgroup>
</header>
<%= form_for @search, method: :get, url: perform_search_path, html: { class: "tariff-search #{@section_css}" } do |f| %>
- <a href="<%= sections_path%>" class="js-pjax">View all sections</a>
<%= f.hidden_field :q, name: 'q' %>
<%= f.label :t, "Search the tariff" %>
<%= f.text_field :t, required: false,
@@ -16,6 +14,7 @@
placeholder: "name or code",
name: 't' %>
<%= f.hidden_field :as_of, name: 'as_of' %>
-
<%= f.button 'Search', class: 'button right' %>
+ <a href="<%= sections_path%>" class="js-pjax">View all sections</a>
<% end %>
+<p class="tariff-date <%= @section_css %>">This tariff is for <%= @tariff_date.date.to_formatted_s(:rfc822) %> <a href="#date-filter">change date</a></p>
Something went wrong with that request. Please try again.