ama_layout 2.9.2 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
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>