Stories desktop fullbleed bookend. (ampproject#19317)

Enriqe · Nov 28, 2018 · 15488bd · 15488bd
1 parent 86d88d2
commit 15488bd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/extensions/amp-story/1.0/amp-story-bookend.css b/extensions/amp-story/1.0/amp-story-bookend.css
@@ -343,53 +343,62 @@
   color: #FFF !important;
 }
 
-[desktop].i-amphtml-story-bookend {
+[desktop].i-amphtml-story-bookend,
+[desktop-fullbleed].i-amphtml-story-bookend {
   transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
   transform: translateY(0) !important;
   opacity: 1 !important;
 }
 
-[desktop].i-amphtml-story-bookend.i-amphtml-hidden {
+[desktop].i-amphtml-story-bookend.i-amphtml-hidden,
+[desktop-fullbleed].i-amphtml-story-bookend.i-amphtml-hidden {
   transition: opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important;
   transform: translateY(100vh) !important;
   opacity: 0 !important;
 }
 
-[desktop].i-amphtml-story-bookend .i-amphtml-story-share-widget {
+[desktop].i-amphtml-story-bookend .i-amphtml-story-share-widget,
+[desktop-fullbleed].i-amphtml-story-bookend .i-amphtml-story-share-widget {
   /* TODO(alanorozco): Don't render at all when on desktop */
   display: none !important;
 }
 
-[desktop] .i-amphtml-story-bookend-inner {
+[desktop] .i-amphtml-story-bookend-inner,
+[desktop-fullbleed] .i-amphtml-story-bookend-inner {
   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] .i-amphtml-story-bookend-inner::before.
+[desktop-fullbleed] .i-amphtml-story-bookend-inner::before {
   display: none !important;
 }
 
-[desktop] .i-amphtml-story-bookend-replay {
+[desktop] .i-amphtml-story-bookend-replay,
+[desktop-fullbleed] .i-amphtml-story-bookend-replay {
   /* This is replaced with the forward button on desktop. */
   display: none !important;
 }
 
-[desktop] .i-amphtml-story-bookend-overflow {
+[desktop] .i-amphtml-story-bookend-overflow,
+[desktop-fullbleed] .i-amphtml-story-bookend-overflow {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
 
 @media (min-width: 952px) {
-  [desktop] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
+  [desktop] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading),
+  [desktop-fullbleed] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
     /* 12px to match 24px margin-bottom with margin between 2 elements. */
     width: calc(50% - 12px) !important;
   }
 }
 
 @media (min-width: 1272px) {
-  [desktop] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
+  [desktop] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading),
+  [desktop-fullbleed] .i-amphtml-story-bookend-component:not(.i-amphtml-story-bookend-heading) {
     /**
      * 16px to get 24 in the two margins between the 3 elements and match the margin-bottom.
      * 16px = (24px * 2) / 3

diff --git a/extensions/amp-story/1.0/bookend/amp-story-bookend.js b/extensions/amp-story/1.0/bookend/amp-story-bookend.js
@@ -332,9 +332,17 @@ export class AmpStoryBookend extends AMP.BaseElement {
    */
   onUIStateUpdate_(uiState) {
     this.mutateElement(() => {
-      uiState === UIType.DESKTOP ?
-        this.getShadowRoot().setAttribute('desktop', '') :
-        this.getShadowRoot().removeAttribute('desktop');
+      this.getShadowRoot().removeAttribute('desktop');
+      this.getShadowRoot().removeAttribute('desktop-fullbleed');
+
+      switch (uiState) {
+        case UIType.DESKTOP:
+          this.getShadowRoot().setAttribute('desktop', '');
+          break;
+        case UIType.DESKTOP_FULLBLEED:
+          this.getShadowRoot().setAttribute('desktop-fullbleed', '');
+          break;
+      }
     });
   }