@shift72/core-template 1.5.1 → 1.7.0

package/site/styles/_meta-detail.scss

@@ -102,8 +102,7 @@
 }
 
 .meta-detail-main {
-  @extend .d-flex;
-  flex-direction: column;
+  display: grid;
   padding: var(--page-detail-padding-top) 20px 0 20px;
 
   @include media-breakpoint-up(xs) {
@@ -111,27 +110,58 @@
   }
 
   @include media-breakpoint-up(lg) {
-    flex-direction: row;
+    grid-template-columns: auto 1fr;
     padding: var(--page-detail-padding-top-lg) 50px 0 50px;
     padding-bottom: 0;
   }
 
-  .poster-wrapper {
-    margin-bottom: 20px;
-    position: relative;
-    .sponsor {
-      bottom: 100%;
+  s72-live-label {
+    @include media-breakpoint-up(lg) {
+      grid-column: 2;
+    }
+
+    .live-label {
+      margin-bottom: 12px;
       position: absolute;
+      // 42px magic number is 30px height of the label + 12px of "margin".
+      top: calc(var(--page-detail-padding-top) - 42px);
+
       @include media-breakpoint-up(xs) {
-        position: relative;
+        // 42px magic number is 30px height of the label + 12px of "margin".
+        top: calc(var(--page-detail-padding-top-md) - 42px);
+      }
+
+      @include media-breakpoint-up(lg) {
+        margin-bottom: 8px;
+        // 42px magic number is 30px height of the label + 12px of "margin".
+        top: calc(var(--page-detail-padding-top-lg) - 42px);
+      }
+    }
+  }
+
+  .poster-wrapper {
+    @include media-breakpoint-up(lg) {
+      grid-row: 2;
+    }
+
+    .sponsor {
+      margin-bottom: 12px;
+
+      @include media-breakpoint-up(lg) {
+        margin-bottom: 20px;
       }
     }
+
+    > .poster {
+      margin-bottom: 5px;
+    }
   }
 
   .poster {
     animation: fadein 2s;
     display: block;
     flex-shrink: 0;
+    margin-bottom: 20px;
     margin-right: 20px;
     width: 110px;
 
@@ -142,6 +172,14 @@
     @include media-breakpoint-up(xl) {
       width: 208px;
     }
+
+    .live {
+      display: none;
+    }
+
+    .s72-image {
+      display: initial;
+    }
   }
 
   .poster-wrapper .sponsor {
@@ -149,11 +187,19 @@
       display: none;
     }
   }
+
+  .meta-detail-content {
+    @include media-breakpoint-up(lg) {
+      grid-column: 2;
+      grid-row: 2;
+    }
+  }
 }
 
 s72-element-switcher,
 .meta-detail-bonus-content,
-.meta-detail-episodes-content {
+.meta-detail-episodes-content,
+.meta-awards-all {
   flex: 1 1 100%;
   max-width: 728px;
 
@@ -184,7 +230,12 @@ s72-element-switcher,
   }
 
   .meta-detail-synopsis {
+    margin-bottom: -4px;
     max-width: 728px;
+
+    @include media-breakpoint-up(xs) {
+      margin-bottom: 0;
+    }
     @include media-breakpoint-up(xl) {
       max-width: 1100px;
     }
@@ -192,7 +243,7 @@ s72-element-switcher,
 
   .meta-detail-synopsis,
   .meta-detail-switcher-tagline {
-    padding-top: 22px;
+    padding-top: 12px;
 
     p {
       animation: fadein 2s;
@@ -231,19 +282,6 @@ s72-element-switcher,
   }
 }
 
-.recommendations-collection {
-  padding-top: 20px;
-  @include media-breakpoint-up(md) {
-    padding-top: 0;
-  }
-  @include media-breakpoint-up(lg) {
-    padding-top: 20px;
-  }
-  @include media-breakpoint-up(xl) {
-    padding-top: 80px;
-  }
-}
-
 .meta-detail-bundle {
   .meta-detail-bg {
     opacity: 0.4;
@@ -337,7 +375,9 @@ s72-element-switcher,
   }
 
   .page-collection-list {
-    padding: 0;
+    @include media-breakpoint-up(md) {
+      padding: 0;
+    }
 
     .page-collection-list-title {
       margin-bottom: 10px;
@@ -360,7 +400,10 @@ s72-element-switcher,
 
 .meta-detail-episodes-content,
 .meta-detail-bonus-content {
-  margin-bottom: 40px;
+  margin-bottom: 18px;
+  @include media-breakpoint-up(lg) {
+    margin-bottom: 32px;
+  }
 
   h2 {
     @include heading-3-style;
@@ -377,10 +420,13 @@ s72-element-switcher,
 
 .element-switcher-wrapper {
   display: grid;
-  gap: 50px;
-  grid-template-columns: auto auto;
   width: 100%;
 
+  @include media-breakpoint-up(lg) {
+    gap: 50px;
+    grid-template-columns: auto auto;
+  }
+
   .sponsor {
     display: none;
     padding-top: 10px;
@@ -411,6 +457,7 @@ s72-element-switcher {
   margin-bottom: 62px;
 
   .s72-toggle {
+    bottom: -36px;
     &:hover {
       color: var(--body-color-hover);
     }
@@ -421,7 +468,6 @@ s72-element-switcher {
   display: grid;
   gap: 20px;
   grid-template-columns: repeat(1, 1fr);
-  padding-bottom: 20px;
 
   @include media-breakpoint-up(lg) {
     grid-template-columns: repeat(2, 1fr);

package/site/styles/_meta-item-tagline.scss

@@ -52,6 +52,5 @@
 .meta-detail-content .meta-detail-tagline-and-classification {
   align-items: center;
   display: flex !important;
-  padding-bottom: 12px;
-  padding-top: 5px;
+  padding: 5px 0 16px;
 }

package/site/styles/_meta-sub-item.scss

@@ -1,14 +1,23 @@
 .sub-item {
   display: grid;
-  grid-gap: 15px;
+  gap: 1px 15px;
   grid-template-columns: 112px minmax(100px, 1fr);
   grid-template-rows: auto minmax(0, 1fr);
-  margin-bottom: 15px;
-  padding-bottom: 15px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
 
   @include media-breakpoint-up(sm) {
     grid-template-columns: 175px minmax(100px, 1fr);
     grid-template-rows: auto auto minmax(0, 1fr);
+
+    &:last-of-type {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    gap: 5px 15px;
   }
 
   h3 {
@@ -37,17 +46,20 @@
   }
 
   .synopsis {
+    animation: fadein 2s;
     font-size: 16px;
     font-weight: $font-weight-light;
     grid-column: 1 / 3;
     letter-spacing: 0.6px;
     line-height: 1.25;
     margin-top: 5px;
+    overflow: hidden;
 
     @include media-breakpoint-up(sm) {
+      display: block !important;
       grid-column: auto;
       grid-row: 2;
-      margin-bottom: 10px;
+      margin-bottom: 7px;
     }
 
     p {
@@ -110,3 +122,16 @@
 .s72-playback-progress-bar {
   background-color: var(--secondary);
 }
+
+s72-show-hide-switcher {
+  display: block;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  transition: height 0.5s ease;
+
+  .s72-toggle {
+    @include media-breakpoint-up(sm) {
+      display: none;
+    }
+  }
+}

package/site/styles/_swiper.scss

@@ -1,16 +1,16 @@
-.swiper-wrapper-container {
+.collection-wrapper-container {
   margin: 0 auto;
   padding: 0;
   position: relative;
 }
 
-.swiper-container {
+.collection-container {
   padding: 0 0 40px;
   @include media-breakpoint-up(md) {
-    padding: 15px 20px 20px;
+    padding: 10px 20px 20px;
   }
   @include media-breakpoint-up(lg) {
-    padding: 15px 50px 20px;
+    padding: 10px 50px 20px;
   }
 }
 

package/site/styles/_typography.scss

@@ -48,7 +48,7 @@
     $font-size: var(--heading-3-style-font-size),
     $letter-spacing: var(--heading-3-style-letter-spacing),
     $font-weight: $font-weight-normal,
-    $margin-bottom: 6px,
+    $margin-bottom: 12px,
     $line-height: 24px
   );
   @include media-breakpoint-up(sm) {

package/site/styles/_variables.scss

@@ -43,6 +43,9 @@
   //   TODO(jackh): figure out a non-Sass way of calculating this.
   --hover-background-rgb: 58, 58, 58;
 
+  // It's in the designs :/
+  --live-red-rgb: 224, 49, 49;
+
   --primary: rgb(var(--primary-rgb));
   --secondary: rgb(var(--secondary-rgb));
   --body-color: rgb(var(--body-color-rgb));
@@ -51,8 +54,12 @@
   --body-bg-accent: rgb(var(--body-bg-accent-rgb));
   --input-focus-border-color: rgb(var(--input-focus-border-color-rgb));
   --hover-background: rgb(var(--hover-background-rgb));
+  --live-red: rgb(var(--live-red-rgb));
   /*#endregion BASE COLOURS */
 
+  --live-label-background-color: var(--hover-background);
+  --live-label-live-background-color: var(--live-red);
+
   --tooltip-color: var(--body-bg, #000);
   --tooltip-bg: var(--primary, #00a3ff);
   --tooltip-arrow-color: var(--tooltip-bg);
@@ -94,12 +101,14 @@
   --carousel-image-object-position-sm: center;
   --carousel-image-object-position-lg: center;
 
+  --collection-padding-bottom: 40px;
+
   --page-padding-top: 120px;
   --page-padding-top-md: 120px;
   --page-padding-top-lg: 180px;
-  --page-detail-padding-top: 245px;
-  --page-detail-padding-top-md: 290px;
-  --page-detail-padding-top-lg: 440px;
+  --page-detail-padding-top: 160px;
+  --page-detail-padding-top-md: 248px;
+  --page-detail-padding-top-lg: 400px;
 
   --heading-1-style-letter-spacing: normal;
   --heading-2-style-letter-spacing: normal;

package/site/templates/bundle/item.jet

@@ -31,9 +31,8 @@
 
           {{yield bundleSynopsis(class="meta-detail-synopsis", synopsis=bundle.Description)}}
         </div>
-
-        {{yield bundleList(items=bundle.Items)}}
       </div>
     </div>
+    {{yield bundleList(items=bundle.Items)}}
   </main>
 {{end}}

package/site/templates/bundle/list.jet

@@ -5,17 +5,21 @@
     {{itemLayout := config("default_image_type") == "portrait" ? "portrait" : "landscape"}}
     {{itemsPerRow := itemLayout == "portrait" ? "4" : "3"}}
 
-    <section  class="page-collection page-collection-list page-collection-list-{{itemsPerRow}} page-collection-list-{{itemLayout}} list-{{itemsPerRow}} list-{{itemLayout}} page-collection-{{itemsPerRow}}-list" aria-label="{{i18n("wcag_aria_label_bundle_items")}}">
-      <div class="page-collection-list-title">
-        <h2>{{i18n("meta_detail_bundle_items_title")}}</h2>
-      </div>
+    <section class="page-collection page-collection-list page-collection-list-{{itemsPerRow}} page-collection-list-{{itemLayout}} list-{{itemsPerRow}} list-{{itemLayout}} page-collection-{{itemsPerRow}}-list" aria-label="{{i18n("wcag_aria_label_bundle_items")}}">
+      <div class="collection-wrapper-container">
+        <div class="collection-container">
+          <div class="page-collection-list-title">
+            <h2>{{i18n("meta_detail_bundle_items_title")}}</h2>
+          </div>
 
-      <div class="page-collection-items collection-items">
-        {{range index, item := items}}
-          <div class="page-collection-item page-collection-list-item page-collection-list-item-{{itemLayout}} page-collection-item-{{itemLayout}} page-collection-list-item-{{itemsPerRow}} page-collection-item-{{itemsPerRow}}">
-            {{yield pageCollectionItem(item=item, layout=itemLayout)}}
+          <div class="page-collection-items collection-items">
+            {{range index, item := items}}
+              <div class="page-collection-item page-collection-list-item page-collection-list-item-{{itemLayout}} page-collection-item-{{itemLayout}} page-collection-list-item-{{itemsPerRow}} page-collection-item-{{itemsPerRow}}">
+                {{yield pageCollectionItem(item=item, layout=itemLayout)}}
+              </div>
+            {{end}}
           </div>
-        {{end}}
+        </div>
       </div>
     </section>
   {{end}}

package/site/templates/collection/carousel/item.jet

@@ -16,6 +16,8 @@
 
       {{if showItemContent}}
         <div class="carousel-item-caption">
+          <s72-live-label data-slug="{{item.Slug}}"></s72-live-label>
+
           {{if item.ItemType == "film"}}
             {{if len(item.InnerItem.AwardCategories) > 0 || item.InnerItem.ImageMap["Sponsor"]}}
               <div class="sponsor-awards-wrapper">
@@ -24,6 +26,7 @@
               </div>
             {{end}}
           {{end}}
+
           <div class="meta-item-content">
             {{yield carouselItemTitle(title=item.GetTitle(i18n))}}
 
@@ -34,8 +37,8 @@
             {{end}}
 
             <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
-            
-            {{yield ctaButtons(itemType=item.ItemType) item.InnerItem}}
+
+            {{yield ctaButtons(itemType=item.ItemType, context="carousel") item.InnerItem}}
 
 
           </div>

package/site/templates/collection/list.jet

@@ -3,21 +3,23 @@
 {{block pageCollectionList(showTitle=true)}}
 {{if len(.Items) > 0}}
 <section class="page-collection page-collection-list page-collection-list-{{.ItemsPerRow}} page-collection-list-{{.ItemLayout}} list-{{.ItemsPerRow}} list-{{.ItemLayout}} page-collection-{{.ItemsPerRow}}-list" aria-label="{{i18n("wcag_aria_label_collection_list")}}">
+  <div class="collection-wrapper-container">
+    <div class="collection-container">
+      {{ if showTitle }}
+        <div class="page-collection-list-title">
+          <h3>{{.DisplayName}}</h3>
+        </div>
+      {{ end }}
 
-  {{ if showTitle }}
-  <div class="page-collection-list-title">
-    <h3>{{.DisplayName}}</h3>
-  </div>
-  {{ end }}
-
-  <div class="page-collection-items collection-items">
-    {{range item := .Items}}
-      <div class="page-collection-item page-collection-list-item page-collection-list-item-{{.ItemLayout}} page-collection-item-{{.ItemLayout}} page-collection-list-item-{{.ItemsPerRow}} page-collection-item-{{.ItemsPerRow}}">
-        {{yield pageCollectionItem(item=item, layout=.ItemLayout)}}
+      <div class="page-collection-items collection-items">
+        {{range item := .Items}}
+          <div class="page-collection-item page-collection-list-item page-collection-list-item-{{.ItemLayout}} page-collection-item-{{.ItemLayout}} page-collection-list-item-{{.ItemsPerRow}} page-collection-item-{{.ItemsPerRow}}">
+            {{yield pageCollectionItem(item=item, layout=.ItemLayout)}}
+          </div>
+        {{end}}
       </div>
-    {{end}}
+    </div>
   </div>
-
 </section>
 {{end}}
 {{end}}

package/site/templates/collection/slider.jet

@@ -3,8 +3,8 @@
 {{block pageCollectionSlider()}}
 {{if len(.Items) > 0}}
 <section class="page-collection page-collection-slider page-collection-slider-{{.ItemsPerRow}} page-collection-slider-{{.ItemLayout}} slider-{{.ItemsPerRow}} slider-{{.ItemLayout}} page-collection-{{.ItemsPerRow}}-slider" aria-label="{{i18n("wcag_aria_label_collection_slider")}}">
-  <div class="swiper-wrapper-container">
-    <div class="swiper-container" data-items-per-row="{{.ItemsPerRow}}" data-layout="{{.ItemLayout}}">
+  <div class="collection-wrapper-container swiper-wrapper-container">
+    <div class="collection-container swiper-container" data-items-per-row="{{.ItemsPerRow}}" data-layout="{{.ItemLayout}}">
       {{if .DisplayName != ""}}
       <div class="swiper-title">
           <h3>{{.DisplayName}}</h3>

package/site/templates/collection/wishlist.jet

@@ -24,11 +24,11 @@
 
 {{end}}
   <section class="page-collection" aria-label="{{i18n("wcag_aria_label_wishlist")}}">
-    <div class="swiper-wrapper-container">
+    <div class="collection-wrapper-container swiper-wrapper-container">
       {{if config("default_image_type") == "portrait"}}
-        <div class="swiper-container" is-wishlist="true" data-items-per-row="6" data-layout="portrait">
+        <div class="collection-container swiper-container" is-wishlist="true" data-items-per-row="6" data-layout="portrait">
       {{else}}
-        <div class="swiper-container" is-wishlist="true" data-items-per-row="4" data-layout="landscape">
+        <div class="collection-container swiper-container" is-wishlist="true" data-items-per-row="4" data-layout="landscape">
       {{end}}
             {{if i18n("userwishlist_slider_header") != ""}}
             <div class="swiper-title">

package/site/templates/common/cta_buttons.jet

@@ -1,10 +1,11 @@
 {{import "./social-media-buttons.jet"}}
 
-{{block ctaButtons(itemType)}}
+{{block ctaButtons(itemType, context="item")}}
   {{isFilm := itemType == "film"}}
   {{isSeason := itemType == "tvseason"}}
   {{isEpisode := itemType == "tvepisode"}}
   {{isBundle := itemType == "bundle"}}
+  {{isCarousel := context == "carousel"}}
 
   {{slug := .Slug}}
   {{trailerURL := isBundle ? .PromoURL : (isFilm || isSeason) && len(.Trailers) > 0 ? .Trailers[0].URL : ""}}
@@ -15,10 +16,12 @@
   {{showTrailerButton := trailerURL != ""}}
   {{showWishlistButton := isFilm || isSeason || isEpisode}}
   {{showShareButton := isFilm || isSeason || isEpisode || isBundle}}
+  {{autoplay := !isCarousel}}
 
   {{showCtaButtons := showPricingButtons || showPlayButton || showCanBeWatchedButton || showTrailerButton || showWishlistButton || showShareButton}}
   {{showExtraButtons := showTrailerButton || showWishlistButton || showShareButton}}
 
+
   {{if showCtaButtons}}
     <div class="cta-buttons">
 
@@ -41,7 +44,7 @@
 
           {{if showTrailerButton}}
             {{dataLabel := i18n("play_trailer")}}
-            <s72-modal-player src="{{trailerURL}}" class="s72-btn-trailer" data-slug="{{slug}}" data-label="{{dataLabel}}" autoplay="querystring" layout="tooltip"></s72-modal-player>
+            <s72-modal-player src="{{trailerURL}}" class="s72-btn-trailer" data-slug="{{slug}}" data-label="{{dataLabel}}" {{if autoplay}}autoplay="querystring"{{end}} layout="tooltip"></s72-modal-player>
           {{end}}
 
           {{if showWishlistButton}}

package/site/templates/common/slider.jet

@@ -1,6 +1,6 @@
 {{block slider(itemsPerRow, itemLayout, title="", fluid=false)}}
-  <div class="swiper-wrapper-container">
-      <div class="swiper-container">
+  <div class="collection-wrapper-container swiper-wrapper-container">
+      <div class="collection-container swiper-container">
           {{if title != ""}}
           <div class="swiper-title">
               <h3>{{title}}</h3>

package/site/templates/film/item.jet

@@ -27,16 +27,22 @@
     </div>
     <div class="container">
       <div class="meta-detail-main">
+        <s72-live-label data-slug="{{film.Slug}}"></s72-live-label>
+
         <div class="poster-wrapper">
           {{if config("default_image_type") == "portrait"}}
             {{yield sponsor() film}}
-            <div class="poster poster-portrait">
-              <s72-availability-status data-slug="{{film.Slug}}"></s72-availability-status>
-              <s72-image src="{{film.ImageMap["Classification"]}}" alt="" class="classification-image">
-              <s72-image src="{{film.ImageMap["Portrait"]}}" alt="{{film.Title}}" class="poster poster-image poster-image-portrait"></s72-image>
-            </div>
+
+              <div class="poster poster-portrait">
+                {{if film.ImageMap["Portrait"] != ""}}
+                  <s72-availability-status data-slug="{{film.Slug}}"></s72-availability-status>
+                  <s72-image src="{{film.ImageMap["Classification"]}}" alt="" class="classification-image">
+                  <s72-image src="{{film.ImageMap["Portrait"]}}" alt="{{film.Title}}" class="poster poster-image poster-image-portrait"></s72-image>
+                {{end}}
+              </div>
           {{end}}
         </div>
+
         <div class="meta-detail-content">
           <h1>{{ film.Title }}</h1>
           <div class="meta-detail-tagline-and-classification">
@@ -55,6 +61,8 @@
             <br>
           {{end}}
 
+          {{yield awardNominations() film}}
+
           <div class="element-switcher-wrapper">
             <s72-element-switcher>
               {{if isEnabled("element_switcher_enabled")}}
@@ -144,15 +152,12 @@
             </s72-element-switcher>
             {{yield sponsor() film}}
           </div>
-          {{yield awardNominations() film}}
           {{if len(film.Bonuses) > 0 && !film.CustomFields.GetBool("hide_bonus_content", false)}}
             <section class="meta-detail-bonus-content" aria-label="{{i18n("meta_detail_bonus_title")}}">
               <h2>{{i18n("meta_detail_bonus_title")}}</h2>
               {{yield list(itemsPerRow=4, itemLayout="landscape") content}}
                 {{range bonus := film.Bonuses}}
-                  <div class="sub-item">
-                    {{yield subItem(item=bonus)}}
-                  </div>
+                  {{yield subItem(item=bonus)}}
                 {{end}}
               {{end}}
             </section>
@@ -163,11 +168,11 @@
 
     {{if len(film.Recommendations) > 0 }}
     <section class="page-collection recommendations-collection" aria-label="{{i18n("meta_detail_recommendations_title")}}">
-      <div class="swiper-wrapper-container">
+      <div class="collection-wrapper-container swiper-wrapper-container">
         {{if config("default_image_type") == "portrait"}}
-          <div class="swiper-container" data-items-per-row="6" data-layout="portrait">
+          <div class="collection-container swiper-container" data-items-per-row="6" data-layout="portrait">
         {{else}}
-          <div class="swiper-container" data-items-per-row="4" data-layout="landscape">
+          <div class="collection-container swiper-container" data-items-per-row="4" data-layout="landscape">
         {{end}}
           <div class="swiper-title">
               <h2>{{i18n("meta_detail_recommendations_title")}}</h2>

package/site/templates/items/sub_item.jet

@@ -1,22 +1,26 @@
 {{ block subItem(item) }}
-  <div class="poster-container">
-    <div class="poster">
-      <s72-availability-status slug="{{item.Slug}}"></s72-availability-status>
-      <s72-image src="{{item.Images.Landscape}}" alt="{{item.Title}}" class="poster-image poster-image-landscape"></s72-image>
-      <s72-play-button data-slug="{{item.Slug}}" title="{{item.Title}}"></s72-play-button>
-      <s72-playback-progress slug="{{item.Slug}}"></s72-playback-progress>
-    </div>
-  </div>
-  <h3>{{item.Title}}</h3>
-  {{if item.Runtime > 0 }}
-    <span class="runtime">
-      {{if item.Runtime.Hours() > 0}}
-        {{item.Runtime.Hours()}}{{i18n("runtime_hours")}}
+  <s72-show-hide-switcher target-elem=".synopsis">
+    <div class="sub-item">
+      <div class="poster-container">
+        <div class="poster">
+          <s72-availability-status slug="{{item.Slug}}"></s72-availability-status>
+          <s72-image src="{{item.Images.Landscape}}" alt="{{item.Title}}" class="poster-image poster-image-landscape"></s72-image>
+          <s72-play-button data-slug="{{item.Slug}}" title="{{item.Title}}"></s72-play-button>
+          <s72-playback-progress slug="{{item.Slug}}"></s72-playback-progress>
+        </div>
+      </div>
+      <h3>{{item.Title}}</h3>
+      {{if item.Runtime > 0 }}
+        <span class="runtime">
+          {{if item.Runtime.Hours() > 0}}
+            {{item.Runtime.Hours()}}{{i18n("runtime_hours")}}
+          {{end}}
+          {{item.Runtime.Minutes()}}{{i18n("runtime_minutes")}}
+        </span>
+      {{end}}
+      {{if item.Overview}}
+        <div class="synopsis s72-hide">{{item.Overview | raw}}</div> {* hide class prevents FOUC *}
       {{end}}
-      {{item.Runtime.Minutes()}}{{i18n("runtime_minutes")}}
-    </span>
-  {{end}}
-  {{if item.Overview}}
-    <div class="synopsis">{{item.Overview | raw}}</div>
-  {{end}}
+    </div>
+  </s72-show-hide-switcher>
 {{ end }}