💄 Add teaser carousel styles

ampproject · matthiasrohmer · May 10, 2021 · Apr 26, 2021 · Apr 26, 2021 · Apr 28, 2021
commit 4a923565aeb7f53c50f6a17f7c1a9a3d22cfbb61
diff --git a/frontend21/scss/components/teaser-2021.scss b/frontend21/scss/components/teaser-2021.scss
@@ -1,17 +1,19 @@
 .#{prefix(null, 'teaser')} {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   &-card {
-    display: flex;
     flex-direction: column;
-    width: 320px;
-    height: 493px;
+    max-width: 320px;
     white-space: normal;
     color: color('charade');
     border-radius: 8px;
     @include shadow-large;
     transition: box-shadow 0.3s ease, transform 0.3s ease;
 
     @include respond-to('medium') {
-      width: 390px;
+      max-width: 390px;
     }
 
     &:hover,

diff --git a/frontend21/scss/components/teaser-carousel-2021.scss b/frontend21/scss/components/teaser-carousel-2021.scss
@@ -1,26 +1,50 @@
 .#{prefix(null, 'teaser-carousel')} {
-  grid-column: 1/-1;
+  position: relative;
+  display: grid;
+  grid-gap: 15px;
+  grid-template-columns: 68px 1fr 68px;
+  max-width: 1440px;
+  margin: 0 auto 100px;
 
-  .amp-carousel-slide {
-    position: relative;
-    padding-left: 20px;
-    margin: 0 0 80px 0;
-    top: 0px;
+  amp-base-carousel {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  &-controls {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    grid-row: 1;
 
-    &:last-child {
-      padding-right: 20px
+    &.--prev {
+      left: 0;
+      grid-column: 1;
     }
 
-    @include respond-to('medium') {
-      padding-left: 30px;
+    &.--next {
+      right: 0;
+      grid-column: 3;
+    }
 
-      &:nth-child(even) {
-        margin-bottom: 40px;
-        top: 40px;
-      }
+    .amp-carousel-button {
+      width: 68px;
+      height: 68px;
+      background-size: 28px 28px;
+    }
+  }
 
-      &:last-child {
-        padding-right: 30px
+  @include respond-to('small') {
+    .ap-teaser {
+      &:nth-child(3n+1) {
+        align-items: center;
+      }
+      &:nth-child(3n+2) {
+        align-items: flex-end;
+      }
+
+      &:nth-child(3n+3) {
+        align-items: flex-start;
       }
     }
   }

diff --git a/pages/content/amp-dev/index-2021.html b/pages/content/amp-dev/index-2021.html
@@ -130,12 +130,16 @@ <h1>The latest news</h1>
   <section class="ap-section --fullscreen">
     [% set posts = []|importBlog %]
     [% if posts|length %]
-      <amp-carousel
-        class="ap-teaser-carousel --news"
+    <div class="ap-teaser-carousel --news">
+      <div class="ap-teaser-carousel-controls --prev">
+        <button on="tap: teaser-carousel-news.prev()" class="amp-carousel-button amp-carousel-button-prev" aria-label="Previous"></button>
+      </div>
+      <amp-base-carousel
+        id="teaser-carousel-news"
         height="573"
         layout="fixed-height"
-        type="carousel"
         role="region"
+        visible-count="(min-width: 1280px) 3, (min-width: 768px) 2, 1"
         aria-label="{{ _('News') }}">
         [% for post in posts %]
         {% set teaser_doc = {
@@ -148,7 +152,13 @@ <h1>The latest news</h1>
         } %}
         {% include '/views/2021/partials/teaser.j2' %}
         [% endfor %]
-      </amp-carousel>
+        <button slot="next-arrow"></button>
+        <button slot="prev-arrow"></button>
+      </amp-base-carousel>
+      <div class="ap-teaser-carousel-controls --next">
+        <button on="tap: teaser-carousel-news.next()" class="amp-carousel-button amp-carousel-button-next" aria-label="Next"></button>
+      </div>
+    </div>
     [% endif %]
   </section>
 
@@ -164,19 +174,29 @@ <h1>Explore AMP success stories</h1>
     </a>
   </section>
   <section class="ap-section --fullscreen">
-      <amp-carousel
-        class="ap-teaser-carousel --success-stories"
+    <div class="ap-teaser-carousel --success-stories">
+      <div class="ap-teaser-carousel-controls --prev">
+        <button on="tap: teaser-carousel-success-stories.prev()" class="amp-carousel-button amp-carousel-button-prev" aria-label="Previous"></button>
+      </div>
+      <amp-base-carousel
+        id="teaser-carousel-success-stories"
         height="573"
         layout="fixed-height"
-        type="carousel"
         role="region"
+        visible-count="(min-width: 1280px) 3, (min-width: 768px) 2, 1"
         aria-label="{{ _('Success stories') }}">
         {% for success_story in doc.success_stories %}
         {% with %}
         {% set teaser_doc = success_story %}
         {% include '/views/2021/partials/teaser.j2' %}
         {% endwith %}
         {% endfor %}
-      </amp-carousel>
+        <button slot="next-arrow"></button>
+        <button slot="prev-arrow"></button>
+      </amp-base-carousel>
+      <div class="ap-teaser-carousel-controls --next">
+        <button on="tap: teaser-carousel-success-stories.next()" class="amp-carousel-button amp-carousel-button-next" aria-label="Next"></button>
+      </div>
+    </div>
   </section>
 </main>