ama_layout 2.9.2 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/ama_layout.gemspec +1 -1
  3. data/app/assets/images/ama-logo-small.svg +44 -0
  4. data/app/assets/javascripts/ama_layout/desktop/header_menu.coffee +7 -3
  5. data/app/assets/stylesheets/ama_layout/_settings.scss +566 -0
  6. data/app/assets/stylesheets/ama_layout/foundation_and_overrides.scss +48 -1483
  7. data/app/assets/stylesheets/ama_layout/layout/base-styles.scss +7 -1
  8. data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss +18 -3
  9. data/app/assets/stylesheets/ama_layout/layout_components/accordions.scss +44 -12
  10. data/app/assets/stylesheets/ama_layout/layout_components/cart.scss +1 -21
  11. data/app/assets/stylesheets/ama_layout/layout_components/forms.scss +55 -1
  12. data/app/assets/stylesheets/ama_layout/layout_components/index.scss +1 -0
  13. data/app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss +42 -13
  14. data/app/assets/stylesheets/ama_layout/layout_components/reveal-modal.scss +11 -0
  15. data/app/assets/stylesheets/ama_layout/layout_components/sidebar.scss +7 -59
  16. data/app/assets/stylesheets/ama_layout/layout_components/siteheader.scss +108 -11
  17. data/app/assets/stylesheets/ama_layout/media_queries/desktop.scss +2 -2
  18. data/app/assets/stylesheets/ama_layout/media_queries/mobile-and-tablet.scss +2 -2
  19. data/app/assets/stylesheets/ama_layout/media_queries/mobile.scss +1 -15
  20. data/app/assets/stylesheets/ama_layout/media_queries/tablet.scss +2 -2
  21. data/app/views/ama_layout/_footer.html.erb +1 -1
  22. data/app/views/ama_layout/_main_top_nav_item.html.erb +2 -3
  23. data/app/views/ama_layout/_notice.html.erb +2 -2
  24. data/app/views/ama_layout/_sidebar.html.erb +1 -1
  25. data/app/views/ama_layout/_siteheader.html.erb +31 -31
  26. data/app/views/ama_layout/_top_nav.html.erb +3 -7
  27. data/app/views/ama_layout/_top_sub_nav.html.erb +1 -1
  28. data/app/views/ama_layout/_top_sub_nav_item.html.erb +0 -1
  29. data/lib/ama_layout/decorators/navigation_decorator.rb +1 -1
  30. data/lib/ama_layout/version.rb +1 -1
  31. metadata +10 -8
  32. data/app/assets/images/AMA-Logo.svg +0 -44
