biola_frontend_toolkit 0.3.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7b84af3e9b7d439b8e98c7dcf8f3989877428795
-  data.tar.gz: 88d6a258854e740eb341ff9dd5d1dc8d847f452c
+  metadata.gz: 472797cf5b7556ff439da01f33ed84b3a0a637e1
+  data.tar.gz: d4770a77020ca447618bd6c6e86f89d06731b2bd
 SHA512:
-  metadata.gz: 97f66dea0a0ed7596aaa99877571cf2713c20fe4c719b9f798e4a3929f449a51233beca70f89ae4e39f3c499f5255167b98fb92bc10440e6e19b553cb1107333
-  data.tar.gz: c060bd1bc202d9a8a1da31b80bc23c4472e9fa626610e5573c2a5c69f4989f7f6f42ee8784fef89c1366cbb3c604ecda17a4cc6ce261898937ef4e05c43fe2ec
+  metadata.gz: e27d79ebe39385327c703caf3f378a65e30b080d6a4e39d124d4ed1da98827d133f379cc1d8d9f99602e2be143a715d9c1765ba8d069a76676741233018a10bd
+  data.tar.gz: c2d690e02a4a9143d1cb57650486d843f432d83e55d31889e9bd7c3a3406463c300a5af95f79c710544882ed0d6da233274a68eec402f07fd0616bbca754b163

data/.ruby-version

@@ -0,0 +1 @@
+2.1.4

data/README.md

@@ -40,9 +40,9 @@ Your layout file should look something like this
         = yield
         = javascript_include_tag "application"
 
-Include the following in `application.css.scss`. This will add require statements for `bootstrap` and `font-awesome` automatically.
+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.
 
-    //= require biola-frontend-toolkit
+    @import "biola-frontend-toolkit";
 
 Include the following in `application.js.coffee`. This includes `jquery`, `jquery_ujs`, and `bootstrap` automatically.
 

data/app/assets/javascripts/biola-frontend-toolkit.js.coffee

@@ -1,4 +1,5 @@
 #= require jquery
 #= require jquery_ujs
 #= require bootstrap
-#= require_self
+#= require_tree ./resources
+#= require_self

data/app/assets/javascripts/resources/biola_header.js

@@ -0,0 +1,5 @@
+$('#biolaHeader .biola-header-more > button').on('click', function(){
+  $(this).parent().toggleClass('active');
+  $('#biolaHeader').toggleClass('active');
+  $('#biolaHeader .biola-header-nav').toggleClass('active');
+});

data/app/assets/stylesheets/_custom-bootstrap.scss

@@ -0,0 +1,50 @@
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+// @import "bootstrap/glyphicons"; // Skipping glyphicons since we use font-awesome
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";

data/app/assets/stylesheets/_mixins.scss

@@ -0,0 +1,43 @@
+//===============================================
+// Toggle-able media queries and old IE helper
+// See: http://jakearchibald.github.io/sass-ie/
+//===============================================
+$fix-mqs: false !default;
+$old-ie: false !default;
+$max-width-extreme:9999px;
+
+@mixin respond($min-width:0, $max-width:$max-width-extreme, $orientation:null) {
+  // If we're outputting for a fixed media query set...
+  @if $fix-mqs {
+    // ...and if we should apply these rules...
+    @if $fix-mqs >= $min-width and $fix-mqs <= $max-width {
+      // ...output the content the user gave us.
+      @content;
+    }
+  }
+  @else {
+    // Otherwise, output it using a regular media query
+    $query:'screen';
+
+    @if $min-width > 0 {
+      $query:$query + " and (min-width:#{$min-width})";
+    }
+    @if $max-width < $max-width-extreme {
+      $query:$query + " and (max-width:#{$max-width})";
+    }
+    @if $orientation {
+      $query:$query + " and (orientation:#{$orientation})";
+    }
+
+    @media #{$query} {
+      @content;
+    }
+  }
+}
+
+@mixin old-ie {
+  // Only use this content if we're dealing with old IE
+  @if $old-ie {
+    @content;
+  }
+}

data/app/assets/stylesheets/_settings.scss

@@ -0,0 +1 @@
+$color-biola-red: #CC1122;

data/app/assets/stylesheets/biola/_biola-header.scss

