Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Back to top arrow style updated #367

Merged
merged 11 commits into from
Jun 12, 2017
Merged

Back to top arrow style updated #367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fa46419
Back to top arrow style updated
andysellick May 19, 2017
b3697a0
Improving back to top arrow appearance
andysellick May 19, 2017
845e328
Back to top link restoring translation
andysellick May 22, 2017
aa9e612
Removing unnecessary svg file, now inline
andysellick May 22, 2017
430e678
Use relative height and width so the arrow sizes with the text
NickColley May 22, 2017
0b0e94c
Adding back to contents link to another page
andysellick May 22, 2017
5ccb39e
Back to contents link added to another template
andysellick May 23, 2017
f20741a
Fixing contents link positioning in grid
andysellick May 23, 2017
8264e2f
Move spacing to parent element so focus padding is not impacted
NickColley May 25, 2017
9aa5723
Optimize icon SVG
NickColley May 25, 2017
82f4801
Improved class naming for sticky element
andysellick Jun 5, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions app/assets/stylesheets/helpers/_back-to-content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
.back-to-content {
@include core-19;
@include core-16;
display: inline-block;
margin-bottom: $gutter-half;

&:before {
content: "\2191";
.icon {
float: left;
margin-right: .3em;
width: .8em;
height: .968em;
}

// TODO: Update grid to allow this behaviour without this hack
.sidebar-with-body & {
margin-left: $gutter-half;
}

@media print {
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/helpers/_sidebar-with-body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@mixin sidebar-with-body {
.sidebar-with-body {
position: relative;
margin-bottom: $gutter * 1.5;
}

Expand Down
2 changes: 1 addition & 1 deletion app/views/content_items/detailed_guide.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<% end %>
<%= render 'govuk_component/govspeak', @content_item.govspeak_body %>
</div>
<div data-sticky-element class="sticky-element">
<div data-sticky-element class="govuk-sticky-element">
<%= render 'shared/back_to_content_link' %>
</div>
</div>
Expand Down
9 changes: 8 additions & 1 deletion app/views/content_items/document_collection.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@
<%= render 'shared/history_notice', content_item: @content_item %>
<%= render 'shared/description', description: @content_item.description %>

<div class="grid-row sidebar-with-body">
<div
class="grid-row sidebar-with-body"
data-module="sticky-element-container"
id="contents"
>
<% if @content_item.contents.any? %>
<div class="column-third">
<%= render 'shared/sidebar_contents', contents: @content_item.contents %>
Expand Down Expand Up @@ -42,6 +46,9 @@
</ol>
<% end %>
</div>
<div data-sticky-element class="govuk-sticky-element">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use of the class name govuk-sticky-element hints that it's a component, which it isn't.

<%= render 'shared/back_to_content_link' %>
</div>
</div>

<%= render 'shared/footer', @content_item.document_footer %>
22 changes: 11 additions & 11 deletions app/views/shared/_back_to_content_link.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<%= link_to(
t('content_item.contents'),
'#contents',
class: 'back-to-content',
data: {
track_category: 'contentsClicked',
track_action: 'backToContentsLinkClicked',
track_label: 'contents',
module: 'track-click',
},
) %>
<a class="back-to-content"
data-track-category="contentsClicked"
data-track-action="backToContentsLinkClicked"
data-track-label="contents"
data-module="track-click"
href="#contents">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
<path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"/>
</svg>
<%= t('content_item.contents') %>
</a>
9 changes: 8 additions & 1 deletion app/views/shared/_sidebar_contents_with_body.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<% body ||= content_item.body %>
<div class="grid-row sidebar-with-body">
<div
class="grid-row sidebar-with-body"
data-module="sticky-element-container"
id="contents"
>
<% if content_item.contents.any? %>
<div class="column-third">
<%= render 'shared/sidebar_contents', contents: @content_item.contents %>
Expand All @@ -10,4 +14,7 @@
content: body,
direction: page_text_direction %>
</div>
<div data-sticky-element class="govuk-sticky-element">
<%= render 'shared/back_to_content_link' %>
</div>
</div>