ama_layout 3.2.2 → 4.0.0

data/app/assets/stylesheets/ama_layout/media_queries/mobile-and-tablet.scss

@@ -1,6 +1,6 @@
 @media screen and #{breakpoint(medium down)}{
   .skip{
-    margin-top: $base-margin*4;
+    margin-top: $base-margin;
   }
 
   .join-radio{
@@ -11,6 +11,6 @@
 
   .error-pg-num-border{
     border-left: 0;
-    margin-top: $base-margin*4;
+    margin-top: $base-margin;
   }
 }

data/app/assets/stylesheets/ama_layout/media_queries/mobile.scss

@@ -1,55 +1,8 @@
 @media screen and #{breakpoint(small only)}{
-  .page-steps h3{
-    color: $slate;
-    font-style: italic;
-    font-size: $base-font-size;
-    margin: $base-margin*2 0 0;
-    text-align: right;
-  }
-
-  input[type="text"],
-  input[type="password"],
-  input[type="date"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="month"],
-  input[type="week"],
-  input[type="email"],
-  input[type="number"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="time"],
-  input[type="url"],
-  input[type="color"],
-  textarea{
-    margin: 0 0 0.5em 0;
-    margin: 0 0 0.5rem 0;
-  }
-
-  label.inline{
-    margin: 0;
-  }
-
-  h4{
-    margin-top: $base-margin*6;
-  }
-
-  .membership-card-radio,
-  .membership-card-radio-plus-primary,
-  .membership-card-label{
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-  }
-
   .cart-totals{
     text-align: left;
   }
 
-  footer{
-    margin-top: $base-margin*4;
-  }
-
   %white-trans{
     background-color: rgba(255,255,255,0.8);
   }
@@ -57,7 +10,7 @@
   %inputs-thirds{
     max-width: 100%;
     float: none;
-    margin: $base-margin*2 0;
+    margin: $base-margin/2 0;
   }
 
   .credit-card-year{
@@ -76,6 +29,6 @@
 
   .hour,
   .minute{
-    margin: $base-margin*2 0;
+    margin: $base-margin/2 0;
   }
 }

data/app/assets/stylesheets/ama_layout/media_queries/tablet.scss

@@ -1,17 +1,9 @@
 @media screen and #{breakpoint(medium only)}{
   .main-content-container{
-    padding: $base-padding*4 0 0;
+    padding: $base-padding 0 0;
   }
 
   .site-header img{
-    padding-left: $base-padding*4;
-  }
-
-  .membership-card-radio,
-  .membership-card-radio-plus-primary,
-  .membership-card-label{
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
+    padding-left: $base-padding;
   }
 }

data/app/helpers/ama_layout_breadcrumb_helper.rb

@@ -0,0 +1,5 @@
+module AmaLayoutBreadcrumbHelper
+  def show_breadcrumbs
+    render partial: 'ama_layout/breadcrumbs'
+  end
+end

data/app/views/ama_layout/_alert.html.erb

@@ -1,3 +1,5 @@
-<div class="large-6 center">
-  <p class="error_notification"><%= flash[:alert].html_safe %></p>
+<div class="row">
+  <div class="large-12">
+    <div class="error_notification"><span><%= flash[:alert].html_safe %></span></div>
+  </div>
 </div>

data/app/views/ama_layout/_breadcrumbs.html.erb

@@ -0,0 +1,3 @@
+<ul class="breadcrumbs">
+  <%= render_breadcrumbs builder: AmaLayout::BreadcrumbBuilder %>
+</ul>

data/app/views/ama_layout/_footer.html.erb

