@shift72/core-template 0.3.8 → 0.4.0-rc.0

package/site/styles/_plans.scss

@@ -0,0 +1,87 @@
+.plan-page-link {
+  @extend .s72-btn-purchase;
+}
+
+s72-plan-label {
+  .s72-plan-owned {
+    @extend .availability-state;
+    @extend .d-inline;
+    color: $button-text-color;
+  }
+}
+
+/* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
+.plans-page {
+  // Add some spacing to the heading
+  .page-header h1 {
+    @extend .mb-3;
+  }
+
+  .plan {
+    .card {
+      @extend .bg-transparent;
+      @extend .border-0;
+
+      .plan-container {
+        @extend .bg-white;
+        @include border-radius($border-radius);
+
+        .plan-caption-details {
+          p {
+            @extend .mb-p75;
+          }
+        }
+
+        .poster {
+          s72-plan-label {
+            @extend .position-absolute;
+            @extend .mx-auto;
+            left: 5px !important;
+            top: 5px;
+
+            z-index: 99;
+
+            .s72-plan-owned {
+              @extend .availability-bg;
+
+              background-color: $button-background;
+            }
+          }
+        }
+
+        s72-pricing-buttons:not(.s72-show) {
+          @extend .m-0;
+        }
+
+        .plan-caption-details .s72-plan-owned {
+          @extend .d-inline-block;
+          @extend .availability-bg;
+          @extend .mb-p5;
+
+          background-color: $button-background;
+        }
+
+        s72-user-anon a {
+          margin-top: 0.5rem;
+        }
+      }
+    }
+  }
+}
+
+.curated-plan-page {
+  // Hide the separator if this is a curated collection page
+  + .separator {
+    @extend .border-0;
+  }
+
+  // Hide the titles of any collections
+  .page-collection-list-title,
+  .swiper-title {
+    display: none;
+  }
+
+  .signup-link {
+    display: inline !important;
+  }
+}

package/site/styles/_poster.scss

@@ -15,6 +15,30 @@
     bottom: $meta-item-availability-tag-margin;
     left: $meta-item-availability-tag-margin;
   }
+
+  .poster-overlay-top {
+    @extend .d-flex;
+    @extend .justify-content-between;
+    @extend .position-absolute;
+
+    @extend .p-p5;
+    @extend .mw-100;
+
+    z-index: 99;
+    width: 100%;
+
+    s72-availability-status {
+      position: unset; z-index: unset;
+      min-width: 0px;
+      @extend .pr-p5;
+
+      /* stylelint-disable selector-max-compound-selectors */
+      .availability-bg {
+        @extend .text-truncate;
+      }
+      /* stylelint-enable selector-max-compound-selectors */
+    }
+  }
 }
 
 .poster-image {
@@ -22,4 +46,4 @@
   max-width: 100%;
   position: relative;
   width: 100%;
-}
+}

package/site/styles/_shift72.scss

@@ -317,3 +317,22 @@ s72-cant-be-watched {
     @include a;
   }
 }
+
+.s72-divider-bottom {
+  @extend .position-relative;
+  &::after {
+    @extend .position-absolute;
+    background-color: $primary;
+    bottom: 0 !important;
+    content: '';
+    height: 3px;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    width: 40px;
+  }
+}
+
+.s72-view-all-passes {
+  @extend .py-4;
+  background-color: mix(invert($body-bg), $body-bg, 4.5%);
+}

package/site/styles/_shopping.scss

@@ -167,6 +167,12 @@
       font-size: 12px;
     }
   }
