@shift72/core-template 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,7 +1,19 @@
 # Changelog
 
-## [Unreleased](https://github.com/shift72/core-template/compare/1.6.0...HEAD)
+## [Unreleased](https://github.com/shift72/core-template/compare/1.7.0...HEAD)
 
+## [1.7.0](https://github.com/shift72/core-template/compare/1.6.0...1.7.0)
+
+### Added
+- Bonus content and episode show/hide component.
+
+### Changed
+- Modified powered_by_url translations.
+- Various spacing style changes.
+
+### Fixed
+- Pricing buttons no longer get squashed in Firefox.
+- Spacing issues on small screens.
 
 ## [1.6.0](https://github.com/shift72/core-template/compare/1.5.1...1.6.0)
 

package/kibble.json

@@ -185,5 +185,5 @@
       "pageSize": 0
     }
   ],
-  "coreTemplateVersion": "1.6.0"
+  "coreTemplateVersion": "1.7.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shift72/core-template",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Shift72 core template",
   "license": "MIT",
   "scripts": {

package/site/ca_ES.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "En col·laboració amb"

package/site/da_DK.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "i samarbejde med"

package/site/de_DE.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "in einer Beziehung mit"
@@ -682,7 +682,7 @@
     "other": "Die Zahlung wurde nicht akzeptiert. Bitte schließen Sie das Fenster und versuchen Sie es noch einmal."
   },
   "meta_detail_cast_title": {
-    "other": "Gießen"
+    "other": "Cast"
   },
   "meta_detail_crew_title": {
     "other": "Besatzung"

package/site/en_AU.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "in partnership with"

package/site/et_ET.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "koostöös"

package/site/fr_FR.all.json

@@ -6,10 +6,10 @@
     "other": "Powered by"
   },
   "powered_by_name": {
-    "other": "ScreenPlus"
+    "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "in partnership with"

package/site/hr_HR.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "u suradnji s"

package/site/hu_HU.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "in partnership with"

package/site/it_IT.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "in partnership with"

package/site/ja_JP.all.json

@@ -6,10 +6,10 @@
     "other": "Powered by"
   },
   "powered_by_name": {
-    "other": "ScreenPlus"
+    "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "in partnership with"

package/site/lt_LT.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "in partnership with"

package/site/pt_PT.all.json

@@ -6,7 +6,7 @@
     "other": "Distribuído por"
   },
   "powered_by_name": {
-    "other": "ScreenPlus"
+    "other": "Shift72"
   },
   "powered_by_url": {
     "other": "https://www.shift72.com"

package/site/styles/_availability-tags.scss

@@ -4,6 +4,7 @@ s72-availability-label {
     @include body-1-style;
     line-height: 24px;
     margin-bottom: 16px;
+    margin-top: -4px;
 
     &::before {
       @extend .fa;

package/site/styles/_awards.scss

@@ -3,11 +3,12 @@
 
   &.meta-awards-all {
     display: grid;
-    gap: 30px 104px;
-    margin-bottom: 0px;
+    gap: 28px 104px;
+    margin-bottom: 0;
     margin-top: 20px;
 
     @include media-breakpoint-up(md) {
+      grid-auto-rows: 1fr;
       grid-template-columns: repeat(2, minmax(0, 320px));
     }
   }

package/site/styles/_cta-buttons.scss

@@ -1,14 +1,10 @@
 /* stylelint-disable selector-max-compound-selectors, max-nesting-depth */
 @mixin text-cta-btn {
   margin: 0;
+  min-width: 140px;
   padding: 6px 12px;
   white-space: nowrap;
   width: 100%;
-
-  @include media-breakpoint-up(xs) {
-    min-width: fit-content;
-    width: 140px;
-  }
 }
 
 .cta-buttons {
@@ -17,7 +13,7 @@
   margin-bottom: 8px;
 
   @include media-breakpoint-up(xs) {
-    grid-auto-columns: min-content;
+    grid-template-columns: max-content max-content;
     grid-template-rows: 1fr;
   }
 
@@ -37,7 +33,7 @@
     grid-template-columns: 1fr 1fr;
 
     @include media-breakpoint-up(xs) {
-      grid-template-columns: none;
+      grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
     }
 
     > * {
@@ -158,6 +154,10 @@
   .s72-btn-can-be-watched {
     @include text-cta-btn;
 
+    @include media-breakpoint-up(xs) {
+      max-width: max-content;
+    }
+
     .padder {
       display: none;
     }
@@ -174,11 +174,9 @@
     gap: 16px;
     grid-template-rows: 1fr;
     justify-items: center;
-    padding: 0 36px;
 
     @include media-breakpoint-up(xs) {
       grid-template-columns: min-content min-content min-content;
-      padding: 0;
     }
 
     > * {

package/site/styles/_icons.scss

@@ -227,3 +227,14 @@ s72-availability-label .availability-state::before {
   @extend .fa-circle;
   @extend .s72-icon;
 }
+
+// Rule: icon classes in relish should be prefxed with 's72-'
+.s72-icon-down {
+  @extend .fa;
+  @extend .fa-angle-down;
+}
+
+.s72-icon-up {
+  @extend .fa;
+  @extend .fa-angle-up;
+}

package/site/styles/_meta-detail.scss

@@ -147,10 +147,14 @@
     .sponsor {
       margin-bottom: 12px;
 
-      @include media-breakpoint-up(xs) {
+      @include media-breakpoint-up(lg) {
         margin-bottom: 20px;
       }
     }
+
+    > .poster {
+      margin-bottom: 5px;
+    }
   }
 
   .poster {
@@ -172,6 +176,10 @@
     .live {
       display: none;
     }
+
+    .s72-image {
+      display: initial;
+    }
   }
 
   .poster-wrapper .sponsor {
@@ -190,7 +198,8 @@
 
 s72-element-switcher,
 .meta-detail-bonus-content,
-.meta-detail-episodes-content {
+.meta-detail-episodes-content,
+.meta-awards-all {
   flex: 1 1 100%;
   max-width: 728px;
 
@@ -221,7 +230,12 @@ s72-element-switcher,
   }
 
   .meta-detail-synopsis {
+    margin-bottom: -4px;
     max-width: 728px;
+
+    @include media-breakpoint-up(xs) {
+      margin-bottom: 0;
+    }
     @include media-breakpoint-up(xl) {
       max-width: 1100px;
     }
@@ -229,7 +243,7 @@ s72-element-switcher,
 
   .meta-detail-synopsis,
   .meta-detail-switcher-tagline {
-    padding-top: 22px;
+    padding-top: 12px;
 
     p {
       animation: fadein 2s;
@@ -268,19 +282,6 @@ s72-element-switcher,
   }
 }
 
-.recommendations-collection {
-  padding-top: 20px;
-  @include media-breakpoint-up(md) {
-    padding-top: 0;
-  }
-  @include media-breakpoint-up(lg) {
-    padding-top: 20px;
-  }
-  @include media-breakpoint-up(xl) {
-    padding-top: 80px;
-  }
-}
-
 .meta-detail-bundle {
   .meta-detail-bg {
     opacity: 0.4;
@@ -399,7 +400,10 @@ s72-element-switcher,
 
 .meta-detail-episodes-content,
 .meta-detail-bonus-content {
-  margin-bottom: 40px;
+  margin-bottom: 18px;
+  @include media-breakpoint-up(lg) {
+    margin-bottom: 32px;
+  }
 
   h2 {
     @include heading-3-style;
@@ -416,10 +420,13 @@ s72-element-switcher,
 
 .element-switcher-wrapper {
   display: grid;
-  gap: 50px;
-  grid-template-columns: auto auto;
   width: 100%;
 
+  @include media-breakpoint-up(lg) {
+    gap: 50px;
+    grid-template-columns: auto auto;
+  }
+
   .sponsor {
     display: none;
     padding-top: 10px;
@@ -450,6 +457,7 @@ s72-element-switcher {
   margin-bottom: 62px;
 
   .s72-toggle {
+    bottom: -36px;
     &:hover {
       color: var(--body-color-hover);
     }
@@ -460,7 +468,6 @@ s72-element-switcher {
   display: grid;
   gap: 20px;
   grid-template-columns: repeat(1, 1fr);
-  padding-bottom: 20px;
 
   @include media-breakpoint-up(lg) {
     grid-template-columns: repeat(2, 1fr);

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

@@ -52,6 +52,5 @@
 .meta-detail-content .meta-detail-tagline-and-classification {
   align-items: center;
   display: flex !important;
-  padding-bottom: 12px;
-  padding-top: 5px;
+  padding: 5px 0 16px;
 }

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

@@ -1,14 +1,23 @@
 .sub-item {
   display: grid;
-  grid-gap: 15px;
+  gap: 1px 15px;
   grid-template-columns: 112px minmax(100px, 1fr);
   grid-template-rows: auto minmax(0, 1fr);
-  margin-bottom: 15px;
-  padding-bottom: 15px;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
 
   @include media-breakpoint-up(sm) {
     grid-template-columns: 175px minmax(100px, 1fr);
     grid-template-rows: auto auto minmax(0, 1fr);
+
+    &:last-of-type {
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    gap: 5px 15px;
   }
 
   h3 {
@@ -37,17 +46,20 @@
   }
 
   .synopsis {
+    animation: fadein 2s;
     font-size: 16px;
     font-weight: $font-weight-light;
     grid-column: 1 / 3;
     letter-spacing: 0.6px;
     line-height: 1.25;
     margin-top: 5px;
+    overflow: hidden;
 
     @include media-breakpoint-up(sm) {
+      display: block !important;
       grid-column: auto;
       grid-row: 2;
-      margin-bottom: 10px;
+      margin-bottom: 7px;
     }
 
     p {
@@ -110,3 +122,16 @@
 .s72-playback-progress-bar {
   background-color: var(--secondary);
 }
+
+s72-show-hide-switcher {
+  display: block;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  transition: height 0.5s ease;
+
+  .s72-toggle {
+    @include media-breakpoint-up(sm) {
+      display: none;
+    }
+  }
+}

package/site/styles/_swiper.scss

@@ -7,10 +7,10 @@
 .collection-container {
   padding: 0 0 40px;
   @include media-breakpoint-up(md) {
-    padding: 15px 20px 20px;
+    padding: 10px 20px 20px;
   }
   @include media-breakpoint-up(lg) {
-    padding: 15px 50px 20px;
+    padding: 10px 50px 20px;
   }
 }
 

package/site/styles/_typography.scss

@@ -48,7 +48,7 @@
     $font-size: var(--heading-3-style-font-size),
     $letter-spacing: var(--heading-3-style-letter-spacing),
     $font-weight: $font-weight-normal,
-    $margin-bottom: 6px,
+    $margin-bottom: 12px,
     $line-height: 24px
   );
   @include media-breakpoint-up(sm) {

package/site/styles/_variables.scss

@@ -106,9 +106,9 @@
   --page-padding-top: 120px;
   --page-padding-top-md: 120px;
   --page-padding-top-lg: 180px;
-  --page-detail-padding-top: 245px;
-  --page-detail-padding-top-md: 290px;
-  --page-detail-padding-top-lg: 440px;
+  --page-detail-padding-top: 160px;
+  --page-detail-padding-top-md: 248px;
+  --page-detail-padding-top-lg: 400px;
 
   --heading-1-style-letter-spacing: normal;
   --heading-2-style-letter-spacing: normal;

package/site/templates/film/item.jet

@@ -33,13 +33,13 @@
           {{if config("default_image_type") == "portrait"}}
             {{yield sponsor() film}}
 
-            {{if film.ImageMap["Portrait"] != ""}}
               <div class="poster poster-portrait">
-                <s72-availability-status data-slug="{{film.Slug}}"></s72-availability-status>
-                <s72-image src="{{film.ImageMap["Classification"]}}" alt="" class="classification-image">
-                <s72-image src="{{film.ImageMap["Portrait"]}}" alt="{{film.Title}}" class="poster poster-image poster-image-portrait"></s72-image>
+                {{if film.ImageMap["Portrait"] != ""}}
+                  <s72-availability-status data-slug="{{film.Slug}}"></s72-availability-status>
+                  <s72-image src="{{film.ImageMap["Classification"]}}" alt="" class="classification-image">
+                  <s72-image src="{{film.ImageMap["Portrait"]}}" alt="{{film.Title}}" class="poster poster-image poster-image-portrait"></s72-image>
+                {{end}}
               </div>
-            {{end}}
           {{end}}
         </div>
 
@@ -157,9 +157,7 @@
               <h2>{{i18n("meta_detail_bonus_title")}}</h2>
               {{yield list(itemsPerRow=4, itemLayout="landscape") content}}
                 {{range bonus := film.Bonuses}}
-                  <div class="sub-item">
-                    {{yield subItem(item=bonus)}}
-                  </div>
+                  {{yield subItem(item=bonus)}}
                 {{end}}
               {{end}}
             </section>

package/site/templates/items/sub_item.jet

@@ -1,22 +1,26 @@
 {{ block subItem(item) }}
-  <div class="poster-container">
-    <div class="poster">
-      <s72-availability-status slug="{{item.Slug}}"></s72-availability-status>
-      <s72-image src="{{item.Images.Landscape}}" alt="{{item.Title}}" class="poster-image poster-image-landscape"></s72-image>
-      <s72-play-button data-slug="{{item.Slug}}" title="{{item.Title}}"></s72-play-button>
-      <s72-playback-progress slug="{{item.Slug}}"></s72-playback-progress>
-    </div>
-  </div>
-  <h3>{{item.Title}}</h3>
-  {{if item.Runtime > 0 }}
-    <span class="runtime">
-      {{if item.Runtime.Hours() > 0}}
-        {{item.Runtime.Hours()}}{{i18n("runtime_hours")}}
+  <s72-show-hide-switcher target-elem=".synopsis">
+    <div class="sub-item">
+      <div class="poster-container">
+        <div class="poster">
+          <s72-availability-status slug="{{item.Slug}}"></s72-availability-status>
+          <s72-image src="{{item.Images.Landscape}}" alt="{{item.Title}}" class="poster-image poster-image-landscape"></s72-image>
+          <s72-play-button data-slug="{{item.Slug}}" title="{{item.Title}}"></s72-play-button>
+          <s72-playback-progress slug="{{item.Slug}}"></s72-playback-progress>
+        </div>
+      </div>
+      <h3>{{item.Title}}</h3>
+      {{if item.Runtime > 0 }}
+        <span class="runtime">
+          {{if item.Runtime.Hours() > 0}}
+            {{item.Runtime.Hours()}}{{i18n("runtime_hours")}}
+          {{end}}
+          {{item.Runtime.Minutes()}}{{i18n("runtime_minutes")}}
+        </span>
+      {{end}}
+      {{if item.Overview}}
+        <div class="synopsis s72-hide">{{item.Overview | raw}}</div> {* hide class prevents FOUC *}
       {{end}}
-      {{item.Runtime.Minutes()}}{{i18n("runtime_minutes")}}
-    </span>
-  {{end}}
-  {{if item.Overview}}
-    <div class="synopsis">{{item.Overview | raw}}</div>
-  {{end}}
+    </div>
+  </s72-show-hide-switcher>
 {{ end }}

package/site/templates/tv/detail.jet

@@ -81,9 +81,7 @@
               <h2>{{i18n("meta_detail_episodes_title")}}</h2>
               {{yield list(itemsPerRow=4, itemLayout="portrait") content}}
                 {{range episode := tvseason.Episodes}}
-                  <div class="sub-item">
-                    {{yield subItem(item=episode)}}
-                  </div>
+                  {{yield subItem(item=episode)}}
                 {{end}}
               {{end}}
             </div>
@@ -94,9 +92,7 @@
               <h2>{{i18n("meta_detail_bonus_title")}}</h2>
               {{yield list(itemsPerRow=4, itemLayout="landscape") content}}
                 {{range bonus := tvseason.Bonuses}}
-                  <div class="sub-item">
-                    {{yield subItem(item=bonus)}}
-                  </div>
+                  {{yield subItem(item=bonus)}}
                 {{end}}
               {{end}}
             </section>

package/site/uk_UA.all.json

@@ -9,7 +9,7 @@
     "other": "Shift72"
   },
   "powered_by_url": {
-    "other": "https://www.screenplus.com"
+    "other": "https://www.shift72.com"
   },
   "in_partnership_with": {
     "other": "у партнерстві з"