@@ -1,2 +1,69 @@
-<footer>
+<footer class="page-footer">
+  <div class="page-footer__container">
+    <div class="page-footer__col">
+      <div class="page-footer__col-header">
+        About Us
+      </div>
+      <ul class="link-list">
+        <li class="link-list__item">
+          <%= link_to "About AMA", "https://ama.ab.ca/about-ama/", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Careers", "http://careers.ama.ab.ca/", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Media Inquiries", "http://news.ama.ab.ca/", class: "link-list__link--white" %>
+        </li>
+      </ul>
+    </div>
+    <div class="page-footer__col">
+      <div class="page-footer__col-header">
+        Get in Touch
+      </div>
+      <ul class="link-list">
+        <li class="link-list__item">
+          <%= link_to "Contact Us", "https://ama.ab.ca/about-ama/contact-us/", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Locations", "https://ama.ab.ca/centre-locations-hours/", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Social Media", "https://ama.ab.ca/about-ama/social-media/", class: "link-list__link--white" %>
+        </li>
+      </ul>
+    </div>
+    <div class="page-footer__col">
+      <div class="page-footer__col-header">
+        Quick Links
+      </div>
+      <ul class="link-list">
+        <li class="link-list__item">
+          <%= link_to "Blog", "https://ama.ab.ca/blog/", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Knowledge Base", "https://ama.ab.ca/knowledge-base/", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Email Newsletters", "https://forms.ama.ab.ca/subscriptions", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Site Map", "https://ama.ab.ca/about-ama/site-map/", class: "link-list__link--white" %>
+        </li>
+      </ul>
+    </div>
+    <div class="page-footer__col">
+      <div class="page-footer__col-header">
+        Interesting Fine Print
+      </div>
+      <ul class="link-list">
+        <li class="link-list__item">
+          <%= link_to "Privacy Policy", "https://ama.ab.ca/about-ama/privacy-policy/", class: "link-list__link--white" %>
+        </li>
+        <li class="link-list__item">
+          <%= link_to "Terms & Conditions", "https://ama.ab.ca/about-ama/terms-conditions/", class: "link-list__link--white" %>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="racetrack"></div>
 </footer>

data/app/views/ama_layout/_main_nav_item.html.erb

@@ -1,7 +1,6 @@
-<li class="dashboard-nav dashboard-title <%= nav_item.active_class %>">
-  <span class="nav-icon fa <%= nav_item.icon %> <%= nav_item.active_class %>"></span>
+<li class="side-nav__item">
   <%= link_to nav_item.text, nav_item.link,
       target: nav_item.target, alt: nav_item.alt,
-      class: nav_item.active_class %>
+      class: 'side-nav__link' %>
   <%= nav_item.sidebar_sub_nav %>
 </li>

data/app/views/ama_layout/_notice.html.erb

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="mb1">
-    <p class="notice_notification"><%= flash[:notice].html_safe %></p>
+  <div class="large-12">
+    <div class="notice_notification"><span><%= flash[:notice].html_safe %></span></div>
   </div>
 </div>

data/app/views/ama_layout/_sidebar.html.erb

@@ -1,11 +1,8 @@
-<div class="medium-4 large-3 columns show-for-medium pl0">
-  <div class="white-trans pb0">
-    <div class="large-12 fullwidth center">
+<aside class="side-nav" data-equalizer-watch="page-container-equalize">
+  <h2 class="side-nav__header">Online Account</h2>
+  <div class="side-nav__content">
+    <ul class="side-nav__list">
       <%= render partial: "ama_layout/main_nav_item", collection: navigation.items, as: :nav_item %>
-      <li class="dashboard-nav dashboard-title">
-        <span class="nav-icon fa fa-power-off"></span>
-        <%= link_to "Sign Out", "/logout" %>
-      </li>
-    </div>
+    </ul>
   </div>
-</div>
+</aside>

data/app/views/ama_layout/_siteheader.html.erb

@@ -1,35 +1,47 @@
-<div data-sticky-container>
-  <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
-    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
-      <button class="menu-icon" type="button" data-toggle></button>
-      <%= link_to(image_tag("ama-logo-small.svg", class: "topbar-logo"), "https://www.ama.ab.ca") %>
+<div class="header">
+  <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="large">
+    <button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
+    <%= link_to(image_tag("ama-logo.png", class: "title-bar__logo"), "https://www.ama.ab.ca") %>
+  </div>
+  <div class="top-bar" id="main-menu">
+    <div class="top-bar-left">
+      <%= link_to(image_tag("ama-logo.png", class: "top-bar__logo"), "https://www.ama.ab.ca") %>
     </div>
