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

adding gradients to all sides #11951

Merged
merged 9 commits into from Nov 13, 2017
Merged

adding gradients to all sides #11951

merged 9 commits into from Nov 13, 2017

Conversation

prateekbh
Copy link
Member

@prateekbh prateekbh commented Nov 6, 2017

Adds gradient to all sides of page as mentioned in #11848 last point

cc: @alanorozco @newmuis @choumx

@ampprojectbot ampprojectbot added this to the Pending Triage milestone Nov 6, 2017
[desktop] .next-container {
right: 0;
background: rgba(33,33,33,0)!important;
background: -moz-linear-gradient(left, rgba(33,33,33,0) 0%, rgba(33,33,33,0.98) 100%)!important;
Copy link
Member

Choose a reason for hiding this comment

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

Remove vendor prefixes.

Copy link
Member Author

Choose a reason for hiding this comment

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

Done

@@ -314,16 +314,23 @@ export class AmpStory extends AMP.BaseElement {
buildButtons_() {
const doc = this.element.ownerDocument;
const nextButton = doc.createElement('button');
const nextButtonContainer = doc.createElement('div');
Copy link
Member

Choose a reason for hiding this comment

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

nit: this DOM tree is getting too complicated for a series of createElement's. Consider using utilities found in ./simple-template (see system-layer.js for an example).

Copy link
Member Author

Choose a reason for hiding this comment

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

Done 👍

[desktop] .next-container {
right: 0;
background: rgba(33,33,33,0)!important;
background: -moz-linear-gradient(left, rgba(33,33,33,0) 0%, rgba(33,33,33,0.98) 100%)!important;
Copy link
Member

Choose a reason for hiding this comment

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

Remove vendor prefixes.

Copy link
Member Author

Choose a reason for hiding this comment

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

Done

@prateekbh
Copy link
Member Author

Actually this change looks fine with a background but not white. The gradient clearly appears choppy.

Any suggestions?

screen shot 2017-11-10 at 3 38 53 am

@prateekbh
Copy link
Member Author

I discussed with Hong and and corrected the gradient values.. all fine now ✌️

this.element.insertBefore(
renderSimpleTemplate(this.win.document, PAGE_SWITCH_BUTTONS),
this.element.firstChild
);
Copy link
Member

Choose a reason for hiding this comment

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

nit: ); on previous line

Copy link
Member Author

Choose a reason for hiding this comment

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

Done

@@ -54,6 +54,13 @@
<p>This is the second page of this story.</p>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-3">
<amp-story-grid-layer template="vertical">
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: indentation is off from here down

Copy link
Member Author

Choose a reason for hiding this comment

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

Done

@newmuis newmuis dismissed alanorozco’s stale review November 13, 2017 19:23

Comments resolved; Alan is away

@newmuis newmuis merged commit 2cbf0cf into ampproject:master Nov 13, 2017
@prateekbh prateekbh deleted the borderGradients branch November 13, 2017 19:48
@newmuis newmuis mentioned this pull request Nov 13, 2017
11 tasks
neko-fire pushed a commit to 3qnexx/amphtml that referenced this pull request Nov 17, 2017
* adding gradients to all sides

* fixing choppy gradient

* removing vendor prefixes

* render buttons from simpleTemplate

* correct gradient values

* fixing indents
ghost pushed a commit that referenced this pull request Dec 6, 2017
* adding gradients to all sides

* fixing choppy gradient

* removing vendor prefixes

* render buttons from simpleTemplate

* correct gradient values

* fixing indents
gzgogo pushed a commit to gzgogo/amphtml that referenced this pull request Jan 26, 2018
* adding gradients to all sides

* fixing choppy gradient

* removing vendor prefixes

* render buttons from simpleTemplate

* correct gradient values

* fixing indents
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