@@ -1,16 +1,113 @@
1
- .site-header{
2
- width: 100%;
3
- height: 50px;
4
- background-color: $primary-color;
5
- margin-bottom: $base-margin*6;
6
- padding: 0;
1
+ /* Styles for Top Bar, Title Bar */
2
+ .topbar-logo{
3
+ width: 132px;
4
+ padding: 12px $base-padding*2;
5
+ }
6
+
7
+ .top-bar{
8
+ margin-bottom: $base-margin*4;
9
+
10
+ @include breakpoint(small only){
11
+ overflow-x: hidden;
12
+ overflow-y: scroll;
13
+ }
14
+
15
+ @include breakpoint(medium){
16
+ display: block;
17
+ }
18
+
19
+ a{
20
+ text-decoration: none;
21
+ color: $white;
22
+ font-weight: 600;
23
+ }
24
+
25
+ .is-drilldown{
26
+ background: $brand-blue-light;
27
+ }
28
+
29
+ ul{
30
+ li{
31
+ &:hover{
32
+ background: $brand-blue-light;
33
+ }
34
+
35
+ @include breakpoint(small only){
36
+ background: $brand-blue-light;
37
+ border-bottom: solid 1px darken($brand-blue-light, 5%);
38
+ }
39
+ }
40
+ }
41
+
42
+ .dropdown.menu > li.is-dropdown-submenu-parent > a{
43
+ //the width of the top-bar dropdown and its children on desktop
44
+ min-width: 200px;
45
+
46
+ &:hover{
47
+ background: lighten($brand-blue-light, 3%);
48
+ }
49
+ }
50
+
51
+ .submenu{
52
+ border: none;
7
53
 
8
- a:hover{
9
- color: $sky;
54
+ li{
55
+ background: $brand-blue-light;
56
+ border-bottom: solid 1px darken($brand-blue-light, 5%);
57
+
58
+ &:nth-child(1){
59
+ border-top: solid 1px darken($brand-blue-light, 5%);
60
+ }
61
+
62
+ &:hover{
63
+ background: lighten($brand-blue-light, 3%);
64
+ }
65
+ }
66
+ }
67
+ }
68
+
69
+ .title-bar{
70
+ @include breakpoint (small only){
71
+ padding: 0 0.5rem;
72
+ }
73
+
74
+ @include breakpoint(medium) {
75
+ display: none;
76
+ }
77
+
78
+ .menu-icon{
79
+ position: relative;
10
80
  cursor: pointer;
81
+ width: 20px;
82
+ height: 16px;
83
+ color: $white;
11
84
  }
12
85
 
13
- img {
14
- padding-top:$base-padding*2;
86
+ .menu-icon{
87
+ display: inline-block;
88
+ vertical-align: middle;
89
+ }
90
+
91
+ .menu-icon::after{
92
+ position: absolute;
93
+ display: block;
94
+ width: 100%;
95
+ height: 2px;
96
+ background: $white;
97
+ box-shadow: 0 7px 0 $white, 0 14px 0 $white; //This creates the menu icon
98
+ }
99
+
100
+ .menu-icon::after{
101
+ content: '';
102
+ top: 0;
103
+ left: 0;
104
+ }
105
+ }
106
+
107
+ .sticky{
108
+ width: 100%;
109
+
110
+ &.is-stuck{
111
+ z-index: 501;
15
112
  }
16
- }
113
+ }
@@ -1,5 +1,5 @@
1
- @media screen and (min-width: $large-breakpoint){
1
+ @media screen and #{breakpoint(large)}{
2
2
  *:focus{ //yes, all the elements
3
3
  outline: none;
4
4
  }
5
- }
5
+ }
@@ -1,4 +1,4 @@
1
- @media screen and (max-width: $medium-breakpoint){
1
+ @media screen and #{breakpoint(medium down)}{
2
2
  .skip{
3
3
  margin-top: $base-margin*4;
4
4
  }
@@ -13,4 +13,4 @@
13
13
  border-left: 0;
14
14
  margin-top: $base-margin*4;
15
15
  }
16
- }
16
+ }
@@ -1,18 +1,4 @@
1
- @media screen and (max-width:640px){
2
- .dashboard-nav{
3
- margin-top: 0;
4
- }
5
- }
6
-
7
- @media screen and (max-width: $small-breakpoint){
8
- .site-header{
9
- margin-bottom: $base-margin*4;
10
-
11
- img{
12
- padding-left: $base-padding*4;
13
- }
14
- }
15
-
1
+ @media screen and #{breakpoint(small only)}{
16
2
  .page-steps h3{
17
3
  color: $slate;
18
4
  font-style: italic;
@@ -1,4 +1,4 @@
1
- @media screen and (min-width: $small-breakpoint) and (max-width: $medium-breakpoint){
1
+ @media screen and #{breakpoint(medium only)}{
2
2
  .main-content-container{
3
3
  padding: $base-padding*4 0 0;
4
4
  }
@@ -14,4 +14,4 @@
14
14
  margin-left: 0;
15
15
  margin-right: 0;
16
16
  }
17
- }
17
+ }
@@ -1,2 +1,2 @@
1
- <footer class="grid-12 footer">
1
+ <footer>
2
2
  </footer>
