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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃寜New "mobile" view for ads in fullbleed story #26243

Merged
merged 10 commits into from
Jan 10, 2020
Merged

馃寜New "mobile" view for ads in fullbleed story #26243

merged 10 commits into from
Jan 10, 2020

Conversation

calebcordry
Copy link
Member

image

Story ads so far have not been responsive. Introduces a new view for fullbleed stories on desktop where we render the ad in a mobile like size.

@@ -127,6 +139,9 @@ export class StoryAdPage {

/** @private {boolean} */
this.viewed_ = false;

/** @private @const {!../../amp-story/0.1/amp-story-store-service.AmpStoryStoreService|!../../amp-story/1.0/amp-story-store-service.AmpStoryStoreService} */
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it desirable to have inter-version dependency?

Copy link
Contributor

Choose a reason for hiding this comment

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

Good point! We should clean it but that'd be on the AMP Story WG to do it when we delete all the 0.1 code

Copy link
Member Author

Choose a reason for hiding this comment

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

SGTM.

@@ -48,6 +53,9 @@ const TIMEOUT_LIMIT = 10000; // 10 seconds
/** @const {string} */
const GLASS_PANE_CLASS = 'i-amphtml-glass-pane';

/** @const {string} */
const DESKTOP_FULLBLEED_CLASS = 'i-amphtml-story-desktop-fullbleed';
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we add another prefix to make it different from the class the AMP Story runtime uses? I'm afraid of CSS properties collisions eventually

Copy link
Member Author

Choose a reason for hiding this comment

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

Good point, done.


if (uiState === UIType.DESKTOP_FULLBLEED) {
this.adChoicesIcon_.classList.add(DESKTOP_FULLBLEED_CLASS);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

If you feel like factorizing this in a single line (it's a bit less clear tho, so up to you)

this.adChoicesIcon_.classList.toggle(
    DESKTOP_FULLBLEED_CLASS, uiState === UIType.DESKTOP_FULLBLEED);

Copy link
Member Author

Choose a reason for hiding this comment

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

I like it :) Done.

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

Successfully merging this pull request may close these issues.

None yet

5 participants