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

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,87 @@
+@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(32px, 0.4px, $font-weight-normal, 8px, var(--body-color));
+  @include media-breakpoint-up(xs) {
+    @include typography-style(45px);
+  }
+  small {
+    @include typography-style(24px);
+  }
+}
+
+@mixin heading-2-style() {
+  @include typography-style(29px, 0.6px, $font-weight-normal, 13px);
+  @include media-breakpoint-up(sm) {
+    @include typography-style(35px);
+  }
+}
+
+@mixin heading-3-style() {
+  @include typography-style(20px, 0, $font-weight-normal, 6px);
+  @include media-breakpoint-up(sm) {
+    @include typography-style(23px, 0.4px);
+  }
+}
+
+@mixin heading-4-style() {
+  @include typography-style(18px, null, $font-weight-light, 20px);
+}
+
+@mixin body-1-style() {
+  @include typography-style(16px, 0.5px, $font-weight-light, null, null, 23px);
+}
+
+@mixin body-2-style() {
+  @include typography-style(14px, 0.4px);
+}
+
+@mixin subtitle-1-style() {
+  @include typography-style(16px, 0.2px, $font-weight-light, 2px);
+}
+
+@mixin subtitle-2-style() {
+  @include typography-style(14px, 0.2px, $font-weight-normal, 12px);
+}
+
+@mixin caption-1-style() {
+  @include typography-style(16px, 0.5px, $font-weight-bold, 4px);
+}
+
+@mixin overline-style() {
+  @include typography-style(14px, 0.8px, $font-weight-light);
+}
+
+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>

package/site/tr_TR.all.json

@@ -122,7 +122,7 @@
     "other": "Aramayı gönder"
   },
   "play_button_watch": {
-    "other": "Şimdi Oynat"
+    "other": "İzle şimdi"
   },
   "play_button_resume": {
     "other": "Devam et"
@@ -739,7 +739,7 @@
     "other": "Listeme Ekle"
   },
   "userwishlist_button_remove": {
-    "other": "Benim Listem"
+    "other": "Listemden Kaldır"
   },
   "userwishlist_button_add_compact": {
     "other": "Benim Listem"
@@ -881,13 +881,13 @@
     "other": "(günü geçmiş)"
   },
   "shopping_card_use_other": {
-    "other": "Yeni bir kart kullanın"
+    "other": "Yeni kart ekle"
   },
   "shopping_card_use_new_card": {
     "other": "Kartı değiştir "
   },
   "shopping_info_ownership_plan": {
-    "other": "Abonelik"
+    "other": "Plan"
   },
   "shopping_action_credit": {
     "other": "Doldurmak"
@@ -914,10 +914,10 @@
     "other": "Aboneliğimi iptal et"
   },
   "usersubscriptions_unsubscribe_modal_cancel": {
-    "other": "İptal"
+    "other": "Hayır, teşekkürler"
   },
   "usersubscriptions_unsubscribe_modal_confirm": {
-    "other": "Evet, aboneliğimi iptal et "
+    "other": "Evet İptal"
   },
   "usersubscriptions_unsubscribe_modal_title": {
     "other": "Aboneliği iptal et?"
@@ -1323,12 +1323,15 @@
     "other": "Lütfen geçerli bir promosyon kodu girin."
   },
   "shopping_complete_promo_only": {
-    "other": "Başarı! Artık {{.Title}} izleyebilirsiniz."
+    "other": "Artık {{.Title}} izleyebilirsiniz."
   },
   "shopping_action_redeem_promo_code": {
     "other": "Tazmin etmek"
   },
   "pricing_ownership_promo": {
     "other": "Tazmin etmek"
+  },
+  "shopping_info_ownership_subscription": {
+    "other": "abonelik"
   }
 }

package/site/uk_UA.all.json

