biola_frontend_toolkit 0.3.1 → 0.4.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 7b84af3e9b7d439b8e98c7dcf8f3989877428795
4
- data.tar.gz: 88d6a258854e740eb341ff9dd5d1dc8d847f452c
3
+ metadata.gz: 472797cf5b7556ff439da01f33ed84b3a0a637e1
4
+ data.tar.gz: d4770a77020ca447618bd6c6e86f89d06731b2bd
5
5
  SHA512:
6
- metadata.gz: 97f66dea0a0ed7596aaa99877571cf2713c20fe4c719b9f798e4a3929f449a51233beca70f89ae4e39f3c499f5255167b98fb92bc10440e6e19b553cb1107333
7
- data.tar.gz: c060bd1bc202d9a8a1da31b80bc23c4472e9fa626610e5573c2a5c69f4989f7f6f42ee8784fef89c1366cbb3c604ecda17a4cc6ce261898937ef4e05c43fe2ec
6
+ metadata.gz: e27d79ebe39385327c703caf3f378a65e30b080d6a4e39d124d4ed1da98827d133f379cc1d8d9f99602e2be143a715d9c1765ba8d069a76676741233018a10bd
7
+ data.tar.gz: c2d690e02a4a9143d1cb57650486d843f432d83e55d31889e9bd7c3a3406463c300a5af95f79c710544882ed0d6da233274a68eec402f07fd0616bbca754b163
data/.ruby-version ADDED
@@ -0,0 +1 @@
1
+ 2.1.4
data/README.md CHANGED
@@ -40,9 +40,9 @@ Your layout file should look something like this
40
40
  = yield
41
41
  = javascript_include_tag "application"
42
42
 
43
- Include the following in `application.css.scss`. This will add require statements for `bootstrap` and `font-awesome` automatically.
43
+ Include the following in `application.css.scss`. This will add require statements for `bootstrap` and `font-awesome` automatically. It also includes some biola variables and mixins.
44
44
 
45
- //= require biola-frontend-toolkit
45
+ @import "biola-frontend-toolkit";
46
46
 
47
47
  Include the following in `application.js.coffee`. This includes `jquery`, `jquery_ujs`, and `bootstrap` automatically.
48
48
 
@@ -1,4 +1,5 @@
1
1
  #= require jquery
2
2
  #= require jquery_ujs
3
3
  #= require bootstrap
