@shift72/core-template 1.5.0 → 1.6.0

package/site/pt_PT.all.json

@@ -1417,6 +1417,21 @@
   "shopping_error_invalid_session_token": {
     "other": "A sessão de compras expirou. Tente novamente."
   },
+  "live_stream_starts": {
+    "other": "A transmissão começa {{.Date}}"
+  },
+  "live_streaming_now": {
+    "other": "Transmissão agora"
+  },
+  "live_streaming_ended": {
+    "other": "Stream encerrado"
+  },
+  "availability_live": {
+    "other": "VIVER"
+  },
+  "shopping_action_get_ticket": {
+    "other": "Obter bilhete"
+  },
   "shopping_error_credit_discounts_not_allowed": {
     "other": "Você não pode usar um código promocional para esta compra ou aluguel"
   },
@@ -1437,5 +1452,68 @@
   },
   "shopping_error_missing_code": {
     "other": "Nenhum código promocional foi fornecido"
+  },
+  "live_label_ended": {
+    "other": "AO VIVO: TERMINADO"
+  },
+  "live_label_live": {
+    "other": "VIVER"
+  },
+  "live_label_minutes": {
+    "one": "AO VIVO: 1 MINUTO",
+    "other": "AO VIVO: {{.Count}} MINUTOS"
+  },
+  "live_label_hours": {
+    "one": "AO VIVO: 1 HORA",
+    "other": "AO VIVO: {{.Count}} HORAS"
+  },
+  "live_label_days": {
+    "one": "AO VIVO: 1 DIA",
+    "other": "AO VIVO: {{.Count}} DIAS"
+  },
+  "shopping_info_subtitle_live_event": {
+    "other": "Transmissão ao vivo"
+  },
+  "shopping_info_release_date_title_live_event": {
+    "other": "Este é um evento ao vivo. "
+  },
+  "shopping_info_release_date_explanation1_live_event_rent": {
+    "other": "Você pode comprar um ingresso agora, mas precisará assistir enquanto a transmissão estiver ao vivo."
+  },
+  "shopping_info_release_date_explanation2_live_event_rent": {
+    "other": "Você precisará assistir enquanto a transmissão estiver ao vivo."
+  },
+  "shopping_info_release_date_explanation3_live_event_rent": {
+    "other": "Este evento está atualmente ao vivo. "
+  },
+  "shopping_info_available_until_date_title_live_event": {
+    "other": "O fluxo termina {{.Date}}. "
+  },
+  "shopping_info_available_until_date_explanation_live_event_rent": {
+    "other": "Você não poderá assistir à transmissão depois disso."
+  },
+  "shopping_action_ticket": {
+    "other": "Obter bilhete"
+  },
+  "shopping_info_release_date_title_live_event_start": {
+    "other": "O fluxo começa {{.Date}}. "
+  },
+  "shopping_info_release_date_explanation4_live_event_rent": {
+    "other": "Começou em {{.Date}}. "
+  },
+  "shopping_info_release_date_explanation5_live_event_rent": {
+    "other": "Você não pode rebobinar."
+  },
+  "shopping_error_stripe_invalid_expiry_month_past": {
+    "other": "A data de validade do seu cartão está no passado."
+  },
+  "shopping_error_stripe_invalid_expiry_year_past": {
+    "other": "O ano de validade do seu cartão está no passado."
+  },
+  "shopping_error_stripe_invalid_number": {
+    "other": "O número do seu cartão é inválido."
+  },
+  "new_card_error_timed_out": {
+    "other": "Algo deu errado ao adicionar esse cartão. Tente novamente mais tarde ou use um cartão diferente."
   }
 }

package/site/ru_RU.all.json

@@ -1461,6 +1461,21 @@
   "shopping_error_invalid_session_token": {
     "other": "Сеанс покупки истек, попробуйте еще раз."
   },
+  "live_stream_starts": {
+    "other": "Стрим начинается {{.Date}}"
+  },
+  "live_streaming_now": {
+    "other": "Потоковое сейчас"
+  },
+  "live_streaming_ended": {
+    "other": "Трансляция завершена"
+  },
+  "availability_live": {
+    "other": "ЖИТЬ"
+  },
+  "shopping_action_get_ticket": {
+    "other": "Получить билет"
+  },
   "shopping_error_credit_discounts_not_allowed": {
     "other": "Вы не можете использовать промо-код для этой покупки или аренды"
   },
