@shift72/core-template 0.4.4 → 0.6.0-alpha.0

package/site/styles/_poster.scss

@@ -6,14 +6,9 @@
   width: 100%;
   z-index: 1;
 
-  s72-availability-status {
-    left: $meta-item-availability-tag-margin;
-    top: $meta-item-availability-tag-margin;
-  }
-
-  s72-availability-label {
-    bottom: $meta-item-availability-tag-margin;
-    left: $meta-item-availability-tag-margin;
+  s72-availability-status,
+  s72-plan-label {
+    color: $button-text-color;
   }
 
   .poster-overlay-top {
@@ -21,7 +16,6 @@
     @extend .justify-content-between;
     @extend .position-absolute;
 
-    @extend .p-p5;
     @extend .mw-100;
     width: 100%;
 

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/_share-modal.scss

@@ -0,0 +1,86 @@
+s72-share-modal .fa-share-alt {
+  font-size: 20px;
+}
+
+.s72-share-modal {
+  .s72-modal-dialog {
+    @extend .p-0;
+    max-width: 320px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include media-breakpoint-up(sm) {
+      top: 90px;
+      transform: none;
+    }
+    .s72-modal-content {
+      @extend .p-0;
+    }
+  }
+
+  .modal-header {
+    border-bottom: 1px solid rgba(var(--body-color-rgb), 0.2);
+  }
+
+  .modal-title {
+    color: var(--body-color);
+    word-break: break-word;
+  }
+
+  .s72-modal-content {
+    background: none;
+  }
+
+  .modal-content {
+    background-color: var(--body-bg);
+    border: 0;
+  }
+
+  ul {
+    @extend .mb-0;
+  }
+
+  li {
+    @extend .list-unstyled;
+    @extend .position-relative;
+    i {
+      @extend .position-absolute;
+      font-size: 20px;
+      left: -30px;
+    }
+  }
+
+  a {
+    @extend .d-flex;
+    @extend .align-items-center;
+    color: var(--body-color);
+    padding: 0.7rem 0;
+    text-decoration: inherit;
+    word-break: break-word;
+
+    &:hover {
+      color: var(--link-color-hover);
+    }
+  }
+
+  [type='button'] {
+    // for testers on their ipod touch
+    appearance: none;
+  }
+
+  .close {
+    align-self: center;
+    color: var(--body-color);
+    opacity: 1;
+    text-shadow: none;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+// Close gap if wishlist button isn't present
+s72-userwishlist-button:empty + .social-media-buttons {
+  margin-left: -10px;
+}

package/site/styles/_shift72.scss

@@ -9,10 +9,17 @@
   .s72-icon {
     margin-left: 0.3em;
   }
+
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
 }
 
+// exists once in <s72-searchresults/>
 .s72-btn-search {
   @extend .btn-primary-override;
+  font-size: 24px;
+  line-height: 0;
 }
 
 .s72-btn-purchase {
@@ -224,7 +231,7 @@
   @extend .form-control-plaintext;
 
   .form-page & {
-    color: var(--body-color);
+    color: rgba(var(--body-color-rgb), 0.5);
   }
 }
 
@@ -232,7 +239,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 +247,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

@@ -17,7 +17,6 @@
       display: block;
       height: 30px;
       line-height: 30px;
-      opacity: 1;
       position: absolute;
       right: 0;
       text-shadow: none;
@@ -87,7 +86,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/_tooltips.scss

@@ -0,0 +1,7 @@
+.s72-tooltip {
+  display: none;
+
+  @include media-breakpoint-up(lg) {
+    display: block;
+  }
+}

package/site/styles/_variables.scss

@@ -1,11 +1,11 @@
-@use "sass:math";
+@use 'sass:math';
 
 // This file contains any variables used by the site.
 // These variables should be reasonably generic so that overrides are placed in main.scss.
 
 :root {
-  --primary-rgb: 53, 160, 168;
-  --secondary-rgb: 76, 211, 221;
+  --primary-rgb: 0, 163, 255;
+  --secondary-rgb: 102, 199, 255;
   --body-color-rgb: 255, 255, 255;
   --body-bg-rgb: 15, 15, 15;
   --body-bg-accent-rgb: 25, 25, 25; // darken(body-bg, 10%) OR lighten(body-bg, 10%)
@@ -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;
@@ -95,6 +98,8 @@ $spacers: (
   // 7.5px
   '1': $spacer,
   // 10px
+  '1p5': $spacer * 1.5,
+  // 15px
   '2': $spacer * 2,
   // 20px
   '2p5': $spacer * 2.5,
@@ -105,12 +110,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
 // ------------------------------------
@@ -133,8 +139,8 @@ $subnav-nav-item-active-background-color: var(--primary) !default;
 $subnav-dropdown-background: var(--body-bg-accent) !default;
 
 // Buttons
-$button-text-color: var(--body-color) !default;
-$button-text-color-hover: var(--body-color) !default;
+$button-text-color: var(--body-bg) !default;
+$button-text-color-hover: var(--body-bg) !default;
 $button-background: var(--primary) !default;
 $button-background-hover: var(--secondary) !default;
 $trailer-button-text-color: var(--body-color) !default;
@@ -186,11 +192,10 @@ $letterboxd-color: var(--body-color) !default;
 
 // Meta Items
 // ------------------------------------
-$meta-item-border-radius: 3px !default;
+$meta-item-border-radius: 4px !default;
 $featured-meta-item-body-padding: 10px !default;
 $meta-item-body-color: var(--body-color) !default;
 $meta-item-tagline-classification-border-radius: $meta-item-border-radius !default;
-$meta-item-availability-tag-margin: 5px !default;
 
 // Posters
 // ------------------------------------

package/site/styles/_wishlist.scss

@@ -26,27 +26,35 @@
 .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;
+      font-size: 28px !important;
       opacity: 0.8;
+      padding: 2px 0;
     }
   }
 }
 
+.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

@@ -4,7 +4,6 @@
 @import '_mixins';
 @import '_globals';
 @import '_shift72';
-@import 'font-awesome/scss/font-awesome';
 
 @import '_icons';
 @import '_buttons';
@@ -12,6 +11,7 @@
 @import '_forms';
 @import '_card';
 
+@import '_skip-link';
 @import '_nav';
 
 @import '_swiper';
@@ -36,7 +36,7 @@
 @import '_devices';
 @import '_gradients';
 
-@import '_social-media-buttons';
+@import '_share-modal';
 @import '_cookie-consent';
 @import '_pin-codes';
 @import '_language-selector';
@@ -46,6 +46,8 @@
 
 @import '_awards';
 
+@import '_tooltips';
+
 @import '_legacy';
 
 // @import local must be last in this file.

package/site/subscriptions.html.jet

@@ -0,0 +1,11 @@
+{{extends "templates/application/application.jet"}}
+
+{{block head()}}
+  {{yield seo(title=i18n("usersubscriptions_page_header"), index=false)}}
+{{end}}
+
+{{block body()}}
+  <div class="page form-page usersubscriptions-page">
+    <s72-usersubscription></s72-usersubscription>
+  </div>
+{{end}}

package/site/templates/application/application.jet

@@ -21,8 +21,13 @@
     <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}} -->
