8000 New social buttons on single-column articles · Issue #961 · WPBuddy/largo · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

New social buttons on single-column articles #961

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

Jump to bottom
Closed
11 tasks done
benlk opened this issue Nov 9, 2015 · 11 comments
Closed
11 tasks done

New social buttons on single-column articles #961

benlk opened this issue Nov 9, 2015 · 11 comments
Assignees
@benlk
Labels
priority: high Either blocks work on a priority-normal task or a solution here informs other work. type: feature request
Milestone
0.5.4

Comments

@benlk
Copy link
Collaborator
benlk commented Nov 9, 2015
  • Theme option to enable it
  • Social button markup goes in a template <script type="text/html" tag on page load
  • The viewport width where this social icon should be displayed is output to a JSON object in a script tag by a pluggable function, with associated notices in
    • the LESS files for this social icons bar and in
    • the PHP that draws the HTML of sidebar (See how LMP does this)
  • new javascript:
    • On screen resize or initial page load, if viewport width is wider than the allowable width in the template tag, then do the following:
    • template tag gets copied into article area (This ticket isn't going to move the post-header social icons or require the presence of a widget in the article-bottom)
    • Scrollable social icons are fixed in position, and only visible between the top and bottom of the article, with the following exceptions:
      • if the top social icons are visible, the scrollable icons' initial offset from the top of the story is the height of the viewport, so that both are not visible at the same time.
      • if the Largo Follow widget is in the article-bottom widget area, the scrollable icons' initial offset from the bottom of the story is the height of the viewport, so that both are not visible at the same time.
      • if the combination of the two above constraints creates overlapping zones of "don't display the icons here", just don't display the icons at all.
    • if the screen resizes to less than the allowable width, remove display:none; the icons element.
  • Styles
    • vertical column of buttons, instead of horizontal row

Why:

For RNS, Women's eNews, and Cornell Sun http://jira.inn.org/browse/WE-18 http://jira.inn.org/browse/RNS-41
@benlk benlk self-assign 8000 ed this Nov 9, 2015
@aschweigert aschweigert added the priority: high Either blocks work on a priority-normal task or a solution here informs other work. label Nov 9, 2015
@aschweigert aschweigert added this to the 0.5.4 - Header/Navigation milestone Nov 9, 2015
@benlk
Copy link
Collaborator Author
benlk commented Nov 10, 2015

Is there an estimate for how wide the buttons should be when styled? If they're less than 46px wide, then with default largo styles they'll fit in this 46.change-px-wide gutter on 769px-and-wider tablets.

screen shot 2015-11-10 at 12 46 40 pm

768px is a lot of largo breakpoints for tablet/desktop styles. The next breakpoint up is 979px, where 980px brings us a much-wider gutter:

screen shot 2015-11-10 at 12 49 06 pm

@kaeti
Copy link
kaeti commented Nov 10, 2015

46px might be too tight, especially thinking about space on either side. Does that size only happen on tablet/smaller desktop windows?

@benlk
Copy link
Collaborator Author
benlk commented Nov 10, 2015

The padding there is a percent of the column width, at 6.38297872% of the column. It's 50px wide at 820px viewport, 60px at 976px, and then jumps up to 158px at 980px, shown in the second screenshot above.

It keeps the 6.3% padding down to 520px, but I wouldn't want to show the social icons below 768px.

@kaeti
Copy link
kaeti commented Nov 10, 2015

I don't think we need to show the floating toolbar on tablet sizes.

@benlk
Copy link
Collaborator Author
benlk commented Nov 10, 2015

Notes from hipchat: It gets positioned outside the area bounded by #main, in the padding/margin area of #page:

screen shot 2015-11-10 at 1 21 54 pm

@benlk
Copy link
Collaborator Author
benlk commented Nov 12, 2015

Note to self: Floating social buttons need to be positioned relative to the viewport, fixed, not relative to elements on the page. The positioning is (probably?) going to have to be calculated in Js, unless CSS math can

Older Androids with screens wider than 1200px exist: http://caniuse.com/#search=calc

@benlk
Copy link
Collaborator Author
benlk commented Nov 13, 2015

Current state of 961-single-column-social-buttons:

  • new social sidebar appears off left side of story when the header element (containing the social buttons) or the hero are offscreen.
  • new social sidebar remains fixed halfway up the screen as the reader scrolls, and fades out as they approach the bottom offset (the article-bottom widget area, the comments area, or the site footer, in fallback order)
  • minimum viewport width for theme is set by pluggable function largo_floating_social_button_width_json so child themes can override that, and the whole set of javascript is enqueued with the pluggable function largo_floating_social_button_js in case a child theme needs to change how that works for reasons.

To do:

  • get icons to be stuck to the page a viewport-height below the header social buttons on page load, and then stick to the page again when within a viewport-height of the bottom offset. Like so: http://www.cjr.org/united_states_project/michigan_bridge_magazine.php
  • review styles
    • light grey text on white bg,
    • 1px grey border
    • normal colors on hover.

@aschweigert
Copy link

log time on social icons refresh ticket (was WE-18, now RNS-41)

@rnagle
Copy link
rnagle commented Dec 2, 2015

@benlk I merged the work for this into develop but there are a few more things to do. @aschweigert reports the email option does not work (probably not a problem confined to just the floating social icons). Please address this issue and open another PR for review.

@benlk
Copy link
Collaborator Author
benlk commented Dec 2, 2015

Also, the <a> in the button is very small within the containing <span>:
screen shot 2015-12-02 at 2 14 38 pm

The click targets are smaller than they should be.

@benlk
Copy link
Collaborator Author
benlk commented Dec 2, 2015

The reason the email button doesn't work on the floating social buttons is because the social sharing button's sharer.init() (that binds the onclick handler for the email popup) is only run on page load, when the floating social buttons don't exist yet. Does it make sense to make the sharer object a window variable so that the floating social button creation function can rerun sharer.init?

When the popup appears for email, it's because the onClick handler is only called when the span.custom-share-button is clicked, not any of the child elements of that element. When it doesn't pop up, it's because an element within the span was clicked. 😞

@benlk benlk mentioned this issue Dec 2, 2015
Merged
@rnagle rnagle closed this as completed Dec 17, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@benlk benlk

Labels
priority: high Either blocks work on a priority-normal task or a solution here informs other work. type: feature request
Projects
None yet
Milestone
0.5.4
Development

No branches or pull requests
4 participants
@rnagle @aschweigert @kaeti @benlk
0