@shift72/core-template 1.1.0 → 1.3.0-alpha.0

package/site/styles/_pages.scss

@@ -1,5 +1,6 @@
 .page {
   flex: 1 0 auto;
+
   @include media-breakpoint-up(md) {
     padding-bottom: $grid-gutter-width;
   }
@@ -12,38 +13,13 @@
 }
 
 .page-header {
+  padding-bottom: 30px;
   padding-left: 20px;
   padding-right: 20px;
   @include media-breakpoint-up(lg) {
-    padding-bottom: 20px;
     padding-left: 50px;
     padding-right: 50px;
   }
-
-  h1 {
-    font-size: 20px;
-    font-weight: $font-weight-bold;
-    margin-bottom: 0;
-    @include media-breakpoint-up(md) {
-      font-size: 28px;
-    }
-    @include media-breakpoint-up(xl) {
-      font-size: 38px;
-    }
-  }
-
-  p {
-    font-size: 14px;
-    font-weight: normal;
-    padding-top: 5px;
-    @include media-breakpoint-up(md) {
-      font-size: 16px;
-    }
-
-    a {
-      @include a;
-    }
-  }
 }
 
 .page-content {
@@ -76,6 +52,10 @@
   @include media-breakpoint-up(lg) {
     padding: var(--page-padding-top-lg) 0 0 0;
   }
+
+  h1 {
+    @include heading-2-style;
+  }
 }
 
 .form-page {
@@ -85,11 +65,13 @@
   .page-header {
     h1,
     p {
-      margin: 0 auto;
+      margin-left: auto;
+      margin-right: auto;
       max-width: 400px;
-      @include media-breakpoint-up(md) {
-        text-align: center;
-      }
+      text-align: center;
+    }
+    p {
+      @include heading-4-style;
     }
   }
 
@@ -107,18 +89,12 @@
       padding: 20px 50px 0;
     }
 
-    h4,
-    h5 {
-      font-size: 16px;
-    }
-
     p {
-      font-size: 14px;
       word-wrap: break-word;
     }
 
     strong {
-      font-weight: $font-weight-bold;
+      @include caption-1-style;
     }
 
     a:not(.signup-link) {
@@ -173,7 +149,6 @@
       @extend .col-4;
       @extend .col-md-3;
       @extend .col-xl-2;
-      padding: 0 5px 10px;
     }
   }
 
@@ -191,6 +166,10 @@
     h1 {
       margin-bottom: $headings-margin-bottom;
     }
+
+    p {
+      @include heading-4-style;
+    }
   }
 
   .s72-plans,
@@ -297,18 +276,11 @@
     max-width: 660px;
 
     h2 {
-      font-size: 24px;
       text-align: center;
-      @include media-breakpoint-up(md) {
-        font-size: 2rem;
-      }
-    }
-
-    p {
-      font-size: 12px;
-      @include media-breakpoint-up(md) {
-        font-size: 16px;
-      }
     }
   }
 }
+
+.acceptinvite-invalid-token {
+  @include heading-4-style;
+}

package/site/styles/_plans.scss

