diff --git a/Gruntfile.js b/Gruntfile.js index d157f1c..cd301e5 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -32,7 +32,8 @@ module.exports = function(grunt) { '<%= meta.srcPath %>js/push.js', '<%= meta.srcPath %>js/segmented-controllers.js', '<%= meta.srcPath %>js/sliders.js', - '<%= meta.srcPath %>js/toggles.js' + '<%= meta.srcPath %>js/toggles.js', + '<%= meta.srcPath %>js/alerts.js' ], dest: '<%= meta.distPath %><%= pkg.name %>.js' } diff --git a/README.md b/README.md index 51e424c..6df1d51 100644 --- a/README.md +++ b/README.md @@ -12,19 +12,19 @@ Take note that our master branch is our active, unstable development branch and ## Documentation -Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://maker.github.io/ratchet](http://maker.github.io/ratchet). The docs may also be run locally. +Ratchet's documentation is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at . The docs may also be run locally. ### Running documentation locally 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation). 2. From the root `/ratchet` directory, run `jekyll serve` in the command line. -3. Open [http://localhost:4000](http://localhost:4000) in your browser, and boom! +3. Open in your browser, and boom! Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/). ## Support -Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@goRatchet](http://www.twitter.com/goratchet). +Ratchet was developed to support iOS 7+ for iPhone. Questions or discussions about Ratchet should happen in the [Google group](https://groups.google.com/forum/#!forum/goratchet) or hit us up on Twitter [@GoRatchet](https://twitter.com/goratchet). ## Reporting bugs & contributing @@ -45,18 +45,18 @@ A small list of "gotchas" are provided below for designers and developers starti Connor Sears -- https://twitter.com/connors -- https://github.com/connors +- +- Dave Gamache -- https://twitter.com/dhg -- https://github.com/dhg +- +- Jacob Thornton -- https://twitter.com/fat -- https://github.com/fat +- +- ## License diff --git a/dist/theme-classic.css b/dist/ratchet-theme.css similarity index 100% rename from dist/theme-classic.css rename to dist/ratchet-theme.css diff --git a/dist/ratchet.css b/dist/ratchet.css index 12b65b7..bba8e0f 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -303,9 +303,11 @@ strong { [class*="bar-"].bar-footer { bottom: 0; } -[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard { - -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); +[class*="bar-"].bar-footer-secondary { + bottom: 44px; +} +[class*="bar-"].bar-footer-secondary-tab { + bottom: 50px; } .bar-nav { @@ -346,8 +348,6 @@ strong { bottom: 0; height: 50px; padding: 0; - -webkit-box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); - box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } .tab-inner { @@ -409,7 +409,7 @@ strong { .table-view .table-view-cell { position: relative; padding: 11px 60px 12px 15px; - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: 15px 100%; background-repeat: no-repeat; } @@ -448,7 +448,7 @@ strong { color: #999; font-weight: 500; background-color: #fafafa; - background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-position: 0 100%, 0 0%; background-repeat: no-repeat; } @@ -537,6 +537,7 @@ input[type="color"], height: 40px; padding: 10px 15px; margin-bottom: 10px; + line-height: 21px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; @@ -584,31 +585,35 @@ select { margin-bottom: 0; background-color: transparent; border: 0; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0; -webkit-box-shadow: none; box-shadow: none; + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; } .input-group input:last-child { - border-bottom-width: 0; + background-image: none; } .input-row { overflow: hidden; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + background-image: url("data:image/svg+xml;utf8,"); + background-position: 15px 100%; + background-repeat: no-repeat; } .input-row:last-child { - border-bottom-width: 0; + background-image: none; } .input-row label { float: left; width: 35%; - padding: 11px 10px 9px 15px; + padding: 10px 15px; font-family: "Helvetica Neue", Helvetica, sans-serif; - font-weight: 500; + line-height: 1.1; } .input-row label + input { @@ -616,7 +621,7 @@ select { width: 65%; padding-left: 0; margin-bottom: 0; - border-bottom: 0; + background-image: none; } [class*="bar-"] input[type=search] { @@ -988,6 +993,55 @@ input[type="button"] { background-color: rgba(0, 0, 0, 0.15); } +.alert { + position: fixed; + right: 15px; + left: 15px; + bottom: 65px; + padding: 15px; + color: #fff; + border-radius: 3px; + z-index: 10; + -webkit-transition: opacity; + transition: opacity; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + -webkit-transition-timing-function: linear; + transition-timing-function: linear; +} +.alert .close { + position: relative; + top: -2px; + float: right; + color: inherit; + cursor: pointer; + -webkit-transition: opacity; + transition: opacity; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; + -webkit-transition-timing-function: linear; + transition-timing-function: linear; +} +.alert .close:active { + opacity: .6; +} +.alert.dismiss { + opacity: 0; +} + +.alert-positive { + background-color: rgba(76, 217, 100, 0.97); +} + +.alert-negative { + background-color: rgba(221, 82, 77, 0.97); +} + +.alert-inline { + position: static; + margin: 15px; +} + .modal { position: fixed; top: 0; diff --git a/dist/ratchet.js b/dist/ratchet.js index e92bf13..990c28e 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -15,8 +15,7 @@ !function () { var findModals = function (target) { - var i; - var modals = document.querySelectorAll('a'); + var i, modals = document.querySelectorAll('a'); for (; target && target !== document; target = target.parentNode) { for (i = modals.length; i--;) { if (modals[i] === target) return target; } } @@ -30,13 +29,14 @@ window.addEventListener('touchend', function (event) { var modal = getModal(event); if (modal) { - modal.classList.toggle('active'); + if (modal && modal.classList.contains('modal')) modal.classList.toggle('active'); event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) } }); }(); + /* ---------------------------------- - * POPOVER v1.0.0 + * POPOVER v1.0.1 * Licensed under The MIT License * http://opensource.org/licenses/MIT * ---------------------------------- */ @@ -76,7 +76,14 @@ if (!anchor || !anchor.hash) return; - popover = document.querySelector(anchor.hash); + try { + popover = document.querySelector(anchor.hash); + } + catch (error) { + popover = null; + } + + if (popover == null) return; if (!popover || !popover.classList.contains('popover')) return; @@ -626,8 +633,8 @@ startTime = +new Date; pageX = e.touches[0].pageX; pageY = e.touches[0].pageY; - deltaX = 0; - deltaY = 0; + deltaX = 0; + deltaY = 0; setSlideNumber(0); @@ -775,4 +782,40 @@ toggle = false; }); -}(); \ No newline at end of file +}(); +/* ---------------------------------- + * ALERT v0.0.1 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + var findAlerts = function (target) { + var i, alerts = document.querySelectorAll('a'); + for (; target && target !== document; target = target.parentNode) { + for (i = alerts.length; i--;) { if (alerts[i] === target) return target; } + } + }; + + var onAlertHidden = function () { + var alert = getAlert(event); + + alert.style.display = 'none'; + alert.removeEventListener('webkitTransitionEnd', onAlertHidden); + } + + var getAlert = function (event) { + var alertDismiss = findAlerts(event.target); + if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash); + }; + + window.addEventListener('click', function (event) { + var alert = getAlert(event); + + if (alert) { + if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss'); + alert.addEventListener('webkitTransitionEnd', onAlertHidden); + event.preventDefault(); + } + }); +}(); diff --git a/examples/app-classic/checkout.html b/examples/app-classic/checkout.html index c984995..8c24726 100644 --- a/examples/app-classic/checkout.html +++ b/examples/app-classic/checkout.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/choose-movie.html b/examples/app-classic/choose-movie.html index ca20330..8efeca7 100644 --- a/examples/app-classic/choose-movie.html +++ b/examples/app-classic/choose-movie.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/choose-theater.html b/examples/app-classic/choose-theater.html index f11237e..089698b 100644 --- a/examples/app-classic/choose-theater.html +++ b/examples/app-classic/choose-theater.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/index.html b/examples/app-classic/index.html index 31b7c54..1266646 100644 --- a/examples/app-classic/index.html +++ b/examples/app-classic/index.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/settings.html b/examples/app-classic/settings.html index bb7f50d..82c98e1 100644 --- a/examples/app-classic/settings.html +++ b/examples/app-classic/settings.html @@ -12,7 +12,7 @@ - + diff --git a/examples/app-classic/theaters.html b/examples/app-classic/theaters.html index 1d79c04..42b4505 100644 --- a/examples/app-classic/theaters.html +++ b/examples/app-classic/theaters.html @@ -12,6 +12,7 @@ + diff --git a/examples/app-default/index.html b/examples/app-default/index.html index 4b031f3..75b2fd1 100644 --- a/examples/app-default/index.html +++ b/examples/app-default/index.html @@ -18,143 +18,153 @@ -
-

