cutlass_js_rails 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2b4480ce2708a07231317508ccf692c59d32f2e3
-  data.tar.gz: bc6901cc3a4f3c4c4a050d8cb0092efade44433e
+  metadata.gz: 24afb5c43746fc605ab92cad707d2928f1e86da3
+  data.tar.gz: 52f6ff2bd4db9989b37269e8ca6dbe9815a2d8ba
 SHA512:
-  metadata.gz: 2936b99777d5f2e986a24d5049f4b78fc460bb11b0bd89b7212a3fdc2de3a32d9d04c82bc3a65fb06f72aa8150f92a5c1cd8762244c65340b5aaaf5076b37d6a
-  data.tar.gz: 6013f4736d94339c020b34cffbb2cd695be0cc6759500bfd1b6f1983ace5408e89b3aceb20ae7b833e873a5ddd9470eef24c8b5fb8aa8e359756fe1a1c1d09a3
+  metadata.gz: 33913f4b030ee559586ee482013ea5c1af67a75678071e76a77df2750f63ac3958e0f83834a7d9d9024b76b7f52e29b5ff7e4748e7e5387279aa8f1b92c7beb4
+  data.tar.gz: 1f0afeacf74d0c6024e413f6cb043788bf1931b654d4204be1f369ae1f9eb48c9374b1334996dc621d9697429e8c5969377f01d92e81e953c7bbd12ab6820fa6

data/app/assets/javascripts/cutlass/html_generation.js

@@ -10,6 +10,7 @@ Cutlass.generateHTML = function(inputTypes){
     $('.Cutlass-input-' + inputType).each(function(){
       Cutlass.wrapInItem($(this), 'm-' + inputType)
       Cutlass.addLabel($(this))
+      Cutlass.addError($(this))
       Cutlass.ifAlwaysActive($(this))
     })
   })
@@ -23,10 +24,17 @@ Cutlass.wrapInItem = function($el, cssClass){
   $div.append($input)
 }
 Cutlass.addLabel = function($input){
-  var labelText = $input.data('label');
-  var $label = $('<div class="Cutlass-label">' + labelText + '</div>')
+  var text = $input.data('label');
+  var $label = $('<div class="Cutlass-label">' + text + '</div>')
   $input.before($label)
 }
+Cutlass.addError = function($input){
+  var text = $input.data('error');
+  if(text){
+    var $error = $('<div class="Cutlass-error Tooltip m-orange">' + text + '</div>');
+    $input.before($error)
+  }
+}
 Cutlass.ifAlwaysActive = function($input){
   if($input.data('always-active')){
     $input.parent().addClass('m-always-active')

data/app/assets/javascripts/cutlass.js

@@ -1,6 +1,6 @@
 //= require cutlass/helpers
 //= require cutlass/html_generation
-$(document).ready(function(){
+document.addEventListener("turbolinks:load", function() {
   Cutlass.generateAllHTML()
 
   //TEXT INPUTS =========================================================

data/app/assets/stylesheets/_cutlass.scss

@@ -2,7 +2,7 @@ $left-padding: 30px !default;
 $right-padding: 15px !default;
 $cutlass-border-color: #e4e4e4 !default;
 $cutlass-label-color: #080808 !default;
-$cutlass-label-opacity: .5;
+$cutlass-label-opacity: .3;
 $cutlass-active-label-color: #080808 !default;
 $cutlass-input-color: #080808 !default;
 $cutlass-link-color: #ff7c14 !default;
@@ -15,6 +15,9 @@ $cutlass-link-color: #ff7c14 !default;
   position: relative;
   min-height: 60px;
   border-bottom: 1px solid $cutlass-border-color;
+  &.m-last{
+    border-bottom: 0;
+  }
 }
 .Cutlass-label{
   color: $cutlass-label-color;
@@ -112,6 +115,18 @@ $cutlass-link-color: #ff7c14 !default;
   }
 }
 
+// ========================================================
+// ERRORS
+// ========================================================
+.Cutlass-error{
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 14px;
+}
+
+
 // ========================================================
 // MODIFIERS
 // ========================================================

data/app/views/cutlass/_date_field.html.erb

@@ -0,0 +1,2 @@
+<% css_classes = (defined? css_classes) ? css_classes : '' %>
+<%= f.text_field field, class: "Cutlass-input-text js-birthday-input #{css_classes}", value: Chronic.parse(@user._date_of_birth, endian_precedence: [:little])&.strftime('%Y-%m-%d'), 'data-label': label, type: 'tel', 'data-always-active': true, 'data-error': @user.errors[field][0] %>

data/app/views/cutlass/_link_field.html.erb

@@ -0,0 +1 @@
+<%= link_to label, path, class: 'Cutlass-input-link' %>

data/app/views/cutlass/_select_field.html.erb

@@ -0,0 +1,2 @@
+<% css_classes = (defined? css_classes) ? css_classes : '' %>
+<%= f.select field, options, {}, { class: "Cutlass-input-select #{css_classes}", 'data-label': label, 'data-error': user.errors[field][0] } %>

data/app/views/cutlass/_text_field.html.erb

@@ -0,0 +1,3 @@
+<% css_classes = (defined? css_classes) ? css_classes : '' %>
+<% props = (defined? props) ? props.to_h : {} %>
+<%= f.text_field field, class: "Cutlass-input-text #{css_classes}", 'data-label': label, 'data-error': user.errors[field][0], **props %>

data/app/views/cutlass/_toggle_field.html.erb

@@ -0,0 +1,5 @@
+<% css_classes = (defined? css_classes) ? css_classes : '' %>
+<%= f.check_box field, {
+  class: "Cutlass-input-toggler js-conditional-switch #{css_classes}",
+  'data-label': label
+}, 'true', 'false'  %>

data/lib/cutlass_js_rails/version.rb

@@ -1,3 +1,3 @@
 module CutlassJsRails
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: cutlass_js_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - chardos
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-05-27 00:00:00.000000000 Z
+date: 2016-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -55,6 +55,11 @@ files:
 - app/assets/javascripts/cutlass/helpers.js
 - app/assets/javascripts/cutlass/html_generation.js
 - app/assets/stylesheets/_cutlass.scss
+- app/views/cutlass/_date_field.html.erb
+- app/views/cutlass/_link_field.html.erb
+- app/views/cutlass/_select_field.html.erb
+- app/views/cutlass/_text_field.html.erb
+- app/views/cutlass/_toggle_field.html.erb
 - bin/console
 - bin/setup
 - cutlass_js_rails.gemspec
@@ -80,7 +85,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.4
 signing_key: 
 specification_version: 4
 summary: Cuts down the size of inputs by reducing the prominence of labels once a