@shift72/core-template 0.4.1 → 0.4.4

package/site/styles/_variables.scss

@@ -3,6 +3,59 @@
 // 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;
+  --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%)
+  --link-color-hover-rgb: 217, 217, 217; // darken(body-color, 15%)
+  --input-focus-border-color-rgb: 131, 210, 216; // lighten(primary, 25%)
+
+  --primary: rgb(var(--primary-rgb));
+  --secondary: rgb(var(--secondary-rgb));
+  --body-color: rgb(var(--body-color-rgb));
+  --body-bg: rgb(var(--body-bg-rgb));
+  --body-bg-accent: rgb(var(--body-bg-accent-rgb));
+  --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));
+
+  --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-md: 620px;
+  --carousel-caption-top: 150px;
+  --carousel-caption-top-md: 175px;
+
+  --page-padding-top: 120px;
+  --page-padding-top-md: 120px;
+  --page-padding-top-lg: 180px;
+  --page-detail-padding-top: 120px;
+  --page-detail-padding-top-md: 120px;
+  --page-detail-padding-top-lg: 180px;
+}
+
+// Bootstrap 4 overrides START
+$input-btn-focus-color: rgba(var(--primary-rgb), 0.25) !default;
+$input-focus-border-color: var(--input-focus-border-color) !default;
+$custom-control-indicator-checked-disabled-bg: rgba(var(--primary-rgb), 0.5) !default;
+$progress-bar-bg: var(--primary) !default;
+$body-color: var(--body-color) !default;
+$body-bg: var(--body-bg) !default;
+$body-bg-accent: var(--body-bg-accent) !default;
+$error-color: var(--body-color) !default;
+$error-background: rgba(var(--body-color-rgb), 0.1) !default;
+$hr-border-color: rgba(var(--body-color-rgb), 0.5) !default;
+$list-group-bg: var(--body-bg) !default;
+$list-group-border-color: rgba(var(--body-color-rgb), 0.125) !default;
+// Bootstrap 4 overrides END
+
 // Bootstrap variables copied here, that some of the below are dependent on.
 $grid-gutter-width-base: 30px !default;
 
@@ -36,76 +89,63 @@ $spacer: math.div(5, 8) * 1rem; // 10px
 
 $spacers: (
   '0': 0,
-  'p5':  ($spacer * 0.5),  // 5px
-  'p75': ($spacer * 0.75), // 7.5px
-  '1':   $spacer,          // 10px
-  '2':   ($spacer * 2),    // 20px
-  '2p5': ($spacer * 2.5),  // 25px
-  '3':   ($spacer * 3),    // 30px
-  '4':   ($spacer * 4),    // 40px
-  '5':   ($spacer * 5),    // 50px
+  'p5': $spacer * 0.5,
+  // 5px
+  'p75': $spacer * 0.75,
+  // 7.5px
+  '1': $spacer,
+  // 10px
+  '2': $spacer * 2,
+  // 20px
+  '2p5': $spacer * 2.5,
+  // 25px
+  '3': $spacer * 3,
+  // 30px
+  '4': $spacer * 4,
+  // 40px
+  '5': $spacer * 5,
+  // 50px
 );
 
-// Body / Core
-// ------------------------------------
-
-$primary: #35a0a8 !default;
-$secondary: #4cd3dd !default;
-$body-color: #fff !default;
-$body-bg: #0f0f0f !default;
-$body-bg-accent: get-accent-color($body-bg) !default;
-$error-color: $body-color !default;
-$error-background: rgba($body-color, 0.1) !default;
-$hr-border-color: rgba($body-color, 0.5) !default;
-$list-group-bg: $body-bg !default;
-$list-group-border-color: rgba($body-color, 0.125) !default;
-
 // Cookie Consent
 $cookie-consent-color: #000;
-$cookie-consent-link-color: $primary;
-$cookie-consent-hover-link-color: $secondary;
+$cookie-consent-link-color: var(--primary);
+$cookie-consent-hover-link-color: var(--secondary);
 
 // Nav
 // ------------------------------------
 $navbar-background-color: transparent !default;
-$navbar-show-background-color: $body-bg-accent !default;
-$navbar-dark-active-color: $primary !default;
+$navbar-show-background-color: var(--body-bg-accent) !default;
+$navbar-dark-active-color: var(--primary) !default;
 $navbar-nav-link-padding-x: 1em !default;
 $navbar-nav-link-padding-y: 1em !default;
-$navbar-search-background-color: $body-bg-accent !default;
+$navbar-search-background-color: var(--body-bg-accent) !default;
 
 // Uses navbar-dark theme so we can use variables for colouring
 $navbar-dark-active-color: #fd4766 !default;
