Back to top arrow style updated #367
Conversation
* SVG arrow added to fit with new design * Font size also adjusted to fit new design
* Moved to using an inline SVG so now aligns with link text colour in all states (e.g. visited, hover)
| data-module="track-click" | ||
| href="#contents"> | ||
| <svg class="icon" width="14" height="17" viewBox="0 0 14 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-885.000000, -1380.000000) translate(886.000000, 1380.000000) translate(0.000000, 1.000000)" stroke-width="2" stroke="currentColor" fill="none" fill-rule="evenodd"><polyline points="12 6.61354167 6.10565074 0.719192411 0.312351484 6.51249167"/><path d="M6,1.52415365 L6,15" stroke-linecap="square"/></g></svg> | ||
| Contents |
There was a problem hiding this comment.
This should still be translated. It used to be t('content_item.contents').
There was a problem hiding this comment.
You could keep the link_to method by doing this:
<%= link_to(params) do %>
Link text
<% end %>
|
Would be good to show a before/after screenshot. |
app/assets/images/arrow-up.svg
Outdated
| @@ -0,0 +1 @@ | |||
| <svg width="14" height="17" viewBox="0 0 14 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-885.000000, -1380.000000) translate(886.000000, 1380.000000) translate(0.000000, 1.000000)" stroke-width="2" stroke="#005EA5" fill="none" fill-rule="evenodd"><polyline points="12 6.61354167 6.10565074 0.719192411 0.312351484 6.51249167"/><path d="M6,1.52415365 L6,15" stroke-linecap="square"/></g></svg> | |||
There was a problem hiding this comment.
Oops, good point
|
Tested this on old IE and it looks fine: Tested on mobile and the arrow looks too big (font-size is reduced): |
|
@NickColley Can you add updated screenshots? |
|
@fofr Andy is doing some additional work on this |
* Added to document collection template * Small CSS change to parent wrapper, now position relative to support absolute positioning of contents link when scrolled beyond limit of parent container
|
I think we need to https://github.com/alphagov/government-frontend/blob/master/app/views/shared/_sidebar_contents_with_body.html.erb add this here too |
|
I was hoping we could keep the design updates and "adding to new formats" as separate PRs. One shouldn't block the other. |
|
I think the nesting might be off, since it looks like we're missing the grids gutter padding |
* When it occurs within the grid, the grid's negative margin slightly mispositions the back to contents link to the left, CSS added for this specific case to push it back in again. * One alternative would be to rewrite the grid to not have an outer negative margin, but this would be overkill for this right now.
|
Nesting should be fixed now. |
|
I've noticed for some of the pages the contents link will spill over the end, I wonder if we can address this? It feels really odd at the moment. I'm able to reproduce this by scrolling quickly on the following page:
|
|
Checking the live site, the issue I've raised above is already an issue, so we're going to block this on updating static since this adds already existing buggy behaviour to more pages. |
andysellick
force-pushed
the
back-to-top-link
branch
from
4da43ad to
9aa5723
Compare
NickColley
changed the title
|
Fix added to static... alphagov/static#1067 |
| @@ -42,6 +46,9 @@ | |||
| </ol> | |||
| <% end %> | |||
| </div> | |||
| <div data-sticky-element class="govuk-sticky-element"> | |||
There was a problem hiding this comment.
Use of the class name govuk-sticky-element hints that it's a component, which it isn't.
|
How does this look on right to left content? |
|
I can't find a page with right to left content where this is used. Any suggestions? |
|
Seems to be okay on RTL. Have added some more example links to the card. |
andysellick
changed the title
Before:
After:
https://trello.com/c/J6YkyF1T/356-deployment-back-to-top-button-2
Now relates to alphagov/static#1067