+    <link rel="preload" href="/urlmap.json" as="fetch" crossorigin type="application/json">
+
+    <!-- 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">
@@ -64,19 +69,11 @@
     <script type="text/javascript" src="/scripts/swiper.min.js"></script>
   </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

@@ -2,24 +2,36 @@
   <!-- Google integration scripts -->
   <script>
     function loadGoogleTagManager() {
-      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-      })(window,document,'script','dataLayer','{{ tagManagerId }}')
-    }
+      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
+      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(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() {
+        (function(d, googleId){var f = d.getElementsByTagName('script')[0];var s = d.createElement('script');
+        s.src = 'https://www.googletagmanager.com/gtag/js?id=' + googleId;s.async = true;f.parentNode.insertBefore(s,f);
+        }(document,'{{analyticsId}}'));
 
-    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');
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
 
-      ga('create', '{{analyticsId}}', 'auto');
-      ga('require', 'ecommerce');
-      ga('send', 'pageview');
-    }
+        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');
+      }
+    {{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 +63,3 @@
   <!-- End Google Tag Manager (noscript) -->
   {{end}}
 {{end}}
-

package/site/templates/application/nav/user_logged_in.jet

@@ -3,8 +3,8 @@
     <s72-dropdown class="navbar-nav-user-nav">
       <div>
         <a href="#" class="s72-btn s72-dropdown-toggle">
-          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="user-icon" width="24" height="24" x="0px" y="0px" viewBox="-241 245 24 24" xml:space="preserve">
-            <path d="M-231,247c-5.5,0-10,4.5-10,10c0,5.5,4.5,10,10,10s10-4.5,10-10C-221,251.5-225.5,247-231,247 M-224.6,261.8c-1.4-1.7-4.9-2.3-6.4-2.3s-4.9,0.6-6.4,2.3c-1-1.3-1.6-3-1.6-4.8c0-4.4,3.6-8,8-8s8,3.6,8,8C-223,258.8-223.6,260.5-224.6,261.8M-231,251c-1.9,0-3.5,1.6-3.5,3.5s1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5S-229.1,251-231,251"/>
+          <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 5C13.66 5 15 6.34 15 8C15 9.66 13.66 11 12 11C10.34 11 9 9.66 9 8C9 6.34 10.34 5 12 5ZM12 19.2C9.5 19.2 7.29 17.92 6 15.98C6.03 13.99 10 12.9 12 12.9C13.99 12.9 17.97 13.99 18 15.98C16.71 17.92 14.5 19.2 12 19.2Z"/>
           </svg>
           <s72-username class="username-mobile"></s72-username>
         </a>
@@ -26,6 +26,11 @@
         <li>
           <a class="s72-dropdown-item" href="{{ routeToPath("/devices.html") }}">{{i18n("nav_devices")}}</a>
         </li>
+        {{if config("account_show_plans") == "true" }}
+          <li>
+            <a class="s72-dropdown-item" href="{{ routeToPath("/subscriptions.html") }}">{{i18n("nav_subscriptions")}}</a>
+          </li>
+        {{ end }}
         <li>
           <a class="s72-dropdown-item" href="{{ routeToPath("/account.html") }}">{{i18n("nav_account")}}</a>
         </li>

package/site/templates/collection/carousel_item.jet

@@ -1,5 +1,6 @@
 {{import "../items/tagline.jet"}}
 {{import "../common/awards/carousel.jet"}}
+{{import "../common/sponsor-image.jet"}}
 
 {{block carouselItem(item)}}
   {{ trailer := "" }}
@@ -19,6 +20,9 @@
 
       {{if !isset(item["PageType"]) || item.PageType != "external"}}
         <div class="carousel-item-caption">
+          {{if item.ItemType == "film"}}
+            {{yield sponsor(hideLink="true") item.InnerItem}}
+          {{end}}
           <div class="meta-item-content">
             <h3>{{item.GetTitle(i18n)}}
               {{if isset(item.InnerItem["ReleaseDate"]) && item.InnerItem.ReleaseDate.Year() > 1}}
@@ -28,7 +32,7 @@
             <div class="meta-item-tagline-and-classification">
               {{yield metaItemTagline() item.InnerItem}}
             </div>
-
+            <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
             <div class="meta-item-buttons">
               <s72-play-button data-slug="{{item.Slug}}"></s72-play-button>
               <s72-pricing-buttons data-slug="{{item.Slug}}"></s72-pricing-buttons>
@@ -49,8 +53,6 @@
               </div>
             </div>
 
-            <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
-
             <div class="meta-item-synopsis">
               <p>{{item.InnerItem.Tagline | stripHTML}}</p>
             </div>

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>

package/site/templates/common/social-media-buttons.jet

@@ -5,43 +5,7 @@
 
 	{{if show_facebook_share || show_twitter_share || show_linkedin_share || letterboxdID}}
 		<div class="social-media-buttons">
-			<div class="social-media-buttons-title">
-				<h2>{{i18n("social_media_buttons_title")}}</h2>
-			</div>
-			<div class="social-media-buttons-container">
-				{{if show_facebook_share}}
-					<a class="btn btn-social btn-social-facebook" aria-label="{{i18n("wcag_aria_label_facebook")}}" href="https://www.facebook.com/sharer/sharer.php?u={{site.SiteConfig.SiteURL + path | url}}" target="_blank">
-						<i class="fa fa-facebook" title="Share on Facebook" aria-hidden="true"></i>
-					</a>
-				{{end}}
-
-				{{if show_twitter_share}}
-					<a class="btn btn-social btn-social-twitter" aria-label="{{i18n("wcag_aria_label_twitter")}}" href="https://twitter.com/intent/tweet?text={{title + " " + site.SiteConfig.SiteURL + path | url}}" target="_blank">
-						<i class="fa fa-twitter" title="Share on Twitter" aria-hidden="true"></i>
-					</a>
-				{{end}}
-
-				{{if show_linkedin_share}}
-					<a class="btn btn-social btn-social-linkedin" aria-label="{{i18n("wcag_aria_label_linkedin")}}" href="https://www.linkedin.com/shareArticle?mini=true&url={{site.SiteConfig.SiteURL + path | url}}&title={{title|url}}" target="_blank">
-						<i class="fa fa-linkedin" title="Share on LinkedIn" aria-hidden="true"></i>
-					</a>
-				{{end}}
-
-				{{if letterboxdID}}
-					<a class="btn btn-social btn-social-letterboxd" aria-label="{{i18n("wcag_aria_label_letterboxd")}}" href="https://boxd.it/{{letterboxdID}}" target="_blank">
-						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 334.79999 128" version="1.1">
-							<title>{{i18n("wcag_aria_label_letterboxd")}}</title>
-							<g transform="matrix(1.3333333,0,0,-1.3333333,0,128)">
-								<g transform="scale(0.1)">
-									<path d="M 857.793,735.43 C 775.559,870.309 630.23,960 464.551,960 207.984,960 0,745.098 0,480 0,214.902 207.984,0 464.551,0 630.23,0 775.559,89.6914 857.793,224.574 812.684,298.559 786.488,386.098 786.488,480 c 0,93.906 26.196,181.441 71.305,255.43"/>
-									<path d="M 1648.76,728.125 C 1567.38,867.098 1419.72,960 1251.04,960 1085.36,960 940.031,870.309 857.793,735.43 902.902,661.441 929.102,573.906 929.102,480 c 0,-93.902 -26.2,-181.441 -71.309,-255.426 C 940.031,89.6914 1085.36,0 1251.04,0 c 168.68,0 316.34,92.9023 397.72,231.875 -42.4,72.41 -66.82,157.316 -66.82,248.125 0,90.809 24.42,175.719 66.82,248.125"/>
-									<path d="m 2046.49,960 c -168.68,0 -316.34,-92.902 -397.73,-231.875 42.41,-72.406 66.83,-157.316 66.83,-248.125 0,-90.809 -24.42,-175.715 -66.83,-248.125 C 1730.15,92.9023 1877.81,0 2046.49,0 c 256.56,0 464.55,214.902 464.55,480 0,265.098 -207.99,480 -464.55,480"/>
-								</g>
-							</g>
-						</svg>
-					</a>
-				{{end}}
-			</div>
+			<s72-share-modal {{letterboxdID ? "letterboxd=" + letterboxdID : ""}}></s72-share-modal>
 		</div>
 	{{end}}
 {{end}}

package/site/templates/common/sponsor-image.jet

@@ -0,0 +1,18 @@
+{{block sponsor(hideLink)}}
+  {{sponsorImage := .ImageMap["Sponsor"]}}
+
+  {{if isset(sponsorImage)}}
+    {{sponsorText := .CustomFields.GetString("sponsor_image_text_film", "")}}
+    {{sponsorLink := .CustomFields.GetString("sponsor_image_link_film", "")}}
+    {{sponsorLinkIsExternal := .CustomFields.GetBool("sponsor_image_link_external_film", false)}}
+
+    <div class="sponsor">
+      {{if sponsorText}}
+        <div>{{sponsorText}}</div>
+      {{end}}
+      {{if sponsorLink && !hideLink}}<a href="{{sponsorLink}}" {{if sponsorLinkIsExternal}} target="_blank" {{end}}>{{end}}
+        <s72-image src="{{sponsorImage}}" alt="{{ i18n("sponsor_image_alt") }}" ></s72-image>
+      {{if sponsorLink && !hideLink}}</a>{{end}}
+    </div>
+  {{end}}
+{{end}}