speedo 0.2.0 → 0.2.5

data/app/assets/javascripts/speedo.js

@@ -1,14 +1,13 @@
 //= require jquery-ui
+//= require speedo/bootstrap
 //= require speedo/chosen.jquery
 //= require speedo/jquery.autoSuggest
 //= require speedo/jquery.autogrow
 //= require speedo/jquery.dataTables
 //= require speedo/jquery.livequery
-//= require speedo/jquery.mousewheel-3.0.4.pack
 //= require speedo/jquery.placeholder.min
 //= require speedo/spin
 //= require speedo/jquery.spin
 //= require speedo/jquery.timeago
-//= require speedo/jquery.tools.min
 //= require speedo/jquery.uniform
 //= require swim

data/app/assets/javascripts/swim.js.coffee

@@ -1,80 +1,53 @@
 $ ->
-  
-  # For Web-app mode, uncomment this (and the CSS in style.scss) to make the cols fill the browser
+  # For Web-app mode, uncomment this (and the CSS in speedo/layout.css.scss) to make the cols fill the browser
   # $('.col1, .col2, .col3').css('height',$(window).height() - $('.main_nav').outerHeight() - $('.branding').outerHeight() - 60 + 'px')
   # $(window).resize ->
   #   $('.col1, .col2, .col3').css('height',$(window).height() - $('.main_nav').outerHeight() - $('.branding').outerHeight() - 60 + 'px')
-  
-  
-  $('.popup:not(a)').livequery ->
-    $(this).overlay()
 
-  $('a.popup').livequery ->
-    $(this).overlay
-      onBeforeLoad: ->
-        wrap = this.getOverlay().find(".wrap")
-        wrap.load(this.getTrigger().attr("href"))
-  
-  $('.modal:not(a)').livequery ->
-    $(this).overlay
-      mask: '#fff'
-      closeOnClick: false
-      closeOnEsc: false
-
-  $('a.modal').livequery ->
-    $(this).overlay
-      mask: '#fff'
-      closeOnClick: false
-      closeOnEsc: false
-      onBeforeLoad: ->
-        wrap = this.getOverlay().find(".wrap")
-        wrap.load(this.getTrigger().attr("href"))
+  $('.tip').livequery ->
+    $(@).tooltip()
 
   $('time.ago').livequery ->
-    $(this).timeago()
-  
-  $('.tip').livequery ->
-    $(this).tooltip
-      effect: 'slide'
-      slideFade: true
-      bounce: true
-    .dynamic
-      direction: 'down'
-      bounce: true
-  
-  $('input[type="date"]').livequery ->
-    $(this).datepicker
+    $(@).timeago()
+
+  $('textarea.autogrow').livequery ->
+    $(@).autogrow()
+
+  $('select.chzn').livequery ->
+    $(@).chosen()
+
+  $('input, textarea').livequery ->
+    $(@).placeholder()
+
+  $("select, input:checkbox, input:radio, input:file").livequery ->
+    $(@).not(':hidden').not('.chzn').not('.bare').uniform()
+
+  $('input[type=date]').livequery ->
+    $(@).not('.bare').datepicker
       numberOfMonths:  2
       dateFormat:      'yy-mm-dd'
       showOn:          'focus'
-  
-  $('textarea.autoGrow').livequery ->
-    $(this).autogrow()
-  
-  $("select:not(.chzn), input:checkbox, input:radio, input:file").not(':hidden').livequery ->
-    $(this).uniform()
-  
-  $('select.chzn').livequery ->
-    $(this).chosen()
-  
+
+  $("a[data-toggle=modal]").livequery ->
+    $(@).click ->
+      target = $(@).attr('data-target')
+      url = $(@).attr('href')
+      $(target).find('.modal-body').load(url)
+
   $('input.autoSuggest').livequery ->  
-    # $(this).autoSuggest "/path/to/script", 
+    # $(@).autoSuggest "/path/to/script", 
       # minChars: 2
     autoSuggestData = [{value: "21", name: "Mick Jagger"},{value: "43", name: "Johnny Storm"},{value: "46", name: "Richard Hatch"}]
