@shift72/core-template 0.4.1 → 0.4.4

package/site/se_SE.all.json

@@ -81,7 +81,7 @@
     "social_media_buttons_copied_link": { "other": "Линк је копиран у међуспремник!" },
     "social_media_buttons_copy_link": { "other": "Копирај у међуспремник" },
   
-    "accept_invite_page_header": { "other": "Добродошли" },
+    "accept_invite_page_header": { "other": "Добродошли " },
     "acceptinvite_form_invalid_reset_password_token": { "other": "Изгледа да сте већ активирали овај позив. Потребно је да се <a href=\"{{.SigninURL}}\">пријавите</a>. Ако сте заборавили лозинку, можете и да <a href=\"{{.ForgotPasswordURL}}\">ресетујете лозинку</a>." },
     "acceptinvite_complete": { "other": "Хвала Вам. Ваш налог је направљен." },
     "acceptinvite_form_submit": { "other": "Прихватите позив." },
@@ -156,13 +156,7 @@
     "account_form_pin_changed": { "other": "Updated" },
     "account_form_change_pin": { "other": "Change PIN" },
   
-    "user_set_pin_header": { "other": "user_set_pin_header" },
-    "user_set_pin_button": { "other": "user_set_pin_button" },
-    "user_submit_pin_heading": { "other": "user_submit_pin_heading" },
-    "user_error_wrong_pin_retry": { "other": "user_error_wrong_pin_retry" },
-    "user_error_too_many_pin_errors": { "other": "user_error_too_many_pin_errors" },
-    "user_submit_pin_button": { "other": "user_submit_pin_button" },
-    "user_reset_pin_button": { "other": "user_reset_pin_button" },
+
   
     "signup_form_optin": {"other": "Пријавите се за бесплатни билтен"},
   
@@ -212,11 +206,11 @@
     "shopping_info_ownership_rent": { "other": "изнајмљивање" },
   
     "shopping_info_sd_only": { "other": "Limited to SD playback only." },
-    "shopping_info_release_date_title": { "other": "Излази {{.Date}}." },
+    "shopping_info_release_date_title": { "other": "Излази {{.Date}}. " },
     "shopping_info_release_date_explanation_rent": { "other": "Можете одмах да изнајмите, али нећете моћи да гледате пре тога." },
     "shopping_info_release_date_explanation_buy": { "other": "Можете одмах да купите, али нећете моћи да гледате пре тога." },
   
-    "shopping_info_available_until_date_title": { "other": "Доступно до {{.Date}}." },
+    "shopping_info_available_until_date_title": { "other": "Доступно до {{.Date}}. " },
     "shopping_info_available_until_date_explanation_rent": { "other": "Нећете моћи да гледате садржај након тога." },
     "shopping_info_available_until_date_explanation_buy": { "other": "Нећете моћи да гледате садржај након тога." },
   
@@ -307,7 +301,9 @@
     "shopping_complete_purchase_coming_soon": { "other": "Моћи ћете да гледате од {{.Date}}." },
     "shopping_complete_receipt": { "other": "Рачун вам је послат имејлом." },
     "shopping_complete_library_link": { "other": "Почните са гледањем {{.BundleItems}} у вашој библиотеци." },
