scsslint, flash styling, new parent start

app/assets/javascripts/main.js

@@ -7,4 +7,8 @@ function getPersonPhone(id, collection){
 }
 
 $( document ).ready(function() {
+  $('[data-id=alert_close]').on('click', function(){
+    $(this).parent().slideUp();
+  });
+
 });

app/assets/stylesheets/main.scss

@@ -1,8 +1,12 @@
 // maybe this? => https://color.adobe.com/Theme-1-color-theme-6893131/edit/?copy=true
-$white: #F2E8DF;
-$light: #C7C9CD;
-$grey: #8E969D;
+$black: #000;
+$white: #fff;
+$light: #c7c9cd;
+$grey: #8e969d;
 $dark: #646267;
+$taupe: #f2e8df;
+$blue: #211caf;
+$red: #b10001;
 
 @mixin inline-ul {
   display: inline-block;
@@ -25,8 +29,8 @@ $dark: #646267;
 }
 
 html {
+  background-color: $taupe;
   color: $dark;
-  background-color: $white;
   margin: 0;
   padding: 0;
 }
@@ -57,8 +61,10 @@ body {
 .sub-nav {
   @include inline-ul;
   margin: -19px -15px 0;
+
   a {
     color: $dark;
+
     &:hover {
       background-color: $light;
     }
@@ -68,6 +74,7 @@ body {
 
 form {
   width: 100%;
+
   * {
     font-size: 14px;
     line-height: 1.6em;
@@ -89,11 +96,11 @@ form {
     padding: 5px;
   }
 
-  [type=submit]{
+  [type=submit] {
     margin: 0.6em 0;
   }
 
-  textarea{
+  textarea {
     height: 5em;
     max-width: 300px;
     padding: 5px;
@@ -101,3 +108,48 @@ form {
   }
 
 }
+
+.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/controllers/parents_controller.rb

@@ -3,4 +3,16 @@ class ParentsController < ApplicationController
     @parents = Person.just_parents
     respond_with @parents
   end
+
+  def show
+    @parent = Person.just_parents.where(id: params[:id])
+  end
+
+  def new
+  end
+
+  def add
+    ap params
+    redirect_to list_parents_path
+  end
 end

app/models/person.rb

@@ -1,6 +1,7 @@
 class Person < ActiveRecord::Base
   has_many :parenthoods
   has_many :children, through: :parenthoods
+  accepts_nested_attributes_for :children
 
   validates :first_name, presence: true
   validates :last_name, presence: true

app/views/layouts/_alerts.html.haml

@@ -1,18 +1,10 @@
 - unless flash.empty?
   - if flash[:notice].present?
-    .container{'data-id' => 'alertbox', 'data-alert' => 'auto-close'}
-      .row
-        .col-md-6.col-md-offset-3.col-xs-12
-          .alertbox
-            .alertbox.box_blue
-              .box_close{'data-id'=> 'alert-close'}
-              = flash[:notice]
+    .alertbox.box-blue{'data-id' => 'alertbox', 'data-alert' => 'auto_close'}
+      .box-close{'data-id'=> 'alert_close'}
+      = flash[:notice]
 
   - if flash[:alert].present?
-    .container{'data-id' => 'alertbox'}
-      .row
-        .col-md-6.col-md-offset-3.col-xs-12
-          .alertbox
-            .alertbox.box_red
-              .box_close{'data-id'=> 'alert-close'}
-              %b= flash[:alert]
+    .alertbox.box-red{'data-id' => 'alertbox'}
+      .box-close{'data-id'=> 'alert_close'}
+      %b= flash[:alert]

app/views/layouts/application.html.haml

@@ -8,9 +8,9 @@
     = csrf_meta_tags
     = yield :custom_head
   %body
-    = render partial: 'layouts/alerts'
     = render partial: 'layouts/navigation'
     = render partial: 'sub_nav'
+    = render partial: 'layouts/alerts'
     = yield
     = render partial: 'layouts/footer'
     = yield :modals

app/views/parents/_sub_nav.html.haml

@@ -1,2 +1,4 @@
 %ul.sub-nav
+  %li= link_to 'List', list_parents_path
+  %li= link_to 'New', new_parent_path
 

app/views/parents/new.html.haml

@@ -0,0 +1,25 @@
+%h2 Add a New Parent
+
+= form_for :parent do |f|
+  = f.label :first_name
+  = f.text_field :first_name
+
+  = f.label :last_name
+  = f.text_field :last_name
+
+  = f.label :phone
+  = f.phone_field :phone
+
+  = f.label :email
+  = f.email_field :email
+
+  %h3 Children:
+
+  = fields_for :child do |child|
+    = child.label :first_name
+    = child.text_field :first_name
+
+    = child.label :last_name
+    = child.text_field :last_name
+
+  = f.submit

app/views/parents/show.html.haml

@@ -0,0 +1,2 @@
+%h2 Parent
+= raw(ap @parent)