scss org and parenthood adding

Gemfile

@@ -8,6 +8,7 @@ gem 'rails', '~> 4.2.4'
 gem 'turbolinks'
 
 gem 'actionview-encoded_mail_to'
+gem 'autoprefixer-rails', '~> 0.8'
 gem 'haml-rails', "~> 0.9"
 gem 'jquery-rails'
 gem 'json', '~> 1.8.3'

Gemfile.lock

@@ -43,6 +43,8 @@ GEM
     ast (2.1.0)
     astrolabe (1.3.1)
       parser (~> 2.2)
+    autoprefixer-rails (0.8.20131213)
+      execjs
     awesome_print (1.6.1)
     bcrypt (3.1.10)
     binding_of_caller (0.7.2)
@@ -256,6 +258,7 @@ PLATFORMS
 
 DEPENDENCIES
   actionview-encoded_mail_to
+  autoprefixer-rails (~> 0.8)
   awesome_print
   bcrypt (~> 3.1.7)
   binding_of_caller

Guardfile

@@ -42,10 +42,10 @@ guard :rubocop do
   watch(%r{(?:.+/)?\.rubocop\.yml$}) { |m| File.dirname(m[0]) }
 end
 
-guard :scsslint do
-  watch(%r{app/assets/.+\.(scss)})
-end
-
 guard :shell do
   watch(%r{app/views/.*\.haml}) { |m| `haml-lint --color #{m[0]}` }
 end
+
+guard :scsslint do
+  watch(%r{app/assets/.+\.(scss)})
+end

app/assets/javascripts/main.js