-    $(this).autoSuggest autoSuggestData,
+    $(@).autoSuggest autoSuggestData,
       startText: "AutoSuggesting"
       selectedItemProp: "name"
       searchObjProps: "name"
-  
-  $('input, textarea').livequery ->
-    $(this).placeholder()
-  
-  
+
   $('.dataTable').livequery ->
-    $(this).dataTable
+    $(@).dataTable
       "bPaginate": false # Don't paginate
       "aaSorting": [] # No initial sorting
-    # "bJQueryUI": true # Use jQueryUI styling
-    # "aoColumnDefs": [ # Use this to make the final column un-sortable
-    #   { "bSortable": false, "aTargets": [ -1 ] } 
-    # ]
+      "aoColumnDefs": [ # Use this to make the final column un-sortable
+        { "bSortable": false, "aTargets": [ -1 ] } 
+      ]
+      # "bJQueryUI": true # Use jQueryUI styling

data/app/assets/stylesheets/application.css.scss

@@ -1,2 +1,2 @@
 // @import files below speedo (in order) so you can use the bourbon's jazzy mixins. Don't *=require
-@import "speedo";
+@import 'speedo/speedo';

data/app/assets/stylesheets/speedo/base.css.scss

@@ -0,0 +1,72 @@
+/* Base Styles - Set HTML element styles here */
+* {
+  -moz-box-sizing:border-box;
+  -webkit-box-sizing:border-box;
+  box-sizing:border-box;
+}
+body {
+  color: $text;
+  background: $bg;
+  font-size:12px;
+  line-height:1.231;
+}
+a, a:visited:not(.btn), .link  { 
+  color: $link; 
+  text-decoration: none;
+  cursor:pointer;
+}
+a:hover, .link:hover {
+  color: $hover;
+}
+ul, ol {
+  margin: 0;
+  padding: 0;
+  li {
+    list-style: none;
+  }
+}
+h1,h3,h5 {
+  font-weight:normal;
+  font-weight:200;
+}
+h2,h4,h6{
+  font-weight:normal;
+}
+
+input:not(.btn), textarea {
+  height:auto;
+  border:1px solid #999;
+  @include border-radius(3px);
+  padding:5px;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,0.2));
+  &:focus {
+    border-color:#acd;
+    @include box-shadow(0 0 3px rgba(150,180,230,1));
+  }
+}
+footer {
+  position:relative;
+  margin:-1.8em 10px 0 0;   /* So it appears at the bottom of the right column and is not lost in web-app mode */
+  float: right;
+  font-size: 0.8em;
+  opacity:0.5;
+}
+
+
+/* No-JS */
+.no-js body {
+  margin-top:30px;
+}
+#noscript_warning {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 5px 0 6px;
+  text-align: center;
+  font-size: 120%;
+  font-weight: bold;
+  color: #fff;
+  background:#AE0000;
+  z-index: 101;
+}

data/app/assets/stylesheets/speedo/helpers.css.scss

@@ -0,0 +1,34 @@
+/* =============================================================================
+   Non-semantic helper classes
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+
+/* Hide for both screenreaders and browsers:
+   css-discuss.incutio.com/wiki/Screenreader_Visibility */
+.hidden { display: none !important; visibility: hidden !important; }
+
+/* Hide only visually, but have it available for screenreaders: by Jon Neal.
+  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+/* Float and clear */
+.left { float: left; }
+.right { float: right; }
+.clear { clear: both; }
+
+/* Inline-block */
+.ib { display:inline-block; *zoom:1; *display:inline; }

data/app/assets/stylesheets/speedo/layout.css.scss