@@ -1481,5 +1496,74 @@
   },
   "shopping_error_missing_code": {
     "other": "Промокод не был предоставлен"
+  },
+  "live_label_ended": {
+    "other": "ПРЯМОЙ ЭФИР: ЗАКОНЧИЛСЯ"
+  },
+  "live_label_live": {
+    "other": "ЖИТЬ"
+  },
+  "live_label_minutes": {
+    "one": "ЖИТЬ: 1 МИНУТА",
+    "few": "ЖИТЬ: {{.Count}} МИНУТ",
+    "many": "ЖИТЬ: {{.Count}} МИНУТ",
+    "other": "ЖИТЬ: {{.Count}} МИНУТ"
+  },
+  "live_label_hours": {
+    "one": "ЖИТЬ: 1 ЧАС",
+    "few": "ЖИТЬ: {{.Count}} ЧАСЫ",
+    "many": "ЖИТЬ: {{.Count}} ЧАСЫ",
+    "other": "ЖИТЬ: {{.Count}} ЧАСЫ"
+  },
+  "live_label_days": {
+    "one": "ЖИТЬ: 1 ДЕНЬ",
+    "few": "ЖИТЬ: {{.Count}} ДНЕЙ",
+    "many": "ЖИТЬ: {{.Count}} ДНЕЙ",
+    "other": "ЖИТЬ: {{.Count}} ДНЕЙ"
+  },
+  "shopping_info_subtitle_live_event": {
+    "other": "Прямая трансляция"
+  },
+  "shopping_info_release_date_title_live_event": {
+    "other": "Это живое событие. "
+  },
+  "shopping_info_release_date_explanation1_live_event_rent": {
+    "other": "Вы можете купить билет сейчас, но вам нужно будет смотреть, пока трансляция идет в прямом эфире."
+  },
+  "shopping_info_release_date_explanation2_live_event_rent": {
+    "other": "Вам нужно будет смотреть, пока трансляция идет в прямом эфире."
+  },
+  "shopping_info_release_date_explanation3_live_event_rent": {
+    "other": "Это событие в настоящее время в прямом эфире. "
+  },
+  "shopping_info_available_until_date_title_live_event": {
+    "other": "Поток заканчивается {{.Date}}. "
+  },
+  "shopping_info_available_until_date_explanation_live_event_rent": {
+    "other": "После этого вы не сможете смотреть трансляцию."
+  },
+  "shopping_action_ticket": {
+    "other": "Получить билет"
+  },
+  "shopping_info_release_date_title_live_event_start": {
+    "other": "Поток начинается {{.Date}}. "
+  },
+  "shopping_info_release_date_explanation4_live_event_rent": {
+    "other": "Это началось в {{.Date}}. "
+  },
+  "shopping_info_release_date_explanation5_live_event_rent": {
+    "other": "Вы не можете перемотать его назад."
+  },
+  "shopping_error_stripe_invalid_expiry_month_past": {
+    "other": "Срок действия вашей карты истек."
+  },
+  "shopping_error_stripe_invalid_expiry_year_past": {
+    "other": "Срок действия вашей карты истек."
+  },
+  "shopping_error_stripe_invalid_number": {
+    "other": "Номер вашей карты недействителен."
+  },
+  "new_card_error_timed_out": {
+    "other": "Что-то пошло не так при добавлении этой карты. Повторите попытку позже или используйте другую карту."
   }
 }

package/site/sr_SR.all.json

@@ -1426,6 +1426,21 @@
   "shopping_error_invalid_session_token": {
     "other": "Сесија куповине је истекла, покушајте поново."
   },
+  "live_stream_starts": {
+    "other": "Стрим почиње {{.Date}}"
+  },
+  "live_streaming_now": {
+    "other": "Стримовање сада"
+  },
+  "live_streaming_ended": {
+    "other": "Стрим је завршен"
+  },
+  "availability_live": {
+    "other": "ЛИВЕ"
+  },
+  "shopping_action_get_ticket": {
+    "other": "Узми карту"
+  },
   "shopping_error_credit_discounts_not_allowed": {
     "other": "Не можете да користите промотивни код за ову куповину или изнајмљивање"
   },