+
+  /* stylelint-disable selector-no-qualifying-type */
+  ul.s72-shopping-info-plan {
+    text-align: left;
+  }
+  /* stylelint-enable selector-no-qualifying-type */
 }
 
 .s72-shopping-info-credit {

package/site/styles/_variables.scss

@@ -32,6 +32,20 @@ $container-max-widths: (
   xxxl: 1600px,
 ) !default;
 
+$spacer: math.div(5, 8) * 1rem; // 10px
+
+$spacers: (
+  '0': 0,
+  'p5':  ($spacer * 0.5),  // 5px
+  'p75': ($spacer * 0.75), // 7.5px
+  '1':   $spacer,          // 10px
+  '2':   ($spacer * 2),    // 20px
+  '2p5': ($spacer * 2.5),  // 25px
+  '3':   ($spacer * 3),    // 30px
+  '4':   ($spacer * 4),    // 40px
+  '5':   ($spacer * 5),    // 50px
+);
+
 // Body / Core
 // ------------------------------------
 

package/site/styles/_wishlist.scss

@@ -28,7 +28,7 @@
     @extend .btn;
     font-size: 12px;
     font-weight: $font-weight-bold;
-    margin-right: 10px;
+    margin-right: 32px; // was 10px before awards needed some space
     padding-bottom: 3px;
     padding-left: 0;
     padding-top: 3px;
@@ -50,4 +50,4 @@
 .poster .s72-userwishlist-buttons .s72-btn-wishlist {
   margin: 0;
   padding: 0;
-}
+}

package/site/styles/main.scss

@@ -4,6 +4,7 @@
 
 @import '_bootstrap4';
 @import '_mixins';
+@import '_globals';
 @import '_shift72';
 @import 'font-awesome/scss/font-awesome';
 
@@ -11,6 +12,7 @@
 @import '_buttons';
 @import '_pages';
 @import '_forms';
+@import '_card';
 
 @import '_nav';
 
@@ -42,10 +44,13 @@
 @import '_language-selector';
 
 @import '_can-be-watched-button';
+@import '_plans';
+
+@import '_awards';
 
 @import '_legacy';
 
 // @import local must be last in this file.
 @import 'local/local';
 
-// DO NOT PUT ANYTHING IN THIS FILE.
+// DO NOT PUT ANYTHING IN THIS FILE.

package/site/templates/{application.jet → application/application.jet}

@@ -1,7 +1,8 @@
-{{import "./nav.jet"}}
-{{import "./seo.jet" }}
-{{import "./footer/footer.jet" }}
+{{import "./head/font.jet" }}
+{{import "./head/seo.jet" }}
+{{import "./nav/nav.jet"}}
 {{import "./google.jet" }}
+{{import "./footer/footer.jet" }}
 {{CDN := "//cdn.shift72.com/1.3"}}
 {*{CDN := "//localhost:3000"}*}
 <!DOCTYPE html>
@@ -18,8 +19,7 @@
     <link rel="stylesheet" href="{{CDN}}/s72.transactional.css">
     <link rel="stylesheet" href="/styles/swiper.css">
 
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
+    {{yield font()}}
     <link rel="stylesheet" href="/styles/main.css">
 
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

package/site/templates/{footer → application/footer}/app-badges.jet

@@ -19,7 +19,7 @@
         {{end}}
       </div>
     </div>
-  {{end}}
 
-  {{yield separator()}}
-{{end}}
+    {{yield separator()}}
+  {{end}}
+{{end}}

package/site/templates/application/head/font.jet

@@ -0,0 +1,4 @@
+{{block font()}}
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
+{{end}}

package/site/templates/{nav.jet → application/nav/nav.jet}

@@ -1,5 +1,5 @@
-{{import "./nav/user_logged_out.jet"}}
-{{import "./nav/user_logged_in.jet"}}
+{{import "./user_logged_out.jet"}}
+{{import "./user_logged_in.jet"}}
 {{import "./header-banner.jet"}}
 
 {{block nav(showSubNav=true)}}

package/site/templates/bundle/item.jet

@@ -1,4 +1,4 @@
-{{extends "../application.jet"}}
+{{extends "../application/application.jet"}}
 
 {{import "./background.jet"}}
 {{import "./title.jet"}}

package/site/templates/collection/carousel_item.jet

@@ -1,4 +1,5 @@
 {{import "../items/tagline.jet"}}
+{{import "../common/awards/carousel.jet"}}
 
 {{block carouselItem(item)}}
   {{ trailer := "" }}
@@ -54,6 +55,7 @@
               <s72-userwishlist-button data-slug="{{item.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
               <s72-share-buttons item="::item.meta" class="hidden-sm hidden-xs pull-right"></s72-share-buttons>
             </div>
+            {{yield awardsCarousel() item.InnerItem}}
           </div>
         </div>
       {{end}}
@@ -62,4 +64,4 @@
       <div class="bottom-gradient"></div>
     </a>
   </div>
-{{end}}
+{{end}}

package/site/templates/collection/index.jet

