@shift72/core-template 0.4.4 → 0.5.0

package/site/styles/_awards.scss

@@ -1,6 +1,8 @@
 .meta-awards {
   @extend .d-flex;
   @extend .align-items-center;
+  margin-left: -25px;
+  margin-right: -25px;
 
   &.meta-awards-all {
     @extend .align-items-start;
@@ -8,6 +10,9 @@
 
   .meta-award-nomination {
     @extend .d-flex;
+    max-width: 370px;
+    padding-right: 25px;
+    padding-left: 25px;
   }
 
   .meta-award-nomination-icon {

package/site/styles/_buttons.scss

@@ -244,3 +244,26 @@
     border-color: $gray-200;
   }
 }
+
+s72-donate-button:not(:empty) {
+   &:hover a {
+    background-color: $button-background-hover;
+    color: $button-text-color-hover;
+    /* stylelint-disable selector-max-compound-selectors */
+    svg {
+      g {
+        fill: $button-text-color-hover;
+      }
+    }
+    /* stylelint-enable selector-max-compound-selectors */
+  }
+  a {
+    color: $button-text-color;
+    background-color: $button-background;
+  }
+  svg {
+    g {
+      fill: $button-text-color;
+    }
+  }
+}

package/site/styles/_carousel.scss

@@ -8,7 +8,6 @@ s72-carousel {
 .s72-carousel-slides {
   background: $carousel-bg-color;
   height: var(--carousel-height) !important;
-  overflow: hidden;
   position: relative;
   width: 100%;
   @include media-breakpoint-up(sm) {
@@ -64,6 +63,10 @@ s72-carousel {
       }
     }
   }
+
+  .s72-pricing-button-container {
+    white-space: nowrap;
+  }
 }
 
 .s72-carousel-item {
@@ -104,6 +107,11 @@ s72-carousel {
   position: absolute;
   top: var(--carousel-caption-top);
   z-index: 999;
+  @include media-breakpoint-up(xs) {
+    left: 60px;
+    top: var(--carousel-caption-top-xs);
+    width: 70%;
+  }
   @include media-breakpoint-up(md) {
     left: 60px;
     top: var(--carousel-caption-top-md);

package/site/styles/_forms.scss

@@ -1,7 +1,8 @@
 label {
-  font-size: 14px;
-  font-weight: $font-weight-normal;
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
 }
+
 // Form Container Defaults
 s72-signin-form,
 s72-signup-form,
@@ -37,11 +38,11 @@ s72-activatedevice-form,
     }
 
     .s72-form-group-password {
-      padding-right: $grid-gutter-width / 2;
+      padding-right: 2px;
     }
 
     .s72-form-group-password2 {
-      padding-left: $grid-gutter-width / 2;
+      padding-left: 2px;
     }
   }
 }
@@ -61,10 +62,12 @@ s72-activatedevice-form,
 // Error Messaging
 .s72-error-message {
   background: $error-background;
+  border-radius: $border-radius;
   color: $error-color;
-  font-weight: $font-weight-normal;
+  font-size: 0.875rem;
+  letter-spacing: 0.02em;
   margin-top: 10px;
-  padding: 5px 8px;
+  padding: 4px 8px;
   position: relative;
 
   &::before {
@@ -88,20 +91,41 @@ s72-activatedevice-form,
   .s72-datepicker-year {
     flex-shrink: 0;
   }
+  .s72-datepicker-month {
+    margin: 0 4px;
+    width: 100%;
+  }
 }
 // Form Control Default
 .s72-form-control {
   font-weight: $font-weight-normal;
+  height: var(--input-height);
+
+  /* stylelint-disable-next-line */
+  &:not(.StripeElement) {
+    background-color: $body-bg-accent;
+    border-color: rgba(var(--body-color-rgb), 0.1);
+    color: var(--body-color);
+    &:focus {
+      border-color: $input-focus-border-color;
+      color: var(--body-color);
+    }
+    &::placeholder {
+      color: rgba(var(--body-color-rgb), 0.8);
+    }
+  }
 }
 // Account Page Change Password Field
 .s72-form-control-static {
-  background: rgba(var(--body-color-rgb), 0.1);
-  border-radius: 6px 0 0 6px;
+  background: $body-bg-accent;
   color: var(--body-color);
+  cursor: not-allowed;
   display: inline-block;
-  font-size: 30px;
-  line-height: 34px;
-  padding: 0.375rem 0.75rem 0 0.75em;
+  font-size: 1rem;
+  height: var(--input-height);
+  line-height: 1rem;
+  outline: none;
+  padding: 0.375rem 0.75rem;
 }
 .s72-modal-sm .s72-modal-dialog {
   max-width: 400px;
@@ -116,6 +140,9 @@ s72-activatedevice-form,
       }
     }
   }