@@ -0,0 +1,81 @@
+// This is the new black biola header with the plus icon to drop down the menu bottons.
+//  Optionally supports user authentication option.
+
+#wrapperBiolaHeader { background:#111; width:100%; }
+
+#biolaHeader { margin:0 auto; padding:0 15px; height: 42px;
+  .overflow-container { overflow:hidden; position: relative; height: 42px; }
+  a { text-decoration:none; color:#FFF; font-weight:normal; }
+  p, ul, button { font-family:Helvetica,Arial,sans-serif; }
+
+  .biola-header-branding,
+  .biola-header-nav,
+  .biola-header-more,
+  .login-link { position: absolute; height: 42px; line-height: 42px; margin: 0; padding: 0; @include transition(top 300ms ease-in-out); }
+
+  .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;
+    a { font-weight:bold; }
+    img { width:22px; height:22px; vertical-align:top; display:inline-block; margin:0.75em 0.5em 0 0; }
+  }
+
+  .biola-header-nav,
+  .biola-header-more { display:none; }
+
+  .biola-header-more { right: 5px; }
+
+  #profile_link { float: right; height: 42px;
+    a.dropdown-toggle { text-decoration: none; padding: 8px 5px;
+      .fa-stack { width: 25px; height: 25px; line-height: 25px;
+        i.fa-stack-2x { color: #eee; font-size: 25px; }
+        i.fa-stack-1x { color: #777; font-size: 1em; }
+      }
+    }
+    #profile-img { height: 25px; width: 25px; background-size: contain; border-radius: 100px; border: 1px solid #ccc; background-color: white; background-position: center center; }
+    .dropdown-menu { margin-top: -8px;
+      a { color: #333; }
+    }
+  }
+  .login-link { right: 10px; top: 0px; color: #ccc;
+    a { color: white; font-weight: bold; text-decoration: underline; }
+  }
+  &.active {
+    .login-link { top: 40px; }
+  }
+}
+
+
+@media screen and (min-width:768px) {
+  #biolaHeader { width:750px;
+    .biola-header-nav { display:block; list-style:none; padding:0; right: 40px; top:-40px; font-size:14px;
+      &.active { top:0; }
+      li { float:left;
+        a { color:#AAA; display:block; padding:0 10px; }
+        a:hover { color:#FFF; }
+      }
+    }
+
+    .biola-header-more { display: block;
+      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; }
+    }
+
+    .login-link { right: 40px; }
+
+    &.active {
+      .biola-header-branding { top: 40px; }
+    }
+  }
+}
+
+@media screen and (min-width:992px) {
+  #biolaHeader { width:970px;
+    &.active {
+      .biola-header-branding { top: 0px; }
+    }
+  }
+
+}
+
+@media screen and (min-width:1200px) {
+  #biolaHeader { width:1170px;
+  }
+}

data/app/assets/stylesheets/biola/{global_app_header.scss → _global_app_header.scss}

@@ -1,3 +1,5 @@
+// This is the old biola header.
+
 #wrapperGlobalAppHeader { background:#111; width:100%; }
 #globalAppHeader { margin:0 auto; padding:0 15px; height: 42px;
   a { text-decoration:none; color:#FFF; }

data/app/assets/stylesheets/biola-frontend-toolkit.css.scss

@@ -1,22 +1,6 @@
-//= require bootstrap
-//= require font-awesome
-//= require_tree ./biola
-//= require_self
-
-body { margin: 0; }
-
-
-// Customize header dropdown menus. Declare both 'dropdown custom-dropdown' classes on the HTML element.
-//   We will still use the default Bootstrap dropdown but will overwrite some of it's default styles.
-.custom-dropdown { float: right;
-  .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;
-    i.fa { vertical-align: middle; }
-  }
-  .dropdown-menu { top: 122%; border-radius: 0; min-width: 230px;
-    > li {
-      > a { padding: 10px 20px;
-        i { margin-right: 8px; }
-      }
-    }
-  }
-}
+@import "font-awesome";
+@import "./custom-bootstrap";
+@import "./settings.scss";
+@import "./mixins";
+@import "./biola/*";
+@import "./toolkit/*";

data/app/assets/stylesheets/toolkit/_custom-dropdown.scss