-  
+    "shopping_complete_plan": {
+      "other": "Ваша куповина {{ .Title }} је била успешна."
+    },
     "shopping_complete_rental_watch_window_start": {
       "one": "Можете да почнете са гледањем до краја наредног дана.",
       "other": "Можете да почнете са гледањем одмах или у наредних {{.Count}} дана."
@@ -334,6 +330,7 @@
     "meta_detail_studios": { "one": "Студио", "other": "Студији" },
     "meta_detail_countries": { "one": "Држава", "other": "Државе" },
     "meta_detail_subtitles": { "other": "Титлови" },
+    "meta_detail_captions": { "other": "Титлови [CC]" },
     "meta_detail_episodes_title": { "other": "Епизоде" },
     "meta_detail_bonus_title": { "other": "Додатни садржај" },
     "meta_detail_recommendations_title": { "other": "Можда Вам се допадне" },
@@ -398,8 +395,7 @@
     "users_gender_male": { "other": "Мушки" },
     "users_gender_diverse": { "other": "Свакојаки" },
     "users_gender_other": { "other": "Друго" },
-  
-    "plan_label_owned": { "other": "" },
+
   
     "pricing_quality_hd": { "other": "pricing_quality_hd" },
     "pricing_quality_sd": { "other": "pricing_quality_sd" },
@@ -419,22 +415,14 @@
   
     "shopping_info_ownership_plan": { "other": "shopping_info_ownership_plan" },
   
-    "shopping_price_title_plan": { "other": "shopping_price_title_plan" },
-    "shopping_price_plan_note": { "other": "shopping_price_plan_note" },
-    "shopping_price_plan_note_interval": { "other": "shopping_price_plan_note_interval" },
+
   
-    "shopping_enter_card_prompt_plan": { "other": "shopping_enter_card_prompt_plan" },
+
   
     "shopping_action_credit": { "other": "shopping_action_credit" },
-    "shopping_action_plan": { "other": "shopping_action_plan" },
-  
-    "shopping_complete_subscription": { "other": "shopping_complete_subscription" },
-    "shopping_complete_subscription_browse": { "other": "shopping_complete_subscription_browse" },
-  
+
     "shopping_info_rental_period_coming_soon": { "other": "fод датума и времена " },
-    "shopping_info_plan_offer": { "other": "shopping_info_plan_offer" },
-    "shopping_info_trial_period_offer": { "other": "shopping_info_trial_period_offer" },
-  
+
     "usersubscriptions_change_payment_method_change": { "other": "usersubscriptions_change_payment_method_change" },
     "usersubscriptions_change_payment_method_modal_title": { "other": "usersubscriptions_change_payment_method_modal_title" },
     "usersubscriptions_change_payment_method_modal_submit": { "other": "usersubscriptions_change_payment_method_modal_submit" },
@@ -559,10 +547,55 @@
     "plan_free_link_text": {
       "other": "Бесплатно се пријави"
     },
-  "awards_nominated_for": {
-    "other": "Номинован за"
-  },
-  "awards_in_competition": {
-    "other": "Ин Цомпетитион"
-  }
+    "awards_nominated_for": {
+      "other": "Номинован за"
+    },
+    "awards_in_competition": {
+      "other": "Ин Цомпетитион"
+    },
+    "awards_winner_of": {
+      "other": "Победник од"
+    },
+    "donate_button_text": {
+      "other": "Донирајте"
+    },
+    "wcag_skip_links_header": { "other": "Accessibility Links" },
+    "wcag_skip_links_content": { "other": "Skip to Content" },
+    "wcag_skip_links_footer": { "other": "Skip to Footer" },
+  
+    "wcag_homepage_h1": { "other": "Homepage" },
+    "wcag_carousel_h2": { "other": "Carousel" },
+    "wcag_collections_h2": { "other": "Collections" },
+  
+    "wcag_aria_label_footer": { "other": "Footer" },
+    "wcag_aria_label_nav_main": { "other": "Main" },
+    "wcag_aria_label_nav_sub": { "other": "Sub" },
+    "wcag_aria_label_toggle_nav": { "other": "Toggle Navigation" },
+    "wcag_aria_label_bundle_items": { "other": "Bundle Items" },
+    "wcag_aria_label_carousel": { "other": "Carousel" },
+    "wcag_aria_label_page_collection": { "other": "Page Collection" },
+    "wcag_aria_label_collection_list": { "other": "Collection List" },
+    "wcag_aria_label_collection_slider": { "other": "Collection Slider" },
+    "wcag_aria_label_wishlist": { "other": "Wishlist" },
+    "wcag_aria_label_facebook": { "other": "Share on Facebook" },
+    "wcag_aria_label_twitter": { "other": "Share on Twitter" },
+    "wcag_aria_label_linkedin": { "other": "Share on LinkedIn" },
+    "wcag_aria_label_letterboxd": { "other": "View on Letterboxd" },
+
+    "shopping_error_plan_already_owned": { "other": "You already have this plan." },
+    "shopping_error_plan_expired": { "other": "This plan is no longer available." },
+    "shopping_payment_method_header": { "other": "Payment methods" },
+    "shopping_payment_method_credit_card": { "other": "Credit card" },
+    "shopping_payment_method_giropay": { "other": "Giropay" },
+    "shopping_error_stripe_unknown_error": { "other": "Something went wrong with this payment. Please try again later." },
+    "shopping_error_payment_complete_failed": { "other": "The payment was declined. Close this window and try again." },
+
+    "validation_pincode1_required": { "other": "Please enter a valid PIN code." },
+  "validation_pincode2_required": { "other": "Please enter a valid PIN code." },
+  "validation_pincode1_pattern": { "other": "Please enter a valid PIN code." },
+  "validation_pincode2_pattern": { "other": "Please enter a valid PIN code." },
+  "validation_pincode2_match": { "other": "PIN code does not match." },
+
+  "header_banner": { "other": "ABC Cinemas – 21st  Film Festival, June 1 – 6, 2021" }
+  
   }

package/site/styles/_awards.scss

@@ -13,22 +13,22 @@
   .meta-award-nomination-icon {
     @extend .fa;
     @extend .fa-star; // for now
+
     font-size: 1.25rem;
     line-height: 1.5rem;
-    padding-right: .5rem;
+    padding-right: 0.5rem;
   }
 }
 
 .meta-awards-icon-overlay {
   @extend .text-center;
 
-  border-radius: $meta-item-border-radius;
   background: rgba(0, 0, 0, 0.8);
-
-  padding-right: 3px;
+  border-radius: $meta-item-border-radius;
+  height: 16px + (3px * 2);
   padding-left: 3px;
+  padding-right: 3px;
   width: 16px + (3px * 2);
-  height: 16px + (3px * 2);
 
   .meta-award-nomination-icon {
     @extend .fa;
@@ -36,4 +36,4 @@
 
     font-size: 1rem;
   }
-}
+}

package/site/styles/_bootstrap4.scss

@@ -34,3 +34,93 @@
 @import 'bootstrap/scss/tooltip';
 @import 'bootstrap/scss/popover';
 @import 'bootstrap/scss/utilities';
+
+// The following override classes are to get around Bootstrap 4's use of Sass variables.
+// CSS themes will not work without these hacks.
+
+.btn-primary-override {
+  @extend .btn-primary;
+  border-color: $button-background;
+
+  color: $button-text-color;
+
+  @include hover() {
+    border-color: $button-background-hover;
+    color: $button-text-color-hover;
+  }
+
+  &:focus,
+  &.focus {
+    border-color: $button-background-hover;
+    color: $button-text-color-hover;
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5));
+    } @else {
+      box-shadow: 0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5);
+    }
+  }
+
+  &.disabled,
+  &:disabled {
+    background-color: $button-background;
+    border-color: $button-background;
+    color: $button-text-color;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    background-color: $button-background-hover;
+    border-color: $button-background-hover;
+    color: $button-text-color-hover;
+
+    &:focus {
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        @include box-shadow(
+          $btn-active-box-shadow,
+          0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5)
+        );
+      } @else {
+        box-shadow: 0 0 0 $btn-focus-width rgba(var(--primary-rgb), 0.5);
+      }
+    }
+  }
+}
+
+.btn-link-override {
+  @extend .btn-link;
+
+  color: var(--link-color);
+
+  @include hover() {
+    color: var(--link-color-hover);
+  }
+}
+
+a {
+  @extend a;
+
+  color: var(--link-color);
+
+  @include hover() {
+    color: var(--link-color-hover);
+  }
+}
+
+.dropdown-item-override {
+  @extend .dropdown-item;
+
+  &.active,
+  &:active {
+    background-color: transparent;
+  }
+}
+
+.list-group-item-override {
+  @extend .list-group-item;
+
+  &.active {
+    background-color: var(--primary);
+    border-color: var(--primary);
+  }
+}

package/site/styles/_buttons.scss

@@ -25,7 +25,7 @@
   @include hover-focus {
     background: $signin-background-hover;
     border: 3px solid $signin-border-color-hover;
-    color: $body-color;
+    color: var(--body-color);
   }
   @include media-breakpoint-up(lg) {
     background-color: $signin-background-lg;
@@ -115,8 +115,8 @@
     background: transparent;
 
     .s72-icon-play circle {
-      fill: $primary;
-      stroke: $primary;
+      fill: var(--primary);
+      stroke: var(--primary);
       stroke-width: 3px;
     }
 
@@ -136,7 +136,7 @@
 
     .verb {
       background: transparent;
-      color: $primary;
+      color:var(--primary);
     }
   }
 
@@ -152,13 +152,13 @@
 
     circle {
       fill: transparent;
-      stroke: $primary;
+      stroke: var(--primary);
       stroke-width: 3px;
     }
 
     path {
-      fill: $body-color;
-      stroke: $body-color;
+      fill: var(--body-color);
+      stroke: var(--body-color);
     }
   }
 
@@ -168,6 +168,7 @@
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
     font-size: 12px;
+    font-weight: $font-weight-bold;
     margin-left: 0;
     padding-bottom: 0;
     padding-left: 8px;
@@ -215,7 +216,7 @@
   .s72-btn-wishlist {
     background: transparent;
     border: 0 none;
-    color: $body-color;
+    color: var(--body-color);
     font-size: 14px;
 
     .s72-icon-loading,

package/site/styles/_can-be-watched-button.scss

@@ -24,8 +24,10 @@
 
 .meta-detail-content .meta-detail-buttons,
 .meta-item-buttons {
+  align-items: center;
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
 
   .owned-custom-container {
     display: none;

package/site/styles/_card.scss

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

package/site/styles/_carousel.scss

@@ -7,29 +7,29 @@ s72-carousel {
 
 .s72-carousel-slides {
   background: $carousel-bg-color;
-  height: $carousel-height !important;
+  height: var(--carousel-height) !important;
   overflow: hidden;
   position: relative;
   width: 100%;
   @include media-breakpoint-up(sm) {
-    height: $carousel-height-sm !important;
+    height: var(--carousel-height-sm) !important;
   }
   @include media-breakpoint-up(md) {
-    height: $carousel-height-md !important;
+    height: var(--carousel-height-md) !important;
   }
 
   s72-image {
     float: right;
-    height: $carousel-height;
+    height: var(--carousel-height);
     max-width: 1600px;
     overflow: hidden;
     position: relative;
     width: 100%;
     @include media-breakpoint-up(sm) {
-      height: $carousel-height-sm;
+      height: var(--carousel-height-sm);
     }
     @include media-breakpoint-up(md) {
-      height: $carousel-height-md;
+      height: var(--carousel-height-md);
     }
 
     &::before {
@@ -51,15 +51,15 @@ s72-carousel {
     }
 
     img {
-      height: $carousel-height;
+      height: var(--carousel-height);
       margin-left: 50%;
       transform: translateX(-50%);
 
       @include media-breakpoint-up(sm) {
-        height: $carousel-height-sm;
+        height: var(--carousel-height-sm);
       }
       @include media-breakpoint-up(md) {
-        height: $carousel-height-md;
+        height: var(--carousel-height-md);
         width: auto;
       }
     }
@@ -102,25 +102,25 @@ s72-carousel {
   left: 0;
   padding: 0 20px;
   position: absolute;
-  top: $carousel-caption-top;
+  top: var(--carousel-caption-top);
   z-index: 999;
   @include media-breakpoint-up(md) {
     left: 60px;
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 70%;
   }
   @include media-breakpoint-up(lg) {
     left: 70px;
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 70%;
   }
   @include media-breakpoint-up(xl) {
     left: 120px;
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 50%;
   }
   @include media-breakpoint-up(xxxl) {
-    top: $carousel-caption-top-md;
+    top: var(--carousel-caption-top-md);
     width: 50%;
   }
 
@@ -135,7 +135,7 @@ s72-carousel {
     }
 
     .availability-state {
-      color: $body-color;
+      color: var(--body-color);
       font-size: 12px;
       text-transform: none;
     }
@@ -145,7 +145,7 @@ s72-carousel {
     color: #fff;
 
     h3 {
-      color: $body-color;
+      color: var(--body-color);
       font-size: 28px;
       font-weight: $font-weight-bold;
       margin-bottom: 0;
@@ -162,7 +162,7 @@ s72-carousel {
     }
 
     h4 {
-      background: $primary;
+      background: var(--primary);
       color: #000;
       display: inline-block;
       font-size: 6px;
@@ -186,7 +186,7 @@ s72-carousel {
     }
 
     .meta-item-tagline {
-      color: rgba($body-color, 0.8);
+      color: rgba(var(--body-color-rgb), 0.8);
       font-size: 14px;
       font-weight: $font-weight-normal;
       @include media-breakpoint-up(xxxl) {
@@ -212,7 +212,6 @@ s72-carousel {
 
     .meta-item-extras {
       @extend .d-flex;
-      padding: 0 0 20px;
     }
 
     .btn-wishlist {
@@ -220,18 +219,34 @@ s72-carousel {
     }
   }
 
-  .s72-pricing-button-container {
-    .s72-btn {
+  // Purchase, play, trailer, wishlist and share are all in one group now
+  // Need similar bootstrap approach of handling/wrapping rows and columns via negative margin
+  .meta-item-buttons {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+
+    /* stylelint-disable selector-max-compound-selectors */
+    s72-pricing-buttons .s72-btn,
+    .meta-detail-extras,
+    .meta-item-extras,
+    s72-play-button,
+    can-be-watched-button:not(:empty) {
       margin-bottom: 10px;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+    }
 
+    // Handles spacing when there is only rent, only buy, or only play button
+    s72-pricing-buttons .s72-btn,
+    s72-play-button {
       &:nth-child(1) {
-        margin-right: 0.5rem;
+        margin-right: 0;
       }
-
-      &:nth-child(2) {
-        margin-left: 0;
+      &:only-child {
+        margin-right: 0.5rem;
       }
     }
+    /* stylelint-enable selector-max-compound-selectors */
   }
 
   .s72-btn-play {
@@ -251,13 +266,13 @@ s72-carousel {
   transform: translateX(-50%);
 
   .s72-carousel-page {
-    color: rgba($body-color, 0.2);
+    color: rgba(var(--body-color-rgb), 0.2);
     @include media-breakpoint-up(md) {
       margin: 0 5px;
     }
 
     &.current {
-      color: $primary;
+      color: var(--primary);
     }
 
     .fa {
@@ -285,7 +300,7 @@ s72-carousel {
   z-index: 6;
   @include media-breakpoint-down(sm) {
     :hover {
-      color: $primary;
+      color: var(--primary);
     }
 
     :active {

package/site/styles/_collections.scss

@@ -64,7 +64,7 @@
     .poster {
       .hover {
         @extend .d-flex;
-        background: rgba($body-bg, 0.8);
+        background: rgba(var(--body-bg-rgb), 0.8);
         bottom: 0;
         flex-direction: column;
         justify-content: space-between;
@@ -137,7 +137,7 @@
 
           .titles {
             h4 {
-              color: $body-color;
+              color: var(--body-color);
               font-size: 18px;
               font-weight: $font-weight-normal;
               margin: 0;
@@ -149,7 +149,7 @@
             }
 
             .meta-item-tagline {
-              color: $body-color;
+              color: var(--body-color);
               display: inline-block;
               font-weight: $font-weight-normal;
               margin: 0;
@@ -192,7 +192,7 @@
 
           .synopsis {
             p {
-              color: $body-color;
+              color: var(--body-color);
               font-size: 12px;
               line-height: 14px;
               margin-bottom: 0;

package/site/styles/_cookie-consent.scss

@@ -14,5 +14,5 @@
 }
 
 .s72-btn-cookie-consent {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
 }

package/site/styles/_devices.scss

@@ -7,7 +7,7 @@
 }
 
 .s72-userdevices-device {
-  @extend .list-group-item;
+  @extend .list-group-item-override;
 }
 
 .s72-userdevices-device-type {
@@ -42,7 +42,7 @@
 
 .s72-btn-userdevices-confirm,
 .s72-btn-userdevices-delete {
-  @extend .btn-primary;
+  @extend .btn-primary-override;
   @extend .btn-sm;
 }
 
@@ -56,6 +56,6 @@
 }
 
 .s72-btn-userdevices-cancel {
-  @extend .btn-link;
+  @extend .btn-link-override;
   @extend .btn-sm;
 }