@@ -1,4 +1,4 @@
-function getPersonPhone(id, collection){
+function getPersonPhone(id, collection) {
   for(var i = 0; i < collection.length; i++){
     if(collection[i].id == id){
       return collection[i].phone;
@@ -7,6 +7,7 @@ function getPersonPhone(id, collection){
 }
 
 $( document ).ready(function() {
+
   $('[data-id=alert_close]').on('click', function(){
     $(this).parent().slideUp();
   });

app/assets/stylesheets/application.css

@@ -10,6 +10,6 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require_tree .
+ *= require main.scss
  *= require_self
  */

app/assets/stylesheets/atoms/buttons.scss

@@ -0,0 +1,15 @@
+.btn {
+  cursor: pointer;
+  display: inline-block;
+  padding: 5px;
+
+  &:hover {
+    color: $grey;
+  }
+
+  &:active {
+    box-shadow: 0 0 0.1em $grey;
+  }
+
+}
+

app/assets/stylesheets/main.scss

@@ -1,155 +1,19 @@
 // maybe this? => https://color.adobe.com/Theme-1-color-theme-6893131/edit/?copy=true
 $black: #000;
-$white: #fff;
+$blue:  #211caf;
+$dark:  #646267;
+$grey:  #8e969d;
 $light: #c7c9cd;
-$grey: #8e969d;
+$red:   #b10001;
-$dark: #646267;
 $taupe: #f2e8df;
-$blue: #211caf;
+$white: #fff;
-$red: #b10001;
 
-@mixin inline-ul {
+@import 'mixins';
-  display: inline-block;
+@import 'reset';
-  list-style: none;
-  margin: 0;
-  padding: 0;
 
-  li {
+@import 'atoms/buttons';
-    display: inline-block;
-    float: left;
-    margin: 0;
-    padding: 0;
 
-    a {
+@import 'molecules/nav';
-      display: inline-block;
-      padding: 15px;
-      text-decoration: none;
-    }
-  }
-}
 
-html {
+@import 'organisms/alerts';
-  background-color: $taupe;
+@import 'organisms/forms';
-  color: $dark;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  margin: 15px;
-  padding: 0;
-}
-
-.nav {
-  @include inline-ul;
-  background-color: $dark;
-  color: $light;
-  margin: -15px -15px 15px;
-  width: calc(100% + 30px);
-
-  li {
-    &:hover {
-      background-color: $grey;
-    }
-
-    a {
-      color: $light;
-    }
-  }
-}
-
-.sub-nav {
-  @include inline-ul;
-  margin: -19px -15px 0;
-
-  a {
-    color: $dark;
-
-    &:hover {
-      background-color: $light;
-    }
-  }
-}
-
-
-form {
-  width: 100%;
-
-  * {
-    font-size: 14px;
-    line-height: 1.6em;
-  }
-
-  label {
-    display: inline-block;
-    margin: 0.6em 0 0;
-    width: 100%;
-
-    &:after {
-      content: ": ";
-    }
-  }
-
-  input {
-    display: block;
-    margin: 0 0 0.6em;
-    padding: 5px;
-  }
-
-  [type=submit] {
-    margin: 0.6em 0;
-  }
-
-  textarea {
-    height: 5em;
-    max-width: 300px;
-    padding: 5px;
-    width: calc(100% - 30px);
-  }
-
-}
-
-.alertbox {
-  background-color: $white;
-  border: 2px solid $white;
-  color: $dark;
-  left: calc(50% - 125px);
-  margin-bottom: 15px;
-  padding: 10px 35px 10px 20px;
-  position: absolute;
-  top: 20px;
-  width: 250px;
-  z-index: 50;
-  & + & { position: relative; }
-
-  &.box-blue {
-    background-color: $blue;
-    border-color: $light;
-    color: $white;
-  }
-
-  &.box-red {
-    background-color: $red;
-    color: $white;
-  }
-
-  .box-close {
-    cursor: pointer;
-    display: inline-block;
-    float: right;
-    height: 15px;
-    margin-top: 1px;
-    position: relative;
-    right: -25px;
-    width: 15px;
-
-    &:before {
-      color: $white;
-      content: "\00d7";
-      left: 3px;
-      position: relative;
-      top: -2px;
-    }
-  }
-
-}

app/assets/stylesheets/mixins.scss

@@ -0,0 +1,19 @@
+@mixin inline-ul {
+  display: inline-block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: inline-block;
+    float: left;
+    margin: 0;
+    padding: 0;
+
+    a {
+      display: inline-block;
+      padding: 15px;
+      text-decoration: none;
+    }
+  }
+}

app/assets/stylesheets/molecules/nav.scss

@@ -0,0 +1,31 @@
+.nav {
+  @include inline-ul;
+  background-color: $dark;
+  color: $light;
+  margin: -15px -15px 15px;
+  width: calc(100% + 30px);
+
+  li {
+    &:hover {
+      background-color: $grey;
+    }
+
+    a {
+      color: $light;
+    }
+  }
+}
+
+.sub-nav {
+  @include inline-ul;
+  margin: -19px -15px 0;
+
+  a {
+    color: $dark;
+
+    &:hover {
+      background-color: $light;
+    }
+  }
+}
+

app/assets/stylesheets/organisms/alerts.scss

@@ -0,0 +1,43 @@
+.alertbox {
+  background-color: $white;
+  border: 2px solid $white;
+  color: $dark;
+  left: calc(50% - 125px);
+  margin-bottom: 15px;
+  padding: 10px 35px 10px 20px;
+  position: absolute;
+  top: 20px;
+  width: 250px;
+  z-index: 50;
+  & + & { position: relative; }
+
+  &.box-blue {
+    background-color: $blue;
+    border-color: $light;
+    color: $white;
+  }
+
+  &.box-red {
+    background-color: $red;
+    color: $white;
+  }
+
+  .box-close {
+    cursor: pointer;
+    display: inline-block;
+    float: right;
+    height: 15px;
+    margin-top: 1px;
+    position: relative;
+    right: -25px;
+    width: 15px;
+
+    &:before {
+      color: $white;
+      content: "\00d7";
+      left: 3px;
+      position: relative;
+      top: -2px;
+    }
+  }
+}

app/assets/stylesheets/organisms/forms.scss

@@ -0,0 +1,36 @@
+form {
+  width: 100%;
+
+  * {
+    font-size: 14px;
+    line-height: 1.6em;
+  }
+
+  label {
+    display: inline-block;
+    margin: 0.6em 0 0;
+    width: 100%;
+
+    &:after {
+      content: ": ";
+    }
+  }
+
+  input {
+    display: block;
+    margin: 0 0 0.6em;
+    padding: 5px;
+  }
+
+  [type=submit] {
+    margin: 0.6em 0;
+  }
+
+  textarea {
+    height: 5em;
+    max-width: 300px;
+    padding: 5px;
+    width: calc(100% - 30px);
+  }
+
+}

app/assets/stylesheets/reset.scss

@@ -0,0 +1,11 @@
+html {
+  background-color: $taupe;
+  color: $dark;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 15px;
+  padding: 0;
+}

app/controllers/relationships_controller.rb

@@ -3,7 +3,10 @@ class RelationshipsController < ApplicationController
     parent = Person.find(params[:parent])
     child = Child.find(params[:child])
 
-    parent.parenthoods.create(child)
+    ap parent
+    ap child
+
+    parent.parenthoods.create(child_id: child.to_i)
 
     redirect_to :back, notice: 'Child added to parent!'
   end

app/models/child.rb

@@ -19,4 +19,8 @@ class Child < ActiveRecord::Base
   def name
     "#{first_name} #{last_name}"
   end
+
+  def to_i
+    id
+  end
 end

app/models/page.rb

@@ -3,4 +3,8 @@ class Page < ActiveRecord::Base
   belongs_to :person
 
   scope :last_ten, -> { order(updated_at: :desc).limit(10) }
+
+  def to_i
+    id
+  end
 end

app/models/parenthood.rb

@@ -1,4 +1,8 @@
 class Parenthood < ActiveRecord::Base
   belongs_to :person
   belongs_to :child
+
+  def to_i
+    id
+  end
 end

app/models/person.rb

@@ -26,4 +26,8 @@ class Person < ActiveRecord::Base
   def name
     "#{first_name} #{last_name}"
   end
+
+  def to_i
+    id
+  end
 end

app/views/parents/show.html.haml

@@ -12,10 +12,12 @@
         = link_to 'remove', del_parenthood_path(@parent, child), method: :delete
 
 %p Add Child:
-:ruby
+= form_tag add_parenthood_path(@parent) do
-  select_options = options_from_collection_for_select(@more_children, :id, :name)
+  :ruby
-  html_options = {
+    select_options = options_from_collection_for_select(@more_children, :id, :name)
-    include_blank: false,
+    html_options = {
-    prompt: 'Add a child to parent'
+      include_blank: true,
-  }
+      data: { id: 'children' }
-= select_tag(:child, select_options, html_options)
+    }
+  = select_tag(:child, select_options, html_options)
+  = submit_tag 'Add Child to Parent'

config/routes.rb

@@ -6,7 +6,7 @@ Rails.application.routes.draw do
   get 'parents/:id', to: 'parents#show', as: :parent
   post 'parents/:id', to: 'parents#update', as: :update_parent
 
-  post 'parenthood/:parent/:child', to: 'relationships#add_child', as: :add_parenthood
+  post 'parenthood/:parent/', to: 'relationships#add_child', as: :add_parenthood
   delete 'parenthood/:parent/:child', to: 'relationships#del_child', as: :del_parenthood
 
   get 'children', to: 'children#index', as: :list_children