nail_polish 0.1.1 → 0.2.6

data/app/assets/javascripts/nail_polish/widget/modal.js

@@ -1,18 +1,27 @@
 NailPolish.Widget.Modal = NailPolish.View.extend({
+  parent: 'body',
   parentSelector: '#overlay-container',
   attachmentMethod: 'html',
 
   events: function () {
     _.extend(this.addListeners, {
-      'click .close-modal': 'close'
+      'click .close-modal': 'close',
+      'click .cancel-link a': 'close',
+      'click #overlay': 'verifyTargetAndClose'
     });
 
     return NailPolish.View.prototype.events.apply(this);
   },
 
+  verifyTargetAndClose: function (e) {
+    if($(e.target).is('#overlay')) {
+      this.close();
+    }
+  },
+
   renderTemplate: function () {
     // switch declared template into a partial for consistent usage
-    var template = HoganTemplates['modal'];
+    var template = HoganTemplates['nail_polish/templates/modal'];
     var partials = _.extend(this.partials(), {
       modal_content: HoganTemplates[this.templateName]
     });
@@ -22,7 +31,9 @@ NailPolish.Widget.Modal = NailPolish.View.extend({
 
   render: function() {
     NailPolish.View.prototype.render.apply(this);
+    this.freezeBody();
     this.addListenerForClose();
+    this.setPosition();
   },
 
   addListenerForClose: function() {
@@ -30,11 +41,30 @@ NailPolish.Widget.Modal = NailPolish.View.extend({
   },
 
   close: function (e) {
+    if(e){
+      e.preventDefault(); // This is necessary to prevent clicking on elements behind the modal
+    }
     NailPolish.Events.unsubscribe('page:new', this.close, this);
+    $('body').removeClass('no-scroll');
     this.remove();
-    this.onClose()
+    this.onClose();
   },
 
-  onClose: function() {} // to be implemented by subclasses
-});
+  onClose: function() {}, // to be implemented by subclasses
+
+  windowHeight: function () {
+    return $(window).height();
+  },
 
+  setPosition: function () {
+    var $modal = this.$('.modal');
+
+    if ($modal.height()+100 < this.windowHeight() ){
+      $modal.css('top', '100px');
+    }
+  },
+
+  freezeBody: function() {
+    $('body').addClass('no-scroll');
+  }
+});

data/app/assets/javascripts/nail_polish_widgets.js

@@ -1,3 +1,4 @@
 //= require nail_polish/widget/flash
 //= require nail_polish/widget/modal
 //= require nail_polish/widget/dropdown
+//= require nail_polish/widget/menu

data/app/assets/stylesheets/nail_polish/base.scss

@@ -1,7 +1,7 @@
 @import 'compass/css3';
 @import "compass/css3/hyphenation";
-
 @import "base/reset";
+
 @import "base/variables";
 @import 'base/colors';
 @import 'base/mixins';

data/app/assets/stylesheets/nail_polish/base/buttons.scss

@@ -77,4 +77,9 @@ div.button {
   &.small {
     @include small-text;
   }
+
+  &.thin {
+    @include small-text;
+    padding: $spacing*0.6 $spacing*2.2;
+  }
 }

data/app/assets/stylesheets/nail_polish/base/form_elements.scss

@@ -84,7 +84,21 @@ textarea {
 }
 
 form {
-  &.error {
+  .error-message {
+    display: none;
+  }
+
+  .error {
+    .error-message {
+      display: block;
+      padding: 0;
+      padding-top: 3px;
+    }
+
+    .file-input {
+      border: 1px solid $error-color;
+    }
+
     input[type=text],
     input[type=password],
     input[type=email],

data/app/assets/stylesheets/nail_polish/base/grid.scss

@@ -5,7 +5,7 @@
 }
 .unit{float:left;}
 .unit-right{float:right;}
-.size1of1{width:100%;float:none;}
+.size1of1{width:100%;}
 .size1of2{width:50%;}
 .size1of3{width:33.33333%;}
 .size2of3{width:66.66666%;}
@@ -18,29 +18,31 @@
 .size1of6{width:16.66666%;}
 .size4of6{width:66.66666%;}
 .size5of6{width:83.33333%;}
+.size1of8{width: 12.5%;}
 .size1of10{width:10%;}
 .size3of10{width:30%;}
 .size7of10{width:70%;}
 .size9of10{width: 90%}
 .size1of20{width:5%;}
 
+
 .last-unit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;}
 
 .inner {
   padding: $spacing;
   @include line;
-
-  &.half {
-    padding: $spacing * 0.5;
-  }
 }
 
 .spacer {
   width: $spacing;
   height: $spacing;
+
+  &.half {
+    width: $spacing / 2;
+    height: $spacing / 2;
+  }
 }
 
 .s-hidden {
   display: none;
 }
-

data/app/assets/stylesheets/nail_polish/base/layout.scss

@@ -3,7 +3,8 @@ body {
 }
 
 #overlay {
-  position: absolute;
+  position: fixed;
+  overflow-y: scroll;
   top: 0;
   bottom: 0;
   left: 0;
@@ -20,4 +21,4 @@ body {
     @include box-shadow(0px 0px 5px rgba(0,0,0,0.25));
     width: 100%;
   }
-}
+}

data/app/assets/stylesheets/nail_polish/base/oo_styles.scss

@@ -6,10 +6,24 @@
   overflow: visible;
 }
 
+.hidden-overflow {
+  overflow: hidden;
+}
+
+.no-scroll {
+  overflow: hidden;
+}
+
 .rounded {
   @include rounded;
 }
 
+.round {
+  height: $spacing * 3.2;
+  width: $spacing * 3.2;
+  border-radius: 50%;
+}
+
 .bordered {
   @include bordered;
 }
@@ -46,7 +60,7 @@
   font-weight: bold;
 }
 