@@ -1,5 +1,4 @@
1
- <li class="divider"></li>
2
- <li class="<%= nav_item.sub_nav_class %>">
3
- <%= link_to nav_item.text, nav_item.link %>
1
+ <li class="has-submenu <%= nav_item.sub_nav_class %>">
2
+ <%= link_to nav_item.text, nav_item.link, class: 'show-for-small-only' %>
4
3
  <%= nav_item.top_sub_nav %>
5
4
  </li>
@@ -1,5 +1,5 @@
1
1
  <div class="row">
2
- <div class="large-12 columns center pl0 mb1">
2
+ <div class="mb1">
3
3
  <p class="notice_notification"><%= flash[:notice].html_safe %></p>
4
4
  </div>
5
- </div>
5
+ </div>
@@ -1,4 +1,4 @@
1
- <div class="medium-4 large-3 columns show-for-medium-up pl0">
1
+ <div class="medium-4 large-3 columns show-for-medium pl0">
2
2
  <div class="white-trans pb0">
3
3
  <div class="large-12 fullwidth center">
4
4
  <%= render partial: "ama_layout/main_nav_item", collection: navigation.items, as: :nav_item %>
@@ -1,32 +1,32 @@
1
- <div class="sticky contain-to-grid top-bar-nav">
2
- <nav class="top-bar" data-topbar data-options="mobile_show_parent_link: false" role="navigation">
3
- <ul class="title-area">
4
- <li class="name">
5
- <%= link_to(image_tag("AMA-Logo.svg"), "https://www.ama.ab.ca") %>
6
- </li>
7
- <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
8
- </ul>
9
- <section class="top-bar-section show-for-small-only">
10
- <ul class="right">
11
- <%= render partial: "ama_layout/main_top_nav_item", collection: navigation.items, as: :nav_item %>
12
- <li class="divider"></li>
13
- <li><a href="<%= Rails.configuration.amaabca_site %>">AMA Website</a></li>
14
- <li class="divider"></li>
15
- <li><a href="http://amaroadreports.ca/">AMA Road Reports</a></li>
16
- <li class="divider"></li>
17
- <li><a href="<%= Rails.configuration.gatekeeper_site %>/help" target="_blank">Help</a></li>
18
- <li class="divider"></li>
19
- <li><a href="<%= Rails.configuration.amaabca_site %>/membership/contact-us--centre-locations-hours-and-contact-information">Contact Us</a></li>
20
- <li class="divider show-for-small-only"></li>
21
- <%= navigation.sign_out_link %>
22
- </ul>
23
- </section>
24
- <section class="top-bar-section show-for-medium-up">
25
- <ul class="right">
26
- <li><a href="<%= Rails.configuration.gatekeeper_site %>/help" target="_blank">Help</a></li>
27
- <li><a href="<%= Rails.configuration.amaabca_site %>/membership/contact-us--centre-locations-hours-and-contact-information">Contact Us</a></li>
28
- <%= navigation.top_nav %>
29
- </ul>
30
- </section>
31
- </nav>
1
+ <div data-sticky-container>
2
+ <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
3
+ <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
4
+ <button class="menu-icon" type="button" data-toggle></button>
5
+ <%= link_to(image_tag("ama-logo-small.svg", class: "topbar-logo"), "https://www.ama.ab.ca") %>
6
+ </div>
7
+ <div class="top-bar" id="main-menu">
8
+ <div class="top-bar-left">
9
+ <%= link_to(image_tag("ama-logo-small.svg", class: "topbar-logo show-for-medium"), "https://www.ama.ab.ca") %>
10
+ </div>
11
+ <div class="top-bar-right">
12
+ <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
13
+ <%= render partial: "ama_layout/main_top_nav_item", collection: navigation.items, as: :nav_item %>
14
+ <li>
15
+ <a href="<%= Rails.configuration.gatekeeper_site %>/help" target="_blank">Help</a>
16
+ </li>
17
+ <li>
18
+ <a href="<%= Rails.configuration.amaabca_site %>/membership/contact-us--centre-locations-hours-and-contact-information">Contact Us</a>
19
+ </li>
20
+ <%= navigation.top_nav %>
21
+ <li class="show-for-small-only">
22
+ <a href="<%= Rails.configuration.amaabca_site %>">AMA Website</a>
23
+ </li>
24
+ <li class="show-for-small-only">
25
+ <a href="http://amaroadreports.ca/">AMA Road Reports</a>
26
+ </li>
27
+ <%= navigation.sign_out_link %>
28
+ </ul>
29
+ </div>
30
+ </div>
31
+ </div>
32
32
  </div>
@@ -1,12 +1,8 @@
1
- <li class="has-dropdown dropdown-open-link">
2
- <a>My Online Account</a>
3
- <ul class="dropdown">
4
- <%= render partial: "ama_layout/main_top_nav_item", collection: navigation.items, as: :nav_item %>
5
- <li class="divider"></li>
1
+ <li class="has-submenu bb0">
2
+ <a class="show-for-medium">Online Account</a>
3
+ <ul class="submenu menu vertical">
6
4
  <li><a href="<%= Rails.configuration.amaabca_site %>">AMA Website</a></li>
7
- <li class="divider"></li>
8
5
  <li><a href="http://amaroadreports.ca/">AMA Road Reports</a></li>
9
- <li class="divider"></li>
10
6
  <li><a href="/logout">Sign Out</a></li>
11
7
  </ul>
12
8
  </li>
@@ -1,3 +1,3 @@
1
- <ul class="dropdown nested">
1
+ <ul class="submenu menu vertical" data-submenu>
2
2
  <%= render partial: "ama_layout/top_sub_nav_item", collection: sub_nav, as: :nav_item %>
3
3
  </ul>
@@ -1,4 +1,3 @@
1
- <li class="divider"></li>
2
1
  <li>
3
2
  <%= link_to nav_item.text, nav_item.link %>
4
3
  </li>
@@ -8,7 +8,7 @@ module AmaLayout
8
8
 
9
9
  def sign_out_link
10
10
  return "" unless user
11
- h.content_tag :li do
11
+ h.content_tag :li, class: "show-for-small-only" do
12
12
  h.concat h.link_to "Sign Out", "/logout"
13
13
  end
14
14
  end
@@ -1,3 +1,3 @@
1
1
  module AmaLayout
2
- VERSION = '2.9.2'
2
+ VERSION = '3.0.0'
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ama_layout
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.9.2
4
+ version: 3.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Michael van den Beuken
@@ -18,22 +18,22 @@ authors:
18
18
  autorequire:
19
19
  bindir: bin
20
20
  cert_chain: []
21
- date: 2016-04-14 00:00:00.000000000 Z
21
+ date: 2016-04-28 00:00:00.000000000 Z
22
22
  dependencies:
23
23
  - !ruby/object:Gem::Dependency
24
24
  name: foundation-rails
25
25
  requirement: !ruby/object:Gem::Requirement
26
26
  requirements:
27
- - - '='
27
+ - - "~>"
28
28
  - !ruby/object:Gem::Version
29
- version: 5.4.5.0
29
+ version: 6.2.0
30
30
  type: :runtime
31
31
  prerelease: false
32
32
  version_requirements: !ruby/object:Gem::Requirement
33
33
  requirements:
34
- - - '='
34
+ - - "~>"
35
35
  - !ruby/object:Gem::Version
36
- version: 5.4.5.0
36
+ version: 6.2.0
37
37
  - !ruby/object:Gem::Dependency
38
38
  name: rails
39
39
  requirement: !ruby/object:Gem::Requirement
@@ -242,8 +242,8 @@ files:
242
242
  - README.md
243
243
  - Rakefile
244
244
  - ama_layout.gemspec
245
- - app/assets/images/AMA-Logo.svg
246
245
  - app/assets/images/alberta-blur.jpg
246
+ - app/assets/images/ama-logo-small.svg
247
247
  - app/assets/images/cc-type-mc.png
248
248
  - app/assets/images/cc-type-visa.png