-$navbar-dark-color: $body-color !default;
+$navbar-dark-color: var(--body-color) !default;
 $navbar-dark-hover-color: #fd4766 !default;
 
-// Navbar Logo (Brand)
-$navbar-brand-padding-y: 25px !default;
-$navbar-brand-min-width: 126px !default;
-$navbar-brand-min-width-md: 126px !default;
-$navbar-brand-min-width-lg: 126px !default;
-$navbar-brand-min-width-xl: 126px !default;
-
 // Sub Navivgation
-$subnav-nav-item-color: $body-color !default;
-$subnav-nav-item-hover-background-color: $primary !default;
-$subnav-nav-item-active-background-color: $primary !default;
-$subnav-dropdown-background: $body-bg-accent !default;
+$subnav-nav-item-color: var(--body-color) !default;
+$subnav-nav-item-hover-background-color: var(--primary) !default;
+$subnav-nav-item-active-background-color: var(--primary) !default;
+$subnav-dropdown-background: var(--body-bg-accent) !default;
 
 // Buttons
-$button-text-color: $body-color !default;
-$button-text-color-hover: $body-color !default;
-$button-background: $primary !default;
-$button-background-hover: $secondary !default;
-$trailer-button-text-color: $body-color !default;
-$mobile-nav-link-color: $body-color !default;
-
-$signin-text-color: $body-color !default;
-$signin-text-color-hover: $primary !default;
+$button-text-color: var(--body-color) !default;
+$button-text-color-hover: var(--body-color) !default;
+$button-background: var(--primary) !default;
+$button-background-hover: var(--secondary) !default;
+$trailer-button-text-color: var(--body-color) !default;
+$mobile-nav-link-color: var(--body-color) !default;
+
+$signin-text-color: var(--body-color) !default;
+$signin-text-color-hover: var(--primary) !default;
 $signin-border-color: transparent !default;
 $signin-border-color-hover: transparent !default;
-$signin-background: rgba($body-color, 0.1) !default;
-$signin-background-hover: rgba($body-color, 0.2) !default;
+$signin-background: rgba(var(--body-color-rgb), 0.1) !default;
+$signin-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
 $signin-background-lg: transparent !default;
 $signin-background-hover-lg: transparent !default;
 
@@ -116,54 +156,39 @@ $signup-border-color-hover: transparent !default;
 $signup-background: $button-background !default;
 $signup-background-hover: $button-background-hover !default;
 
-$signout-background: rgba($body-color, 0.1) !default;
-$signout-background-hover: rgba($body-color, 0.2) !default;
-$signout-text-color: $body-color !default;
-$signout-text-color-hover: $body-color !default;
-
-$link-color: $body-color !default;
+$signout-background: rgba(var(--body-color-rgb), 0.1) !default;
+$signout-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
+$signout-text-color: var(--body-color) !default;
+$signout-text-color-hover: var(--body-color) !default;
 
 // Image Gradient Overlays
-$top-gradient-color: $body-bg !default;
-$right-gradient-bg-color: $body-bg !default;
-$bottom-gradient-bg-color: $body-bg !default;
-$left-gradient-bg-color: $body-bg !default;
+$top-gradient-color: var(--body-bg-rgb) !default;
+$right-gradient-bg-color: var(--body-bg-rgb) !default;
+$bottom-gradient-bg-color: var(--body-bg-rgb) !default;
+$left-gradient-bg-color: var(--body-bg-rgb) !default;
 
 // Carousel
-$carousel-bg-color: $body-bg !default;
-$carousel-height: 470px !default;
-$carousel-height-sm: 470px !default;
-$carousel-height-md: 620px !default;
-$carousel-caption-top: 150px !default;
-$carousel-caption-top-md: 175px !default;
-
-// Pages
-$page-padding-top: 120px !default;
-$page-padding-top-md: 120px !default;
-$page-padding-top-lg: 180px !default;
-$page-detail-padding-top: 120px !default;
-$page-detail-padding-top-md: 120px !default;
-$page-detail-padding-top-lg: 180px !default;
+$carousel-bg-color: var(--body-bg) !default;
 
 // Footer
 $footer-brand-min-width: 100px !default;
 $footer-brand-min-width-md: 100px !default;
-$footer-bar-background-color: $body-bg-accent !default;
+$footer-bar-background-color: var(--body-bg-accent) !default;
 
 // Social
 // ------------------------------------
-$facebook-color: $body-color !default;
-$instagram-color: $body-color !default;
-$twitter-color: $body-color !default;
-$youtube-color: $body-color !default;
-$linkedin-color: $body-color !default;
-$letterboxd-color: $body-color !default;
+$facebook-color: var(--body-color) !default;
+$instagram-color: var(--body-color) !default;
+$twitter-color: var(--body-color) !default;
+$youtube-color: var(--body-color) !default;
+$linkedin-color: var(--body-color) !default;
+$letterboxd-color: var(--body-color) !default;
 
 // Meta Items
 // ------------------------------------
 $meta-item-border-radius: 3px !default;
 $featured-meta-item-body-padding: 10px !default;
-$meta-item-body-color: $body-color !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;
 

package/site/styles/_wishlist.scss

@@ -28,7 +28,7 @@
     @extend .btn;
     font-size: 12px;
     font-weight: $font-weight-bold;
-    margin-right: 32px; // was 10px before awards needed some space
+    margin-right: 0.5rem;
     padding-bottom: 3px;
     padding-left: 0;
     padding-top: 3px;
@@ -50,4 +50,4 @@
 .poster .s72-userwishlist-buttons .s72-btn-wishlist {
   margin: 0;
   padding: 0;
-}
+}

package/site/styles/main.scss

@@ -1,5 +1,3 @@
-@import '_functions';
-
 @import '_variables';
 
 @import '_bootstrap4';
@@ -53,4 +51,4 @@
 // @import local must be last in this file.
 @import 'local/local';
 
-// DO NOT PUT ANYTHING IN THIS FILE.
+// DO NOT PUT ANYTHING IN THIS FILE.

package/site/templates/application/application.jet

@@ -3,8 +3,16 @@
 {{import "./nav/nav.jet"}}
 {{import "./google.jet" }}
 {{import "./footer/footer.jet" }}
+
 {{CDN := "//cdn.shift72.com/1.3"}}
 {*{CDN := "//localhost:3000"}*}
+
+{{CSSFilename := ""}}
+{{if isEnabled("self_service_css") && site.CSSFilename != "" }}
+  {{CSSFilename = site.CSSFilename}}
+{{end}}
+{*{CSSFilename = "local.css"}*}
+
 <!DOCTYPE html>
 <html lang="{{lang.Code}}">
   <head>
@@ -21,6 +29,9 @@
 
     {{yield font()}}
     <link rel="stylesheet" href="/styles/main.css">
+    {{if CSSFilename != "" }}
+      <link rel="stylesheet" href="/styles/{{CSSFilename}}">
+    {{end}}
 
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
@@ -33,7 +44,7 @@
     <script src="{{CDN}}/s72.core.js" defer></script>
     <script src="{{CDN}}/s72.ui.js" defer></script>
 
-    <script src="/scripts/main.js" defer></script>
+    <script src="/scripts/main.js" defer></script>    
 
     <script src="{{CDN}}/s72.transactional.js" defer></script>
     <script src="https://js.stripe.com/v3/" defer></script>
@@ -78,5 +89,6 @@
     {{yield footer()}}
 
     {{yield googleScripts()}}
+    <s72-donate-button></s72-donate-button>
   </body>
 </html>

package/site/templates/application/footer/footer.jet

@@ -2,11 +2,14 @@
 {{import "./info.jet"}}
 {{import "./nav.jet"}}
 {{import "./app-badges.jet"}}
+{{import "./sponsor-banner.jet"}}
 
 {{block footer()}}
 
   {{yield appBadges()}}
 
+  {{yield sponsorBanner()}}
+
   {*{ID is used for skip links.}*}
   <footer id="footer">
     {{yield footerBrand()}}

package/site/templates/application/footer/sponsor-banner.jet

@@ -0,0 +1,9 @@
+{{block sponsorBanner()}}
+  {{if config("show_sponsor_banner") == "true"}}
+    <div class="sponsor-banner">
+      <s72-image class="sponsors-xxxs" src="/images/common/sponsors-xxxs.png"></s72-image>
+      <s72-image class="sponsors-xs" src="/images/common/sponsors-xs.png"></s72-image>
+      <s72-image class="sponsors-md" src="/images/common/sponsors-md.png"></s72-image>
+    </div>
+  {{end}}
+{{end}}

package/site/templates/bundle/buttons.jet

@@ -1,5 +1,6 @@
-{{block bundleButtons(class, slug, title)}}
+{{block bundleButtons(class, slug, title, promoURL)}}
   <div class="{{class}}">
     <s72-pricing-buttons data-slug="{{slug}}" data-title="{{title}}"></s72-pricing-buttons>
+    {{yield bundleExtras(class="meta-detail-extras", slug=slug, promoURL=promoURL)}}
   </div>
 {{end}}

package/site/templates/bundle/item.jet

