@shift72/core-template 1.6.0 → 1.8.0

package/site/styles/_meta-detail.scss

@@ -147,10 +147,14 @@
     .sponsor {
       margin-bottom: 12px;
 
-      @include media-breakpoint-up(xs) {
+      @include media-breakpoint-up(lg) {
         margin-bottom: 20px;
       }
     }
+
+    > .poster {
+      margin-bottom: 5px;
+    }
   }
 
   .poster {
@@ -172,6 +176,10 @@
     .live {
       display: none;
     }
+
+    .s72-image {
+      display: initial;
+    }
   }
 
   .poster-wrapper .sponsor {
@@ -190,7 +198,8 @@
 
 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;
 
@@ -221,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;
     }
@@ -229,7 +243,7 @@ s72-element-switcher,
 
   .meta-detail-synopsis,
   .meta-detail-switcher-tagline {
-    padding-top: 22px;
+    padding-top: 12px;
 
     p {
       animation: fadein 2s;
@@ -268,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;
@@ -399,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;
@@ -416,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;
@@ -450,6 +457,7 @@ s72-element-switcher {
   margin-bottom: 62px;
 
   .s72-toggle {
+    bottom: -36px;
     &:hover {
       color: var(--body-color-hover);
     }
@@ -460,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/_shift72.scss

@@ -34,6 +34,10 @@
   @extend .btn-primary-override;
 }
 
+.s72-btn-purchase-option {
+  @extend .btn-primary-override;
+}
+
 .s72-btn-close {
   @extend .close;
 }

package/site/styles/_swiper.scss

@@ -7,10 +7,10 @@
 .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

@@ -106,9 +106,9 @@
   --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/application/footer/app-badges.jet

@@ -3,23 +3,42 @@
 {{block appBadges()}}
   {{app_link_ios := config("app_link_ios")}}
   {{app_link_android := config("app_link_android")}}
-  {{if config("app_link_ios") != "" || config("app_link_android") != ""}}
+  {{app_link_apple_tv_enabled := config("app_link_apple_tv_enabled")}}
+  {{app_link_android_tv := config("app_link_android_tv")}}
+  {{app_link_fire_tv := config("app_link_fire_tv")}}
+
+  {{if app_link_ios != "" || app_link_android != ""}}
     <div class="app-banner">
       <h2 class="app-badge-title">{{ i18n("app_badge_title") }}</h2>
+
       <div class="app-badge-container">
-        {{if config("app_link_ios") != ""}}
-          <a class="app-badge-link" href="{{app_link_ios}}" target="_blank">
-            <s72-image src="/images/icons/app-store-badge.png" alt="{{ i18n("app_badge_ios") }}" class="app-badge-image"></s72-image>
-          </a>
-        {{end}}
-        {{if config("app_link_android") != ""}}
-          <a class="app-badge-link" href="{{app_link_android}}" target="_blank">
-            <s72-image src="/images/icons/google-play-badge.png" alt="{{ i18n("app_badge_android") }}" class="app-badge-image"></s72-image>
-          </a>
-        {{end}}
+        {{yield appBadge(href=app_link_ios, image="/images/icons/app-store-badge.png", altKey="app_badge_ios", imgClass="app-badge-image")}}
+        {{yield appBadge(href=app_link_android, image="/images/icons/google-play-badge.png", altKey="app_badge_android", imgClass="app-badge-image")}}     
+      </div>
+    </div>
+
+    {{yield separator()}}
+  {{end}}
+
+  {{if app_link_apple_tv_enabled == "true" || app_link_android_tv != "" || app_link_fire_tv != ""}}
+    <div class="tv-app-banner">
+      <h2 class="tv-app-badge-title">{{ i18n("tv_app_badge_title") }}</h2>
+
+      <div class="tv-app-badge-container">
+        {{yield appBadge(href=app_link_fire_tv, image="/images/icons/amazonfiretv.png", altKey="app_badge_fire_tv", imgClass="tv-badge-image")}}
+        {{yield appBadge(href=app_link_android_tv, image="/images/icons/androidtv.png", altKey="app_badge_android_tv", imgClass="tv-badge-image")}} 
+        {{yield appBadge(href=app_link_apple_tv_enabled, image="/images/icons/appletv.png", altKey="app_badge_apple_tv", imgClass="tv-badge-image")}} 
       </div>
     </div>
 
     {{yield separator()}}
   {{end}}
 {{end}}
+
+{{block appBadge(href, image, altKey, imgClass)}}
+  {{if href != "" && href != "false"}}
+    <a class="app-badge-link" {{if href != "true" }} href="{{href}}" target="_blank" {{end}}>
+      <s72-image class="{{imgClass}}" src="{{image}}" alt="{{ i18n(altKey) }}" ></s72-image>
+    </a>
+  {{end}}
+{{end}}

package/site/templates/application/footer/footer.jet

@@ -3,6 +3,7 @@
 {{import "./nav.jet"}}
 {{import "./app-badges.jet"}}
 {{import "./sponsor-banner.jet"}}
+{{import "./social-media-buttons.jet"}}
 
 {{block footer()}}
 
@@ -16,6 +17,8 @@
 
     {{yield footerNav(navLinks=site.Navigation.Footer)}}
 
+    {{yield footerSocialMediaButtons()}}
+
     {{yield footerInfo()}}
   </footer>
 {{end}}

package/site/templates/application/footer/nav.jet

@@ -1,13 +1,13 @@
 {{ block footerNav(navLinks) }}
-  <nav class="footer-nav" aria-label="{{ i18n("wcag_aria_label_footer") }}">
-    {{ if len(navLinks) > 0 }}
-      <ul class="nav">
-        {{ range navLinks }}
-          <li class="nav-item {{ len(.Link.ExternalURL) == 0 && routeToSlug(.Link.Slug) == currentUrlPath ? "active" : "" }}">
-            <a class="nav-link" href="{{ len(.Link.ExternalURL) > 0 ? .Link.ExternalURL : routeToSlug(.Link.Slug) }}">{{ .Label }}</a>
-          </li>
-        {{ end }}
-      </ul>
-    {{ end }}
-  </nav>
-{{ end }}
+  {{ if len(navLinks) > 0 }}
+    <nav class="footer-nav" aria-label="{{ i18n("wcag_aria_label_footer") }}">
+        <ul class="nav">
+          {{ range navLinks }}
+            <li class="nav-item {{ len(.Link.ExternalURL) == 0 && routeToSlug(.Link.Slug) == currentUrlPath ? "active" : "" }}">
+              <a class="nav-link" href="{{ len(.Link.ExternalURL) > 0 ? .Link.ExternalURL : routeToSlug(.Link.Slug) }}">{{ .Label }}</a>
+            </li>
+          {{ end }}
+        </ul>
+    </nav>
+  {{ end }}
+{{ end }}

package/site/templates/application/footer/social-media-buttons.jet

@@ -0,0 +1,25 @@
+{{block footerSocialMediaButtons()}}
+  {{social_link_instagram := config("social_link_instagram")}}
+  {{social_link_youtube := config("social_link_youtube")}}
+  {{social_link_facebook := config("social_link_facebook")}}
+  {{social_link_twitter := config("social_link_twitter")}}
+  {{social_link_letterboxd := config("social_link_letterboxd")}}
+
+  {{if social_link_instagram != "" || social_link_youtube != "" || social_link_facebook != "" || social_link_twitter != "" || social_link_letterboxd != ""}}
+    <div class="footer-social-media-icons">
+      {{yield footerSocialMediaIcon(link=social_link_instagram, iconClass="instagram", titleKey="wcag_aria_label_social_instagram")}}
+      {{yield footerSocialMediaIcon(link=social_link_youtube, iconClass="youtube", titleKey="wcag_aria_label_social_youtube")}}
+      {{yield footerSocialMediaIcon(link=social_link_facebook, iconClass="facebook", titleKey="wcag_aria_label_social_facebook")}}
+      {{yield footerSocialMediaIcon(link=social_link_twitter, iconClass="twitter", titleKey="wcag_aria_label_social_twitter")}}
+      {{yield footerSocialMediaIcon(link=social_link_letterboxd, iconClass="letterboxd", titleKey="wcag_aria_label_social_letterboxd")}}
+    </div>
+  {{end}}
+{{end}}
+
+{{block footerSocialMediaIcon(link, iconClass, titleKey)}}
+  {{if link != ""}}
+    <a class="s72-btn" target="_blank" title="{{i18n(titleKey)}}" href="{{link}}">
+      <i class="fa fa-{{iconClass}}-footer"></i>
+    </a>
+  {{end}}
+{{end}}

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

@@ -39,8 +39,6 @@
             <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
 
             {{yield ctaButtons(itemType=item.ItemType, context="carousel") item.InnerItem}}
-
-
           </div>
         </div>
       {{end}}

package/site/templates/film/item.jet

@@ -33,13 +33,13 @@
           {{if config("default_image_type") == "portrait"}}
             {{yield sponsor() film}}
 
-            {{if film.ImageMap["Portrait"] != ""}}
               <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>
+                {{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}}
           {{end}}
         </div>
 
@@ -157,9 +157,7 @@
               <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>

package/site/templates/items/meta_item.jet

@@ -29,9 +29,7 @@
   {{end}}
   {{pill := ""}}
   {{pillSupplement := ""}}
-  {{slugRoute := routeToSlug(item.Slug)}}
   {{if isEpisode}}
-    {{slugRoute = routeToSlug(item.InnerItem.Season.Slug) + "#episode-" + item.InnerItem.EpisodeNumber}}
     {{synopsis = item.InnerItem.Overview}}
     {{pill = i18n("episode_name") + " " + item.InnerItem.EpisodeNumber}}
     {{pillSupplement = "from " + i18n("season_name") + " " + item.InnerItem.Season.SeasonNumber}}

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 }}

package/site/templates/items/tagline.jet

@@ -17,7 +17,7 @@
 
     {{if isset(.Runtime)}}
       {{yield item(class="runtime") content}}
-        {{if .Runtime > 60}}
+        {{if .Runtime > 59}}
           {{.Runtime.Hours()}}{{i18n("runtime_hours")}}
         {{end}}
         {{.Runtime.Minutes()}}{{i18n("runtime_minutes")}}

package/site/templates/tv/detail.jet

@@ -81,9 +81,8 @@
               <h2>{{i18n("meta_detail_episodes_title")}}</h2>
               {{yield list(itemsPerRow=4, itemLayout="portrait") content}}
                 {{range episode := tvseason.Episodes}}
-                  <div class="sub-item">
-                    {{yield subItem(item=episode)}}
-                  </div>
+                  <a id="episode-{{episode.EpisodeNumber}}"></a>
+                  {{yield subItem(item=episode)}}
                 {{end}}
               {{end}}
             </div>
@@ -94,9 +93,7 @@
               <h2>{{i18n("meta_detail_bonus_title")}}</h2>
               {{yield list(itemsPerRow=4, itemLayout="landscape") content}}
                 {{range bonus := tvseason.Bonuses}}
-                  <div class="sub-item">
-                    {{yield subItem(item=bonus)}}
-                  </div>
+                  {{yield subItem(item=bonus)}}
                 {{end}}
               {{end}}
             </section>

package/site/tr_TR.all.json

@@ -1511,5 +1511,32 @@
   },
   "new_card_error_timed_out": {
     "other": "Bu kartı eklerken bir şeyler ters gitti. Lütfen daha sonra tekrar deneyin veya farklı bir kart kullanın."
+  },
+  "tv_app_badge_title": {
+    "other": "TV uygulamalarında kullanılabilir"
+  },
+  "app_badge_fire_tv": {
+    "other": "Amazon Fire TV'den alın"
+  },
+  "app_badge_android_tv": {
+    "other": "Android TV'de alın"
+  },
+  "app_badge_apple_tv": {
+    "other": "Apple TV'de alın"
+  },
+  "wcag_aria_label_social_instagram": {
+    "other": "Bizi Instagram'da ziyaret edin"
+  },
+  "wcag_aria_label_social_youtube": {
+    "other": "Youtube'da abone olun"
+  },
+  "wcag_aria_label_social_facebook": {
+    "other": "Facebook'ta bizi ziyaret edin"
+  },
+  "wcag_aria_label_social_twitter": {
+    "other": "Twitter'da bizi ziyaret edin"
+  },
+  "wcag_aria_label_social_letterboxd": {
+    "other": "Bizi Letterboxd'da ziyaret edin"
   }
 }

