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

package/site/styles/_pages.scss

@@ -48,10 +48,18 @@
 }
 
 .page-content {
-  border-bottom: $border-width solid rgba(255, 255, 255, 0.1);
   margin-bottom: $headings-margin-bottom * 4;
 }
 
+.separator {
+  border-bottom: 1px solid rgba($body-color, 0.2);
+  margin: 0 20px;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0 50px;
+  }
+}
+
 .curated-page,
 .library-page,
 .content-page,
@@ -60,6 +68,7 @@
 .search-page,
 .collection-page,
 .devices-page,
+.plans-page,
 .carousel-len-0 {
   padding-top: $page-padding-top;
   @include media-breakpoint-up(md) {
@@ -91,8 +100,9 @@
   }
 }
 
-.content-page {
-  .content-page-content {
+.content-page,
+.curated-page {
+  .page-content {
     max-width: 1100px;
     min-height: 220px;
     padding: 20px 20px 0;
@@ -115,12 +125,19 @@
       font-weight: $font-weight-bold;
     }
 
-    a {
+    a:not(.signup-link) {
       @include a;
     }
   }
 }
 
+// Curated pages with at least one collection shouldn't have a minimum height which forces a gap before the collection(s)
+.curated-collection-page {
+  .page-content {
+    min-height: auto;
+  }
+}
+
 .content-page p img,
 .page-header p img {
   width: auto;
@@ -179,13 +196,15 @@
 .wishlist-page,
 .library-page,
 .search-page,
-.devices-page {
+.devices-page,
+.plans-page {
   .page-header {
     h1 {
       margin-bottom: $headings-margin-bottom;
     }
   }
 
+  .s72-plans,
   .s72-userwishlist-items,
   .s72-userlibrary-items,
   .s72-searchresults-results,
@@ -303,4 +322,4 @@
       }
     }
   }
-}
+}

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

@@ -1,3 +1,5 @@
+{{import "templates/common/separator.jet"}}
+
 {{block appBadges()}}
   {{app_link_ios := config("app_link_ios")}}
   {{app_link_android := config("app_link_android")}}
@@ -17,5 +19,7 @@
         {{end}}
       </div>
     </div>
+
+    {{yield separator()}}
   {{end}}
