@shift72/core-template 0.3.8 → 0.4.2

package/site/styles/_awards.scss

@@ -0,0 +1,39 @@
+.meta-awards {
+  @extend .d-flex;
+  @extend .align-items-center;
+
+  &.meta-awards-all {
+    @extend .align-items-start;
+  }
+
+  .meta-award-nomination {
+    @extend .d-flex;
+  }
+
+  .meta-award-nomination-icon {
+    @extend .fa;
+    @extend .fa-star; // for now
+    font-size: 1.25rem;
+    line-height: 1.5rem;
+    padding-right: .5rem;
+  }
+}
+
+.meta-awards-icon-overlay {
+  @extend .text-center;
+
+  border-radius: $meta-item-border-radius;
+  background: rgba(0, 0, 0, 0.8);
+
+  padding-right: 3px;
+  padding-left: 3px;
+  width: 16px + (3px * 2);
+  height: 16px + (3px * 2);
+
+  .meta-award-nomination-icon {
+    @extend .fa;
+    @extend .fa-star;
+
+    font-size: 1rem;
+  }
+}

package/site/styles/_buttons.scss

@@ -230,3 +230,16 @@
     margin-right: 5px;
   }
 }
+
+.btn-block .s72-btn {
+  @extend .btn-block;
+}
+
+.btn-light {
+  background-color: $gray-300;
+  border-color: $gray-300;
+  @include hover-focus {
+    background-color: $gray-200;
+    border-color: $gray-200;
+  }
+}

package/site/styles/_card.scss

@@ -0,0 +1,3 @@
+.card {
+    @extend .text-dark;
+}

package/site/styles/_footer.scss

@@ -111,3 +111,46 @@ footer {
     height: 40px;
   }
 }
+
+.sponsor-banner {
+  display: flex;
+  justify-content: center;
+  padding: 60px 20px 0 20px;
+  @include media-breakpoint-up(lg) {
+    padding: 60px 50px 0 50px;
+  }
+
+  img {
+    max-width: max-content;
+  }
+  
+  .sponsors-xxxs {
+    width: 100%;
+
+    @include media-breakpoint-up(xs) {
+      display: none;
+    }
+  }
+
+  .sponsors-xs {
+    display: none;
+    width: 100%;
+
+    @include media-breakpoint-up(xs) {
+      display: block;
+    }
+
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
+  }
+
+  .sponsors-md {
+    display: none;
+    width: 100%;
+
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+}

package/site/styles/_forms.scss

@@ -194,4 +194,4 @@ s72-signup-form {
   .s72-form-text {
     margin-bottom: 1rem;
   }
-}
+}

package/site/styles/_globals.scss

@@ -0,0 +1,7 @@
+small {
+  font-size: 85%;
+}
+
+a:not([class]) {
+  text-decoration: underline;
+}

package/site/styles/_icons.scss

@@ -31,3 +31,7 @@
   @extend .fa;
   @extend .fa-search;
 }
+
+.alert svg {
+  fill: $primary;
+}

package/site/styles/_meta-detail.scss

@@ -150,7 +150,7 @@
     width: 563px;
   }
   @include media-breakpoint-up(xl) {
-    width: 763px;
+    width: 1100px;
   }
 
   h1 {
@@ -358,7 +358,6 @@
             top: 50%;
             transform: translateX(-50%) translateY(-50%);
             z-index: 2;
-
             .verb {
               display: none;
             }

package/site/styles/_pages.scss

@@ -68,6 +68,7 @@
 .search-page,
 .collection-page,
 .devices-page,
+.plans-page,
 .carousel-len-0 {
   padding-top: $page-padding-top;
   @include media-breakpoint-up(md) {
@@ -124,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;
@@ -188,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,
@@ -312,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

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

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

@@ -2,11 +2,14 @@
 {{import "./info.jet"}}
 {{import "./nav.jet"}}
 {{import "./app-badges.jet"}}
+{{import "./sponsor-banner.jet"}}
 
 {{block footer()}}
 
   {{yield appBadges()}}
 
+  {{yield sponsorBanner()}}
+
   {*{ID is used for skip links.}*}
   <footer id="footer">
     {{yield footerBrand()}}

package/site/templates/application/footer/sponsor-banner.jet

@@ -0,0 +1,9 @@
+{{block sponsorBanner()}}
+  {{if config("show_sponsor_banner") == "true"}}
+    <div class="sponsor-banner">
+      <s72-image class="sponsors-xxxs" src="/images/common/sponsors-xxxs.png"></s72-image>
+      <s72-image class="sponsors-xs" src="/images/common/sponsors-xs.png"></s72-image>
+      <s72-image class="sponsors-md" src="/images/common/sponsors-md.png"></s72-image>
+    </div>
+  {{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">