@@ -1446,5 +1461,71 @@
   },
   "shopping_error_missing_code": {
     "other": "Није наведен промотивни код"
+  },
+  "live_label_ended": {
+    "other": "УЖИВО: ЗАВРШЕНО"
+  },
+  "live_label_live": {
+    "other": "ЛИВЕ"
+  },
+  "live_label_minutes": {
+    "one": "УЖИВО: 1 МИНУТА",
+    "few": "УЖИВО: {{.Count}} МИНУТЕ",
+    "other": "УЖИВО: {{.Count}} МИНУТЕ"
+  },
+  "live_label_hours": {
+    "one": "УЖИВО: 1 САТ",
+    "few": "УЖИВО: {{.Count}} САТИ",
+    "other": "УЖИВО: {{.Count}} САТИ"
+  },
+  "live_label_days": {
+    "one": "УЖИВО: 1 ДАН",
+    "few": "УЖИВО: {{.Count}} ДАНА",
+    "other": "УЖИВО: {{.Count}} ДАНА"
+  },
+  "shopping_info_subtitle_live_event": {
+    "other": "Ливе Стреам"
+  },
+  "shopping_info_release_date_title_live_event": {
+    "other": "Ово је догађај уживо. "
+  },
+  "shopping_info_release_date_explanation1_live_event_rent": {
+    "other": "Можете купити карту сада, али ћете морати да гледате док је стрим уживо."
+  },
+  "shopping_info_release_date_explanation2_live_event_rent": {
+    "other": "Мораћете да гледате док је стрим уживо."
+  },
+  "shopping_info_release_date_explanation3_live_event_rent": {
+    "other": "Овај догађај је тренутно уживо. "
+  },
+  "shopping_info_available_until_date_title_live_event": {
+    "other": "Стрим се завршава {{.Date}}. "
+  },
+  "shopping_info_available_until_date_explanation_live_event_rent": {
+    "other": "После тога нећете моћи да гледате стрим."
+  },
+  "shopping_action_ticket": {
+    "other": "Узми карту"
+  },
+  "shopping_info_release_date_title_live_event_start": {
+    "other": "Стрим почиње {{.Date}}. "
+  },
+  "shopping_info_release_date_explanation4_live_event_rent": {
+    "other": "Почело је у {{.Date}}. "
+  },
+  "shopping_info_release_date_explanation5_live_event_rent": {
+    "other": "Не можете га премотати."
+  },
+  "shopping_error_stripe_invalid_expiry_month_past": {
+    "other": "Датум истека ваше картице је у прошлости."
+  },
+  "shopping_error_stripe_invalid_expiry_year_past": {
+    "other": "Година истека ваше картице је у прошлости."
+  },
+  "shopping_error_stripe_invalid_number": {
+    "other": "Број ваше картице је неважећи."
+  },
+  "new_card_error_timed_out": {
+    "other": "Нешто није у реду приликом додавања те картице. Покушајте поново касније или користите другу картицу."
   }
 }

package/site/styles/_availability-tags.scss

@@ -62,6 +62,20 @@ s72-availability-label {
     font-size: 12px;
     text-align: center;
   }
+
+  .availability-bg.live {
+    background-color: rgba(var(--body-bg-rgb, 0, 0, 0), 0.7);
+    color: var(--body-color, rgb(255, 255, 255));
+  }
+
+  s72-availability-status {
+    .availability-livenow::before {
+      @include s72-icon-live;
+      color: var(--live-red);
+      font-size: 8px;
+      margin-right: 6px;
+    }
+  }
 }
 
 .poster .availability-state,
@@ -71,3 +85,28 @@ s72-plan-label {
   font-size: 12px;
   text-align: center;
 }
+
+s72-live-label {
+  .live-label {
+    align-items: center;
+    backdrop-filter: blur(16px);
+    background-color: rgba(var(--body-color-rgb), 0.16);
+    border-radius: 100px;
+    color: var(--body-color);
+    display: flex;
+    font-size: 12px;
+    line-height: 30px;
+    padding: 0 12px;
+    white-space: nowrap;
+
+    &.is-live {
+      background-color: var(--live-label-live-background-color);
+    }
+
+    .s72-icon-live {
+      @include s72-icon-live;
+
+      margin-right: 8px;
+    }
+  }
+}

package/site/styles/_awards.scss