-.light-text{
+.light-text {
   color: $neutral-base-color;
 }
 
@@ -55,6 +69,11 @@
   @include text-shadow(1px 1px 0px $body-color);
 }
 
+.light-headline-shadowless {
+  color: $light-color;
+  @include text-shadow(none);
+}
+
 /* this is for page-width sections of the page */
 .page-inner {
   @include line;
@@ -90,6 +109,10 @@
   background-color: $accent-button-base-color;
 }
 
+.light-background {
+  background-color: $neutral-superlight-color;
+}
+
 /* These three styles aren't very descriptive should have text appended */
 .small {
   @include small-text;
@@ -117,4 +140,16 @@
 
 .italic {
   font-style: italic;
-}
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.pointer-cursor {
+  cursor: pointer;
+}

data/app/assets/stylesheets/nail_polish/base/reset.scss

@@ -47,6 +47,11 @@ input, textarea, button {
   background-color: transparent;
   -webkit-appearance: none;
 }
+
+input[type="radio"] {
+ -webkit-appearance: radio;
+}
+
 img {
   display: block;
 }

data/app/assets/stylesheets/nail_polish/base/typography_and_tags.scss

@@ -10,6 +10,10 @@ body {
 h1, h2, h3, h4, h5, h6, p {
   font-weight: normal;
   padding-bottom: $em*0.5;
+
+  .no-padding {
+    padding: 0px;
+  }
 }
 
 h1, h2, h3 {

data/app/assets/stylesheets/nail_polish/desktop.scss

@@ -1,6 +1,5 @@
 @import 'compass/css3';
 
-@import "base/reset";
 @import "base/variables";
 @import 'base/colors';
 @import 'base/mixins';
@@ -10,3 +9,4 @@
 @import 'desktop/layout';
 @import 'desktop/oo_styles';
 @import 'desktop/widgets/modal';
+@import 'desktop/widgets/menu';

data/app/assets/stylesheets/nail_polish/desktop/grid.scss

@@ -3,6 +3,7 @@
 
 .l-unit{float:left;}
 .l-unit-right{float:right;}
+.l-1of1{width:100%;}
 .l-1of2{width:50%;}
 .l-1of3{width:33.33333%;}
 .l-2of3{width:66.66666%;}
@@ -26,4 +27,8 @@
 
 .l-hidden {
   display: none;
-}
+}
+
+.hidden {
+  display: none;
+}

data/app/assets/stylesheets/nail_polish/desktop/widgets/menu.scss

@@ -0,0 +1,61 @@
+.menu-container {
+  .menu-item-wrapper {
+    position: relative;
+    z-index: 100;
+
+    h3 {
+      padding-bottom: 0;
+      text-shadow: none;
+    }
+  }
+
+  .menu-items {
+    @include border-radius;
+    background-color: $light-color;
+    border: 1px solid $neutral-light-color;
+    position: absolute;
+    top: 56px;
+    width: 213px;
+  }
+
+  .menu-item {
+    border-bottom: 1px solid $neutral-light-color;
+
+    &:hover {
+      background-color: $neutral-superlight-color;
+    }
+
+    a { 
+      color: $body-color; 
+      text-decoration: none;
+    }
+
+    .icon {
+      padding-left: 2.5*$spacing;
+      background-position: 0 50%;
+    }
+
+    .link-action {
+      background-image: image-url('nail_polish/elements/link_action.png');
+      background-repeat: no-repeat;
+    }
+  }
+
+  .white-down-arrow {
+    padding-right: 2*$spacing;
+    background-image: image-url('nail_polish/elements/white_down_arrow.png');
+    background-repeat: no-repeat;
+    background-position: center right;
+  }
+
+  .menu-caret {
+    height: 16px;
+    width: 100%;
+    background-image: image-url('nail_polish/elements/menu_caret.png');
+    background-repeat: no-repeat;
+    position: absolute;
+    background-position: top right;
+    top: -15px;
+    right: 17px;
+  }
+}

data/app/assets/stylesheets/nail_polish/tablet.scss

@@ -1,6 +1,5 @@
 @import 'compass/css3';
 
-@import "base/reset";
 @import "base/variables";
 @import 'base/colors';
 @import 'base/mixins';

data/app/assets/stylesheets/nail_polish/tablet/grid.scss

@@ -5,6 +5,9 @@
   @include line;
 }
 
+.m-unit{float:left;}
+.m-unit-right{float:right;}
+.m-1of1{width:100%;}
 .m-1of2{width:50%;}
 .m-1of3{width:33.33333%;}
 .m-2of3{width:66.66666%;}

data/lib/nail_polish/version.rb

@@ -1,3 +1,3 @@
 module NailPolish
-  VERSION = "0.1.1"
+  VERSION = "0.2.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nail_polish
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.6
 platform: ruby
 authors:
 - Kane Baccigalupi
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-01-16 00:00:00.000000000 Z
+date: 2014-07-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -82,6 +82,20 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-instafail
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: cucumber-rails
   requirement: !ruby/object:Gem::Requirement
@@ -145,35 +159,52 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- MIT-LICENSE
+- README.rdoc
+- Rakefile
 - app/assets/images/nail_polish/backgrounds/black-0_5.png
 - app/assets/images/nail_polish/backgrounds/blue-0_5.png
 - app/assets/images/nail_polish/backgrounds/dark_bg.png
 - app/assets/images/nail_polish/backgrounds/light_bg.png
 - app/assets/images/nail_polish/backgrounds/medium_bg.png
 - app/assets/images/nail_polish/elements/close_icon.png
+- app/assets/images/nail_polish/elements/link_action.png
 - app/assets/images/nail_polish/elements/menu_caret.png
 - app/assets/images/nail_polish/elements/no_image.png
 - app/assets/images/nail_polish/elements/white_close_icon.png
+- app/assets/images/nail_polish/elements/white_down_arrow.png
+- app/assets/javascripts/nail_polish.js
 - app/assets/javascripts/nail_polish/app.js
+- app/assets/javascripts/nail_polish/events.js
 - app/assets/javascripts/nail_polish/events/flasher.js
 - app/assets/javascripts/nail_polish/events/redirector.js
-- app/assets/javascripts/nail_polish/events.js
+- app/assets/javascripts/nail_polish/model.js
+- app/assets/javascripts/nail_polish/models/dropdown.js
+- app/assets/javascripts/nail_polish/models/menu.js
 - app/assets/javascripts/nail_polish/nail_polish.js
 - app/assets/javascripts/nail_polish/overrides/auth_token_adder.js
 - app/assets/javascripts/nail_polish/overrides/for_backbone.js
 - app/assets/javascripts/nail_polish/overrides/function_bind.js
 - app/assets/javascripts/nail_polish/overrides/global_publisher_adder.js
 - app/assets/javascripts/nail_polish/presenter.js
+- app/assets/javascripts/nail_polish/presenter_with_errors.js
 - app/assets/javascripts/nail_polish/presenters/collection.js
 - app/assets/javascripts/nail_polish/presenters/dropdown.js
+- app/assets/javascripts/nail_polish/presenters/menu.js
 - app/assets/javascripts/nail_polish/router.js
+- app/assets/javascripts/nail_polish/templates/dropdown.mustache
+- app/assets/javascripts/nail_polish/templates/menu.mustache
+- app/assets/javascripts/nail_polish/templates/modal.mustache
+- app/assets/javascripts/nail_polish/utils/subview_manager.js
 - app/assets/javascripts/nail_polish/utils/text.js
-- app/assets/javascripts/nail_polish/view/parent_finder.js
+- app/assets/javascripts/nail_polish/validator.js
 - app/assets/javascripts/nail_polish/view.js
+- app/assets/javascripts/nail_polish/view/parent_finder.js
+- app/assets/javascripts/nail_polish/views/form.js
 - app/assets/javascripts/nail_polish/widget/dropdown.js
 - app/assets/javascripts/nail_polish/widget/flash.js
+- app/assets/javascripts/nail_polish/widget/menu.js
 - app/assets/javascripts/nail_polish/widget/modal.js
-- app/assets/javascripts/nail_polish.js
 - app/assets/javascripts/nail_polish_legacy_base.js
 - app/assets/javascripts/nail_polish_modern_base.js
 - app/assets/javascripts/nail_polish_widgets.js
@@ -183,6 +214,7 @@ files:
 - app/assets/javascripts/vendor/underscore.js
 - app/assets/javascripts/vendor/zepto.cookie.js
 - app/assets/javascripts/vendor/zepto.js
+- app/assets/stylesheets/nail_polish/base.scss
 - app/assets/stylesheets/nail_polish/base/buttons.scss
 - app/assets/stylesheets/nail_polish/base/colors.scss
 - app/assets/stylesheets/nail_polish/base/form_elements.scss
@@ -195,27 +227,24 @@ files:
 - app/assets/stylesheets/nail_polish/base/variables.scss
 - app/assets/stylesheets/nail_polish/base/widgets/drop_down_menu.scss
 - app/assets/stylesheets/nail_polish/base/widgets/panels.scss
-- app/assets/stylesheets/nail_polish/base.scss
+- app/assets/stylesheets/nail_polish/desktop.scss
 - app/assets/stylesheets/nail_polish/desktop/grid.scss
 - app/assets/stylesheets/nail_polish/desktop/layout.scss
 - app/assets/stylesheets/nail_polish/desktop/oo_styles.scss
+- app/assets/stylesheets/nail_polish/desktop/widgets/menu.scss
 - app/assets/stylesheets/nail_polish/desktop/widgets/modal.scss
-- app/assets/stylesheets/nail_polish/desktop.scss
+- app/assets/stylesheets/nail_polish/tablet.scss
 - app/assets/stylesheets/nail_polish/tablet/grid.scss
 - app/assets/stylesheets/nail_polish/tablet/oo_styles.scss
-- app/assets/stylesheets/nail_polish/tablet.scss
+- app/assets/stylesheets/nail_polish/tablet_and_desktop.scss
 - app/assets/stylesheets/nail_polish/tablet_and_desktop/typography_and_tags.scss
 - app/assets/stylesheets/nail_polish/tablet_and_desktop/variables.scss
-- app/assets/stylesheets/nail_polish/tablet_and_desktop.scss
 - config/initializers/nail_polish.rb
 - config/routes.rb
+- lib/nail_polish.rb
 - lib/nail_polish/engine.rb
 - lib/nail_polish/version.rb
-- lib/nail_polish.rb
 - lib/tasks/nail_polish_tasks.rake
-- MIT-LICENSE
-- Rakefile
-- README.rdoc
 homepage: http://github.com/socialchorus/nail_polish
 licenses: []
 metadata: {}
@@ -235,7 +264,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.3
+rubygems_version: 2.2.2
 signing_key: 
 specification_version: 4
 summary: NailPolish is a Backbone/OOCSS engine for your Rails 4 app