@shift72/core-template 0.3.0-beta.3 → 0.3.2

package/site/styles/_buttons.scss

@@ -29,7 +29,6 @@
   }
   @include media-breakpoint-up(lg) {
     background-color: $signin-background-lg;
-    margin-left: 12px;
     @include hover-focus {
       background: $signin-background-hover-lg;
       color: $signin-text-color-hover;
@@ -40,6 +39,7 @@
   }
 }
 
+.btn.btn-signin-primary,
 .btn.btn-signup {
   align-items: center;
   background-color: $signup-background;

package/site/styles/_carousel.scss

@@ -186,20 +186,9 @@ s72-carousel {
     }
 
     .meta-item-tagline {
-      align-self: center;
       color: rgba($body-color, 0.8);
       font-size: 14px;
       font-weight: $font-weight-normal;
-      margin-bottom: 0;
-      @include media-breakpoint-up(xxxl) {
-        font-size: 18px;
-      }
-    }
-
-    .meta-item-tagline {
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 14px;
-      font-weight: $font-weight-normal;
       @include media-breakpoint-up(xxxl) {
         font-size: 18px;
       }

package/site/styles/_collections.scss

@@ -8,12 +8,11 @@
 
 .page-collection-slider {
   padding: 0;
+  padding: 0;
+  padding-bottom: 40px;
   padding-bottom: 40px;
   position: relative;
   z-index: 8;
-  @include media-breakpoint-up(xl) {
-    padding: 0 $grid-gutter-width / 3 $grid-gutter-width / 3 $grid-gutter-width / 3;
-  }
 }
 
 .page-collection-slider-title,
@@ -58,7 +57,9 @@
   @extend .meta-item;
   float: left;
   padding: 5px;
-
+  &:first-child {
+    margin-left: -5px;
+  }
   > a {
     .poster {
       .hover {
@@ -256,9 +257,9 @@
   }
 
   .caption {
-    padding: 4px;
+    padding: 4px 0;
     @include media-breakpoint-up(md) {
-      padding: 8px;
+      padding: 8px 0;
     }
 
     .title,

package/site/styles/_devices.scss

@@ -50,6 +50,9 @@
   font-size: 12px;
   font-style: italic;
   padding: 0 20px;
+  @include media-breakpoint-up(lg) {
+    padding: 0 50px;
+  }
 }
 
 .s72-btn-userdevices-cancel {

package/site/styles/_footer.scss

@@ -1,16 +1,16 @@
 footer {
   display: flex;
   flex-direction: column;
+  padding-top: 60px;
 }
 
 .footer-brand-link {
   align-self: center;
   display: flex;
-  margin-top: 20px;
 
   @include media-breakpoint-up(xl) {
     align-self: flex-start;
-    margin: 20px 20px 0;
+    margin: 0 50px;
   }
 }
 
@@ -22,7 +22,7 @@ footer {
   padding: 30px 0;
 
   @include media-breakpoint-up(xl) {
-    padding: 20px;
+    padding: 20px 50px;
   }
 
   .nav {
@@ -50,14 +50,14 @@ footer {
 }
 
 .footer-info {
-  background-color: $body-bg-accent;
+  background-color: $footer-bar-background-color;
   padding: 20px 42px;
 
   @include media-breakpoint-up(xl) {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    padding: 20px;
+    padding: 20px 50px;
   }
 }
 
@@ -91,6 +91,9 @@ footer {
   flex-direction: column;
   margin: 0 20px;
   padding: 50px 0;
+  @include media-breakpoint-up(lg) {
+    margin: 0 50px;
+  }
   .app-badge-container {
     display: flex;
   }

package/site/styles/_forms.scss

@@ -14,7 +14,7 @@ s72-activatedevice-form,
   display: block;
   margin: 0 auto;
   max-width: 400px;
-  padding-bottom: 60px;
+  padding-bottom: 20px;
   width: 100%;
 }
 // Password Form Group
@@ -53,9 +53,9 @@ s72-activatedevice-form,
 }
 // This needs to be fixed / changed - doesnt need it and could be attached to another div
 .page-form {
-  padding: 10px 20px;
-  @include media-breakpoint-up(md) {
-    padding: 20px 50px;
+  padding: 0 20px;
+  @include media-breakpoint-up(lg) {
+    padding: 0 50px;
   }
 }
 // Error Messaging
@@ -103,6 +103,9 @@ s72-activatedevice-form,
   line-height: 34px;
   padding: 0.375rem 0.75rem 0 0.75em;
 }
+.s72-modal-sm .s72-modal-dialog {
+  max-width: 400px;
+}
 // Change Password Overlay
 .s72-shopping-modal {
   .s72-modal-closable {
@@ -153,7 +156,7 @@ s72-activatedevice-form,
 
   .s72-modal-header {
     border-bottom: 0 none;
-    padding: 20px;
+    padding: 0 50px 20px 0;
 
     .s72-modal-title {
       color: $body-color;

package/site/styles/_functions.scss

@@ -1,7 +1,8 @@
+@use "sass:color";
 @function get-accent-color($body-bg) {
   @if lightness($body-bg) > 50% {
-    @return darken($body-bg, 3%);
+    @return color.mix($body-bg, #000, 96%);
   } @else {
-    @return lighten($body-bg, 4%);
+    @return color.mix($body-bg, #fff, 96%);
   }
 }

package/site/styles/_library.scss

@@ -9,7 +9,7 @@
 .s72-userlibrary-empty {
   // margin-top: -50px;
   flex: 1;
-  text-align: center;
+  text-align: left;
 
   .s72-userlibrary-empty-content {
     a {

package/site/styles/_meta-detail.scss

@@ -120,19 +120,16 @@
 .meta-detail-main {
   @extend .d-flex;
   flex-direction: column;
-  padding: $page-detail-padding-top 20px 20px 20px;
+  padding: $page-detail-padding-top 20px 0 20px;
   @include media-breakpoint-up(md) {
     flex-direction: row;
     padding-bottom: 0;
-    padding-left: 50px;
-    padding-right: 50px;
     padding-top: $page-detail-padding-top-md;
   }
-  @include media-breakpoint-up(xl) {
-    padding-bottom: 20px;
-    padding-left: 100px;
-    padding-right: 100px;
-    padding-top: $page-detail-padding-top-md;
+  @include media-breakpoint-up(lg) {
+    padding-left: 50px;
+    padding-right: 50px;
+    padding-top: $page-detail-padding-top-lg;
   }
 
   .poster {
@@ -143,11 +140,13 @@
       width: 200px;
     }
   }
+  > .poster {
+    padding-right: 20px;
+  }
 }
 
 .meta-detail-content {
   @include media-breakpoint-up(md) {
-    margin-left: 20px;
     width: 563px;
   }
   @include media-breakpoint-up(xl) {
@@ -478,17 +477,18 @@
 
   .meta-detail-main {
     flex-direction: column;
-    padding-top: $page-detail-padding-top + 85px;
+    padding-top: $page-detail-padding-top;
 
     @include media-breakpoint-up(md) {
       padding-left: 20px;
       padding-right: 20px;
+      padding-top: $page-detail-padding-top-md;
     }
 
     @include media-breakpoint-up(lg) {
       padding-left: 50px;
       padding-right: 50px;
-      padding-top: $page-detail-padding-top-md + 125px;
+      padding-top: $page-detail-padding-top-lg;
     }
   }
 
@@ -557,16 +557,11 @@
 
   .page-collection-item {
     margin-bottom: 15px;
-    padding: 0 6px 0 0;
 
     .poster {
       width: 100%;
     }
 
-    .caption {
-      padding: 4px;
-    }
-
     .meta-item-tagline {
       margin: 0;
     }

package/site/styles/_mixins.scss

@@ -59,6 +59,6 @@
   }
 
   100% {
-    background-color: $body-bg-accent;
+    background-color: $navbar-show-background-color;
   }
 }

package/site/styles/_nav.scss

@@ -22,7 +22,6 @@
     }
 
     .navbar {
-      background-color: $body-bg-accent;
       flex-direction: column;
       height: 100%;
       min-height: 100%;
@@ -420,7 +419,7 @@
   }
 
   &.search-show {
-    background-color: $body-bg-accent;
+    background-color: $navbar-search-background-color;
     height: ($navbar-brand-padding-y * 2) + 20px;
     margin: 0;
     position: absolute;
@@ -487,7 +486,7 @@ s72-dropdown,
   }
 
   .s72-dropdown-menu {
-    background-color: $body-bg-accent;
+    background-color: transparent;
     border: 0;
     flex-basis: 100%;
     margin: 0;
@@ -499,7 +498,8 @@ s72-dropdown,
     width: 100%;
 
     @include media-breakpoint-up(lg) {
-      border: 4px solid $body-bg-accent;
+      background-color: $subnav-dropdown-background;
+      border: 4px solid $subnav-dropdown-background;
       box-shadow: 0 0 0 1px rgba($body-color, 0.12);
       max-height: 330px;
       max-width: 243px;
@@ -514,7 +514,7 @@ s72-dropdown,
       }
 
       &::-webkit-scrollbar-track {
-        background: $body-bg-accent;
+        background: $subnav-dropdown-background;
       }
 
       &::-webkit-scrollbar-thumb {
@@ -607,15 +607,6 @@ s72-dropdown,
       }
     }
 
-    .btn-sign-out-mobile {
-      background-color: $signout-background;
-      border-radius: 4px;
-      color: $button-text-color;
-      padding: 8px 56px;
-      text-align: center;
-      width: 100%;
-    }
-
     .btn-sign-out {
       @extend .animate-this;
       @include hover-focus {
@@ -636,11 +627,16 @@ s72-dropdown,
     }
 
     .btn-sign-out-mobile {
+      background-color: $signout-background;
+      border-radius: 4px;
+      color: $signout-text-color;
+      padding: 8px 56px;
+      text-align: center;
+      width: 100%;
       @include hover-focus {
         background-color: $signout-background-hover;
-        color: $body-color;
+        color: $signout-text-color-hover;
       }
-
       @include media-breakpoint-up(lg) {
         display: none;
       }
@@ -816,7 +812,7 @@ s72-dropdown,
   border-left: solid 1px rgba($color: $body-color, $alpha: 0.5);
   display: none;
   height: 25px;
-  margin-left: 12px;
+  margin: 0 12px;
 
   @include media-breakpoint-up(lg) {
     align-self: center;
@@ -923,8 +919,10 @@ s72-dropdown,
 }
 
 .navigation.show .s72-tablet-backdrop {
-  @include media-breakpoint-between(sm, lg) {
+  display: none;
+  @include media-breakpoint-between(sm, md) {
     background-color: rgba(0, 0, 0);
+    display: block;
     height: 100%;
     opacity: 0.4;
     position: absolute;

package/site/styles/_pages.scss

@@ -15,11 +15,10 @@
 .page-header {
   padding-left: 20px;
   padding-right: 20px;
-  @include media-breakpoint-up(md) {
-    padding-bottom: $headings-margin-bottom;
+  @include media-breakpoint-up(lg) {
+    padding-bottom: 20px;
     padding-left: 50px;
     padding-right: 50px;
-    padding-top: $grid-gutter-width;
   }
 
   h1 {
@@ -63,17 +62,16 @@
 .devices-page {
   padding-top: $page-padding-top;
   @include media-breakpoint-up(md) {
-    min-height: 540px;
     padding: $page-padding-top-md 0 0 0;
   }
-  @include media-breakpoint-up(xxl) {
-    min-height: 740px;
+  @include media-breakpoint-up(lg) {
+    padding: $page-padding-top-lg 0 0 0;
   }
 }
 
 .form-page {
   @include media-breakpoint-up(xl) {
-    padding: $page-padding-top-md 0 0 0;
+    padding: $page-padding-top-lg 0 0 0;
   }
 
   .page-header {
@@ -96,10 +94,10 @@
   .content-page-content {
     max-width: 1100px;
     min-height: 220px;
-    padding: 20px;
-    @include media-breakpoint-up(md) {
+    padding: 20px 20px 0;
+    @include media-breakpoint-up(lg) {
       min-height: 600px;
-      padding: 20px 50px;
+      padding: 20px 50px 0;
     }
 
     h4,
@@ -136,6 +134,9 @@
   @include media-breakpoint-up(md) {
     padding: $page-padding-top-md 0 0 0;
   }
+  @include media-breakpoint-up(lg) {
+    padding: $page-padding-top-lg 0 0 0;
+  }
 }
 
 .collection-page {
@@ -189,8 +190,8 @@
   .s72-searchresults-results,
   .s72-userdevices {
     flex-wrap: wrap;
-    padding: 20px 15px;
-    @include media-breakpoint-up(md) {
+    padding: 20px;
+    @include media-breakpoint-up(lg) {
       padding: 20px 50px;
     }
 
@@ -274,9 +275,13 @@
   padding-bottom: $grid-gutter-width;
   padding-top: $page-padding-top;
   @include media-breakpoint-up(md) {
-    padding-bottom: $grid-gutter-width * 3;
+    padding-bottom: $grid-gutter-width;
     padding-top: $page-padding-top-md;
   }
+  @include media-breakpoint-up(lg) {
+    padding-bottom: $grid-gutter-width * 3;
+    padding-top: $page-padding-top-lg;
+  }
 
   .text-center {
     margin: 0 auto;

package/site/styles/_shift72.scss

@@ -51,6 +51,10 @@
   @extend .btn-primary;
 }
 
+.s72-btn-signin-vip {
+  @extend .btn-primary;
+}
+
 .s72-btn-forgotpassword {
   @extend .btn-primary;
 }

package/site/styles/_shopping.scss

@@ -107,6 +107,7 @@
 .s72-modal-dialog {
   margin: auto;
   padding: 20px;
+
   @include media-breakpoint-up(md) {
     margin: 20px auto;
   }

package/site/styles/_social-media-buttons.scss

@@ -87,6 +87,17 @@
     }
   }
 
+  &.btn-social-letterboxd {
+    background-color: $letterboxd-color;
+    border-color: $letterboxd-color;
+
+    path {
+      fill: $body-bg;
+      stroke: $body-bg;
+      stroke-width: 1;
+    }
+  }
+
   &:hover,
   &:active,
   &:focus {
@@ -134,5 +145,15 @@
         color: $youtube-color;
       }
     }
+
+    &.btn-social-letterboxd {
+      background-color: $primary;
+      border-color: $primary;
+
+      path {
+        fill: $letterboxd-color;
+        stroke: $letterboxd-color;
+      }
+    }
   }
 }

package/site/styles/_swiper.scss

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

package/site/styles/_variables.scss

@@ -54,9 +54,11 @@ $cookie-consent-hover-link-color: $secondary;
 // Nav
 // ------------------------------------
 $navbar-background-color: transparent !default;
+$navbar-show-background-color: $body-bg-accent !default;
 $navbar-dark-active-color: $primary !default;
 $navbar-nav-link-padding-x: 1em !default;
 $navbar-nav-link-padding-y: 1em !default;
+$navbar-search-background-color: $body-bg-accent !default;
 
 // Uses navbar-dark theme so we can use variables for colouring
 $navbar-dark-active-color: #fd4766 !default;
@@ -71,14 +73,10 @@ $navbar-brand-min-width-lg: 126px !default;
 $navbar-brand-min-width-xl: 126px !default;
 
 // Sub Navivgation
-$subnav-background-color: #302e30 !default;
-$subnav-nav-item-background-color: #2a2a2a !default;
 $subnav-nav-item-color: $body-color !default;
 $subnav-nav-item-hover-background-color: $primary !default;
 $subnav-nav-item-active-background-color: $primary !default;
-$subnav-nav-item-margin-x: 1rem !default;
-$subnav-nav-item-margin-y: 0.5rem !default;
-$subnav-nav-item-border-radius: 2rem !default;
+$subnav-dropdown-background: $body-bg-accent !default;
 
 // Buttons
 $button-text-color: $body-color !default;
@@ -86,7 +84,6 @@ $button-text-color-hover: $body-color !default;
 $button-background: $primary !default;
 $button-background-hover: $secondary !default;
 $trailer-button-text-color: $body-color !default;
-$dropdown-item-color: $body-color !default;
 $mobile-nav-link-color: $body-color !default;
 
 $signin-text-color: $body-color !default;
@@ -105,8 +102,10 @@ $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);
-$signout-background-hover: rgba($body-color, 0.2);
+$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;
 
@@ -125,14 +124,17 @@ $carousel-caption-top: 150px !default;
 $carousel-caption-top-md: 175px !default;
 
 // Pages
-$page-padding-top: 100px !default;
-$page-padding-top-md: 125px !default;
-$page-detail-padding-top: 115px !default;
-$page-detail-padding-top-md: 153px !default;
+$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;
 
 // Footer
 $footer-brand-min-width: 100px !default;
 $footer-brand-min-width-md: 100px !default;
+$footer-bar-background-color: $body-bg-accent !default;
 
 // Social
 // ------------------------------------
@@ -141,6 +143,7 @@ $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;
 
 // Meta Items
 // ------------------------------------

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

@@ -1,4 +1,4 @@
-{{block socialMediaButtons(path="", title="")}}
+{{block socialMediaButtons(path="", title="", letterboxdID="")}}
 	<div class="social-media-buttons">
 		<div class="social-media-buttons-title">
 			<h2>{{i18n("social_media_buttons_title")}}</h2>
@@ -13,6 +13,15 @@
 			<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>
+
+			{{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 560 560" version="1.1">
+						<title>{{i18n("wcag_aria_label_letterboxd")}}</title>
+						<path d="M185.422,140 L185.422,420 L374.578,420 L374.578,350.101 L258.146,350.101 L258.146,140 L185.422,140 Z"/>
+					</svg>
+				</a>
+			{{end}}
 		</div>
 	</div>
 {{end}}

package/site/templates/film/item.jet

@@ -59,7 +59,7 @@
                 <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)}}
+            {{yield socialMediaButtons(path=currentUrlPath, letterboxdID=film.Refs.LetterboxdID)}}
           </div>
           <div class="meta-detail-cast">
           {{if len(film.Cast) > 0 }}

package/site/templates/footer/app-badges.jet

@@ -1,13 +1,21 @@
-{{ block appBadges() }}
-  <div class="app-banner">
-    <h2 class="app-badge-title">{{ i18n("app_badge_title") }}</h2>
-    <div class="app-badge-container">
-      <a class="app-badge-link" href="#">
-        <s72-image src="/images/icons/app-store-badge.png" alt="{{ i18n("app_badge_ios") }}" class="app-badge-image"></s72-image>
-      </a>
-      <a class="app-badge-link" href="#">
-        <s72-image src="/images/icons/google-play-badge.png" alt="{{ i18n("app_badge_android") }}" class="app-badge-image"></s72-image>
-      </a>
+{{block appBadges()}}
+  {{app_link_ios := config("app_link_ios")}}
+  {{app_link_android := config("app_link_android")}}
+  {{if config("app_link_ios") != "" || config("app_link_android") != ""}}
+    <div class="app-banner">
+      <h2 class="app-badge-title">{{ i18n("app_badge_title") }}</h2>
+      <div class="app-badge-container">
+        {{if config("app_link_ios") != ""}}
+          <a class="app-badge-link" href="{{app_link_ios}}" target="_blank">
+            <s72-image src="/images/icons/app-store-badge.png" alt="{{ i18n("app_badge_ios") }}" class="app-badge-image"></s72-image>
+          </a>
+        {{end}}
+        {{if config("app_link_android") != ""}}
+          <a class="app-badge-link" href="{{app_link_android}}" target="_blank">
+            <s72-image src="/images/icons/google-play-badge.png" alt="{{ i18n("app_badge_android") }}" class="app-badge-image"></s72-image>
+          </a>
+        {{end}}
+      </div>
     </div>
-  </div>
-{{ end }}
+  {{end}}
+{{end}}