package/site/uk_UA.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "у партнерстві з"
@@ -1571,5 +1571,32 @@
   },
   "new_card_error_timed_out": {
     "other": "Під час додавання цієї картки сталася помилка. Повторіть спробу пізніше або скористайтеся іншою карткою."
+  },
+  "tv_app_badge_title": {
+    "other": "Доступно в додатках для телевізора"
+  },
+  "app_badge_fire_tv": {
+    "other": "Отримайте його на Amazon Fire TV"
+  },
+  "app_badge_android_tv": {
+    "other": "Завантажте на Android TV"
+  },
+  "app_badge_apple_tv": {
+    "other": "Отримайте його на Apple TV"
+  },
+  "wcag_aria_label_social_instagram": {
+    "other": "Відвідайте нас в Instagram"
+  },
+  "wcag_aria_label_social_youtube": {
+    "other": "Підпишіться на Youtube"
+  },
+  "wcag_aria_label_social_facebook": {
+    "other": "Відвідайте нас на Facebook"
+  },
+  "wcag_aria_label_social_twitter": {
+    "other": "Відвідайте нас у Twitter"
+  },
+  "wcag_aria_label_social_letterboxd": {
+    "other": "Відвідайте нас на Letterboxd"
   }
 }

package/site/zh_TW.all.json

@@ -1498,5 +1498,32 @@
   },
   "new_card_error_timed_out": {
     "other": "添加該卡時出現問題。請稍後再試或使用其他卡。"
+  },
+  "tv_app_badge_title": {
+    "other": "在電視應用程序上可用"
+  },
+  "app_badge_fire_tv": {
+    "other": "在 Amazon Fire TV 上獲取"
+  },
+  "app_badge_android_tv": {
+    "other": "在 Android TV 上獲取它"
+  },
+  "app_badge_apple_tv": {
+    "other": "在 Apple TV 上獲取它"
+  },
+  "wcag_aria_label_social_instagram": {
+    "other": "在 Instagram 上訪問我們"
+  },
+  "wcag_aria_label_social_youtube": {
+    "other": "在 Youtube 上訂閱"
+  },
+  "wcag_aria_label_social_facebook": {
+    "other": "在 Facebook 上訪問我們"
+  },
+  "wcag_aria_label_social_twitter": {
+    "other": "在推特上訪問我們"
+  },
+  "wcag_aria_label_social_letterboxd": {
+    "other": "在 Letterboxd 上訪問我們"
   }
 }