@@ -30,6 +30,10 @@ s72-plan-label {
           p {
             @extend .mb-p75;
           }
+
+          h2 {
+            @include heading-3-style;
+          }
         }
 
         s72-plan-label {

package/site/styles/_search.scss

@@ -12,8 +12,6 @@
   }
 
   .s72-searchresults-total {
-    font-size: 12px;
-    font-weight: $font-weight-bold;
     margin: 0;
     padding-top: 10px;
     @include media-breakpoint-up(md) {

package/site/styles/_share-modal.scss

@@ -1,7 +1,3 @@
-s72-share-modal .fa-share-alt {
-  font-size: 20px;
-}
-
 .s72-share-modal {
   .s72-modal-dialog {
     @extend .p-0;

package/site/styles/_shopping.scss

@@ -117,11 +117,6 @@
   text-align: center;
   width: 100%;
 
-  h4 {
-    font-size: 20px;
-    font-weight: $font-weight-bold;
-  }
-
   h4,
   p {
     margin-bottom: 0;

package/site/styles/_tooltips.scss

@@ -4,4 +4,17 @@
   @include media-breakpoint-up(lg) {
     display: block;
   }
+
+  &.s72-tooltip-top .s72-tooltip-arrow::before {
+    border-top-color: var(--tooltip-arrow-color);
+  }
+
+  &.s72-tooltip-bottom .s72-tooltip-arrow::before {
+    border-bottom-color: var(--tooltip-arrow-color);
+  }
+
+  .s72-tooltip-inner {
+    background-color: var(--tooltip-bg);
+    color: var(--tooltip-color);
+  }
 }

package/site/styles/_typography.scss

@@ -0,0 +1,137 @@
+@mixin typography-style(
+  $font-size,
+  $letter-spacing: null,
+  $font-weight: null,
+  $margin-bottom: null,
+  $font-color: null,
+  $line-height: null
+) {
+  color: $font-color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  letter-spacing: $letter-spacing;
+  line-height: $line-height;
+  margin-bottom: $margin-bottom;
+}
+
+@mixin heading-1-style() {
+  @include typography-style(
+    $font-size: 32px,
+    $letter-spacing: 0.4px,
+    $font-weight: $font-weight-normal,
+    $margin-bottom: 8px,
+    $font-color: var(--body-color),
+    $line-height: 42px
+  );
+  @include media-breakpoint-up(xs) {
+    @include typography-style($font-size: 46px, $line-height: 56px);
+  }
+  small {
+    @include typography-style($font-size: 24px);
+  }
+}
+
+@mixin heading-2-style() {
+  @include typography-style(
+    $font-size: 29px,
+    $letter-spacing: 0.6px,
+    $font-weight: $font-weight-normal,
+    $margin-bottom: 13px
+  );
+  @include media-breakpoint-up(sm) {
+    @include typography-style($font-size: 35px);
+  }
+}
+
+@mixin heading-3-style() {
+  @include typography-style(
+    $font-size: 20px,
+    $letter-spacing: 0,
+    $font-weight: $font-weight-normal,
+    $margin-bottom: 6px,
+    $line-height: 24px
+  );
+  @include media-breakpoint-up(sm) {
+    @include typography-style($font-size: 24px, $letter-spacing: 0.4px, $line-height: 30px);
+  }
+}
+
+@mixin heading-4-style() {
+  @include typography-style(
+    $font-size: 18px,
+    $font-weight: $font-weight-light,
+    $margin-bottom: 20px
+  );
+}
+
+@mixin body-1-style() {
+  @include typography-style(
+    $font-size: 16px,
+    $letter-spacing: 0.6px,
+    $font-weight: $font-weight-light,
+    $line-height: 23px
+  );
+}
+
+@mixin body-2-style() {
+  @include typography-style($font-size: 14px, $letter-spacing: 0.4px);
+}
+
+@mixin subtitle-1-style() {
+  @include typography-style(
+    $font-size: 16px,
+    $letter-spacing: 0.2px,
+    $font-weight: $font-weight-normal,
+    $margin-bottom: 2px,
+    $line-height: 20px
+  );
+}
+
+@mixin subtitle-2-style() {
+  @include typography-style(
+    $font-size: 14px,
+    $letter-spacing: 0.2px,
+    $font-weight: $font-weight-normal,
+    $margin-bottom: 12px,
+    $line-height: 18px
+  );
+}
+
+@mixin caption-1-style() {
+  @include typography-style(
+    $font-size: 16px,
+    $letter-spacing: 0.6px,
+    $font-weight: $font-weight-bold,
+    $margin-bottom: 4px,
+    $line-height: 20px
+  );
+}
+
+@mixin overline-style() {
+  @include typography-style(
+    $font-size: 14px,
+    $letter-spacing: 1px,
+    $font-weight: $font-weight-normal,
+    $line-height: 18px
+  );
+}
+
+h1 {
+  @include heading-1-style();
+}
+
+h2 {
+  @include heading-2-style();
+}
+
+h3 {
+  @include heading-3-style();
+}
+
+h4 {
+  @include heading-4-style();
+}
+
+p {
+  @include body-1-style();
+}

package/site/styles/_variables.scss

@@ -11,6 +11,7 @@
   --body-bg-accent-rgb: 25, 25, 25; // darken(body-bg, 10%) OR lighten(body-bg, 10%)
   --link-color-hover-rgb: 217, 217, 217; // darken(body-color, 15%)
   --input-focus-border-color-rgb: 131, 210, 216; // lighten(primary, 25%)
+  --main-content-icon-hover-rgb: 207, 207, 207; // white .8 opacity
 
   --primary: rgb(var(--primary-rgb));
   --secondary: rgb(var(--secondary-rgb));
@@ -20,6 +21,10 @@
   --link-color: var(--body-color);
   --link-color-hover: rgb(var(--link-color-hover-rgb));
   --input-focus-border-color: rgb(var(--input-focus-border-color-rgb));
+  --main-content-icon-hover: rgb(var(--main-content-icon-hover-rgb));
+  --tooltip-color: var(--body-bg, #000);
+  --tooltip-bg: var(--primary, #00a3ff);
+  --tooltip-arrow-color: var(--tooltip-bg);
 
   --input-height: 40px;
 

package/site/styles/_wishlist.scss

@@ -25,19 +25,19 @@
 
 .s72-userwishlist-buttons {
   .s72-btn-wishlist {
-    @extend .btn;
-    padding-left: 0;
-
     .s72-icon {
-      font-size: 28px !important;
-      opacity: 0.8;
-      padding: 2px 0;
+      font-size: 25px !important;
+      margin: 0;
+    }
+
+    .s72-icon-loading,
+    .s72-icon-errored {
+      display: none;
     }
   }
 }
 
-.s72-userwishlist-buttons .s72-btn-wishlist,
-.meta-award-nomination {
+.s72-userwishlist-buttons .s72-btn-wishlist {
   font-size: 12px;
   font-weight: $font-weight-bold;
 
@@ -49,12 +49,6 @@
   }
 }
 
-.s72-userwishlist-buttons .s72-btn-wishlist {
-  margin-right: 0.5rem;
-  padding-bottom: 3px;
-  padding-top: 3px;
-}
-
 .poster .s72-userwishlist-buttons .s72-btn-wishlist {
   margin: 0;
   padding: 0;

package/site/styles/main.scss

@@ -3,6 +3,7 @@
 @import '_bootstrap4';
 @import '_mixins';
 @import '_globals';
+@import '_typography';
 @import '_shift72';
 
 @import '_icons';

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

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

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

@@ -7,7 +7,7 @@
 {{import "../../common/cta_buttons.jet"}}
 
 {{block carouselItem(item)}}
-  {{showItemContent := !isset(item["PageType"]) || item.PageType != "external"}}  
+  {{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}}">
@@ -17,7 +17,12 @@
       {{if showItemContent}}
         <div class="carousel-item-caption">
           {{if item.ItemType == "film"}}
-            {{yield sponsor(hideLink="true") item.InnerItem}}
+            {{if len(item.InnerItem.AwardCategories) > 0 || item.InnerItem.ImageMap["Sponsor"]}}
+              <div class="sponsor-awards-wrapper">
+                {{yield sponsor(hideLink="true") item.InnerItem}}
+                {{yield awardsCarousel() item.InnerItem}}
+              </div>
+            {{end}}
           {{end}}
           <div class="meta-item-content">
             {{yield carouselItemTitle(title=item.GetTitle(i18n))}}
@@ -28,11 +33,9 @@
               {{yield carouselItemSynopsis(synopsis=item.InnerItem.Tagline)}}
             {{end}}
 
-            {{yield ctaButtons(itemType=item.ItemType, trailerRedirect=true) item.InnerItem}}            
+            {{yield ctaButtons(itemType=item.ItemType) item.InnerItem}}
 
             <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
-
-            {{yield awardsCarousel() item.InnerItem}}
           </div>
         </div>
       {{end}}

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

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

package/site/templates/common/cta_buttons.jet

@@ -1,6 +1,6 @@
 {{import "./social-media-buttons.jet"}}
 
-{{block ctaButtons(itemType, trailerRedirect=false)}}
+{{block ctaButtons(itemType)}}
   {{isFilm := itemType == "film"}}
   {{isSeason := itemType == "tvseason"}}
   {{isEpisode := itemType == "tvepisode"}}
@@ -40,20 +40,12 @@
         <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}}
+            {{dataLabel := i18n("play_trailer")}}
+            <s72-modal-player src="{{trailerURL}}" class="s72-btn-trailer" data-slug="{{slug}}" data-label="{{dataLabel}}" autoplay="querystring" layout="tooltip"></s72-modal-player>
           {{end}}
 
           {{if showWishlistButton}}
-            <s72-userwishlist-button data-slug="{{slug}}" class="btn-wishlist"></s72-userwishlist-button>
+            <s72-userwishlist-button data-slug="{{slug}}" class="btn-wishlist" layout="tooltip"></s72-userwishlist-button>
           {{end}}
 
           {{if showShareButton}}

package/site/templates/film/item.jet

@@ -55,7 +55,6 @@
             <br>
           {{end}}
 
-          {{yield awardNominations() film}}
           <div class="element-switcher-wrapper">
             <s72-element-switcher>
               {{if isEnabled("element_switcher_enabled")}}
@@ -81,7 +80,7 @@
                     <div class="meta-detail-crew">
                       <h2>{{member.Job}}</h2>
                       {{ path := "/search.html?q=" + member.Name }}
-                      <a href="{{ routeToPath(path) }}">{{member.Name}}</a>
+                      <p><a href="{{ routeToPath(path) }}">{{member.Name}}</a></p>
                     </div>
                   {{end}}
                   {{if len(film.Languages) > 0 }}
@@ -145,6 +144,7 @@
             </s72-element-switcher>
             {{yield sponsor() film}}
           </div>
+          {{yield awardNominations() film}}
           {{if len(film.Bonuses) > 0 && !film.CustomFields.GetBool("hide_bonus_content", false)}}
             <section class="meta-detail-bonus-content" aria-label="{{i18n("meta_detail_bonus_title")}}">
               <h2>{{i18n("meta_detail_bonus_title")}}</h2>
@@ -186,4 +186,4 @@
     </section>
     {{ end }}
   </main>
-{{end}}
+{{end}}

package/site/templates/items/tagline.jet

@@ -1,5 +1,9 @@
 {{block metaItemTagline(genres=true, genresLimit=-1, classification=true)}}
   <div class="meta-item-tagline">
+    {{if classification}}
+      <s72-classification-label data-slug="{{.Slug}}" data-layout="tooltip"></s72-classification-label>
+    {{end}}
+
     {{itemGenres := makeSlice()}}
     {{if genres}}
       {{if isset(.Genres)}}
@@ -9,85 +13,56 @@
       {{end}}
     {{end}}
 
-    {*{ Figure out how many dividers. }*}
-    {{dividers := 0}}
-    {{if genres && len(itemGenres) > 0}}
-      {{dividers = dividers + 1}}
-    {{end}}
-    {{if isset(.Runtime)}}
-      {{dividers = dividers + 1}}
-    {{end}}
-    {{if isset(.Items)}}
-      {{dividers = dividers + 1}}
-    {{end}}
-    {{if isset(.Episodes)}}
-      {{dividers = dividers + 1}}
-    {{end}}
-    {{if isset(.ReleaseDate) && .ReleaseDate.Year() > 1}}
-      {{dividers = dividers + 1}}
-    {{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}}
+    {{showDivider := false}}
 
     {{if isset(.Runtime)}}
-      {{yield taglineItem() content}}
+      {{yield item(class="runtime") content}}
         {{if .Runtime > 60}}
-          {{.Runtime.Hours()}}{{i18n("runtime_hours")}} {{.Runtime.Minutes()}}{{i18n("runtime_minutes")}}
-        {{else}}
-          {{.Runtime}}{{i18n("runtime_minutes")}}
+          {{.Runtime.Hours()}}{{i18n("runtime_hours")}}
         {{end}}
+        {{.Runtime.Minutes()}}{{i18n("runtime_minutes")}}
       {{end}}
-      {{yield taglineDivider(dividers=dividers)}}
-      {{dividers = dividers - 1}}
+      {{showDivider = true}}
     {{end}}
 
     {{if isset(.Items)}}
-      {{yield taglineItem() content}}
+      {{yield item() content}}
         {{i18n("bundle_items_generic", len(.Items))}}
       {{end}}
-      {{yield taglineDivider(dividers=dividers)}}
-      {{dividers = dividers - 1}}
+      {{showDivider = true}}
     {{end}}
 
     {{if isset(.Episodes)}}
-      {{yield taglineItem() content}}
+      {{yield item(class="episodes") content}}
         {{i18n("episode_count", len(.Episodes))}}
       {{end}}
-      {{yield taglineDivider(dividers=dividers)}}
-      {{dividers = dividers - 1}}
+      {{showDivider = true}}
     {{end}}
 
     {{if genres && len(itemGenres) > 0}}
       {{if genresLimit > -1 && len(itemGenres) > genresLimit}}
         {{itemGenres = itemGenres[:genresLimit]}}
       {{end}}
-      {{yield taglineItem() content}}
+      {{yield item(class="genres") content}}
         {{itemGenres}}
       {{end}}
-      {{yield taglineDivider(dividers=dividers)}}
-      {{dividers = dividers - 1}}
+      {{showDivider = true}}
     {{end}}
 
-    {{if isset(.ReleaseDate) && .ReleaseDate.Year() > 1}}
-      {{yield taglineItem() content}}
+    {{if isset(.ReleaseDate) && .ReleaseDate.Year() > 1888}}
+      {{yield item(class="release-date") content}}
         {{.ReleaseDate.Year()}}
       {{end}}
-      {{yield taglineDivider(dividers=dividers)}}
-      {{dividers = dividers - 1}}
+      {{showDivider = true}}
     {{end}}
   </div>
 {{end}}
 
-{{block taglineItem()}}
-  <span class="meta-item-tagline-item">{{yield content}}</span>
-{{end}}
-
-{{block taglineDivider(dividers)}}
-  {{if dividers > 0}}
-    <span class="meta-item-tagline-divider">•</span>
-  {{end}}
+{{block item(class="missing", showDivider=showDivider)}}
+  <span class="{{class}}">
+    {{if showDivider}}
+      <span class="divider">•</span>
+    {{end}}
+    <span class="item">{{yield content}}</span>
+  </span>
 {{end}}

package/site/templates/tv/detail.jet

@@ -63,7 +63,7 @@
                     <div class="meta-detail-crew">
                       <h2>{{member.Job}}</h2>
                       {{ path := "/search.html?q=" + member.Name }}
-                      <a href="{{ routeToPath(path) }}"">{{member.Name}}</a>
+                      <p><a href="{{ routeToPath(path) }}"">{{member.Name}}</a></p>
                     </div>
                   {{end}}
                 </div>