@@ -28,11 +28,10 @@
 
           {{yield bundleTagline(class="meta-detail-tagline") bundle}}
 
-          {{yield bundleButtons(class="meta-detail-buttons", slug=bundle.Slug, title=bundle.Title)}}
+          {{yield bundleButtons(class="meta-detail-buttons", slug=bundle.Slug, title=bundle.Title, promoURL=bundle.PromoURL)}}
 
           {{yield bundleSynopsis(class="meta-detail-synopsis", synopsis=bundle.Description)}}
 
-          {{yield bundleExtras(class="meta-detail-extras", slug=bundle.Slug, promoURL=bundle.PromoURL)}}
         </div>
 
         {{yield bundleList(items=bundle.Items)}}

package/site/templates/collection/carousel_item.jet

@@ -35,6 +35,18 @@
               {{ if item.ItemType == "film" }}
                 <can-be-watched-button data-slug="{{item.InnerItem.Slug}}" data-url="{{ item.InnerItem.CustomFields.GetString("can_be_watched_button_link", "") }}" data-label="{{ item.InnerItem.CustomFields.GetString("can_be_watched_button_text", "can_be_watched_button_text") }}"></can-be-watched-button>
               {{ end }}
+              <div class="meta-item-extras">
+                {{if len(trailer) > 0 }}
+                  <div class="s72-btn-trailer btn-trailer" data-url="{{routeToSlug(item.Slug)}}?autoplay">
+                    <button class="s72-btn s72-btn-play btn-sm s72-btn-trailer">
+                      <span class="s72-btn-play-icon"><s72-play-icon></s72-play-icon></span>
+                      <span class="verb s72-btn-play-label">{{i18n("play_trailer")}}</span>
+                    </button>
+                  </div>
+                {{end}}
+                <s72-userwishlist-button data-slug="{{item.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
+                <s72-share-buttons item="::item.meta" class="hidden-sm hidden-xs pull-right"></s72-share-buttons>
+              </div>
             </div>
 
             <s72-availability-label data-slug="{{item.Slug}}"></s72-availability-label>
@@ -42,19 +54,6 @@
             <div class="meta-item-synopsis">
               <p>{{item.InnerItem.Tagline | stripHTML}}</p>
             </div>
-
-            <div class="meta-item-extras">
-              {{if len(trailer) > 0 }}
-                <div class="s72-btn-trailer btn-trailer" data-url="{{routeToSlug(item.Slug)}}?autoplay">
-                  <button class="s72-btn s72-btn-play btn-sm s72-btn-trailer">
-                    <span class="s72-btn-play-icon"><s72-play-icon></s72-play-icon></span>
-                    <span class="verb s72-btn-play-label">{{i18n("play_trailer")}}</span>
-                  </button>
-                </div>
-              {{end}}
-              <s72-userwishlist-button data-slug="{{item.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
-              <s72-share-buttons item="::item.meta" class="hidden-sm hidden-xs pull-right"></s72-share-buttons>
-            </div>
             {{yield awardsCarousel() item.InnerItem}}
           </div>
         </div>

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

@@ -4,7 +4,7 @@
     {{ range .AwardCategories }}
       <div class="meta-award-nomination mb-2p5 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">{{ i18n("awards_nominated_for") }} {{ .DisplayLabel }}</span>
+        <span class="font-weight-bold">{{ .IsWinner ? i18n("awards_winner_of") : i18n("awards_nominated_for") }} {{ .DisplayLabel }}</span>
       </div>
     {{ end }}
     </div>

package/site/templates/film/item.jet

@@ -48,6 +48,13 @@
             <s72-play-button data-slug="{{film.Slug}}" data-title="{{film.Title}}"></s72-play-button>
             <s72-pricing-buttons data-slug="{{film.Slug}}" data-title="{{film.Title}}"></s72-pricing-buttons>
             <can-be-watched-button data-slug="{{film.Slug}}" data-url="{{ film.CustomFields.GetString("can_be_watched_button_link", "") }}" data-label="{{ film.CustomFields.GetString("can_be_watched_button_text", "can_be_watched_button_text") }}"></can-be-watched-button>
+            <div class="meta-detail-extras">
+              {{if len(film.Trailers) > 0 }}
+                  <s72-modal-player src="{{film.Trailers[0].URL}}" class="s72-btn-trailer" data-slug="{{film.Slug}}" data-label="{{i18n("play_trailer")}}" autoplay="querystring"></s72-modal-player>
+              {{end}}
+              <s72-userwishlist-button data-slug="{{film.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
+              {{yield socialMediaButtons(path=currentUrlPath, letterboxdID=film.Refs.LetterboxdID)}}
+            </div>
           </div>
           {{if config("default_image_type") != "portrait"}}
             <s72-availability-status data-slug="{{film.Slug}}"></s72-availability-status>
@@ -58,13 +65,6 @@
           {{yield awardNominations() film}}
 
           <div class="meta-detail-synopsis">{{film.Overview | raw}}</div>
-          <div class="meta-detail-extras">
-            {{if len(film.Trailers) > 0 }}
-                <s72-modal-player src="{{film.Trailers[0].URL}}" class="s72-btn-trailer" data-slug="{{film.Slug}}" data-label="{{i18n("play_trailer")}}" autoplay="querystring"></s72-modal-player>
-            {{end}}
-            <s72-userwishlist-button data-slug="{{film.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
-            {{yield socialMediaButtons(path=currentUrlPath, letterboxdID=film.Refs.LetterboxdID)}}
-          </div>
           <div class="meta-detail-cast">
           {{if len(film.Cast) > 0 }}
             <h2>{{i18n("meta_detail_cast_title")}}</h2>
@@ -91,11 +91,35 @@
               <p>{{ film.Languages }}</p>
             </div>
           {{end}}
-          {{if len(film.GetSubtitles()) > 0 }}
-            <div class="meta-detail-subtitle">
-              <h2>{{i18n("meta_detail_subtitles")}}</h2>
-              <p>{{ film.GetSubtitles() }}</p>
-            </div>
+          {{allSubtitles := film.GetSubtitles()}}
+          {{if len(allSubtitles) > 0 }}
+            {{subtitles := ""}}
+            {{captions := ""}}
+            {{if len(film.SubtitleTracks) == 0}}
+              {{subtitles = allSubtitles}}
+            {{else}}
+              {{range subTrack := film.SubtitleTracks}}
+                {{if len(subTrack) >= 3}}
+                  {{if subTrack[2] == "caption"}}
+                      {{captions = captions ? captions + ", " + subTrack[1] : subTrack[1]}}
+                  {{else}}
+                      {{subtitles = subtitles ? subtitles + ", " + subTrack[1] : subTrack[1]}}
+                  {{end}}
+                {{end}}
+              {{end}}
+            {{end}}
+            {{if subtitles}}
+              <div class="meta-detail-subtitle">
+                <h2>{{i18n("meta_detail_subtitles")}}</h2>
+                <p>{{subtitles}}</p>
+              </div>
+            {{end}}
+            {{if captions}}
+              <div class="meta-detail-subtitle">
+                <h2>{{i18n("meta_detail_captions")}}</h2>
+                <p>{{captions}}</p>
+              </div>
+            {{end}}
           {{end}}
           {{if len(film.Countries) > 0 }}
             <div class="meta-detail-country">

package/site/templates/tv/detail.jet

@@ -37,16 +37,16 @@
           <div class="meta-detail-buttons">
             <s72-play-button data-slug="{{tvseason.Slug}}" data-title="{{tvseason.Title}}"></s72-play-button>
             <s72-pricing-buttons data-slug="{{tvseason.Slug}}" data-title="{{tvseason.Title}}"></s72-pricing-buttons>
+            <div class="meta-detail-extras">
+              {{if len(tvseason.Trailers) > 0 }}
+                <s72-modal-player src="{{tvseason.Trailers[0].URL}}" class="s72-btn-trailer" data-slug="{{tvseason.Slug}}" data-label="{{i18n("play_trailer")}}" autoplay="querystring"></s72-modal-player>
+              {{end}}
+              <s72-userwishlist-button data-slug="{{tvseason.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
+              {{yield socialMediaButtons(path=currentUrlPath)}}
+            </div>
           </div>
           <s72-availability-label data-slug="{{tvseason.Slug}}"></s72-availability-label>
           <div class="meta-detail-synopsis">{{tvseason.Overview | raw}}</div>
-          <div class="meta-detail-extras">
-            {{if len(tvseason.Trailers) > 0 }}
-              <s72-modal-player src="{{tvseason.Trailers[0].URL}}" class="s72-btn-trailer" data-slug="{{tvseason.Slug}}" data-label="{{i18n("play_trailer")}}" autoplay="querystring"></s72-modal-player>
-            {{end}}
-            <s72-userwishlist-button data-slug="{{tvseason.Slug}}" class="btn-wishlist"></s72-userwishlist-button>
-            {{yield socialMediaButtons(path=currentUrlPath)}}
-          </div>
           <div class="meta-detail-cast">
           {{if len(tvseason.Cast) > 0 }}
             <h2>{{i18n("meta_detail_cast_title")}}</h2>