-    <div class="top-bar" id="main-menu">
-      <div class="top-bar-left">
-        <%= link_to(image_tag("ama-logo-small.svg", class: "topbar-logo show-for-medium"), "https://www.ama.ab.ca") %>
-      </div>
-      <div class="top-bar-right">
-        <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
-          <%= render partial: "ama_layout/main_top_nav_item", collection: navigation.items, as: :nav_item %>
-          <li>
-            <a href="<%= Rails.configuration.gatekeeper_site %>/help" target="_blank">Help</a>
-          </li>
-          <li>
-            <a href="<%= Rails.configuration.amaabca_site %>/membership/contact-us--centre-locations-hours-and-contact-information">Contact Us</a>
-          </li>
-          <%= navigation.top_nav %>
-          <li class="show-for-small-only">
-            <a href="<%= Rails.configuration.amaabca_site %>">AMA Website</a>
-          </li>
-          <li class="show-for-small-only">
-            <a href="http://amaroadreports.ca/">AMA Road Reports</a>
-          </li>
-          <%= navigation.sign_out_link %>
-        </ul>
-      </div>
+    <div class="top-bar-right">
+      <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
+        <li>
+          <a href="<%= Rails.configuration.gatekeeper_site %>/help" target="_blank">Help</a>
+        </li>
+        <li>
+          <a href="<%= Rails.configuration.amaabca_site %>/membership/contact-us--centre-locations-hours-and-contact-information">Contact Us</a>
+        </li>
+        <%= navigation.top_nav %>
+      </ul>
     </div>
   </div>
 </div>
+<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
+  <h2 class="side-nav__header">Online Account</h2>
+  <div class="side-nav__content">
+    <ul class="side-nav__list">
+      <%= render partial: "ama_layout/main_nav_item", collection: navigation.items, as: :nav_item %>
+      <li class="side-nav__item">
+        <a class="side-nav__link" href="<%= Rails.configuration.amaabca_site %>">AMA Website</a>
+      </li>
+      <li class="side-nav__item">
+        <a class="side-nav__link" href="http://amaroadreports.ca/">AMA Road Reports</a>
+      </li>
+      <li class="side-nav__item">
+        <a class="side-nav__link" href="<%= Rails.configuration.gatekeeper_site %>/help" target="_blank">Help</a>
+      </li>
+      <li class="side-nav__item">
+        <a class="side-nav__link" href="<%= Rails.configuration.amaabca_site %>/membership/contact-us--centre-locations-hours-and-contact-information">Contact Us</a>
+      </li>
+      <%= navigation.sign_out_link %>
+    </ul>
+  </div>
+</div>
+
 <div class="javascript_errors error_notification" hidden></div>
 <noscript>
   <div class="mt1 large-12 columns text-center error_notification">

data/app/views/ama_layout/_sub_nav.html.erb

@@ -1,3 +1,3 @@
-<ul class="inner-nav mb1">
+<ul class="side-nav__child-list">
   <%= render partial: "ama_layout/sub_nav_item", collection: sub_nav, as: :nav_item %>
 </ul>

data/app/views/ama_layout/_sub_nav_item.html.erb

@@ -1,3 +1,3 @@
-<li>
-  <%= link_to nav_item.text, nav_item.link, class: "sub-nav #{nav_item.active_class}" %>
+<li class="side-nav__child-item">
+  <%= link_to nav_item.text, nav_item.link, class: "side-nav__child-link #{nav_item.active_class}" %>
 </li>

data/app/views/ama_layout/_top_nav.html.erb

@@ -1,8 +1,8 @@
-<li class="has-submenu bb0">
-  <a class="show-for-medium">Online Account</a>
+<li class="has-submenu">
+  <%= link_to navigation.display_name_text, '#' %>
   <ul class="submenu menu vertical">
-    <li><a href="<%= Rails.configuration.amaabca_site %>">AMA Website</a></li>
+    <li><%= link_to 'AMA Website', Rails.configuration.amaabca_site %></li>
     <li><a href="http://amaroadreports.ca/">AMA Road Reports</a></li>
-    <li><a href="/logout">Sign Out</a></li>
+    <%= navigation.sign_out_link %>
   </ul>
 </li>

data/lib/ama_layout.rb

@@ -5,6 +5,8 @@ require "sass-rails"
 require "font-awesome-sass"
 require "draper"
 require "browser"
+require "breadcrumbs_on_rails"
+require "ama_layout/breadcrumb_builder"
 require "ama_layout/moneris"
 require "ama_layout/navigation"
 require "ama_layout/navigation_item"

data/lib/ama_layout/breadcrumb_builder.rb