@@ -4,17 +4,12 @@
   &.meta-awards-all {
     display: grid;
     gap: 30px 104px;
-    grid-auto-rows: 1fr;
-    margin-bottom: 51px;
-    margin-top: -14px;
+    margin-bottom: 0px;
+    margin-top: 20px;
 
     @include media-breakpoint-up(md) {
       grid-template-columns: repeat(2, minmax(0, 320px));
     }
-
-    @include media-breakpoint-up(lg) {
-      margin-bottom: 52px;
-    }
   }
 
   .meta-award-nomination {

package/site/styles/_carousel.scss

@@ -96,8 +96,7 @@ s72-carousel {
   @extend .carousel-bottom-gradient;
 
   bottom: 0;
-  display: flex;
-  flex-direction: column;
+  display: grid;
   left: 0;
   padding: var(--carousel-bottom-gradient-height) 20px 1px;
   position: absolute;
@@ -109,10 +108,16 @@ s72-carousel {
   }
 
   @include media-breakpoint-up(lg) {
-    flex-direction: row;
+    grid-template-columns: 1fr auto;
     padding: var(--carousel-bottom-gradient-height-lg) 50px 1px;
   }
 
+  .live-label {
+    grid-column: 1;
+    margin-bottom: 8px;
+    width: fit-content;
+  }
+
   .meta-awards {
     @include media-breakpoint-up(lg) {
       justify-content: end;
@@ -124,14 +129,15 @@ s72-carousel {
     color: var(--body-color);
 
     @include media-breakpoint-up(lg) {
-      align-self: flex-end;
-      flex-shrink: 0;
-      margin-left: auto;
-      order: 1;
+      align-self: end;
+      grid-column: 2;
+      grid-row: 2;
     }
   }
 
   .sponsor {
+    margin-bottom: 8px;
+
     @include media-breakpoint-up(lg) {
       text-align: right;
     }
@@ -149,6 +155,11 @@ s72-carousel {
 
   .meta-item-content {
     color: var(--body-color);
+
+    @include media-breakpoint-up(lg) {
+      grid-column: 1;
+      grid-row: 2;
+    }
   }
 
   h3 {

package/site/styles/_collections.scss

@@ -8,9 +8,7 @@
 
 .page-collection-slider {
   padding: 0;
-  padding: 0;
-  padding-bottom: 40px;
-  padding-bottom: 40px;
+  padding-bottom: var(--collection-padding-bottom);
   position: relative;
   z-index: 8;
 }
@@ -291,9 +289,9 @@
 }
 
 .page-collection-list {
-  padding: 0 20px 15px;
+  padding: 0 20px var(--collection-padding-bottom);
   @include media-breakpoint-up(lg) {
-    padding: 0 50px 30px;
+    padding: 0 0 var(--collection-padding-bottom);
   }
 
   .page-collection-items {

package/site/styles/_cta-buttons.scss

@@ -1,4 +1,16 @@
 /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
+@mixin text-cta-btn {
+  margin: 0;
+  padding: 6px 12px;
+  white-space: nowrap;
+  width: 100%;
+
+  @include media-breakpoint-up(xs) {
+    min-width: fit-content;
+    width: 140px;
+  }
+}
+
 .cta-buttons {
   display: grid;
   gap: 16px;
@@ -121,12 +133,7 @@
     }
 
     .s72-btn {
-      white-space: nowrap;
-      width: 100%;
-
-      @include media-breakpoint-up(xs) {
-        width: auto;
-      }
+      @include text-cta-btn;
 
       &:nth-child(2) {
         margin: 0; // RELISH OVERRIDE.
@@ -136,10 +143,7 @@
 
   s72-play-button {
     .s72-btn-play {
-      margin: 0;
-      min-width: 140px;
-      padding: 6px 12px;
-      width: 100%;
+      @include text-cta-btn;
     }
 
     .s72-btn-play-icon {
@@ -152,9 +156,7 @@
   }
 
   .s72-btn-can-be-watched {
-    min-width: 140px;
-    padding: 6px 12px;
-    width: 100%;
+    @include text-cta-btn;
 
     .padder {
       display: none;

package/site/styles/_icons.scss

@@ -222,3 +222,8 @@ s72-availability-label .availability-state::before {
 .fa-play-trailer::before {
   content: '\e01d';
 }
+
+@mixin s72-icon-live {
+  @extend .fa-circle;
+  @extend .s72-icon;
+}

package/site/styles/_meta-detail.scss

@@ -102,8 +102,7 @@
 }
 
 .meta-detail-main {
-  @extend .d-flex;
-  flex-direction: column;
+  display: grid;
   padding: var(--page-detail-padding-top) 20px 0 20px;
 
   @include media-breakpoint-up(xs) {
@@ -111,19 +110,45 @@
   }
 
   @include media-breakpoint-up(lg) {
-    flex-direction: row;
+    grid-template-columns: auto 1fr;
     padding: var(--page-detail-padding-top-lg) 50px 0 50px;
     padding-bottom: 0;
   }
 
+  s72-live-label {
+    @include media-breakpoint-up(lg) {
+      grid-column: 2;
+    }
+
+    .live-label {
+      margin-bottom: 12px;
+      position: absolute;
+      // 42px magic number is 30px height of the label + 12px of "margin".
+      top: calc(var(--page-detail-padding-top) - 42px);
+
+      @include media-breakpoint-up(xs) {
+        // 42px magic number is 30px height of the label + 12px of "margin".
+        top: calc(var(--page-detail-padding-top-md) - 42px);
+      }
+
+      @include media-breakpoint-up(lg) {
+        margin-bottom: 8px;
+        // 42px magic number is 30px height of the label + 12px of "margin".
+        top: calc(var(--page-detail-padding-top-lg) - 42px);
+      }
+    }
+  }
+
   .poster-wrapper {
-    margin-bottom: 20px;
-    position: relative;
+    @include media-breakpoint-up(lg) {
+      grid-row: 2;
+    }
+
     .sponsor {
-      bottom: 100%;
-      position: absolute;
+      margin-bottom: 12px;
+
       @include media-breakpoint-up(xs) {
-        position: relative;
+        margin-bottom: 20px;
       }
     }
   }
@@ -132,6 +157,7 @@
     animation: fadein 2s;
     display: block;
     flex-shrink: 0;
+    margin-bottom: 20px;
     margin-right: 20px;
     width: 110px;
 
@@ -142,6 +168,10 @@
     @include media-breakpoint-up(xl) {
       width: 208px;
     }
+
+    .live {
+      display: none;
+    }
   }
 
   .poster-wrapper .sponsor {
@@ -149,6 +179,13 @@
       display: none;
     }
   }
+
+  .meta-detail-content {
+    @include media-breakpoint-up(lg) {
+      grid-column: 2;
+      grid-row: 2;
+    }
+  }
 }
 
 s72-element-switcher,
@@ -337,7 +374,9 @@ s72-element-switcher,
   }
 
   .page-collection-list {
-    padding: 0;
+    @include media-breakpoint-up(md) {
+      padding: 0;
+    }
 
     .page-collection-list-title {
       margin-bottom: 10px;

package/site/styles/_swiper.scss

@@ -1,10 +1,10 @@
-.swiper-wrapper-container {
+.collection-wrapper-container {
   margin: 0 auto;
   padding: 0;
   position: relative;
 }
 
-.swiper-container {
+.collection-container {
   padding: 0 0 40px;
   @include media-breakpoint-up(md) {
     padding: 15px 20px 20px;

package/site/styles/_variables.scss

@@ -43,6 +43,9 @@
   //   TODO(jackh): figure out a non-Sass way of calculating this.
   --hover-background-rgb: 58, 58, 58;
 
+  // It's in the designs :/
+  --live-red-rgb: 224, 49, 49;
+
   --primary: rgb(var(--primary-rgb));
   --secondary: rgb(var(--secondary-rgb));
   --body-color: rgb(var(--body-color-rgb));
@@ -51,8 +54,12 @@
   --body-bg-accent: rgb(var(--body-bg-accent-rgb));
   --input-focus-border-color: rgb(var(--input-focus-border-color-rgb));
   --hover-background: rgb(var(--hover-background-rgb));
+  --live-red: rgb(var(--live-red-rgb));
   /*#endregion BASE COLOURS */
 
+  --live-label-background-color: var(--hover-background);
+  --live-label-live-background-color: var(--live-red);
+
   --tooltip-color: var(--body-bg, #000);
   --tooltip-bg: var(--primary, #00a3ff);
   --tooltip-arrow-color: var(--tooltip-bg);
@@ -94,6 +101,8 @@
   --carousel-image-object-position-sm: center;
   --carousel-image-object-position-lg: center;
 
+  --collection-padding-bottom: 40px;
+
   --page-padding-top: 120px;
   --page-padding-top-md: 120px;
   --page-padding-top-lg: 180px;

package/site/templates/application/application.jet

@@ -4,7 +4,7 @@
 {{import "./google.jet" }}
 {{import "./footer/footer.jet" }}
 
-{{CDN := "//cdn.shift72.com/latest"}}
+{{CDN := "//cdn.shift72.com/1.3"}}
 {*{CDN := "//localhost:3000"}*}
 
 {{CSSFileURL := site.SiteBrand.GetLink("css", "")}}

package/site/templates/bundle/item.jet

@@ -31,9 +31,8 @@
 
           {{yield bundleSynopsis(class="meta-detail-synopsis", synopsis=bundle.Description)}}
         </div>
-
-        {{yield bundleList(items=bundle.Items)}}
       </div>
     </div>
+    {{yield bundleList(items=bundle.Items)}}
   </main>
 {{end}}