@@ -124,7 +124,7 @@
     "other": "Шукати"
   },
   "play_button_watch": {
-    "other": "Дивитися"
+    "other": "Дивитися зараз"
   },
   "play_button_resume": {
     "other": "Продовжити"
@@ -817,7 +817,7 @@
     "other": "Додати до мого списку"
   },
   "userwishlist_button_remove": {
-    "other": "Мій список"
+    "other": "Видалити з мого списку"
   },
   "userwishlist_button_add_compact": {
     "other": "Мій список"
@@ -966,7 +966,7 @@
     "other": "(закінчився)"
   },
   "shopping_card_use_other": {
-    "other": "Використовуйте нову картку"
+    "other": "Додати нову картку"
   },
   "shopping_card_use_new_card": {
     "other": "Змінити картку"
@@ -981,7 +981,7 @@
     "other": "Кредитна картка не правильна? <a href=\"{{.SubscriptionsURL}}\">Натисніть тут, щоб оновити свою картку.</a>"
   },
   "shopping_info_ownership_plan": {
-    "other": "Підписка"
+    "other": "План"
   },
   "shopping_action_credit": {
     "other": "Поповнити"
@@ -1008,10 +1008,10 @@
     "other": "Скасувати мою підписку"
   },
   "usersubscriptions_unsubscribe_modal_cancel": {
-    "other": "Скасувати"
+    "other": "Ні, дякую"
   },
   "usersubscriptions_unsubscribe_modal_confirm": {
-    "other": "Так, скасувати мою підписку"
+    "other": "Так, скасувати"
   },
   "usersubscriptions_unsubscribe_modal_title": {
     "other": "Скасувати підписку?"
@@ -1355,12 +1355,15 @@
     "other": "Введіть дійсний промо-код."
   },
   "shopping_complete_promo_only": {
-    "other": "Успіху! Тепер ви можете дивитися {{.Title}}."
+    "other": "Тепер ви можете дивитися {{.Title}}."
   },
   "shopping_action_redeem_promo_code": {
     "other": "Викупити"
   },
   "pricing_ownership_promo": {
     "other": "Викупити"
+  },
+  "shopping_info_ownership_subscription": {
+    "other": "Підписка"
   }
 }

package/site/zh_TW.all.json

@@ -125,7 +125,7 @@
     "other": "送出"
   },
   "play_button_watch": {
-    "other": "播放"
+    "other": "立即观看"
   },
   "play_button_resume": {
     "other": "繼續播放"
@@ -808,7 +808,7 @@
     "other": "加入我的追蹤片單"
   },
   "userwishlist_button_remove": {
-    "other": "我的追蹤片單"
+    "other": "从我的列表中删除"
   },
   "userwishlist_button_add_compact": {
     "other": "我的追蹤片單"
@@ -956,7 +956,7 @@
     "other": "（已過期）"
   },
   "shopping_card_use_other": {
-    "other": "使用新的信用卡"
+    "other": "添加新卡"
   },
   "shopping_card_use_new_card": {
     "other": "換一張信用卡"
@@ -971,7 +971,7 @@
     "other": "信用卡錯誤 <a href=\"{{.SubscriptionsURL}}\">請按此更新。</a>"
   },
   "shopping_info_ownership_plan": {
-    "other": "訂閱"
+    "other": "计划"
   },
   "shopping_action_credit": {
     "other": "頂尖"
@@ -998,10 +998,10 @@
     "other": "取消我的訂閱"
   },
   "usersubscriptions_unsubscribe_modal_cancel": {
-    "other": "取消"
+    "other": "不，谢谢"
   },
   "usersubscriptions_unsubscribe_modal_confirm": {
-    "other": "是的，取消我的訂閱"
+    "other": "是的，取消"
   },
   "usersubscriptions_unsubscribe_modal_title": {
     "other": "取消訂閱？"
@@ -1321,12 +1321,15 @@
     "other": "請輸入有效的促銷代碼。"
   },
   "shopping_complete_promo_only": {
-    "other": "成功！您現在可以觀看{{.Title}}。"
+    "other": "您現在可以觀看{{.Title}}。"
   },
   "shopping_action_redeem_promo_code": {
     "other": "贖回"
   },
   "pricing_ownership_promo": {
     "other": "贖回"
+  },
+  "shopping_info_ownership_subscription": {
+    "other": "订阅"
   }
 }