-{{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/background.jet

@@ -1,6 +1,5 @@
+{{import "templates/common/background-image.jet"}}
+
 {{block bundleBackground(background)}}
-  <div class="meta-detail-bg">
-    <div class="meta-detail-bg-gradient"></div>
-    <s72-image src="{{background}}" alt="" class="meta-detail-bg-img"></s72-image>
-  </div>
-{{end}}
+  {{yield backgroundImage(containerClass="meta-detail-bg", gradientClass="meta-detail-bg-gradient", imageClass="meta-detail-bg-img", imageSrc=background)}}
+{{end}}

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/background-image.jet

@@ -0,0 +1,6 @@
+{{block backgroundImage(containerClass="", gradientClass="", imageClass="", imageSrc="", imageAlt="")}}
+  <div class="{{containerClass}}">
+    <div class="{{gradientClass}}"></div>
+    <s72-image class="{{imageClass}}" src="{{imageSrc}}" alt="{{imageAlt}}"></s72-image>
+  </div>
+{{end}}

package/site/templates/common/separator.jet

@@ -0,0 +1,3 @@
+{{block separator(class="")}}
+  <div class="separator {{class}}"></div>
+{{end}}

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

@@ -1,33 +1,47 @@
 {{block socialMediaButtons(path="", title="", letterboxdID="")}}
-	<div class="social-media-buttons">
-		<div class="social-media-buttons-title">
-			<h2>{{i18n("social_media_buttons_title")}}</h2>
-		</div>
-		<div class="social-media-buttons-container">
-			<a class="btn btn-social btn-social-facebook" aria-label="{{i18n("wcag_aria_label_facebook")}}" href="https://www.facebook.com/sharer/sharer.php?u={{site.SiteConfig.SiteURL + path | url}}" target="_blank">
-				<i class="fa fa-facebook" title="Share on Facebook" aria-hidden="true"></i>
-			</a>
-			<a class="btn btn-social btn-social-twitter" aria-label="{{i18n("wcag_aria_label_twitter")}}" href="https://twitter.com/intent/tweet?text={{title + " " + site.SiteConfig.SiteURL + path | url}}" target="_blank">
-				<i class="fa fa-twitter" title="Share on Twitter" aria-hidden="true"></i>
-			</a>
-			<a class="btn btn-social btn-social-linkedin" aria-label="{{i18n("wcag_aria_label_linkedin")}}" href="https://www.linkedin.com/shareArticle?mini=true&url={{site.SiteConfig.SiteURL + path | url}}&title={{title|url}}" target="_blank">
-				<i class="fa fa-linkedin" title="Share on LinkedIn" aria-hidden="true"></i>
-			</a>
+{{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">
+			<div class="social-media-buttons-title">
+				<h2>{{i18n("social_media_buttons_title")}}</h2>
+			</div>
+			<div class="social-media-buttons-container">
+				{{if show_facebook_share}}
+					<a class="btn btn-social btn-social-facebook" aria-label="{{i18n("wcag_aria_label_facebook")}}" href="https://www.facebook.com/sharer/sharer.php?u={{site.SiteConfig.SiteURL + path | url}}" target="_blank">
+						<i class="fa fa-facebook" title="Share on Facebook" aria-hidden="true"></i>
+					</a>
+				{{end}}
+
+				{{if show_twitter_share}}
+					<a class="btn btn-social btn-social-twitter" aria-label="{{i18n("wcag_aria_label_twitter")}}" href="https://twitter.com/intent/tweet?text={{title + " " + site.SiteConfig.SiteURL + path | url}}" target="_blank">
+						<i class="fa fa-twitter" title="Share on Twitter" aria-hidden="true"></i>
+					</a>
+				{{end}}
+
+				{{if show_linkedin_share}}
+					<a class="btn btn-social btn-social-linkedin" aria-label="{{i18n("wcag_aria_label_linkedin")}}" href="https://www.linkedin.com/shareArticle?mini=true&url={{site.SiteConfig.SiteURL + path | url}}&title={{title|url}}" target="_blank">
+						<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">
-						<title>{{i18n("wcag_aria_label_letterboxd")}}</title>
-						<g transform="matrix(1.3333333,0,0,-1.3333333,0,128)">
-							<g transform="scale(0.1)">
-								<path d="M 857.793,735.43 C 775.559,870.309 630.23,960 464.551,960 207.984,960 0,745.098 0,480 0,214.902 207.984,0 464.551,0 630.23,0 775.559,89.6914 857.793,224.574 812.684,298.559 786.488,386.098 786.488,480 c 0,93.906 26.196,181.441 71.305,255.43"/>
-								<path d="M 1648.76,728.125 C 1567.38,867.098 1419.72,960 1251.04,960 1085.36,960 940.031,870.309 857.793,735.43 902.902,661.441 929.102,573.906 929.102,480 c 0,-93.902 -26.2,-181.441 -71.309,-255.426 C 940.031,89.6914 1085.36,0 1251.04,0 c 168.68,0 316.34,92.9023 397.72,231.875 -42.4,72.41 -66.82,157.316 -66.82,248.125 0,90.809 24.42,175.719 66.82,248.125"/>
-								<path d="m 2046.49,960 c -168.68,0 -316.34,-92.902 -397.73,-231.875 42.41,-72.406 66.83,-157.316 66.83,-248.125 0,-90.809 -24.42,-175.715 -66.83,-248.125 C 1730.15,92.9023 1877.81,0 2046.49,0 c 256.56,0 464.55,214.902 464.55,480 0,265.098 -207.99,480 -464.55,480"/>
+				{{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">
+							<title>{{i18n("wcag_aria_label_letterboxd")}}</title>
+							<g transform="matrix(1.3333333,0,0,-1.3333333,0,128)">
+								<g transform="scale(0.1)">
+									<path d="M 857.793,735.43 C 775.559,870.309 630.23,960 464.551,960 207.984,960 0,745.098 0,480 0,214.902 207.984,0 464.551,0 630.23,0 775.559,89.6914 857.793,224.574 812.684,298.559 786.488,386.098 786.488,480 c 0,93.906 26.196,181.441 71.305,255.43"/>
+									<path d="M 1648.76,728.125 C 1567.38,867.098 1419.72,960 1251.04,960 1085.36,960 940.031,870.309 857.793,735.43 902.902,661.441 929.102,573.906 929.102,480 c 0,-93.902 -26.2,-181.441 -71.309,-255.426 C 940.031,89.6914 1085.36,0 1251.04,0 c 168.68,0 316.34,92.9023 397.72,231.875 -42.4,72.41 -66.82,157.316 -66.82,248.125 0,90.809 24.42,175.719 66.82,248.125"/>
+									<path d="m 2046.49,960 c -168.68,0 -316.34,-92.902 -397.73,-231.875 42.41,-72.406 66.83,-157.316 66.83,-248.125 0,-90.809 -24.42,-175.715 -66.83,-248.125 C 1730.15,92.9023 1877.81,0 2046.49,0 c 256.56,0 464.55,214.902 464.55,480 0,265.098 -207.99,480 -464.55,480"/>
+								</g>
 							</g>
-						</g>
-					</svg>
-				</a>
-			{{end}}
+						</svg>
+					</a>
+				{{end}}
+			</div>
 		</div>
-	</div>
+	{{end}}
 {{end}}

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