@shift72/core-template 0.6.0 → 1.0.0-alpha.0

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

@@ -0,0 +1,116 @@
+.sub-item {
+  display: grid;
+  grid-gap: 15px;
+  grid-template-columns: 112px minmax(100px, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 175px minmax(100px, 1fr);
+    grid-template-rows: auto auto minmax(0, 1fr);
+  }
+
+  h3 {
+    color: var(--body-color);
+    font-size: 16px;
+    font-weight: $font-weight-normal;
+    letter-spacing: 0.4px;
+    margin-bottom: 15px;
+
+    @include media-breakpoint-up(sm) {
+      margin-bottom: 0;
+    }
+  }
+
+  &:not(:last-of-type) {
+    border-bottom: 1px solid $list-group-border-color;
+  }
+
+  s72-image {
+    display: initial; //override relish
+  }
+
+  .poster-container {
+    grid-row: 1 / 3;
+
+    @include media-breakpoint-up(sm) {
+      grid-row: 1 / 4;
+    }
+  }
+
+  .synopsis {
+    font-size: 16px;
+    font-weight: $font-weight-light;
+    grid-column: 1 / 3;
+    letter-spacing: 0.6px;
+    line-height: 1.25;
+    margin-top: 5px;
+
+    @include media-breakpoint-up(sm) {
+      grid-column: auto;
+      grid-row: 2;
+      margin-bottom: 10px;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  .runtime {
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+  .poster {
+    border-radius: $poster-border-radius;
+
+    img {
+      width: 100%;
+    }
+
+    .s72-btn-play {
+      background-color: unset;
+      border: 0;
+      border-radius: 999px;
+      box-shadow: none;
+      left: 50%;
+      padding-left: 3px;
+      padding-right: 3px;
+      position: absolute;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+      z-index: 2;
+
+      /* stylelint-disable selector-max-compound-selectors */
+      circle {
+        fill: rgba(0, 0, 0, 0.8) !important;
+        stroke: unset;
+      }
+
+      path {
+        fill: #fff !important;
+        stroke: #fff !important;
+      }
+
+      .verb {
+        display: none;
+      }
+      /* stylelint-enable selector-max-compound-selectors */
+    }
+  }
+}
+
+.s72-playback-progress,
+.s72-playback-progress-bar {
+  height: 6px;
+}
+
+.s72-playback-progress {
+  background-color: rgba(var(--body-bg-rgb), 0.5);
+}
+
+.s72-playback-progress-bar {
+  background-color: var(--secondary);
+}

package/site/styles/_mixins.scss

@@ -24,6 +24,51 @@
   z-index: 8;
 }
 
+// Easing gradients created using this tool: https://larsenwork.com/easing-gradients/#editor
+.carousel-bottom-gradient {
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--body-bg-rgb), 0) 0%,
+    rgba(var(--body-bg-rgb), 0.013) 8.1%,
+    rgba(var(--body-bg-rgb), 0.049) 15.5%,
+    rgba(var(--body-bg-rgb), 0.104) 22.5%,
+    rgba(var(--body-bg-rgb), 0.175) 29%,
+    rgba(var(--body-bg-rgb), 0.259) 35.3%,
+    rgba(var(--body-bg-rgb), 0.352) 41.2%,
+    rgba(var(--body-bg-rgb), 0.45) 47.1%,
+    rgba(var(--body-bg-rgb), 0.55) 52.9%,
+    rgba(var(--body-bg-rgb), 0.648) 58.8%,
+    rgba(var(--body-bg-rgb), 0.741) 64.7%,
+    rgba(var(--body-bg-rgb), 0.825) 71%,
+    rgba(var(--body-bg-rgb), 0.896) 77.5%,
+    rgba(var(--body-bg-rgb), 0.951) 84.5%,
+    rgba(var(--body-bg-rgb), 0.987) 91.9%,
+    rgba(var(--body-bg-rgb)) 100%
+  );
+}
+
+.navigation-gradient {
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--body-bg-rgb)) 0%,
+    rgba(var(--body-bg-rgb), 0.987) 1.1%,
+    rgba(var(--body-bg-rgb), 0.951) 4.2%,
+    rgba(var(--body-bg-rgb), 0.896) 9%,
+    rgba(var(--body-bg-rgb), 0.825) 15.2%,
+    rgba(var(--body-bg-rgb), 0.741) 22.6%,
+    rgba(var(--body-bg-rgb), 0.648) 30.9%,
+    rgba(var(--body-bg-rgb), 0.55) 39.8%,
+    rgba(var(--body-bg-rgb), 0.45) 49%,
+    rgba(var(--body-bg-rgb), 0.352) 58.3%,
+    rgba(var(--body-bg-rgb), 0.259) 67.4%,
+    rgba(var(--body-bg-rgb), 0.175) 76%,
+    rgba(var(--body-bg-rgb), 0.104) 83.8%,
+    rgba(var(--body-bg-rgb), 0.049) 90.6%,
+    rgba(var(--body-bg-rgb), 0.013) 96.1%,
+    rgba(var(--body-bg-rgb), 0) 100%
+  );
+}
+
 @mixin a {
   background-color: transparent;
   color: var(--link-color);

package/site/styles/_nav.scss

@@ -1,5 +1,5 @@
 .navigation {
-  @extend .top-gradient-bg;
+  @extend .navigation-gradient;
   background-color: transparent;
   display: flex;
   flex-direction: column;

package/site/styles/_pages.scss

@@ -8,7 +8,6 @@
 .form-page {
   @include media-breakpoint-up(md) {
     padding-bottom: $grid-gutter-width * 4;
-    padding-top: $grid-gutter-width * 4;
   }
 }
 
@@ -83,7 +82,6 @@
   @include media-breakpoint-up(xl) {
     padding: var(--page-padding-top-lg) 0 0 0;
   }
-
   .page-header {
     h1,
     p {
@@ -144,17 +142,6 @@
   }
 }
 
-.curated-page,
-.collection-page {
-  padding: var(--page-padding-top) 0 0 0;
-  @include media-breakpoint-up(md) {
-    padding: var(--page-padding-top-md) 0 0 0;
-  }
-  @include media-breakpoint-up(lg) {
-    padding: var(--page-padding-top-lg) 0 0 0;
-  }
-}
-
 .collection-page {
   .page-collections {
     @extend .d-flex;
@@ -189,6 +176,10 @@
       padding: 0 5px 10px;
     }
   }
+
+  .s72-subscribe-trial-label {
+    display: none;
+  }
 }
 
 .wishlist-page,

package/site/styles/_plans.scss

@@ -83,3 +83,17 @@ s72-plan-label {
     display: inline !important;
   }
 }
+
+.s72-subscribe-trial-label {
+  display: none;
+  flex-grow: 1;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+  width: 1px;
+
+  @include media-breakpoint-up(md) {
+    display: block;
+    margin: 4px 0 0 18px;
+  }
+}

package/site/styles/_shift72.scss

@@ -30,6 +30,10 @@
   @extend .btn-primary-override;
 }
 
+.s72-btn-subscribe {
+  @extend .btn-primary-override;
+}
+
 .s72-btn-close {
   @extend .close;
 }

package/site/styles/_variables.scss

@@ -31,10 +31,8 @@
 
   --carousel-height: 560px;
   --carousel-height-sm: 560px;
-  --carousel-height-md: 620px;
-  --carousel-caption-top: 125px;
-  --carousel-caption-top-xs: 150px;
-  --carousel-caption-top-md: 175px;
+  --carousel-height-lg: 620px;
+  --carousel-bottom-gradient-height: 220px; // Increase this to 800px for light theme.
 
   --page-padding-top: 120px;
   --page-padding-top-md: 120px;

package/site/styles/main.scss

@@ -7,6 +7,7 @@
 
 @import '_icons';
 @import '_buttons';
+@import '_cta-buttons';
 @import '_pages';
 @import '_forms';
 @import '_card';
@@ -17,6 +18,7 @@
 @import '_swiper';
 
 @import '_meta-item';
+@import '_meta-sub-item';
 @import '_meta-item-tagline';
 @import '_availability-tags';
 
@@ -25,7 +27,6 @@
 @import '_carousel';
 @import '_poster';
 
-@import '_homepage';
 @import '_meta-detail';
 @import '_footer';
 

package/site/templates/bundle/item.jet

@@ -4,9 +4,8 @@
 {{import "./title.jet"}}
 {{import "./tagline.jet"}}
 {{import "./synopsis.jet"}}
-{{import "./buttons.jet"}}
-{{import "./extras.jet"}}
 {{import "./list.jet"}}
+{{import "../common/cta_buttons.jet"}}
 
 {{block head()}}
   {{yield seo() bundle}}
@@ -28,10 +27,9 @@
 
           {{yield bundleTagline(class="meta-detail-tagline") bundle}}
 
-          {{yield bundleButtons(class="meta-detail-buttons", slug=bundle.Slug, title=bundle.Title, promoURL=bundle.PromoURL)}}
+          {{yield ctaButtons(itemType="bundle") bundle}}
 
           {{yield bundleSynopsis(class="meta-detail-synopsis", synopsis=bundle.Description)}}
-
         </div>
 
         {{yield bundleList(items=bundle.Items)}}

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

@@ -0,0 +1,27 @@
+{{import "./item.jet"}}
+{{import "./pagination.jet"}}
+
+{{block carousel()}}
+	{{maxSlides := configInt("carousel_max_slides", 7)}}
+	{{if len(.Items) < maxSlides}}
+		{{maxSlides = len(.Items)}}
+	{{end}}
+	{{items := .Items[0:maxSlides]}}
+
+	{{if len(items) > 0}}
+		<s72-carousel>
+			<section class="page-collection page-collection-carousel" aria-label="{{i18n("wcag_aria_label_carousel")}}">
+				<h2 class="sr-only">{{i18n("wcag_carousel_h2")}}</h2>
+
+				<div class="s72-carousel-slides">
+					{{range index, item := items}}
+						{{yield carouselItem(item=item)}}
+					{{end}}
+				</div>
+
+				{{yield carouselPagination(items=items)}}
+
+			</section>
+		</s72-carousel>
+	{{end}}
+{{end}}

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

@@ -0,0 +1,5 @@
+{{block carouselItemImage()}}
+  {{if isset(.Images["Carousel"])}}
+    <s72-image src="{{.Images.Carousel}}" alt="{{.Title}}" class="carousel-item-image"></s72-image>
+  {{end}}
+{{end}}

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

@@ -0,0 +1,5 @@
+{{block carouselItemSynopsis(synopsis)}}
+  <div class="meta-item-synopsis">
+    <p>{{synopsis | stripHTML}}</p>
+  </div>
+{{end}}

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

@@ -0,0 +1,7 @@
+{{import "../../../items/tagline.jet"}}
+
+{{block carouselItemTagline()}}
+  <div class="meta-item-tagline-and-classification">
+    {{yield metaItemTagline(genresLimit=1) .}}
+  </div>
+{{end}}

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

@@ -0,0 +1,3 @@
+{{block carouselItemTitle(title)}}
+  <h3>{{title}}</h3>
+{{end}}

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

@@ -0,0 +1,41 @@
+{{import "../../common/awards/carousel.jet"}}
+{{import "./item/title.jet"}}
+{{import "./item/tagline.jet"}}
+{{import "./item/image.jet"}}
+{{import "./item/synopsis.jet"}}
+{{import "../../common/sponsor-image.jet"}}
+{{import "../../common/cta_buttons.jet"}}
+
+{{block carouselItem(item)}}
+  {{showItemContent := !isset(item["PageType"]) || item.PageType != "external"}}  
+
+  <div class="s72-carousel-item" data-slug="{{item.Slug}}">
+    <a href="{{routeToSlug(item.Slug)}}" class="carousel-item-link" aria-label="{{item.Title}}">
+
+      {{yield carouselItemImage() item}}
+
+      {{if showItemContent}}
+        <div class="carousel-item-caption">
+          {{if item.ItemType == "film"}}
+            {{yield sponsor(hideLink="true") item.InnerItem}}
+          {{end}}
+          <div class="meta-item-content">
+            {{yield carouselItemTitle(title=item.GetTitle(i18n))}}
+
+            {{yield carouselItemTagline() item.InnerItem}}
+
+            {{if isset(item.InnerItem["Tagline"])}}
+              {{yield carouselItemSynopsis(synopsis=item.InnerItem.Tagline)}}
+            {{end}}
+
+            {{yield ctaButtons(itemType=item.ItemType, trailerRedirect=true) item.InnerItem}}            
+
+            <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
+
+            {{yield awardsCarousel() item.InnerItem}}
+          </div>
+        </div>
+      {{end}}
+    </a>
+  </div>
+{{end}}

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

@@ -0,0 +1,9 @@
+{{block carouselPagination(items)}}
+  <div class="s72-carousel-pagination">
+    {{range index, item := items}}
+      <button class="s72-carousel-page" data-page-index="{{index}}" data-slug="{{item.Slug}}" aria-label="{{i18n("wcag_aria_label_carousel_pagination")}} {{item.Title}}">
+        <div class="s72-carousel-line"></div>
+      </button>
+    {{end}}
+  </div>
+{{end}}

package/site/templates/collection/page_collection.jet

@@ -1,10 +1,10 @@
-{{import "./carousel.jet"}}
+{{import "./carousel/carousel.jet"}}
 {{import "./slider.jet"}}
 {{import "./list.jet"}}
 
 {{block pageCollection(showTitle=true)}}
   {{if .Layout == "carousel"}}
-    {{yield pageCollectionCarousel()}}
+    {{yield carousel()}}
   {{else if .Layout == "slider"}}
     {{yield pageCollectionSlider()}}
   {{else}}

package/site/templates/common/cta_buttons.jet

@@ -0,0 +1,70 @@
+{{import "./social-media-buttons.jet"}}
+
+{{block ctaButtons(itemType, trailerRedirect=false)}}
+  {{isFilm := itemType == "film"}}
+  {{isSeason := itemType == "tvseason"}}
+  {{isEpisode := itemType == "tvepisode"}}
+  {{isBundle := itemType == "bundle"}}
+
+  {{slug := .Slug}}
+  {{trailerURL := isBundle ? .PromoURL : (isFilm || isSeason) && len(.Trailers) > 0 ? .Trailers[0].URL : ""}}
+
+  {{showPricingButtons := isFilm || isSeason || isBundle}}
+  {{showPlayButton := isFilm || isSeason || isEpisode}}
+  {{showCanBeWatchedButton := isFilm}}
+  {{showTrailerButton := trailerURL != ""}}
+  {{showWishlistButton := isFilm || isSeason || isEpisode}}
+  {{showShareButton := isFilm || isSeason || isEpisode || isBundle}}
+
+  {{showCtaButtons := showPricingButtons || showPlayButton || showCanBeWatchedButton || showTrailerButton || showWishlistButton || showShareButton}}
+  {{showExtraButtons := showTrailerButton || showWishlistButton || showShareButton}}
+
+  {{if showCtaButtons}}
+    <div class="cta-buttons">
+
+      {{if showPricingButtons}}
+        <s72-pricing-buttons data-slug="{{slug}}"></s72-pricing-buttons>
+      {{end}}
+
+      {{if showPlayButton}}
+        <s72-play-button data-slug="{{slug}}"></s72-play-button>
+      {{end}}
+
+      {{if showCanBeWatchedButton}}
+        {{dataURL := .CustomFields.GetString("can_be_watched_button_link", "")}}
+        {{dataLabel := .CustomFields.GetString("can_be_watched_button_text", "")}}
+        <can-be-watched-button data-slug="{{slug}}" data-url="{{dataURL}}" data-label="{{dataLabel}}"></can-be-watched-button>
+      {{end}}
+
+      {{if showExtraButtons}}
+        <div class="extra-buttons">
+
+          {{if showTrailerButton}}
+            {{if trailerRedirect}}
+              <div class="s72-btn-trailer" data-url="{{routeToSlug(slug)}}?autoplay">
+                <button class="s72-btn s72-btn-play">
+                  <span class="s72-btn-play-icon"><s72-play-icon></s72-play-icon></span>
+                </button>
+              </div>
+            {{else}}
+              {{dataLabel := i18n("play_trailer")}}
+              <s72-modal-player src="{{trailerURL}}" class="s72-btn-trailer" data-slug="{{slug}}" data-label="{{dataLabel}}" autoplay="querystring"></s72-modal-player>
+            {{end}}
+          {{end}}
+
+          {{if showWishlistButton}}
+            <s72-userwishlist-button data-slug="{{slug}}" class="btn-wishlist"></s72-userwishlist-button>
+          {{end}}
+
+          {{if showShareButton}}
+            {{letterboxdID := isFilm ? .Refs.LetterboxdID : ""}}
+            {{shareURL := site.SiteConfig.SiteURL + routeToSlug(slug)}}
+            {{yield socialMediaButtons(url=shareURL, letterboxdID=letterboxdID)}}
+          {{end}}
+
+        </div>
+      {{end}}
+
+    </div>
+  {{end}}
+{{end}}

package/site/templates/common/social-media-buttons.jet

@@ -1,11 +1,11 @@
-{{block socialMediaButtons(path="", title="", letterboxdID="")}}
+{{block socialMediaButtons(url="", title="", letterboxdID="")}}
 {{show_facebook_share := config("show_facebook_share", "true") == "true"}}
 {{show_twitter_share := config("show_twitter_share", "true") == "true"}}
 {{show_linkedin_share := config("show_linkedin_share", "true") == "true"}}
 
 	{{if show_facebook_share || show_twitter_share || show_linkedin_share || letterboxdID}}
 		<div class="social-media-buttons">
-			<s72-share-modal {{letterboxdID ? "letterboxd=" + letterboxdID : ""}}></s72-share-modal>
+			<s72-share-modal {{letterboxdID ? "letterboxd=" + letterboxdID : ""}} url="{{url}}"></s72-share-modal>
 		</div>
 	{{end}}
 {{end}}

package/site/templates/film/item.jet

@@ -1,13 +1,13 @@
 {{extends "../application/application.jet"}}
 {{import "../common/slider.jet"}}
 {{import "../items/tagline.jet"}}
-{{import "../items/bonus_item.jet"}}
+{{import "../items/sub_item.jet"}}
 {{import "../collection/page_collection_item.jet"}}
 {{import "../collection/slider.jet"}}
 {{import "../common/list.jet"}}
-{{import "../common/social-media-buttons.jet"}}
 {{import "../common/awards/item.jet"}}
 {{import "../common/sponsor-image.jet"}}
+{{import "../common/cta_buttons.jet"}}
 
 {{block head()}}
   {{yield seo() film}}
@@ -48,18 +48,8 @@
           <!-- {{film.CustomFields|json}} -->
           <s72-availability-label data-slug="{{film.Slug}}"></s72-availability-label>
 
-          <div class="meta-detail-buttons">
-            <s72-play-button data-slug="{{film.Slug}}" data-title="{{film.Title}}"></s72-play-button>
-            <s72-pricing-buttons data-slug="{{film.Slug}}" data-title="{{film.Title}}"></s72-pricing-buttons>
-            <can-be-watched-button data-slug="{{film.Slug}}" data-url="{{ film.CustomFields.GetString("can_be_watched_button_link", "") }}" data-label="{{ film.CustomFields.GetString("can_be_watched_button_text", "can_be_watched_button_text") }}"></can-be-watched-button>
-            <div class="meta-detail-extras">
-              {{if len(film.Trailers) > 0 }}
-                  <s72-modal-player src="{{film.Trailers[0].URL}}" class="s72-btn-trailer" data-slug="{{film.Slug}}" data-label="{{i18n("play_trailer")}}" autoplay="querystring"></s72-modal-player>
-              {{end}}
-              <s72-userwishlist-button data-slug="{{film.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
-              {{yield socialMediaButtons(path=currentUrlPath, letterboxdID=film.Refs.LetterboxdID)}}
-            </div>
-          </div>
+          {{yield ctaButtons(itemType="film") film}}
+
           {{if config("default_image_type") != "portrait"}}
             <s72-availability-status data-slug="{{film.Slug}}"></s72-availability-status>
             <br>
@@ -160,8 +150,8 @@
               <h2>{{i18n("meta_detail_bonus_title")}}</h2>
               {{yield list(itemsPerRow=4, itemLayout="landscape") content}}
                 {{range bonus := film.Bonuses}}
-                  <div class="bonus-item">
-                    {{yield bonusItem(item=bonus)}}
+                  <div class="sub-item">
+                    {{yield subItem(item=bonus)}}
                   </div>
                 {{end}}
               {{end}}

package/site/templates/items/sub_item.jet

@@ -0,0 +1,22 @@
+{{ 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")}}
+      {{end}}
+      {{item.Runtime.Minutes()}}{{i18n("runtime_minutes")}}
+    </span>
+  {{end}}
+  {{if item.Overview}}
+    <div class="synopsis">{{item.Overview | raw}}</div>
+  {{end}}
+{{ end }}

package/site/templates/items/tagline.jet

@@ -28,7 +28,7 @@
     {{end}}
     {*{ There should be one less dividers than tagline items. }*}
     {{dividers = dividers - 1}}
-    
+
     {{if classification}}
       <s72-classification-label data-slug="{{.Slug}}" data-layout="tooltip"></s72-classification-label>
     {{end}}
@@ -47,7 +47,7 @@
 
     {{if isset(.Items)}}
       {{yield taglineItem() content}}
-        {{i18n("bundle_items_all_films", len(.Items))}}
+        {{i18n("bundle_items_generic", len(.Items))}}
       {{end}}
       {{yield taglineDivider(dividers=dividers)}}
       {{dividers = dividers - 1}}

package/site/templates/page/homepage.jet

@@ -1,7 +1,6 @@
 {{extends "templates/application/application.jet"}}
 {{import "templates/collection/page_collection.jet"}}
-{{import "templates/items/featured_item.jet"}}
-{{import "../collection/carousel.jet"}}
+{{import "../collection/carousel/carousel.jet"}}
 {{import "templates/collection/wishlist.jet"}}
 
 {{block head()}}
@@ -19,7 +18,7 @@
   <h1 class="sr-only">{{i18n("wcag_homepage_h1")}}</h1>
 
   <main id="main" class="page page-{{page.PageType|lower}} carousel-len-{{len(page.PageCollections[0].Items)}}">
-    {{yield pageCollectionCarousel() page.PageCollections[0]}}
+    {{yield carousel() page.PageCollections[0]}}
 
     <div class="other-sliders">
       <h2 class="sr-only">{{i18n("wcag_collections_h2")}}</h2>