@@ -0,0 +1,23 @@
+module AmaLayout
+  class BreadcrumbBuilder < BreadcrumbsOnRails::Breadcrumbs::Builder
+    def render
+      @elements.map { |e| render_element(e) }.join(@options[:separator])
+    end
+
+  private
+
+    def render_element(element)
+      name = compute_name(element)
+      path = element.path && compute_path(element) || '#'
+      render_list_element(name, path, element)
+    end
+
+    def render_list_element(name, path, element)
+      if element.options.delete(:disabled)
+        @context.content_tag :li, @context.link_to(name, '#', class: 'breadcrumbs__link--disabled', rel: 'nofollow')
+      else
+        @context.content_tag :li, @context.link_to(name, path, element.options)
+      end
+    end
+  end
+end

data/lib/ama_layout/decorators/navigation_decorator.rb

@@ -6,10 +6,14 @@ module AmaLayout
       object.items.map { |i| i.decorate }
     end
 
+    def display_name_text
+      name_or_email.truncate(30)
+    end
+
     def sign_out_link
       return "" unless user
-      h.content_tag :li, class: "show-for-small-only" do
-        h.concat h.link_to "Sign Out", "/logout"
+      h.content_tag :li, class: "side-nav__item" do
+        h.concat h.link_to "Sign Out", "/logout", class: "side-nav__link"
       end
     end
 
@@ -20,5 +24,9 @@ module AmaLayout
     def sidebar
       h.render partial: "ama_layout/sidebar", locals: { navigation: self } if items.any?
     end
+
+    def name_or_email
+      display_name.present? ? "Welcome, #{display_name.titleize}" : email
+    end
   end
 end

data/lib/ama_layout/decorators/navigation_item_decorator.rb

@@ -19,12 +19,18 @@ module AmaLayout
     end
 
     def active_class
-      "activepage" if active_link?
+      "side-nav__child-link--active-page" if active_link?
     end
 
   private
     def active_link?
-      sub_nav.map(&:link).push(link).include? current_url
+      sub_nav.map(&:link).push(link).include? current_url_without_query
+    end
+
+    def current_url_without_query
+      URI.parse(current_url).tap { |uri| uri.query = nil }.to_s
+    rescue URI::InvalidURIError
+      current_url
     end
   end
 end

data/lib/ama_layout/moneris/textbox.txt

@@ -1,5 +1,5 @@
 -webkit-appearance: none;
--webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px 0px inset;
+-webkit-box-shadow: none;
 -webkit-rtl-ordering: logical;
 -webkit-transition-delay: 0s, 0s;
 -webkit-transition-duration: 0.45s, 0.45s;
@@ -8,28 +8,24 @@
 -webkit-user-select: text;
 -webkit-writing-mode: horizontal-tb;
 background-color: rgb(255, 255, 255);
-border-bottom-color: rgb(204, 204, 204);
-border-bottom-left-radius: 3px;
-border-bottom-right-radius: 3px;
+border-bottom-color: rgb(229, 229, 229);
 border-bottom-style: solid;
-border-bottom-width: 1px;
+border-bottom-width: 2px;
 border-image-outset: 0px;
 border-image-repeat: stretch;
 border-image-slice: 100%;
 border-image-source: none;
 border-image-width: 1;
-border-left-color: rgb(204, 204, 204);
+border-left-color: rgb(229, 229, 229);
 border-left-style: solid;
-border-left-width: 1px;
-border-right-color: rgb(204, 204, 204);
+border-left-width: 2px;
+border-right-color: rgb(229, 229, 229);
 border-right-style: solid;
-border-right-width: 1px;
-border-top-color: rgb(204, 204, 204);
-border-top-left-radius: 3px;
-border-top-right-radius: 3px;
+border-right-width: 2px;
+border-top-color: rgb(229, 229, 229);
 border-top-style: solid;
-border-top-width: 1px;
-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px 0px inset;
+border-top-width: 2px;
+box-shadow: none;
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.74902);
 cursor: auto;
@@ -37,7 +33,7 @@ display: block;
 font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;font-size: 14px;
 font-style: normal;font-variant: normal;
 font-weight: normal;
-height: 37px;
+height: 44px;
 letter-spacing: normal;
 line-height: normal;
 margin-bottom: 0px;