Amphtml: [Master feature] Allow custom sidebar content in stories
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:
We can automatically show an affordance in the system layer:
newmuis
All 20 comments
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
on 3 Jul 2018
I'm hoping @addieachan might have some bandwidth to take this on after her work on #15562.
newmuis
on 3 Jul 2018
This is a high priority issue but it hasn't been updated in awhile. @newmuis Do you have any updates?
erwinmombay
on 21 Aug 2018
@addieachan will be taking this on, and is currently in the process of designing this feature.
newmuis
on 21 Aug 2018
This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?
ampprojectbot
on 11 Sep 2018
Hey @newmuis ,
How is this sidebar feature coming ? Really excited to see this.
ghelapratik
on 19 Sep 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.
newmuis
on 20 Sep 2018
@newmuis - What are the plans for the AMP Sidebar's look and feel in desktop ?
ghelapratik
on 5 Oct 2018
@psdtomanythings on desktop, the plan is to place this next to the share pill in the top right corner:
newmuis
on 5 Oct 2018
Looks pretty cool.
ghelapratik
on 5 Oct 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 ?
ghelapratik
on 19 Oct 2018
The plan is currently to allow amp-sidebar usage as it exists in AMP generally, with the exceptions that:
- Instead of being a direct child of
<body>, it will be somewhere within the<amp-story> - 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.
newmuis
on 19 Oct 2018
This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?
ampprojectbot
on 8 Nov 2018
This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?
ampprojectbot
on 28 Nov 2018
This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?
ampprojectbot
on 9 Jan 2019
This is a high priority issue but it hasn't been updated in awhile. @addieachan Do you have any updates?
ampprojectbot
on 13 Feb 2019
This went live with @bramanudom's #19540.
newmuis
on 13 Feb 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?
JohnAJarboe
on 27 Feb 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
newmuis
on 27 Feb 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"
JohnAJarboe
on 27 Feb 2019
Related issues
torch2424
路
3Comments
gmajoulet
路
3Comments
mkhatib
路
3Comments
mrjoro
路
3Comments
aghassemi
路
3Comments
Most helpful comment
The plan is currently to allow
amp-sidebarusage as it exists in AMP generally, with the exceptions that:<body>, it will be somewhere within the<amp-story><amp-story>, so the only way to open the sidebar is the menu icon added automatically by the system.