@@ -0,0 +1,14 @@
+// Customize header dropdown menus. Declare both 'dropdown custom-dropdown' classes on the HTML element.
+//   We will still use the default Bootstrap dropdown but will overwrite some of it's default styles.
+.custom-dropdown { float: right;
+  .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;
+    i.fa { vertical-align: middle; }
+  }
+  .dropdown-menu { top: 122%; border-radius: 0; min-width: 230px;
+    > li {
+      > a { padding: 10px 20px;
+        i { margin-right: 8px; }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/toolkit/_general.scss

@@ -0,0 +1 @@
+body { margin: 0; }

data/app/views/frontend_toolkit/_biola_header.html.slim

@@ -0,0 +1,40 @@
+/ If you want this header to handle authentication, pass in `enable_auth: true`
+/  when rendering the partial. And make sure that current_user is defined.
+- enable_auth ||= false
+
+#wrapperBiolaHeader
+  #biolaHeader
+    - if enable_auth && current_user
+      #profile_link.dropdown.custom-dropdown
+        a.dropdown-toggle href="#" aria-hidden="true" data-toggle="dropdown"
+          - if current_user.try(:photo_url).present?
+            #profile-img style="background-image: url('#{current_user.photo_url}')"
+          - else
+            span.fa-stack.fa-lg
+              i.fa.fa-circle.fa-stack-2x
+              i.fa.fa-user.fa-stack-1x.fa-inverse
+        - if content_for?(:account_list)
+          ul.dropdown-menu.pull-right role="menu" aria-labelledby="dLabel"
+            = yield(:account_list)
+
+
+    .overflow-container
+      h2.biola-header-branding
+        a.biola-header-logo href="http://www.biola.edu"
+          = image_tag 'logo-biola-mark-white.png'
+          | Biola University
+      p.biola-header-more aria-hidden="true"
+        button +
+      ul.biola-header-nav
+        li = link_to "About", "http://www.biola.edu/about"
+        li = link_to "Academics", "http://www.biola.edu/academics"
+        li = link_to "Admissions", "http://www.biola.edu/admissions"
+        li = link_to "Athletics", "http://www.biola.edu/athletics"
+        li = link_to "News & Events", "http://now.biola.edu/"
+        li = link_to "Resources", "http://www.biola.edu/resources"
+        li = link_to "Offices", "http://www.biola.edu/offices"
+
+      - if enable_auth && !current_user
+        .login-link
+          = link_to 'Login', params.merge(login: 'true')
+          span.hidden-xs< for more results

data/biola_frontend_toolkit.gemspec

@@ -21,6 +21,7 @@ Gem::Specification.new do |spec|
   spec.add_dependency "bootstrap-sass",       "~> 3.1"
   spec.add_dependency "coffee-rails",         "~> 4.0"
   spec.add_dependency "font-awesome-rails",   "~> 4.2"
+  spec.add_dependency "sass-rails",           ">= 4.0"
   spec.add_dependency "slim",                 "~> 2.0"
   spec.add_development_dependency "bundler",  "~> 1.3"
   spec.add_development_dependency "rake"

data/lib/biola_frontend_toolkit/version.rb

@@ -1,3 +1,3 @@
 module BiolaFrontendToolkit
-  VERSION = "0.3.1"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: biola_frontend_toolkit
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.4.0
 platform: ruby
 authors:
 - Ryan Hall
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-10-09 00:00:00.000000000 Z
+date: 2014-11-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap-sass
@@ -52,6 +52,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.2'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
 - !ruby/object:Gem::Dependency
   name: slim
   requirement: !ruby/object:Gem::Requirement
@@ -102,6 +116,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".gitignore"
+- ".ruby-version"
 - Gemfile
 - LICENSE.txt
 - README.md
@@ -113,12 +128,20 @@ files:
 - app/assets/images/toolkit/footer-standard/logo-biola-v-white.png
 - app/assets/images/toolkit/footer-standard/rule_dotted_v.gif
 - app/assets/javascripts/biola-frontend-toolkit.js.coffee
+- app/assets/javascripts/resources/biola_header.js
+- app/assets/stylesheets/_custom-bootstrap.scss
+- app/assets/stylesheets/_mixins.scss
+- app/assets/stylesheets/_settings.scss
 - app/assets/stylesheets/biola-frontend-toolkit.css.scss
-- app/assets/stylesheets/biola/global_app_header.scss
-- app/assets/stylesheets/biola/global_marketing_footer.css.scss
-- app/assets/stylesheets/biola/global_marketing_header.css.scss
-- app/assets/stylesheets/biola/prerelease.css.scss
+- app/assets/stylesheets/biola/_biola-header.scss
+- app/assets/stylesheets/biola/_global_app_header.scss
+- app/assets/stylesheets/biola/_global_marketing_footer.scss
+- app/assets/stylesheets/biola/_global_marketing_header.scss
+- app/assets/stylesheets/biola/_prerelease.scss
+- app/assets/stylesheets/toolkit/_custom-dropdown.scss
+- app/assets/stylesheets/toolkit/_general.scss
 - app/helpers/biola_frontend/rails/frontend_toolkit_helper.rb
+- app/views/frontend_toolkit/_biola_header.html.slim
 - app/views/frontend_toolkit/_global_app_header.html.slim
 - app/views/frontend_toolkit/_global_marketing_footer.html.erb
 - app/views/frontend_toolkit/_global_marketing_header.html.slim
@@ -158,4 +181,3 @@ signing_key:
 specification_version: 4
 summary: this is a summary
 test_files: []
-has_rdoc: