@shift72/core-template 1.9.4 → 1.9.5

package/.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## [Unreleased](https://github.com/shift72/core-template/compare/1.9.4...HEAD)
+## [Unreleased](https://github.com/shift72/core-template/compare/1.9.5...HEAD)
+
+## [1.9.5](https://github.com/shift72/core-template/compare/1.9.4...1.9.5)
+### Changed
+- Slider arrows code refactor and add css variable to change arrow color.
 
 ## [1.9.4](https://github.com/shift72/core-template/compare/1.9.3...1.9.4)
 ### Added

package/kibble.json

@@ -191,5 +191,5 @@
       "pageSize": 0
     }
   ],
-  "coreTemplateVersion": "1.9.4"
+  "coreTemplateVersion": "1.9.5"
 }

package/package.json

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

package/site/styles/_collections.scss

@@ -65,28 +65,26 @@
         justify-content: space-between;
         left: 0;
         opacity: 0;
-        padding: 0px 15px; // No vertical padding so that in edge cases where multiple purchase options are displayed there's enough space.
+        padding: 0 15px; // No vertical padding so that in edge cases where multiple purchase options are displayed there's enough space.
         position: absolute;
         right: 0;
         top: 0;
         transition: opacity 0.25s ease-in;
         z-index: 100;
 
-
         .buttons {
           @extend .d-flex;
           align-items: center;
           flex-direction: row;
+
+          // If there are multiple types of buttons shown here, using flex gap
+          // will space them out.
+          gap: 16px;
           justify-content: center;
           padding-top: 10px;
           position: relative;
           width: 100%;
 
-          // If there are multiple types of buttons shown here, using flex gap 
-          // will space them out.
-          gap: 16px;
-
-
           s72-can-be-watched-now {
             margin-left: auto;
           }
@@ -121,7 +119,9 @@
             min-width: 140px;
             width: auto;
 
-            .verb { font-size: 14px; }
+            .verb {
+              font-size: 14px;
+            }
           }
 
           .btn-wishlist .s72-btn-wishlist {

package/site/styles/_swiper.scss

@@ -22,18 +22,19 @@
 }
 
 .swiper-button-next {
-  background: rgba(var(--body-bg-rgb), 0.8) url('/images/icons/next.png') center center no-repeat;
   right: 0;
 }
 
 .swiper-button-prev {
-  background: rgba(var(--body-bg-rgb), 0.8) url('/images/icons/prev.png') center center no-repeat;
   left: 0;
 }
 
 .swiper-button-prev,
 .swiper-button-next {
+  align-items: center;
+  background: rgba(var(--body-bg-rgb), 0.8) center center no-repeat;
   background-size: 30%;
+  display: flex;
   height: 100%;
   margin-top: 0;
   opacity: 0.8;
@@ -48,6 +49,14 @@
   @include media-breakpoint-down(sm) {
     display: none;
   }
+  svg {
+    display: block;
+    margin: 0 auto;
+    width: 20px;
+    path {
+      fill: var(--slider-button-color);
+    }
+  }
 
   &.swiper-button-disabled {
     display: none;

package/site/styles/_variables.scss

@@ -101,6 +101,7 @@
   --button-background-hover: var(--secondary);
   --trailer-button-text-color: var(--body-color);
   --mobile-nav-link-color: var(--body-color);
+  --slider-button-color: var(--body-color);
   --signin-sso-btn-text-color: var(--button-text-color);
   --signin-sso-btn-text-hover-color: var(--button-text-color-hover);
   --signin-sso-btn-background-color: var(--button-background);

package/site/templates/collection/slider-buttons.jet

@@ -0,0 +1,12 @@
+{{ block sliderButtons()}}
+<div class="swiper-button-prev s72-hide">
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'>
+    <path d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='#000000'/>
+  </svg>
+</div>
+<div class="swiper-button-next s72-hide">
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'>
+    <path d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='#000000'/>
+  </svg>
+</div>
+{{ end }}

package/site/templates/collection/slider.jet

@@ -1,13 +1,14 @@
 {{import "./page_collection_item.jet"}}
 {{import "../common/slider.jet"}}
+{{import "./slider-buttons.jet"}}
 {{block pageCollectionSlider()}}
 {{if len(.Items) > 0}}
 <section class="page-collection page-collection-slider page-collection-slider-{{.ItemsPerRow}} page-collection-slider-{{.ItemLayout}} slider-{{.ItemsPerRow}} slider-{{.ItemLayout}} page-collection-{{.ItemsPerRow}}-slider" aria-label="{{i18n("wcag_aria_label_collection_slider")}}">
   <div class="collection-wrapper-container swiper-wrapper-container">
     <div class="collection-container swiper-container" data-items-per-row="{{.ItemsPerRow}}" data-layout="{{.ItemLayout}}">
-      {{if .DisplayName != ""}}
+        {{if .DisplayName != ""}}
       <div class="swiper-title">
-          <h3>{{.DisplayName}}</h3>
+        <h3>{{.DisplayName}}</h3>
       </div>
       {{end}}
       <div class="swiper-wrapper">
@@ -18,8 +19,7 @@
         {{end}}
       </div>
     </div>
-    <div class="swiper-button-prev swiper-button-white s72-hide"></div>
-    <div class="swiper-button-next swiper-button-white s72-hide"></div>
+    {{ yield sliderButtons() }}
   </div>
 </section>
 {{end}}

package/site/templates/collection/wishlist.jet

@@ -1,5 +1,6 @@
 {{import "./page_collection_item.jet"}}
 {{import "../common/slider.jet"}}
+{{import "./slider-buttons.jet"}}
 {{block wishlistCollection()}}
 
 {{if config("default_image_type") == "portrait"}}
@@ -39,8 +40,7 @@
               {{yield content}}
             </div>
         </div>
-        <div class="swiper-button-prev swiper-button-white"></div>
-        <div class="swiper-button-next swiper-button-white"></div>
+        {{ yield sliderButtons() }}
     </div>
   </section>
 </s72-userwishlist>

package/site/templates/film/item.jet

@@ -4,6 +4,7 @@
 {{import "../items/sub_item.jet"}}
 {{import "../collection/page_collection_item.jet"}}
 {{import "../collection/slider.jet"}}
+{{import "../collection/slider-buttons.jet"}}
 {{import "../common/list.jet"}}
 {{import "../common/awards/item.jet"}}
 {{import "../common/sponsor-image.jet"}}
@@ -187,8 +188,7 @@
             {{end}}
           </div>
         </div>
-        <div class="swiper-button-prev swiper-button-white"></div>
-        <div class="swiper-button-next swiper-button-white"></div>
+        {{ yield sliderButtons() }}
       </div>
     </section>
     {{ end }}

package/site/templates/tv/detail.jet

@@ -5,6 +5,7 @@
 {{import "../collection/page_collection_item.jet"}}
 {{import "../common/list.jet"}}
 {{import "../common/cta_buttons.jet"}}
+{{import "../collection/slider-buttons.jet"}}
 
 {{block head()}}
   {{yield seo() tvseason}}
@@ -124,8 +125,7 @@
               {{end}}
             </div>
           </div>
-          <div class="swiper-button-prev swiper-button-white"></div>
-          <div class="swiper-button-next swiper-button-white"></div>
+          {{ yield sliderButtons() }}
         </div>
       </section>
     {{end}}