4
- #= require_self
4
+ #= require_tree ./resources
5
+ #= require_self
@@ -0,0 +1,5 @@
1
+ $('#biolaHeader .biola-header-more > button').on('click', function(){
2
+ $(this).parent().toggleClass('active');
3
+ $('#biolaHeader').toggleClass('active');
4
+ $('#biolaHeader .biola-header-nav').toggleClass('active');
5
+ });
@@ -0,0 +1,50 @@
1
+ // Core variables and mixins
2
+ @import "bootstrap/variables";
3
+ @import "bootstrap/mixins";
4
+
5
+ // Reset and dependencies
6
+ @import "bootstrap/normalize";
7
+ @import "bootstrap/print";
8
+ // @import "bootstrap/glyphicons"; // Skipping glyphicons since we use font-awesome
9
+
10
+ // Core CSS
11
+ @import "bootstrap/scaffolding";
12
+ @import "bootstrap/type";
13
+ @import "bootstrap/code";
14
+ @import "bootstrap/grid";
15
+ @import "bootstrap/tables";
16
+ @import "bootstrap/forms";
17
+ @import "bootstrap/buttons";
18
+
19
+ // Components
20
+ @import "bootstrap/component-animations";
21
+ @import "bootstrap/dropdowns";
22
+ @import "bootstrap/button-groups";
23
+ @import "bootstrap/input-groups";
24
+ @import "bootstrap/navs";
25
+ @import "bootstrap/navbar";
26
+ @import "bootstrap/breadcrumbs";
27
+ @import "bootstrap/pagination";
28
+ @import "bootstrap/pager";
29
+ @import "bootstrap/labels";
30
+ @import "bootstrap/badges";
31
+ @import "bootstrap/jumbotron";
32
+ @import "bootstrap/thumbnails";
33
+ @import "bootstrap/alerts";
34
+ @import "bootstrap/progress-bars";
35
+ @import "bootstrap/media";
36
+ @import "bootstrap/list-group";
37
+ @import "bootstrap/panels";
38
+ @import "bootstrap/responsive-embed";
39
+ @import "bootstrap/wells";
40
+ @import "bootstrap/close";
41
+
42
+ // Components w/ JavaScript
43
+ @import "bootstrap/modals";
44
+ @import "bootstrap/tooltip";
45
+ @import "bootstrap/popovers";
46
+ @import "bootstrap/carousel";
47
+
48
+ // Utility classes
49
+ @import "bootstrap/utilities";
50
+ @import "bootstrap/responsive-utilities";
@@ -0,0 +1,43 @@
1
+ //===============================================
2
+ // Toggle-able media queries and old IE helper
3
+ // See: http://jakearchibald.github.io/sass-ie/
4
+ //===============================================
5
+ $fix-mqs: false !default;
6
+ $old-ie: false !default;
7
+ $max-width-extreme:9999px;
8
+
9
+ @mixin respond($min-width:0, $max-width:$max-width-extreme, $orientation:null) {
10
+ // If we're outputting for a fixed media query set...
11
+ @if $fix-mqs {
12
+ // ...and if we should apply these rules...
13
+ @if $fix-mqs >= $min-width and $fix-mqs <= $max-width {
14
+ // ...output the content the user gave us.
15
+ @content;
16
+ }
17
+ }
18
+ @else {
19
+ // Otherwise, output it using a regular media query
20
+ $query:'screen';
21
+
22
+ @if $min-width > 0 {
23
+ $query:$query + " and (min-width:#{$min-width})";
24
+ }
25
+ @if $max-width < $max-width-extreme {
26
+ $query:$query + " and (max-width:#{$max-width})";
27
+ }
28
+ @if $orientation {
29
+ $query:$query + " and (orientation:#{$orientation})";
30
+ }
31
+
32
+ @media #{$query} {
33
+ @content;
34
+ }
35
+ }
36
+ }
37
+
38
+ @mixin old-ie {
39
+ // Only use this content if we're dealing with old IE
40
+ @if $old-ie {
41
+ @content;
42
+ }
43
+ }
@@ -0,0 +1 @@
1
+ $color-biola-red: #CC1122;
@@ -0,0 +1,81 @@
1
+ // This is the new black biola header with the plus icon to drop down the menu bottons.
2
+ // Optionally supports user authentication option.
3
+
4
+ #wrapperBiolaHeader { background:#111; width:100%; }
5
+
6
+ #biolaHeader { margin:0 auto; padding:0 15px; height: 42px;
7
+ .overflow-container { overflow:hidden; position: relative; height: 42px; }
8
+ a { text-decoration:none; color:#FFF; font-weight:normal; }
9
+ p, ul, button { font-family:Helvetica,Arial,sans-serif; }
10
+
11
+ .biola-header-branding,
12
+ .biola-header-nav,
13
+ .biola-header-more,
14
+ .login-link { position: absolute; height: 42px; line-height: 42px; margin: 0; padding: 0; @include transition(top 300ms ease-in-out); }
15
+
16
+ .biola-header-branding { top: 0px; left: 0; font-size:13px; font-family:'proxima-nova',Helvetica,Arial,sans-serif; text-transform:uppercase; letter-spacing:0.25em;
17
+ a { font-weight:bold; }
18
+ img { width:22px; height:22px; vertical-align:top; display:inline-block; margin:0.75em 0.5em 0 0; }
19
+ }
20
+
21
+ .biola-header-nav,
22
+ .biola-header-more { display:none; }
23
+
24
+ .biola-header-more { right: 5px; }
25
+
26
+ #profile_link { float: right; height: 42px;
27
+ a.dropdown-toggle { text-decoration: none; padding: 8px 5px;
28
+ .fa-stack { width: 25px; height: 25px; line-height: 25px;
29
+ i.fa-stack-2x { color: #eee; font-size: 25px; }
30
+ i.fa-stack-1x { color: #777; font-size: 1em; }
31
+ }
32
+ }
33
+ #profile-img { height: 25px; width: 25px; background-size: contain; border-radius: 100px; border: 1px solid #ccc; background-color: white; background-position: center center; }
34
+ .dropdown-menu { margin-top: -8px;
35
+ a { color: #333; }
36
+ }
37
+ }
38
+ .login-link { right: 10px; top: 0px; color: #ccc;
39
+ a { color: white; font-weight: bold; text-decoration: underline; }
40
+ }
41
+ &.active {
42
+ .login-link { top: 40px; }
43
+ }
44
+ }
45
+
46
+
47
+ @media screen and (min-width:768px) {
48
+ #biolaHeader { width:750px;
49
+ .biola-header-nav { display:block; list-style:none; padding:0; right: 40px; top:-40px; font-size:14px;
50
+ &.active { top:0; }
51
+ li { float:left;
52
+ a { color:#AAA; display:block; padding:0 10px; }
53
+ a:hover { color:#FFF; }
54
+ }
55
+ }
56
+
57
+ .biola-header-more { display: block;
58
+ button { display:block; text-align:center; line-height:40px; font-weight:bold; font-size:18px; margin:0; padding:0 8px; color:#CCC; cursor:pointer; background:transparent; border:0; outline:0; position:static; -webkit-appearance:none; }
59
+ }
60
+
61
+ .login-link { right: 40px; }
62
+
63
+ &.active {
64
+ .biola-header-branding { top: 40px; }
65
+ }
66
+ }
67
+ }
68
+
69
+ @media screen and (min-width:992px) {
70
+ #biolaHeader { width:970px;
71
+ &.active {
72
+ .biola-header-branding { top: 0px; }
73
+ }
74
+ }
75
+
76
+ }
77
+
78
+ @media screen and (min-width:1200px) {
79
+ #biolaHeader { width:1170px;
80
+ }
81
+ }
@@ -1,3 +1,5 @@
1
+ // This is the old biola header.
2
+
1
3
  #wrapperGlobalAppHeader { background:#111; width:100%; }
2
4
  #globalAppHeader { margin:0 auto; padding:0 15px; height: 42px;
3
5
  a { text-decoration:none; color:#FFF; }
@@ -1,22 +1,6 @@
1
- //= require bootstrap
2
- //= require font-awesome
3
- //= require_tree ./biola
4
- //= require_self
5
-
6
- body { margin: 0; }
7
-
8
-
9
- // Customize header dropdown menus. Declare both 'dropdown custom-dropdown' classes on the HTML element.
10
- // We will still use the default Bootstrap dropdown but will overwrite some of it's default styles.
11
- .custom-dropdown { float: right;
12
- .dropdown-toggle { display: block; text-align:center; line-height:42px; padding:0 15px; color:#CCC; cursor:pointer; background:transparent; border:0; outline:0; -webkit-user-select: none; -webkit-appearance:none;
13
- i.fa { vertical-align: middle; }
14
- }
15
- .dropdown-menu { top: 122%; border-radius: 0; min-width: 230px;
16
- > li {
17
- > a { padding: 10px 20px;
18
- i { margin-right: 8px; }
19
- }
20
- }
21
- }
22
- }
1
+ @import "font-awesome";
2
+ @import "./custom-bootstrap";
3
+ @import "./settings.scss";
4
+ @import "./mixins";
5
+ @import "./biola/*";
6
+ @import "./toolkit/*";
@@ -0,0 +1,14 @@
1
+ // Customize header dropdown menus. Declare both 'dropdown custom-dropdown' classes on the HTML element.
2
+ // We will still use the default Bootstrap dropdown but will overwrite some of it's default styles.
3
+ .custom-dropdown { float: right;
4
+ .dropdown-toggle { display: block; text-align:center; line-height:42px; padding:0 15px; color:#CCC; cursor:pointer; background:transparent; border:0; outline:0; -webkit-user-select: none; -webkit-appearance:none;
5
+ i.fa { vertical-align: middle; }
6
+ }
7
+ .dropdown-menu { top: 122%; border-radius: 0; min-width: 230px;
8
+ > li {
9
+ > a { padding: 10px 20px;
10
+ i { margin-right: 8px; }
11
+ }
12
+ }
13
+ }
14
+ }
@@ -0,0 +1 @@
1
+ body { margin: 0; }
@@ -0,0 +1,40 @@
1
+ / If you want this header to handle authentication, pass in `enable_auth: true`
2
+ / when rendering the partial. And make sure that current_user is defined.
3
+ - enable_auth ||= false
4
+
5
+ #wrapperBiolaHeader
6
+ #biolaHeader
7
+ - if enable_auth && current_user
8
+ #profile_link.dropdown.custom-dropdown
9
+ a.dropdown-toggle href="#" aria-hidden="true" data-toggle="dropdown"
10
+ - if current_user.try(:photo_url).present?
11
+ #profile-img style="background-image: url('#{current_user.photo_url}')"
12
+ - else
13
+ span.fa-stack.fa-lg
14
+ i.fa.fa-circle.fa-stack-2x
15
+ i.fa.fa-user.fa-stack-1x.fa-inverse
16
+ - if content_for?(:account_list)
17
+ ul.dropdown-menu.pull-right role="menu" aria-labelledby="dLabel"
18
+ = yield(:account_list)
19
+
20
+
21
+ .overflow-container
22
+ h2.biola-header-branding
23
+ a.biola-header-logo href="http://www.biola.edu"
24
+ = image_tag 'logo-biola-mark-white.png'
25
+ | Biola University
26
+ p.biola-header-more aria-hidden="true"
27
+ button +
28
+ ul.biola-header-nav
29
+ li = link_to "About", "http://www.biola.edu/about"
30
+ li = link_to "Academics", "http://www.biola.edu/academics"
31
+ li = link_to "Admissions", "http://www.biola.edu/admissions"
32
+ li = link_to "Athletics", "http://www.biola.edu/athletics"
33
+ li = link_to "News & Events", "http://now.biola.edu/"
34
+ li = link_to "Resources", "http://www.biola.edu/resources"
35
+ li = link_to "Offices", "http://www.biola.edu/offices"
36
+
37
+ - if enable_auth && !current_user
38
+ .login-link
39
+ = link_to 'Login', params.merge(login: 'true')
40
+ span.hidden-xs< for more results
@@ -21,6 +21,7 @@ Gem::Specification.new do |spec|
21
21
  spec.add_dependency "bootstrap-sass", "~> 3.1"
22
22
  spec.add_dependency "coffee-rails", "~> 4.0"
23
23
  spec.add_dependency "font-awesome-rails", "~> 4.2"
24
+ spec.add_dependency "sass-rails", ">= 4.0"
24
25
  spec.add_dependency "slim", "~> 2.0"
25
26
  spec.add_development_dependency "bundler", "~> 1.3"
26
27
  spec.add_development_dependency "rake"
@@ -1,3 +1,3 @@
1
1
  module BiolaFrontendToolkit
2
- VERSION = "0.3.1"
2
+ VERSION = "0.4.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: biola_frontend_toolkit
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.1
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Ryan Hall
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-10-09 00:00:00.000000000 Z
11
+ date: 2014-11-14 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bootstrap-sass
@@ -52,6 +52,20 @@ dependencies:
52
52
  - - "~>"
53
53
  - !ruby/object:Gem::Version
54
54
  version: '4.2'
55
+ - !ruby/object:Gem::Dependency
56
+ name: sass-rails
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - ">="
60
+ - !ruby/object:Gem::Version
61
+ version: '4.0'
62
+ type: :runtime
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - ">="
67
+ - !ruby/object:Gem::Version
68
+ version: '4.0'
55
69
  - !ruby/object:Gem::Dependency
56
70
  name: slim
57
71
  requirement: !ruby/object:Gem::Requirement
@@ -102,6 +116,7 @@ extensions: []
102
116
  extra_rdoc_files: []
103
117
  files:
104
118
  - ".gitignore"
119
+ - ".ruby-version"
105
120
  - Gemfile
106
121
  - LICENSE.txt
107
122
  - README.md
@@ -113,12 +128,20 @@ files:
113
128
  - app/assets/images/toolkit/footer-standard/logo-biola-v-white.png
114
129
  - app/assets/images/toolkit/footer-standard/rule_dotted_v.gif
115
130
  - app/assets/javascripts/biola-frontend-toolkit.js.coffee
131
+ - app/assets/javascripts/resources/biola_header.js
132
+ - app/assets/stylesheets/_custom-bootstrap.scss
133
+ - app/assets/stylesheets/_mixins.scss
134
+ - app/assets/stylesheets/_settings.scss
116
135
  - app/assets/stylesheets/biola-frontend-toolkit.css.scss
117
- - app/assets/stylesheets/biola/global_app_header.scss
118
- - app/assets/stylesheets/biola/global_marketing_footer.css.scss
119
- - app/assets/stylesheets/biola/global_marketing_header.css.scss
120
- - app/assets/stylesheets/biola/prerelease.css.scss
136
+ - app/assets/stylesheets/biola/_biola-header.scss
137
+ - app/assets/stylesheets/biola/_global_app_header.scss
138
+ - app/assets/stylesheets/biola/_global_marketing_footer.scss
139
+ - app/assets/stylesheets/biola/_global_marketing_header.scss
140
+ - app/assets/stylesheets/biola/_prerelease.scss
141
+ - app/assets/stylesheets/toolkit/_custom-dropdown.scss
142
+ - app/assets/stylesheets/toolkit/_general.scss
121
143
  - app/helpers/biola_frontend/rails/frontend_toolkit_helper.rb
144
+ - app/views/frontend_toolkit/_biola_header.html.slim
122
145
  - app/views/frontend_toolkit/_global_app_header.html.slim
123
146
  - app/views/frontend_toolkit/_global_marketing_footer.html.erb
124
147
  - app/views/frontend_toolkit/_global_marketing_header.html.slim
@@ -158,4 +181,3 @@ signing_key:
158
181
  specification_version: 4
159
182
  summary: this is a summary
160
183
  test_files: []
161
- has_rdoc: