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.

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

[Master feature] Allow custom sidebar content in stories #16532

Closed
newmuis opened this Issue Jul 2, 2018 · 20 comments

Comments

@newmuis
Copy link
Collaborator

newmuis commented Jul 2, 2018

We should allow publishers to specify arbitrary custom content to be shown in a sidebar. The API and documentation should make it clear that every platform has the ability to display or not display this content. The sidebar can contain both runtime-specified content (configurable by viewer) and publisher-specified content.

Some examples:

screen shot 2018-07-11 at 12 26 38 pm

We can also bring the origin URL and more info link into the dialog:

three-dots-new

Because it encapsulates the viewer content, we can also replace the existing (i) icon in the system layer:

42192455-1236da60-7e37-11e8-90fd-153c39209f26

@newmuis newmuis added this to Incoming (Untriaged) in amp-story via automation Jul 2, 2018

@newmuis newmuis added this to Feature Backlog in AMP HTML Project Roadmap via automation Jul 2, 2018

@newmuis newmuis self-assigned this Jul 2, 2018

@newmuis newmuis moved this from Incoming (Untriaged) to Master Features in amp-story Jul 3, 2018

@newmuis newmuis added this to To do in AMP stories roadmap via automation Jul 3, 2018

@newmuis newmuis removed this from Master Features in amp-story Jul 3, 2018

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Jul 3, 2018

I would love it if we could find a way to use <amp-sidebar>'s API (with some restrictions on validation when used within <amp-story>) to make this happen.

I think it may also make sense to introduce some concept like an <amp-story-system-layer> element that encapsulates custom system components like this, with the understanding that all custom system components are subject to be removed by the platform that is embedding the story.

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Jul 3, 2018

I'm hoping @addieachan might have some bandwidth to take this on after her work on #15562.

@erwinmombay erwinmombay added this to the New FRs milestone Aug 21, 2018

@erwinmombay

This comment has been minimized.

Copy link
Member

erwinmombay commented Aug 21, 2018

This is a high priority issue but it hasn't been updated in awhile. @newmuis Do you have any updates?

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Aug 21, 2018

@addieachan will be taking this on, and is currently in the process of designing this feature.

@newmuis newmuis removed their assignment Aug 21, 2018

@newmuis newmuis moved this from Planned to In Progress in AMP stories roadmap Aug 22, 2018

@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Sep 11, 2018

This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?

@psdtomanythings

This comment has been minimized.

Copy link

psdtomanythings commented Sep 19, 2018

Hey @newmuis ,

How is this sidebar feature coming ? Really excited to see this.

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Sep 19, 2018

Hi @psdtomanythings, #17836 has the implementation, but there are still some outstanding API decisions to be made. Due to the AMP contributor summit next week, this might not be decided until the following week, then the changes will take ~two weeks to roll out.

@psdtomanythings

This comment has been minimized.

Copy link

psdtomanythings commented Oct 5, 2018

@newmuis - What are the plans for the AMP Sidebar's look and feel in desktop ?

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Oct 5, 2018

@psdtomanythings on desktop, the plan is to place this next to the share pill in the top right corner:

Screenshot of the sidebar while closed

Screenshot of the sidebar while open

@psdtomanythings

This comment has been minimized.

Copy link

psdtomanythings commented Oct 5, 2018

Looks pretty cool.

@psdtomanythings

This comment has been minimized.

Copy link

psdtomanythings commented Oct 19, 2018

Hey @newmuis ,

Can we just write the code for complete amp sidebar (i.e. HTML) or is there gonna be an API that automatically create a sidebar using some kind of JSON object ?

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Oct 19, 2018

The plan is currently to allow amp-sidebar usage as it exists in AMP generally, with the exceptions that:

  1. Instead of being a direct child of <body>, it will be somewhere within the <amp-story>
  2. Actions generally are not allowed in <amp-story>, so the only way to open the sidebar is the menu icon added automatically by the system.
@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Nov 8, 2018

This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?

@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Nov 28, 2018

This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?

1 similar comment
@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Jan 9, 2019

This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?

@ampprojectbot

This comment has been minimized.

Copy link
Collaborator

ampprojectbot commented Feb 13, 2019

This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Feb 13, 2019

This went live with @bramanudom's #19540.

@newmuis newmuis closed this Feb 13, 2019

AMP HTML Project Roadmap automation moved this from Next Up to Shipped Feb 13, 2019

@JohnAJarboe

This comment has been minimized.

Copy link

JohnAJarboe commented Feb 27, 2019

In AMP-story you are allowed to ad a SideBar but in doing so it appears there is no control over the i-amphtml-story-opacity-mask if you use an on="tap:sidebar-right.close" . the mask stays in place when the sidebar closes and the user has to tap again on the mask to remove it.
The only option I found was to use [class*="i-amphtml-story-opacity-mask"] {display:none!important;} but the AMP does not like the !important so it does not pass verification.

Are there any parameters I am missing?

@newmuis

This comment has been minimized.

Copy link
Collaborator Author

newmuis commented Feb 27, 2019

@JohnAJarboe this is a bug: #21050

Until that fix lands, your can still use sidebar without an explicit close control, and users can tap outside of the sidebar to close it

@JohnAJarboe

This comment has been minimized.

Copy link

JohnAJarboe commented Feb 27, 2019

Yes, however the clientele we solicit are more in the 34-65 age bracket and prefer the obvious and tapping anywhere is not obvious. Users are more comfortable with explicit instructions. I have clients that are not aware that the three pancake stack is the icon for the menu.... anyway thanks and look forward to an options to "turn the mask off"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.