+  .s72-form-control {
+    height: var(--input-height);
+  }
 }
 
 .s72-modal-closable {
@@ -195,3 +222,43 @@ s72-signup-form {
     margin-bottom: 1rem;
   }
 }
+
+// Error
+.was-validated .form-control:invalid,
+.was-validated .s72-form-control:invalid,
+.was-validated .s72-pincode:invalid,
+.form-control.is-invalid,
+.s72-has-error .form-control,
+.is-invalid.s72-form-control,
+.is-invalid.s72-pincode,
+.s72-has-error .s72-form-control,
+.s72-has-error .s72-pincode {
+  border: 2px solid rgba(var(--body-color-rgb), 0.5) !important;
+  box-shadow: none !important;
+}
+
+// Stripe Inputs
+.s72-payment-option-group {
+  .existing-card {
+    padding: 0.125rem 0 0.125rem 0.75rem;
+  }
+  // List of Saved Cards
+  .s72-form-control.existing-card.selectable {
+    background-color: transparent;
+    border-color: transparent;
+    margin-bottom: 12px;
+    padding-left: 0;
+    &:hover {
+      background-color: transparent;
+    }
+
+    /* stylelint-disable selector-no-qualifying-type */
+    i.fa.fa-trash {
+      color: $error-color;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+    /* stylelint-enable selector-no-qualifying-type */
+  }
+}

package/site/styles/_meta-detail.scss

@@ -201,7 +201,6 @@
     .meta-detail-extras,
     s72-play-button,
     can-be-watched-button:not(:empty) {
-
       animation: fadein 2s;
       margin-left: 0.5rem;
       margin-right: 0.5rem;
@@ -245,7 +244,8 @@
     }
   }
 
-  .meta-detail-synopsis {
+  .meta-detail-synopsis,
+  .meta-detail-switcher-tagline {
     padding-top: 10px;
 
     p {

package/site/styles/_meta-item-tagline.scss

@@ -7,7 +7,7 @@
 
   .meta-item-tagline-item,
   .meta-item-tagline-divider {
-    @extend .list-inline-item;
+    @extend .d-inline;
 
     &:not(:last-child) {
       margin-right: map-get($spacers, 1); // Currently 0.25rem

package/site/styles/_nav.scss

@@ -311,7 +311,7 @@
     }
 
     &::placeholder {
-      color: rgba($color: var(--body-color-rgb), $alpha: 0.8);
+      color: rgba(var(--body-color-rgb), 0.8);
       font-weight: $font-weight-normal;
       opacity: 0;
       transition: 0.25s ease-out;
@@ -396,7 +396,7 @@
     background: transparent;
     border: 0;
     border-radius: 50%;
-    color: rgba($color: var(--body-color-rgb), $alpha: 0.7);
+    color: rgba(var(--body-color-rgb), 0.7);
     height: 32px;
     opacity: 0;
     pointer-events: none;
@@ -413,7 +413,7 @@
     &:hover,
     &:focus,
     &:active {
-      color: rgba($color: var(--body-color-rgb), $alpha: 1);
+      color: rgba(var(--body-color-rgb), 1);
       outline: 0;
     }
   }
@@ -701,7 +701,7 @@ s72-dropdown,
 
   s72-user-known,
   s72-user-anon {
-    border-top: 1px solid rgba($color: var(--body-color-rgb), $alpha: 0.1);
+    border-top: 1px solid rgba(var(--body-color-rgb), 0.1);
 
     @include media-breakpoint-up(lg) {
       border: 0;
@@ -710,7 +710,7 @@ s72-dropdown,
   }
 
   hr {
-    border-top: 1px solid rgba($color: var(--body-color-rgb), $alpha: 0.1);
+    border-top: 1px solid rgba(var(--body-color-rgb), 0.1);
     display: none;
     margin: 0 15px 5px;
 
@@ -809,7 +809,7 @@ s72-dropdown,
 }
 
 .vertical-line {
-  border-left: solid 1px rgba($color: var(--body-color-rgb), $alpha: 0.5);
+  border-left: solid 1px rgba(var(--body-color-rgb), 0.5);
   display: none;
   height: 25px;
   margin: 0 12px;

package/site/styles/_pages.scss

@@ -104,10 +104,8 @@
 .curated-page {
   .page-content {
     max-width: 1100px;
-    min-height: 220px;
     padding: 20px 20px 0;
     @include media-breakpoint-up(lg) {
-      min-height: 600px;
       padding: 20px 50px 0;
     }
 

package/site/styles/_plans.scss

@@ -70,6 +70,11 @@ s72-plan-label {
 }
 
 .curated-plan-page {
+  // Fix some spacing under the h1
+  h1 {
+    line-height: 1;
+  }
+
   // Hide the separator if this is a curated collection page
   + .separator {
     @extend .border-0;

package/site/styles/_search.scss

@@ -62,5 +62,5 @@
 
 .s72-form-search {
   margin: 0 auto 1rem;
-  max-width: map-get($container-max-widths, md);
+  max-width: 460px;
 }

package/site/styles/_shift72.scss

@@ -224,7 +224,7 @@
   @extend .form-control-plaintext;
 
   .form-page & {
-    color: var(--body-color);
+    color: rgba(var(--body-color-rgb), 0.5);
   }
 }
 
@@ -232,7 +232,7 @@
 .s72-readonly-text .s72-form-control-readonly {
   @extend .py-0;
   border: 1px solid transparent;
-  border-radius: $border-radius !important;
+  border-radius: $border-radius;
 
   font-size: unset;
 }
@@ -240,7 +240,7 @@
 s72-useraccount-form {
   .s72-form-control-readonly {
     @extend .s72-form-control-static;
-    border-radius: 6px !important;
+    border-radius: $border-radius;
   }
 
   .s72-account-password-form-group,

package/site/styles/_shopping.scss

@@ -87,7 +87,7 @@
   }
 
   .s72-btn-combined-auth-change {
-    border-radius: 0 6px 6px 0;
+    border-radius: 0 4px 4px 0;
     text-transform: capitalize;
   }
 }

package/site/styles/_skip-link.scss

@@ -0,0 +1,19 @@
+.skip-link {
+  align-items: center;
+  background-color: var(--body-bg-accent);
+  border: 2px dashed var(--body-color);
+  color: var(--body-color);
+  display: flex;
+  height: 80px;
+  justify-content: center;
+  left: -9999px;
+  outline: none;
+  position: absolute;
+  text-decoration: underline;
+  width: 100%;
+  z-index: 12;
+  &:focus {
+    left: 0;
+    position: fixed;
+  }
+}

package/site/styles/_variables.scss

@@ -21,16 +21,19 @@
   --link-color-hover: rgb(var(--link-color-hover-rgb));
   --input-focus-border-color: rgb(var(--input-focus-border-color-rgb));
 
+  --input-height: 40px;
+
   --navbar-brand-padding-y: 25px;
   --navbar-brand-min-width: 126px;
   --navbar-brand-min-width-md: 126px;
   --navbar-brand-min-width-lg: 126px;
   --navbar-brand-min-width-xl: 126px;
 
-  --carousel-height: 470px;
-  --carousel-height-sm: 470px;
+  --carousel-height: 560px;
+  --carousel-height-sm: 560px;
   --carousel-height-md: 620px;
-  --carousel-caption-top: 150px;
+  --carousel-caption-top: 125px;
+  --carousel-caption-top-xs: 150px;
   --carousel-caption-top-md: 175px;
 
   --page-padding-top: 120px;
@@ -105,12 +108,13 @@ $spacers: (
   // 40px
   '5': $spacer * 5,
   // 50px
+  '1rem': 1rem
 );
 
 // Cookie Consent
-$cookie-consent-color: #000;
-$cookie-consent-link-color: var(--primary);
-$cookie-consent-hover-link-color: var(--secondary);
+$cookie-consent-color: #000 !default;
+$cookie-consent-link-color: var(--primary) !default;
+$cookie-consent-hover-link-color: var(--secondary) !default;
 
 // Nav
 // ------------------------------------

package/site/styles/_wishlist.scss

@@ -26,19 +26,8 @@
 .s72-userwishlist-buttons {
   .s72-btn-wishlist {
     @extend .btn;
-    font-size: 12px;
-    font-weight: $font-weight-bold;
-    margin-right: 0.5rem;
-    padding-bottom: 3px;
     padding-left: 0;
-    padding-top: 3px;
 
-    span {
-      @extend .d-flex;
-      align-items: center;
-      flex-direction: row;
-      justify-content: center;
-    }
 
     .s72-icon {
       font-size: 32px !important;
@@ -47,6 +36,25 @@
   }
 }
 
+.s72-userwishlist-buttons .s72-btn-wishlist,
+.meta-award-nomination {
+  font-size: 12px;
+  font-weight: $font-weight-bold;
+
+  span {
+    @extend .d-flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+  }
+}
+
+.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

@@ -12,6 +12,7 @@
 @import '_forms';
 @import '_card';
 
+@import '_skip-link';
 @import '_nav';
 
 @import '_swiper';

package/site/templates/application/application.jet

@@ -21,8 +21,11 @@
     <link rel="manifest" href="/manifest.json">
     <link rel="preload" href="/{{lang.DefinitionFilePath}}" as="fetch" crossorigin type="application/json">
     <link rel="preload" href="/classifications.all.json" as="fetch" crossorigin type="application/json">
-    <!-- Kibble:{{ version }} -->
-    <!-- Template:{{site.SiteConfig.Version}} -->
+    <!-- Kibble: {{version}} -->
+    {{if site.SiteConfig.CoreTemplateVersion != ""}}
+      <!-- Core-Template: {{site.SiteConfig.CoreTemplateVersion}} -->
+    {{end}}
+    <!-- Template: {{site.SiteConfig.Version}} -->
     <link rel="stylesheet" href="{{CDN}}/s72.ui.css">
     <link rel="stylesheet" href="{{CDN}}/s72.transactional.css">
     <link rel="stylesheet" href="/styles/swiper.css">
@@ -62,21 +65,15 @@
     </script>
 
     <script type="text/javascript" src="/scripts/swiper.min.js"></script>
+
+    {{yield googleGa4Script()}}
   </head>
   <body>
-    <s72-cookie-consent></s72-cookie-consent>
 
-    <section class="sr-only">
-      <h2>{{i18n("wcag_skip_links_header")}}</h2>
-      <ul>
-        <li>
-          <a href="#main">{{i18n("wcag_skip_links_content")}}</a>
-        </li>
-        <li>
-          <a href="#footer">{{i18n("wcag_skip_links_footer")}}</a>
-        </li>
-      </ul>
-    </section>
+    <h2 class="sr-only">{{i18n("wcag_skip_links_header")}}</h2>
+    <a class="skip-link" href="#main">{{i18n("wcag_skip_links_content")}}</a>
+
+    <s72-cookie-consent></s72-cookie-consent>
 
     {{yield googleTagManagerNoScript()}}
 

package/site/templates/application/google.jet

@@ -1,3 +1,10 @@
+{{block googleGa4Script(analyticsId=config("google_analytics_id"))}}
+  {{if hasPrefix(analyticsId,"G")}}
+  <!-- GA4 script if G tracking code is provided -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{analyticsId}}"></script>
+  {{end}}
+{{end}}
+
 {{block googleScripts(tagManagerId=config("google_tag_manager_id"), analyticsId=config("google_analytics_id"))}}
   <!-- Google integration scripts -->
   <script>
@@ -9,17 +16,27 @@
       })(window,document,'script','dataLayer','{{ tagManagerId }}')
     }
 
+    <!-- GA4 code snippet if G tracking code is provided, else use legacy UA code snippet -->
+    {{if hasPrefix(analyticsId,"G")}}
+      function loadGoogleAnalytics() {
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
 
-    function loadGoogleAnalytics() {
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+        gtag('config', '{{analyticsId}}');
+      }
+    {{else}}
+      function loadGoogleAnalytics() {
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
-      ga('create', '{{analyticsId}}', 'auto');
-      ga('require', 'ecommerce');
-      ga('send', 'pageview');
-    }
+        ga('create', '{{analyticsId}}', 'auto');
+        ga('require', 'ecommerce');
+        ga('send', 'pageview');
+      }
+    {{end}}
 
     // Only load Google Tag Manager if a/ the frontend cookie consent isn't required or b/ they've agreed to the cookie consent
     var googleTagManagerEnabled = {{ (len(tagManagerId) > 0) ? "true" : "false" }};
@@ -51,4 +68,3 @@
   <!-- End Google Tag Manager (noscript) -->
   {{end}}
 {{end}}
-

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

@@ -1,9 +1,15 @@
 {{block awardsCarousel()}}
   {{ if isset(.AwardCategories) && (len(.AwardCategories) > 0) }}
+
+    {{award_winner := false}}
+    {{ range .AwardCategories }}
+      {{ if .IsWinner}}{{award_winner = true}}{{end}}
+    {{ end }}
+
     <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>
+        <span>{{ i18n("awards_in_competition") }}{{award_winner ? " - " + i18n("awards_winner") : ""}}</span>
       </div>
     </div>
   {{ end }}

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

@@ -2,9 +2,9 @@
   {{ 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">
+      <div class="meta-award-nomination mb-3 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">{{ .IsWinner ? i18n("awards_winner_of") : i18n("awards_nominated_for") }} {{ .DisplayLabel }}</span>
+        <span>{{ .DisplayLabel }}</span>
       </div>
     {{ end }}
     </div>