@@ -0,0 +1,220 @@
+/* 
+  Column Layout
+  =============
+  This layout is designed for mobile-first, so that the 'side' columns go below the main 
+  content on narrower screen-widths.
+  
+  IMPORTANT: Most of the styles that will be seen by the typical browser (i.e. the 960 design) 
+  are in the @media queries below.
+  
+  Set the column background colours using the variables (top of file) for consistent 
+  column colouration.
+*/
+
+#wrapper {
+  max-width: 960px;      /* Set the width of the page here */
+  padding:0;
+  margin: 0 auto 20px;
+  @include border-bottom-radius(3px);
+  @include box-shadow(0 2px 2px rgba(0,0,0,0.5));
+}
+
+/* Layout for mobile < 480px width screens (see below for media queries) */
+.colmask {
+  position:relative;     /* This fixes the IE7 overflow hidden bug */
+  clear:both;
+  float:left;
+  width:100%;            /* width of whole page */
+  @include border-radius(0 0 3px 3px);
+  background:#fff;
+  overflow:hidden;       /* This chops off any overhanging divs, including the leftcol bg */
+}
+.colright,.colmid,.colleft {
+  float:left;
+  width:100%;
+  position:relative;
+}
+.col1,.col2,.col3 {
+  float:left;
+  position:relative;
+  padding:0 0 5em;
+}
+.onecol {                         /* Full page settings */
+  background:$maincolbg;          /* page background colour */
+  .col1 {
+    width:96%;                    /* page width minus left and right padding */
+    left:2%;                      /* page left padding */
+  }
+}
+.threecol, .leftcol, .rightcol {
+  background:$maincolbg;          /* main column background colour */
+  .col1, .col2, .col3 {
+    width:100%;                   /* page width minus left and right padding */
+    padding:0 2% 50px;            /* page left padding */
+  }
+  .col2 {background:$leftcolbg;}  /* left column background colour */
+  .col3 {background:$rightcolbg;} /* right column background colour */
+}
+.rightcol .col2, .leftcol .col3, .onecol .col2, .onecol .col3 { display:none; }
+
+
+/* Media Queries for Responsive Design. These override the primary ('mobile first') styles */
+
+@media only screen and (min-width: 480px) {
+ /* Style adjustments for viewports 480px and over go here */
+ /* 2 Column (double page) settings */
+ .threecol {
+   .col2 {
+     width:46%;     /* left column content width (column width minus left and right padding) */
+     left:0%;       /* right column width plus left column left padding */
+   }
+   .col3 {
+     width:46%;     /* right column content width (column width minus left and right padding) */
+     left:0%;       /* (right column width) plus (left column left and right padding) plus (right column left padding) */
+   }
+ }
+}
+
+@media only screen and (min-width: 768px) {
+  /* Style adjustments for viewports 768px and over (most desktop browsers) go here */
+  .colmask {
+    .col1, .col2, .col3 {
+      padding:0 0 5em;
+      background:transparent
+    }
+  }
+  .col1 { min-height:400px; }
+  .leftcol {                  /* 2 Column (left menu) settings */
+    background:$maincolbg;    /* right column background colour */
+    .colleft {
+      right:75%;              /* right column width */
+      background:$leftcolbg;  /* left column background colour */
+      @include box-shadow(inset -1px 0 0 #ccc); /* 0 spread so it isn't visible at the top and bottom */
+    }
+    .col1 {
+      width:71%;              /* right column content width */
+      left:102%;              /* 100% plus left column left padding */
+    }
+    .col2 {
+      width:21%;              /* left column content width (column width minus left and right padding) */
+      left:6%;                /* (right column left and right padding) plus (left column left padding) */
+    }
+    .col3 {
+      display:none;
+    }
+  }
+  .rightcol {                 /* 2 Column (right menu) settings */
+    background:$rightcolbg;   /* right column background colour */
+    .colleft {
+      right:25%;              /* right column width */
+      background:$maincolbg;  /* left column background colour */
+      @include box-shadow(inset -1px 0 0 #ccc); /* 0 spread so it isn't visible at the top and bottom */
+    }
+    .col1 {
+      width:71%;              /* left column content width (left column width minus left and right padding) */
+      left:27%;               /* (right column width) plus (left column left padding) */
+    }
+    .col2 {
+      display:none;
+    }
+    .col3 {
+      width:21%;              /* right column content width (right column width minus left and right padding) */
+      left:31%;               /* (right column width) plus (left column left and right padding) plus (right column left padding) */
+    }
+  }
+  .threecol {                 /* 3 Column settings */
+    background:$rightcolbg;   /* right column background colour */
+    .colmid {
+      right:25%;              /* width of the right column */
+      background:$maincolbg;  /* left column background colour */
+      @include box-shadow(1px 0 0 #ccc); /* Use box-shadow for 'borders' so the layout isn't affected */
+    }
+    .colleft {
+      right:50%;              /* width of the middle column */
+      background:$leftcolbg;  /* left column background colour */
+      @include box-shadow(inset -1px 0 0 #ccc); /* 0 spread so it isn't visible at the top and bottom */
+    }
+    .col1 {
+      width:46%;              /* width of center column content (column width minus padding on either side) */
+      left:102%;              /* 100% plus left padding of center column */
+    }
+    .col2 {
+      width:21%;              /* Width of left column content (column width minus padding on either side) */
+      left:31%;               /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
+    }
+    .col3 {
+      width:21%;              /* Width of right column content (column width minus padding on either side) */
+      left:85%;               /* Please make note of the brackets here:
+      (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
+    }
+  }
+}
+
+
+
+/* Below are three options for variations on theming:
+  1. Web-app mode: Full-width, full-height page that doesn't scroll (the columns scroll instead) - also requires JS
+  2. Full-width page, fixed-position header, with scrolling content
+  3. Fixed-position header, with scrolling content (2 sections of CSS to uncomment)
+*/
+
+
+
+@media only screen and (min-width: 768px) {
+  /* For Web-app mode, uncomment this (and the JS in home.coffee) * /
+  #wrapper {
+    max-width: 100%;
+    width:100%;
+    margin:0;
+    padding:0;
+  }
+  .col1,.col2,.col3 {
+    overflow-y:auto;
+  }
+  /* */
+
+  /* For full-width fixed header+nav, uncomment this * /
+  #wrapper {
+    max-width: 100%;
+    width:100%;
+    margin:0;
+    padding:0;
+  }
+  .branding, .main_nav {
+    position:fixed;
+    width:100%;
+    top:0;
+    margin:0 auto;
+    z-index:1000;
+  }
+  .main_nav {
+    top:50px;         // Height of .branding
+  }
+  .col1,.col2,.col3 {
+    margin-top:83px;  // Height of .branding + .main_nav
+  }
+  /* */
+
+  /* For fixed header+nav, uncomment this (and 963 CSS below) * /
+  .branding, .main_nav {
+    position:fixed;
+    width:964px;
+    top:0;
+    margin:0 auto;
+    z-index:1000;
+  }
+  .main_nav {
+    top:50px;         // Height of .branding
+  }
+  .col1,.col2,.col3 {
+    margin-top:83px;  // Height of .branding + .main_nav
+  }
+  /* */  
+}
+@media only screen and (max-width: 963px) {
+  /* For fixed header+nav, uncomment this (and above) * /
+  .branding, .main_nav {
+    width:100%;
+  }
+  /* */
+}

data/app/assets/stylesheets/speedo/plugins.css.scss

@@ -0,0 +1,110 @@
+/* Error messages */
+.flash {
+  padding:0.5em 2em;
+  font-size:1.5em;
+  text-align:center;
+  text-shadow:-1px -1px 1px #FFFFFF, 1px 1px 1px rgba(0, 0, 0, 0.3);
+  &.success {
+    background:$bggreen;
+    color:#090;
+  }
+  &.notice {
+    background:$bgblue;
+    color:#009;
+  }
+  &.alert {
+    background:$bgyellow;
+    color:#770;
+  }
+  &.error {
+    background:$bgred;
+    color:#900;
+  }
+}
+
+
+.dataTables_wrapper {
+  @include clearfix;
+}
+
+div.uni-selector, div.uni-uploader {
+  margin-left:-2px;         /* Left aligns the uniform masks, but be careful if they're inline */
+}
+div.uni-uploader {
+  width:211px;
+  span.uni-filename {
+    width:124px;
+  }
+  span.uni-action {
+    height:28px;
+  }
+  input {
+    width:100%;
+  }
+}
+
+.formtastic {
+  textarea {
+    padding:5px;
+  }  
+  .fragments .label, .choices .label {
+    position:relative;
+    width:25%;
+    margin-right:-25%;
+    label {
+      position:relative;
+    }
+  }
+  .label { // Override bootstrap label styling
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-shadow: none;
+    vertical-align: inherit;
+    white-space: inherit;
+    border:0;
+    border-radius:0;
+    padding:0;
+    color: $text;
+    background-color: transparent;
+  }
+  .inline_choices {
+    .choices-group {
+      width:100%;
+      .choice {
+        display:inline-block; zoom:1;*display:inline;
+        vertical-align:top;
+        margin-right:1em;
+        margin:0 1em 0 0;
+      }
+    }
+  }
+}
+
+
+ul.as-selections {
+  width:72%; // To match the formtastic input widths
+  border:1px solid #999;
+  @include border-radius(3px);
+  padding:5px;
+  @include box-shadow(inset 0 1px 1px rgba(0,0,0,0.2));
+  li.as-original input {
+    height:26px;
+    margin:0;
+    @include box-shadow(none);
+    color:#999; /* For the placeholder colour */
+    &:focus {color:inherit;}
+  }
+}
+.as-results {
+  position:absolute;
+  left:25%; // To match the formtastic label width
+}
+
+
+.chzn-drop { // box-sizing overrides
+  width:100% !important;
+  .chzn-search input {
+    width:100% !important;
+  }
+}

data/app/assets/stylesheets/speedo/speedo.css.scss

@@ -0,0 +1,35 @@
+@import 'bootstrap';
+@import 'formtastic-buttonless';
+@import 'autoSuggest';
+@import 'chosen';
+@import 'jquery.dataTables';
+@import 'jquery-ui-1.8.18.custom';
+@import 'uniform.default';
+@import 'bourbon';
+
+@import 'speedo/theme';
+@import 'speedo/base';
+@import 'speedo/layout';
+@import 'speedo/plugins';
+@import 'speedo/helpers';
+
+
+
+/* =============================================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
+   ========================================================================== */
+ 
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
+  a, a:visited { color: #444 !important; text-decoration: underline; }
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3{ page-break-after: avoid; }
+}
+
+

data/app/assets/stylesheets/speedo/theme.css.scss

@@ -0,0 +1,62 @@
+/* Colors, base.css */
+$bg:          #ddd;     /* Background color (if not in web-app mode) */
+$text:        #333;
+$link:        #0090d5;
+$hover:       #17639b;
+/* Pastels, plugins.css */
+$bggreen:     #e3fde4;
+$bgblue:      #bcf;
+$bgyellow:    #ffc;
+$bgred:       #f99;
+/* Column background colors, layout.css */
+$maincolbg:   #fff;
+$leftcolbg:   #f6f6f6;
+$rightcolbg:  #fafafa;
+
+
+.branding {
+  padding:5px 0;
+  background:#eee;
+  .logo {
+    float: left;
+    margin-left:2%;
+    img {
+      display:block;
+      height: 40px;
+    }
+  }
+  .user {
+    float:right;
+    margin:10px 2% 0;
+    a {
+    }
+    .user-name {
+    }
+    .user-logout {
+    }
+  }
+}
+
+
+.main_nav {
+  padding:5px 0;
+  background:#eee;
+  .search {
+    margin-right:10px;
+  }
+  .home {
+    margin-left:10px;
+  }
+  a {
+    display:inline-block; zoom:1;*display:inline;
+    padding:0.2em 0.5em;
+    background:#ccc;
+    @include border-radius(0.3em);
+    &:hover {
+      background:#ddd;
+    }
+    &.active {
+      @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.5));
+    }
+  }
+}

data/app/views/layouts/speedo/application.html.haml

@@ -15,12 +15,15 @@
     
     = javascript_include_tag 'speedo/modernizr.min.js'
     = javascript_include_tag 'speedo/respond.js'
+    /[if lt IE 9] 
+      %script{:src => "https://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"}
     = stylesheet_link_tag :application
     = javascript_include_tag :application
     = yield :head
 
   %body
-    %noscript#noscript_warning This site works best with JavaScript enabled. Some features may not be available
+    %noscript
+      #noscript_warning This site works best with JavaScript enabled. Some features may not be available
     #wrapper.clearfix
       %header.branding.clearfix
         = link_to image_tag('speedo/logo.png'), root_url, class: 'logo'