249
249
  - app/assets/images/footer-racetrack-big.png
@@ -265,6 +265,7 @@ files:
265
265
  - app/assets/javascripts/ama_layout/mobile/mobile_menu.coffee
266
266
  - app/assets/javascripts/ama_layout/mobile/ready.coffee
267
267
  - app/assets/javascripts/ama_layout/mobile/tablesaw.stackonly.js
268
+ - app/assets/stylesheets/ama_layout/_settings.scss
268
269
  - app/assets/stylesheets/ama_layout/application.scss
269
270
  - app/assets/stylesheets/ama_layout/foundation_and_overrides.scss
270
271
  - app/assets/stylesheets/ama_layout/layout/base-styles.scss
@@ -279,6 +280,7 @@ files:
279
280
  - app/assets/stylesheets/ama_layout/layout_components/index.scss
280
281
  - app/assets/stylesheets/ama_layout/layout_components/notification.scss
281
282
  - app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss
283
+ - app/assets/stylesheets/ama_layout/layout_components/reveal-modal.scss
282
284
  - app/assets/stylesheets/ama_layout/layout_components/show-hide-content-box.scss
283
285
  - app/assets/stylesheets/ama_layout/layout_components/sidebar.scss
284
286
  - app/assets/stylesheets/ama_layout/layout_components/siteheader.scss
@@ -365,7 +367,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
365
367
  version: '0'
366
368
  requirements: []
367
369
  rubyforge_project:
368
- rubygems_version: 2.2.0
370
+ rubygems_version: 2.2.2
369
371
  signing_key:
370
372
  specification_version: 4
371
373
  summary: ".ama.ab.ca site layouts"
@@ -1,44 +0,0 @@
1
- <?xml version="1.0" encoding="utf-8"?>
2
- <!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
- <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- viewBox="0 0 228 58.2" style="enable-background:new 0 0 228 58.2;" xml:space="preserve">
5
- <style type="text/css">
6
- .st0{fill:#FFFFFF;}
7
- .st1{fill:#FFFFFF;stroke:#FFFFFF;stroke-miterlimit:10;}
8
- .st2{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.3594;}
9
- .st3{fill:#01549C;}
10
- .st4{fill:#D92E27;}
11
- .st5{fill-rule:evenodd;clip-rule:evenodd;fill:#D92E27;}
12
- </style>
13
- <g>
14
- <g>
15
- <g>
16
- <path class="st0" d="M105.8,4.1h21.8l11,34.6h0.1l11.5-34.6h21v52h-13.6l0.2-40H158l-13.3,40h-12.7l-12.7-40h-0.2l0.3,40h-13.6
17
- V4.1z M69.2,4.1h17l20.1,52H91L87.2,45H67.6l-4.1,11.1H49.4L69.2,4.1z M77.7,14.8h-0.2l-6.7,20.4h13L77.7,14.8z M190.9,4.1h17
18
- l20.1,52h-15.2L208.9,45h-19.5l-4.1,11.1h-14.1L190.9,4.1z M199.4,14.8h-0.1l-6.7,20.4h13.1L199.4,14.8z"/>
19
- </g>
20
- </g>
21
- <path class="st1" d="M0.6,23.6C0.5,11.3,15.1,1.3,33.3,1.3c18.2,0,33,10,33.1,22.4C66.5,36,51.9,46,33.7,46
22
- C15.5,46,0.7,36,0.6,23.6z"/>
23
- <path class="st2" d="M62,14.1c3.5,4.3,4.3,11.2,1.6,16.1c-6.2,10.7-17.8,13.9-29.4,14.5C22,44.8,10.3,41.3,3.5,30.9
24
- c-2.6-4.6-2.1-11.6,1.1-15.8C13.7,3.2,28.8,1,43.2,3.4C50.2,5.1,57,7.8,62,14.1L62,14.1z"/>
25
- <path class="st3" d="M62,14.1c3.5,4.3,4.3,11.2,1.6,16.1c-6.2,10.7-17.8,13.9-29.4,14.5C22,44.8,10.3,41.3,3.5,30.9
26
- c-2.6-4.6-2.1-11.6,1.1-15.8C13.7,3.2,28.8,1,43.2,3.4C50.2,5.1,57,7.8,62,14.1L62,14.1z"/>
27
- <path class="st0" d="M58.3,17.3c1.8,2.5,2.6,6,1.7,9.1c-3.2,8.8-12.7,12.1-21.1,13.2c-10.5,1.2-21.3-0.5-28.8-7.7
28
- c-2.9-3.1-4.3-7.7-2.7-11.7C11.7,11,21.7,8.3,30.9,7.3C41.6,7,51.6,9,58.3,17.3L58.3,17.3z"/>
29
- <path class="st4" d="M41.2,22.1l0.5,1.4c-0.8,2.7-1.6,5.5-2.4,8.3l5.1-0.1l2.1,4.7L40.6,38c-1-2.6-1.9-5.3-2.8-8l-9.7,0
30
- c-0.9,2.5-1.6,5-2.3,7.6c-1.9-0.2-3.9-0.8-5.8-1.1c0.3-1.3,0.9-2.7,1.3-4c2.8-1.3,5.1-4.4,5-7.6l-2.4-0.1l5.5-16.3
31
- c2.4,0,4.4-0.1,6.7-0.1L41.2,22.1L41.2,22.1z"/>
32
- <path class="st4" d="M56.7,31.1l-4.6,0c-0.3-1.1-0.6-2.2-1-3.4l-5.6-0.1c-0.3,1.1-0.5,2.3-0.8,3.4l-4.7,0L45.5,13l5.3,0L56.7,31.1
33
- L56.7,31.1z"/>
34
- <path class="st4" d="M24.4,16.3c0.6,0.9,0.9,1.9,0.9,3.1l-4.5,0c-0.1-0.7-0.2-1.4-0.8-1.8c-0.7-0.6-1.8-0.7-2.6-0.4
35
- c-2.7,1.4-2.5,4.7-2.3,7.5c0.3,1.4,0.8,3.2,2.4,3.7c0.9,0,1.7,0,2.3-0.5c0.6-0.7,0.9-1.5,1.1-2.3h4.6c-0.3,3.1-2.7,5.8-5.7,6.6
36
- c-2.7,0.5-5.4-0.2-7.2-2.3c-2.8-3.2-3.1-8.1-1.3-11.9c1.2-2.5,3.7-4.4,6.4-4.7C20.4,13.1,22.7,14.1,24.4,16.3L24.4,16.3z"/>
37
- <path class="st0" d="M36.1,25.2h-6.5l3.1-10.4C33.8,18.3,35,21.7,36.1,25.2L36.1,25.2z"/>
38
- <path class="st0" d="M46.6,23.7c0.4-1.8,0.9-3.8,1.4-5.6l1.7,5.6H46.6L46.6,23.7z"/>
39
- <path class="st5" d="M57.4,27.9c0.6,0,1.1-0.4,1.1-1.1c0-0.6-0.5-1-1.1-1c-0.6,0-1.1,0.4-1.1,1C56.3,27.4,56.8,27.9,57.4,27.9
40
- L57.4,27.9z M56.5,26.8c0-0.5,0.4-0.9,0.9-0.9c0.5,0,0.9,0.4,0.9,0.9c0,0.5-0.4,0.9-0.9,0.9C56.9,27.7,56.5,27.3,56.5,26.8
41
- L56.5,26.8z M57.2,26.9h0.2l0.3,0.5h0.2l-0.3-0.5c0.2,0,0.3-0.1,0.3-0.3c0-0.2-0.1-0.3-0.4-0.3H57v1.2h0.2V26.9L57.2,26.9z
42
- M57.2,26.7v-0.4h0.3c0.1,0,0.3,0,0.3,0.2c0,0.2-0.1,0.2-0.3,0.2H57.2L57.2,26.7z"/>
43
- </g>
44
- </svg>