@@ -1,4 +1,4 @@
-{{extends "../application.jet"}}
+{{extends "../application/application.jet"}}
 
 {{block body()}}
   <h2>Collection - Index</h2>

package/site/templates/collection/item.jet

@@ -1,4 +1,4 @@
-{{extends "../application.jet"}}
+{{extends "../application/application.jet"}}
 {{import "./page_collection_item.jet"}}
 
 {{block head()}}

package/site/templates/collection/list.jet

@@ -1,14 +1,14 @@
 {{import "./page_collection_item.jet"}}
 
-{{block pageCollectionList()}}
+{{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")}}">
 
+  {{ if showTitle }}
   <div class="page-collection-list-title">
-
     <h3>{{.DisplayName}}</h3>
-
   </div>
+  {{ end }}
 
   <div class="page-collection-items collection-items">
     {{range item := .Items}}
@@ -20,4 +20,4 @@
 
 </section>
 {{end}}
-{{end}}
+{{end}}

package/site/templates/collection/page_collection.jet

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

package/site/templates/common/awards/carousel.jet

@@ -0,0 +1,10 @@
+{{block awardsCarousel()}}
+  {{ if isset(.AwardCategories) && (len(.AwardCategories) > 0) }}
+    <div class="meta-awards">
+      <div class="meta-award-nomination">
+        <span><i class="meta-award-nomination-icon"></i></span>
+        <span class="font-weight-bold">{{ i18n("awards_in_competition") }}</span>
+      </div>
+    </div>
+  {{ end }}
+{{end}}

package/site/templates/common/awards/item.jet

@@ -0,0 +1,12 @@
+{{block awardNominations()}}
+  {{ if isset(.AwardCategories) && (len(.AwardCategories) > 0) }}
+    <div class="meta-awards row mt-2p5 meta-awards-all">
+    {{ range .AwardCategories }}
+      <div class="meta-award-nomination mb-2p5 col-12 col-sm-8 col-lg-6 col-xl-4">
+        <span><i class="meta-award-nomination-icon"></i></span>
+        <span class="font-weight-bold">{{ i18n("awards_nominated_for") }} {{ .DisplayLabel }}</span>
+      </div>
+    {{ end }}
+    </div>
+  {{ end }}
+{{end}}

package/site/templates/common/awards/partial.jet

@@ -0,0 +1,7 @@
+{{block awardsPosterOverlay()}}
+  {{ if isset(.AwardCategories) && (len(.AwardCategories) > 0) }}
+    <div class="meta-awards-icon-overlay">
+      <i class="meta-award-nomination-icon"></i>
+    </div>
+  {{ end }}
+{{end}}

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

@@ -26,7 +26,7 @@
 						<i class="fa fa-linkedin" title="Share on LinkedIn" aria-hidden="true"></i>
 					</a>
 				{{end}}
-			
+
 				{{if letterboxdID}}
 					<a class="btn btn-social btn-social-letterboxd" aria-label="{{i18n("wcag_aria_label_letterboxd")}}" href="https://boxd.it/{{letterboxdID}}" target="_blank">
 						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 334.79999 128" version="1.1">

package/site/templates/film/item.jet

@@ -1,4 +1,4 @@
-{{extends "../application.jet"}}
+{{extends "../application/application.jet"}}
 {{import "../common/slider.jet"}}
 {{import "../items/tagline.jet"}}
 {{import "../items/bonus_item.jet"}}
@@ -6,6 +6,7 @@
 {{import "../collection/slider.jet"}}
 {{import "../common/list.jet"}}
 {{import "../common/social-media-buttons.jet"}}
+{{import "../common/awards/item.jet"}}
 
 {{block head()}}
   {{yield seo() film}}
@@ -53,6 +54,9 @@
             <br>
           {{end}}
           <s72-availability-label data-slug="{{film.Slug}}"></s72-availability-label>
+
+          {{yield awardNominations() film}}
+
           <div class="meta-detail-synopsis">{{film.Overview | raw}}</div>
           <div class="meta-detail-extras">
             {{if len(film.Trailers) > 0 }}

package/site/templates/items/meta_item.jet

@@ -1,4 +1,5 @@
 {{import "tagline.jet"}}
+{{import "../common/awards/partial.jet"}}
 
 {{block metaItem(item, layout, wrapper_class="")}}
   {{ displayTitleAndGenreBelowPosters = config("media_item_caption") == "true" }}
@@ -38,8 +39,12 @@
   {{end}}
   <a href="{{routeToSlug(item.Slug)}}" class="meta-item-link" aria-label="{{item.Title}}" target="{{isExternalPage ? "_blank" : ""}}">
     <div class="poster poster-{{layout}}">
-      <s72-availability-status data-slug="{{item.Slug}}"></s72-availability-status>
       <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
+      <div class="poster-overlay poster-overlay-top">
+        <s72-availability-status data-slug="{{item.Slug}}"></s72-availability-status>
+        {{ yield awardsPosterOverlay() item.InnerItem }}
+      </div>
+
       <s72-image src="{{imageUrl}}" alt="{{item.Title}}" class="poster-image poster-image-{{layout}}" border="0"></s72-image>
       {{if !isExternalPage}}
         <div class="hover">
@@ -79,4 +84,4 @@
   {{if wrapper_class != ""}}
   </div>
   {{end}}
-{{end}}
+{{end}}

package/site/templates/items/tagline.jet

@@ -33,17 +33,6 @@
       <s72-classification-label data-slug="{{.Slug}}" data-layout="tooltip"></s72-classification-label>
     {{end}}
 
-    {{if genres && len(itemGenres) > 0}}
-      {{if genresLimit > -1 && len(itemGenres) > genresLimit}}
-        {{itemGenres = itemGenres[:genresLimit]}}
-      {{end}}
-      {{yield taglineItem() content}}
-        {{itemGenres}}
-      {{end}}
-      {{yield taglineDivider(dividers=dividers)}}
-      {{dividers = dividers - 1}}
-    {{end}}
-
     {{if isset(.Runtime)}}
       {{yield taglineItem() content}}
         {{if .Runtime > 60}}
@@ -72,6 +61,17 @@
       {{dividers = dividers - 1}}
     {{end}}
 
+    {{if genres && len(itemGenres) > 0}}
+      {{if genresLimit > -1 && len(itemGenres) > genresLimit}}
+        {{itemGenres = itemGenres[:genresLimit]}}
+      {{end}}
+      {{yield taglineItem() content}}
+        {{itemGenres}}
+      {{end}}
+      {{yield taglineDivider(dividers=dividers)}}
+      {{dividers = dividers - 1}}
+    {{end}}
+
     {{if isset(.ReleaseDate) && .ReleaseDate.Year() > 1}}
       {{yield taglineItem() content}}
         {{.ReleaseDate.Year()}}

package/site/templates/page/content.jet

@@ -1,4 +1,4 @@
-{{extends "templates/application.jet"}}
+{{extends "templates/application/application.jet"}}
 {{import "templates/page/page-header.jet"}}
 {{import "templates/page/page-content.jet"}}
 

package/site/templates/page/curated.jet

@@ -1,7 +1,6 @@
-{{extends "templates/application.jet"}}
+{{extends "templates/application/application.jet"}}
 {{import "templates/collection/page_collection.jet"}}
 {{import "templates/common/background-image.jet"}}
-{{import "templates/common/separator.jet"}}
 {{import "templates/page/page-content.jet"}}
 {{import "templates/page/page-header.jet"}}
 
@@ -11,12 +10,17 @@
 
 
 {{block body()}}
-  <main id="main" class="page curated-page">
+{{ plan := 0 }}
+{{ if len(page.Plans) }}
+  {{ plan = page.Plans[0] }}
+{{ end }}
+
+  <main id="main" class="page curated-page{{if len(page.PageCollections) > 0}} curated-collection-page{{end}}{{if plan != 0}} curated-plan-page{{end}}">
     {{yield backgroundImage(containerClass="page-bg", gradientClass="right-gradient", imageClass="page-bg-img", imageSrc=page.Images.Background)}}
 
-    {{yield pageHeader(title=page.Title)}}
+    {{yield pageHeader(title=page.Title, plan=plan)}}
 
-    {{yield pageContent(text=page.Content)}}
+    {{yield pageContent(text=page.Content, plan=plan)}}
 
     <div class="page-collections">
       <h2 class="sr-only">{{i18n("wcag_collections_h2")}}</h2>
@@ -24,5 +28,20 @@
         {{yield pageCollection() pf}}
       {{end}}
     </div>
+
+    {{ if plan != 0 }}
+      <div class="s72-view-all-passes text-center">
+        <h2 class="s72-divider-bottom mb-2 pb-2">{{ i18n("plan_page_header_text", map("Name", plan.Name)) }}</h2>
+
+        <p class="col-xs-10 col-xxl-8 mx-auto">{{ plan.Description }}</p>
+
+        <div>
+          <s72-pricing-buttons class="mb-2" data-slug="{{plan.Slug}}" data-title="{{plan.Name}}" />
+          <s72-plan-label data-slug="{{plan.Slug}}" data-title="{{plan.Name}}" />
+        </div>
+        <p>{{ i18n("page_plan_explore_intro" )}}</p>
+        <p><a href="/plans.html">{{ i18n("page_plan_explore_link") }}</a></p>
+      </div>
+    {{ end }}
   </main>
-{{end}}
+{{end}}

package/site/templates/page/homepage.jet

@@ -1,4 +1,4 @@
-{{extends "templates/application.jet"}}
+{{extends "templates/application/application.jet"}}
 {{import "templates/collection/page_collection.jet"}}
 {{import "templates/items/featured_item.jet"}}
 {{import "../collection/carousel.jet"}}

package/site/templates/page/landing.jet

@@ -1,4 +1,4 @@
-{{extends "templates/application.jet"}}
+{{extends "templates/application/application.jet"}}
 {{block body()}}
   <div>
     <h1>Landing - {{ page.Title }}</h1>

package/site/templates/page/page-content.jet

@@ -1,7 +1,29 @@
-{{block pageContent(text="")}}
+{{block pageContent(text="", plan=0)}}
   {{if len(text) > 0}}
     <div class="page-content">
       {{text | raw}}
+
+      {{if plan != 0 }}
+      <div class="plan-buttons">
+        {{ if plan.PlanType == "free" }}
+          {{ if plan.HasExpiryDate() }}
+          <s72-before datetime="{{ plan.ExpiryDate.UnixMilli() }}">
+            <s72-user-anon>
+              <a class="btn btn-block s72-btn-purchase signup-link" href="{{routeToPath("/signup.html")}}">{{ i18n("plan_free_link_text") }}</a>
+            </s72-user-anon>
+          </s72-before>
+          {{ else }}
+            <s72-user-anon>
+              <a class="btn btn-block s72-btn-purchase signup-link" href="{{routeToPath("/signup.html")}}">{{ i18n("plan_free_link_text") }}</a>
+            </s72-user-anon>
+          {{ end }}
+        {{ else }}
+        <s72-pricing-buttons data-slug="{{plan.Slug}}" data-title="{{plan.Name}}" data-ownership-label-prefix={{ i18n("plan_showcase_page_ownership_button_") }} data-hide-price="true" />
+        {{ end }}
+      </div>
+      {{end}}
     </div>
+
+
   {{end}}
-{{end}}
+{{end}}

package/site/templates/page/page-header.jet

@@ -1,7 +1,26 @@
-{{block pageHeader(title="")}}
+{{block pageHeader(title="", plan=0)}}
   {{if len(title) > 0}}
     <div class="page-header">
+      {{if plan != 0}}
+        <s72-plan-label data-slug="{{plan.Slug}}" data-title="{{plan.Name}}"></s72-plan-label>
+      {{end}}
       <h1>{{title}}</h1>
+      {{if plan != 0 && plan.HasExpiryDate() }}
+        {{ if plan.HasExpiryDate() }}
+          <p class="alert p-0 border-0 my-1">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-exclamation-circle mr-p5" viewBox="0 0 16 16"> <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/> </svg>
+            <small>
+              <s72-before datetime="{{ plan.ExpiryDate.UnixMilli() }}">
+                {{ i18n("plan_expiry_date") }} <s72-time datetime="{{ plan.ExpiryDate.UnixMilli() }}" />
+              </s72-before>
+
+              <s72-after datetime="{{ plan.ExpiryDate.UnixMilli() }}">
+                {{ i18n("availability_not_available") }}
+              </s72-after>
+            </small>
+          </p>
+        {{ end }}
+      {{end}}
     </div>
   {{end}}
-{{end}}
+{{end}}