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

Publisher opt in into a story landscape fullbleed desktop + mobile experience. #19646

Merged
merged 5 commits into from Dec 11, 2018

Conversation

gmajoulet
Copy link
Contributor

  • Publishers can enable the landscape experience using supported-orientations="portrait,landscape" on the <amp-story> tag (pending validation)
  • Other valid values would besupported-orientations="portrait" (which is the default), or no supported-orientations attribute at all
  • This landscape optin also allows mobile landscape
  • Renaming UIType.DESKTOP into UIType.DESKTOP_PANELS
  • [desktop] now means "Viewport size should trigger a desktop UI", which could be PANELS or FULLBLEED depending on the configuration
  • New private CSS classes i-amphtml-story-desktop-panels and i-amphtml-story-desktop-fullbleed to tweak the CSS
  • Renaming amp-story-desktop.css into amp-story-desktop-panels.css

Demo

#19270

box-sizing: border-box !important;
min-height: 100vh !important;
padding: 104px 156px 64px !important;
margin: 0 !important;
}

[desktop] .i-amphtml-story-bookend-inner::before.
[desktop-fullbleed] .i-amphtml-story-bookend-inner::before {
Copy link
Contributor

Choose a reason for hiding this comment

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

is this not needed anymore?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nope, we actually want that opacity layer, even on desktop :))

extensions/amp-story/1.0/amp-story.js Outdated Show resolved Hide resolved
Copy link
Contributor

@newmuis newmuis left a comment

Choose a reason for hiding this comment

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

FYI I don't think we can use Array.prototype.includes, but are supposed to use findIndex from array.js and compare it to -1.

I feel like this is the kind of thing @jridgewell would know for sure.

this.element.getAttribute(Attributes.SUPPORTED_ORIENTATIONS);

if (!supportedOrientationsAttribute) {
return ['portrait'];
Copy link
Contributor

Choose a reason for hiding this comment

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

I have a preference for making constants out of 'portrait' and 'landscape', so that we get compiler errors instead of bugs if we mistype them

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

extensions/amp-story/1.0/amp-story.js Outdated Show resolved Hide resolved
@gmajoulet
Copy link
Contributor Author

PTAL

@gmajoulet
Copy link
Contributor Author

Friendly ping

@jridgewell
Copy link
Contributor

Array.p.includes is polyfilled, you may use it unless you're inside a 3p ad.

@gmajoulet gmajoulet merged commit 2781452 into ampproject:master Dec 11, 2018
noranazmy pushed a commit to noranazmy/amphtml that referenced this pull request Mar 22, 2019
…perience. (ampproject#19646)

* Renaming UIType.DESKTOP into UIType.DESKTOP_PANELS.

* Replacing [desktop] CSS selectors, and supported-orientations opt in.

* Detecting the supported-orientations config.

* Allow landscape mobile if opted in.

* Reviews.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants