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

package/site/styles/_plans.scss

@@ -32,21 +32,13 @@ s72-plan-label {
           }
         }
 
-        .poster {
-          s72-plan-label {
-            @extend .position-absolute;
-            @extend .mx-auto;
-            left: 5px !important;
-            top: 5px;
+        s72-plan-label {
+          @extend .position-absolute;
+          @extend .mx-auto;
 
-            z-index: 99;
-
-            .s72-plan-owned {
-              @extend .availability-bg;
-
-              background-color: $button-background;
-            }
-          }
+          left: 0;
+          top: 0;
+          z-index: 99;
         }
 
         s72-pricing-buttons:not(.s72-show) {
@@ -55,10 +47,11 @@ s72-plan-label {
 
         .plan-caption-details .s72-plan-owned {
           @extend .d-inline-block;
-          @extend .availability-bg;
-          @extend .mb-p5;
 
-          background-color: $button-background;
+          background-color: var(--primary);
+          border-radius: $border-radius 0 $border-radius 0;
+          line-height: 20px;
+          padding: 0 5px;
         }
 
         s72-user-anon a {
@@ -90,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/_poster.scss

@@ -6,14 +6,9 @@
   width: 100%;
   z-index: 1;
 
-  s72-availability-status {
-    left: $meta-item-availability-tag-margin;
-    top: $meta-item-availability-tag-margin;
-  }
-
-  s72-availability-label {
-    bottom: $meta-item-availability-tag-margin;
-    left: $meta-item-availability-tag-margin;
+  s72-availability-status,
+  s72-plan-label {
+    color: $button-text-color;
   }
 
   .poster-overlay-top {
@@ -21,7 +16,6 @@
     @extend .justify-content-between;
     @extend .position-absolute;
 
-    @extend .p-p5;
     @extend .mw-100;
     width: 100%;
 

package/site/styles/_share-modal.scss

@@ -0,0 +1,86 @@
+s72-share-modal .fa-share-alt {
+  font-size: 20px;
+}
+
+.s72-share-modal {
+  .s72-modal-dialog {
+    @extend .p-0;
+    max-width: 320px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include media-breakpoint-up(sm) {
+      top: 90px;
+      transform: none;
+    }
+    .s72-modal-content {
+      @extend .p-0;
+    }
+  }
+
+  .modal-header {
+    border-bottom: 1px solid rgba(var(--body-color-rgb), 0.2);
+  }
+
+  .modal-title {
+    color: var(--body-color);
+    word-break: break-word;
+  }
+
+  .s72-modal-content {
+    background: none;
+  }
+
+  .modal-content {
+    background-color: var(--body-bg);
+    border: 0;
+  }
+
+  ul {
+    @extend .mb-0;
+  }
+
+  li {
+    @extend .list-unstyled;
+    @extend .position-relative;
+    i {
+      @extend .position-absolute;
+      font-size: 20px;
+      left: -30px;
+    }
+  }
+
+  a {
+    @extend .d-flex;
+    @extend .align-items-center;
+    color: var(--body-color);
+    padding: 0.7rem 0;
+    text-decoration: inherit;
+    word-break: break-word;
+
+    &:hover {
+      color: var(--link-color-hover);
+    }
+  }
+
+  [type='button'] {
+    // for testers on their ipod touch
+    appearance: none;
+  }
+
+  .close {
+    align-self: center;
+    color: var(--body-color);
+    opacity: 1;
+    text-shadow: none;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+// Close gap if wishlist button isn't present
+s72-userwishlist-button:empty + .social-media-buttons {
+  margin-left: -10px;
+}

package/site/styles/_shift72.scss

@@ -9,10 +9,17 @@
   .s72-icon {
     margin-left: 0.3em;
   }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
 }
 
+// exists once in <s72-searchresults/>
 .s72-btn-search {
   @extend .btn-primary-override;
+  font-size: 24px;
+  line-height: 0;
 }
 
 .s72-btn-purchase {
@@ -23,6 +30,10 @@
   @extend .btn-primary-override;
 }
 
+.s72-btn-subscribe {
+  @extend .btn-primary-override;
+}
+
 .s72-btn-close {
   @extend .close;
 }

package/site/styles/_shopping.scss

@@ -17,7 +17,6 @@
       display: block;
       height: 30px;
       line-height: 30px;
-      opacity: 1;
       position: absolute;
       right: 0;
       text-shadow: none;

package/site/styles/_skip-link.scss

@@ -16,4 +16,4 @@
     left: 0;
     position: fixed;
   }
-}
+}

package/site/styles/_tooltips.scss

@@ -0,0 +1,7 @@
+.s72-tooltip {
+  display: none;
+
+  @include media-breakpoint-up(lg) {
+    display: block;
+  }
+}

package/site/styles/_variables.scss

@@ -1,11 +1,11 @@
-@use "sass:math";
+@use 'sass:math';
 
 // This file contains any variables used by the site.
 // These variables should be reasonably generic so that overrides are placed in main.scss.
 
 :root {
-  --primary-rgb: 53, 160, 168;
-  --secondary-rgb: 76, 211, 221;
+  --primary-rgb: 0, 163, 255;
+  --secondary-rgb: 102, 199, 255;
   --body-color-rgb: 255, 255, 255;
   --body-bg-rgb: 15, 15, 15;
   --body-bg-accent-rgb: 25, 25, 25; // darken(body-bg, 10%) OR lighten(body-bg, 10%)
@@ -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;
@@ -98,6 +96,8 @@ $spacers: (
   // 7.5px
   '1': $spacer,
   // 10px
+  '1p5': $spacer * 1.5,
+  // 15px
   '2': $spacer * 2,
   // 20px
   '2p5': $spacer * 2.5,
@@ -108,7 +108,7 @@ $spacers: (
   // 40px
   '5': $spacer * 5,
   // 50px
-  '1rem': 1rem
+  '1rem': 1rem,
 );
 
 // Cookie Consent
@@ -137,8 +137,8 @@ $subnav-nav-item-active-background-color: var(--primary) !default;
 $subnav-dropdown-background: var(--body-bg-accent) !default;
 
 // Buttons
-$button-text-color: var(--body-color) !default;
-$button-text-color-hover: var(--body-color) !default;
+$button-text-color: var(--body-bg) !default;
+$button-text-color-hover: var(--body-bg) !default;
 $button-background: var(--primary) !default;
 $button-background-hover: var(--secondary) !default;
 $trailer-button-text-color: var(--body-color) !default;
@@ -190,11 +190,10 @@ $letterboxd-color: var(--body-color) !default;
 
 // Meta Items
 // ------------------------------------
-$meta-item-border-radius: 3px !default;
+$meta-item-border-radius: 4px !default;
 $featured-meta-item-body-padding: 10px !default;
 $meta-item-body-color: var(--body-color) !default;
 $meta-item-tagline-classification-border-radius: $meta-item-border-radius !default;
-$meta-item-availability-tag-margin: 5px !default;
 
 // Posters
 // ------------------------------------

package/site/styles/_wishlist.scss

@@ -28,10 +28,10 @@
     @extend .btn;
     padding-left: 0;
 
-
     .s72-icon {
-      font-size: 32px !important;
+      font-size: 28px !important;
       opacity: 0.8;
+      padding: 2px 0;
     }
   }
 }

package/site/styles/main.scss

@@ -4,10 +4,10 @@
 @import '_mixins';
 @import '_globals';
 @import '_shift72';
-@import 'font-awesome/scss/font-awesome';
 
 @import '_icons';
 @import '_buttons';
+@import '_cta-buttons';
 @import '_pages';
 @import '_forms';
 @import '_card';
@@ -18,6 +18,7 @@
 @import '_swiper';
 
 @import '_meta-item';
+@import '_meta-sub-item';
 @import '_meta-item-tagline';
 @import '_availability-tags';
 
@@ -26,7 +27,6 @@
 @import '_carousel';
 @import '_poster';
 
-@import '_homepage';
 @import '_meta-detail';
 @import '_footer';
 
@@ -37,7 +37,7 @@
 @import '_devices';
 @import '_gradients';
 
-@import '_social-media-buttons';
+@import '_share-modal';
 @import '_cookie-consent';
 @import '_pin-codes';
 @import '_language-selector';
@@ -47,6 +47,8 @@
 
 @import '_awards';
 
+@import '_tooltips';
+
 @import '_legacy';
 
 // @import local must be last in this file.

package/site/subscriptions.html.jet

@@ -0,0 +1,11 @@
+{{extends "templates/application/application.jet"}}
+
+{{block head()}}
+  {{yield seo(title=i18n("usersubscriptions_page_header"), index=false)}}
+{{end}}
+
+{{block body()}}
+  <div class="page form-page usersubscriptions-page">
+    <s72-usersubscription></s72-usersubscription>
+  </div>
+{{end}}

package/site/templates/application/application.jet

@@ -21,6 +21,8 @@
     <link rel="manifest" href="/manifest.json">
     <link rel="preload" href="/{{lang.DefinitionFilePath}}" as="fetch" crossorigin type="application/json">
     <link rel="preload" href="/classifications.all.json" as="fetch" crossorigin type="application/json">
+    <link rel="preload" href="/urlmap.json" as="fetch" crossorigin type="application/json">
+
     <!-- Kibble: {{version}} -->
     {{if site.SiteConfig.CoreTemplateVersion != ""}}
       <!-- Core-Template: {{site.SiteConfig.CoreTemplateVersion}} -->
@@ -65,8 +67,6 @@
     </script>
 
     <script type="text/javascript" src="/scripts/swiper.min.js"></script>
-
-    {{yield googleGa4Script()}}
   </head>
   <body>
 

package/site/templates/application/google.jet

@@ -1,24 +1,19 @@
-{{block googleGa4Script(analyticsId=config("google_analytics_id"))}}
-  {{if hasPrefix(analyticsId,"G")}}
-  <!-- GA4 script if G tracking code is provided -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id={{analyticsId}}"></script>
-  {{end}}
-{{end}}
-
 {{block googleScripts(tagManagerId=config("google_tag_manager_id"), analyticsId=config("google_analytics_id"))}}
   <!-- Google integration scripts -->
   <script>
     function loadGoogleTagManager() {
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','{{ tagManagerId }}')
-    }
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
+      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','{{ tagManagerId }}')}
 
     <!-- GA4 code snippet if G tracking code is provided, else use legacy UA code snippet -->
     {{if hasPrefix(analyticsId,"G")}}
       function loadGoogleAnalytics() {
+        (function(d, googleId){var f = d.getElementsByTagName('script')[0];var s = d.createElement('script');
+        s.src = 'https://www.googletagmanager.com/gtag/js?id=' + googleId;s.async = true;f.parentNode.insertBefore(s,f);
+        }(document,'{{analyticsId}}'));
+
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());

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

@@ -3,8 +3,8 @@
     <s72-dropdown class="navbar-nav-user-nav">
       <div>
         <a href="#" class="s72-btn s72-dropdown-toggle">
-          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="user-icon" width="24" height="24" x="0px" y="0px" viewBox="-241 245 24 24" xml:space="preserve">
-            <path d="M-231,247c-5.5,0-10,4.5-10,10c0,5.5,4.5,10,10,10s10-4.5,10-10C-221,251.5-225.5,247-231,247 M-224.6,261.8c-1.4-1.7-4.9-2.3-6.4-2.3s-4.9,0.6-6.4,2.3c-1-1.3-1.6-3-1.6-4.8c0-4.4,3.6-8,8-8s8,3.6,8,8C-223,258.8-223.6,260.5-224.6,261.8M-231,251c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5S-229.1,251-231,251"/>
+          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"/>
           </svg>
           <s72-username class="username-mobile"></s72-username>
         </a>
@@ -26,6 +26,11 @@
         <li>
           <a class="s72-dropdown-item" href="{{ routeToPath("/devices.html") }}">{{i18n("nav_devices")}}</a>
         </li>
+        {{if config("account_show_plans") == "true" }}
+          <li>
+            <a class="s72-dropdown-item" href="{{ routeToPath("/subscriptions.html") }}">{{i18n("nav_subscriptions")}}</a>
+          </li>
+        {{ end }}
         <li>
           <a class="s72-dropdown-item" href="{{ routeToPath("/account.html") }}">{{i18n("nav_account")}}</a>
         </li>

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