Movie finder

-
- + +
+ + This is an alert. +
- +
+

Movie finder

+
+ -
+ -
-
\ No newline at end of file diff --git a/examples/components/classic/index.html b/examples/components/classic/index.html index d7a7b73..d5030eb 100644 --- a/examples/components/classic/index.html +++ b/examples/components/classic/index.html @@ -7,7 +7,7 @@ - + diff --git a/lib/js/alerts.js b/lib/js/alerts.js new file mode 100644 index 0000000..c1e7165 --- /dev/null +++ b/lib/js/alerts.js @@ -0,0 +1,36 @@ +/* ---------------------------------- + * ALERT v0.0.1 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + var findAlerts = function (target) { + var i, alerts = document.querySelectorAll('a'); + for (; target && target !== document; target = target.parentNode) { + for (i = alerts.length; i--;) { if (alerts[i] === target) return target; } + } + }; + + var onAlertHidden = function () { + var alert = getAlert(event); + + alert.style.display = 'none'; + alert.removeEventListener('webkitTransitionEnd', onAlertHidden); + } + + var getAlert = function (event) { + var alertDismiss = findAlerts(event.target); + if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash); + }; + + window.addEventListener('click', function (event) { + var alert = getAlert(event); + + if (alert) { + if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss'); + alert.addEventListener('webkitTransitionEnd', onAlertHidden); + event.preventDefault(); + } + }); +}(); diff --git a/lib/js/modals.js b/lib/js/modals.js index 480c3af..2b1b725 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -6,8 +6,7 @@ !function () { var findModals = function (target) { - var i; - var modals = document.querySelectorAll('a'); + var i, modals = document.querySelectorAll('a'); for (; target && target !== document; target = target.parentNode) { for (i = modals.length; i--;) { if (modals[i] === target) return target; } } @@ -21,8 +20,8 @@ window.addEventListener('touchend', function (event) { var modal = getModal(event); if (modal) { - modal.classList.toggle('active'); + if (modal && modal.classList.contains('modal')) modal.classList.toggle('active'); event.preventDefault(); // prevents rewriting url (apps can still use hash values in url) } }); -}(); \ No newline at end of file +}(); diff --git a/lib/js/popovers.js b/lib/js/popovers.js index a208c64..d400c01 100644 --- a/lib/js/popovers.js +++ b/lib/js/popovers.js @@ -1,5 +1,5 @@ /* ---------------------------------- - * POPOVER v1.0.0 + * POPOVER v1.0.1 * Licensed under The MIT License * http://opensource.org/licenses/MIT * ---------------------------------- */ @@ -39,7 +39,14 @@ if (!anchor || !anchor.hash) return; - popover = document.querySelector(anchor.hash); + try { + popover = document.querySelector(anchor.hash); + } + catch (error) { + popover = null; + } + + if (popover == null) return; if (!popover || !popover.classList.contains('popover')) return; diff --git a/lib/js/sliders.js b/lib/js/sliders.js index b2212ec..610ac0f 100644 --- a/lib/js/sliders.js +++ b/lib/js/sliders.js @@ -56,8 +56,8 @@ startTime = +new Date; pageX = e.touches[0].pageX; pageY = e.touches[0].pageY; - deltaX = 0; - deltaY = 0; + deltaX = 0; + deltaY = 0; setSlideNumber(0); diff --git a/lib/sass/alerts.scss b/lib/sass/alerts.scss new file mode 100644 index 0000000..39abcc3 --- /dev/null +++ b/lib/sass/alerts.scss @@ -0,0 +1,52 @@ +// +// Alerts +// -------------------------------------------------- + +.alert { + position: fixed; + right: 15px; + left: 15px; + bottom: $bar-tab-height + 15px; + padding: 15px; + color: #fff; + border-radius: 3px; + z-index: 10; + @include transition(opacity); + @include transition-duration(.2s); + @include transition-timing-function(linear); + + .close { + position: relative; + top: -2px; + float: right; + color: inherit; + cursor: pointer; + @include transition(opacity); + @include transition-duration(.2s); + @include transition-timing-function(linear); + + &:active { + opacity: .6; + } + } + + &.dismiss { + opacity: 0; + } +} + +// Positive alert (Default color is green) +.alert-positive { + background-color: transparentize($positive-color, .03); +} + +// Negative alert (Default color is red) +.alert-negative { + background-color: transparentize($negative-color, .03); +} + +// Inline alert +.alert-inline { + position: static; + margin: 15px; +} diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss index 3794d20..641d37d 100644 --- a/lib/sass/bars.scss +++ b/lib/sass/bars.scss @@ -22,10 +22,14 @@ bottom: 0; } - // Flip border position to top for footer bars - &.bar-footer.bar-standard, - &.bar-footer-secondary.bar-standard { - @include box-shadow(0 0 1px rgba(0,0,0,.85)); + // Modifier class to dock any bar above a standard bar + &.bar-footer-secondary { + bottom: $bar-base-height; + } + + // Modifier class to dock any bar above a .bar-tab + &.bar-footer-secondary-tab { + bottom: $bar-tab-height; } } @@ -78,7 +82,6 @@ bottom: 0; height: $bar-tab-height; padding: 0; - @include box-shadow(0 0px 1px rgba(0,0,0,.85)); } // Wrapper for individual tab diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss index 633502f..59bddee 100644 --- a/lib/sass/forms.scss +++ b/lib/sass/forms.scss @@ -33,6 +33,7 @@ input[type="color"], height: 40px; padding: 10px 15px; margin-bottom: 10px; + line-height: $line-height-default; background-color: #fff; border: 1px solid rgba(0, 0, 0, .2); border-radius: 3px; @@ -87,14 +88,14 @@ select { margin-bottom: 0; background-color: transparent; border: 0; - border-bottom: 1px solid rgba(0, 0, 0, .2); border-radius: 0; @include box-shadow(none); + @include hairline(single, #c8c7cc, 15px); } // Remove bottom border on last input to avoid double bottom border .input-group input:last-child { - border-bottom-width: 0; + background-image: none; } // Input groups with labels @@ -104,21 +105,21 @@ select { // To use labels with input groups, wrap a label and an input in an .input-row .input-row { overflow: hidden; - border-bottom: 1px solid rgba(0, 0, 0, .2); + @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. } // Remove bottom border on last input-row to avoid double bottom border .input-row:last-child { - border-bottom-width: 0; + background-image: none; } // Labels get floated left with a set percentage width .input-row label { float: left; width: 35%; - padding: 11px 10px 9px 15px; // Optimizing the baseline for mobile. + padding: 10px 15px; font-family: $font-family-default; - font-weight: $font-weight; + line-height: 1.1; // Put the text on the baseline. } // Actual inputs float to right of labels and also have a set percentage @@ -127,7 +128,7 @@ select { width: 65%; padding-left: 0; margin-bottom: 0; - border-bottom: 0; + background-image: none; } diff --git a/lib/sass/mixins.scss b/lib/sass/mixins.scss index 3a919d3..2b8967e 100644 --- a/lib/sass/mixins.scss +++ b/lib/sass/mixins.scss @@ -71,14 +71,14 @@ // Misc // -------------------------------------------------- -@mixin hairline($type, $color, $width, $offset) { +@mixin hairline($type, $color, $offset) { @if $type == single { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); background-position: $offset 100%; } @else if $type == double { - background-image: url("data:image/svg+xml;utf8,"), - url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"), + url("data:image/svg+xml;utf8,"); background-position: $offset 100%, $offset 0%; } background-repeat: no-repeat; diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss index a0dffcc..2973e0c 100644 --- a/lib/sass/ratchet.scss +++ b/lib/sass/ratchet.scss @@ -18,6 +18,7 @@ @import "badges.scss"; @import "segmented-controllers.scss"; @import "popovers.scss"; +@import "alerts.scss"; // Javascript components @import "modals.scss"; diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss index f696792..2f560e5 100644 --- a/lib/sass/table-views.scss +++ b/lib/sass/table-views.scss @@ -12,7 +12,7 @@ .table-view-cell { position: relative; padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider. - @include hairline(single, #c8c7cc, 320px, 15px); // Single grey border with a width of 320px and 15px offset. + @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. // Remove the border from the last table view item @@ -68,7 +68,7 @@ color: #999; font-weight: $font-weight; background-color: #fafafa; - @include hairline(double, #c8c7cc, 320px, 0); // Double (top and bottom) grey border with a width of 320px and no offset. + @include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset. // Rounding first divider on inset lists and remove border on the top &:first-child { diff --git a/package.json b/package.json index a28e57f..6160654 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "grunt": "~0.4.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-jshint": "~0.6.4", - "grunt-contrib-nodeunit": "~0.2.1", + "grunt-contrib-nodeunit": "~0.2.2", "grunt-contrib-sass": "~0.5.0", "grunt-contrib-watch": "~0.5.3", "grunt-jekyll": "~0.4.0"