scsslint, flash styling, new parent start

.scss-lint.yml

@@ -0,0 +1,15 @@
+scss_files: 'app/assets/stylesheets/**/*.scss'
+
+linters:
+  StringQuotes:
+    enabled: false
+  LeadingZero:
+    style: 'include_zero'
+  NestingDepth:
+    max_depth: 5
+  SelectorDepth:
+    max_depth: 5
+  SelectorFormat:
+    ignored_names:
+  QualifyingElement:
+    allow_element_with_attribute: true

Gemfile

@@ -31,10 +31,11 @@ group :development, :test do
   gem 'pry-byebug'
   gem 'binding_of_caller'
   gem 'rubocop'
-  gem 'guard'
-  gem 'guard-rubocop'
-  gem 'guard-minitest'
-  gem 'guard-livereload'
   gem 'rack-livereload'
   gem 'minitest-reporters'
+  gem 'guard'
+  gem 'guard-rubocop'
+  gem 'guard-scss-lint'
+  gem 'guard-minitest'
+  gem 'guard-livereload'
 end

Gemfile.lock

@@ -91,6 +91,9 @@ GEM
     guard-rubocop (1.2.0)
       guard (~> 2.0)
       rubocop (~> 0.20)
+    guard-scss-lint (0.0.1alpha)
+      guard (~> 2.0)
+      scss-lint (~> 0.30.0)
     haml (4.0.6)
       tilt
     haml-rails (0.9.0)
@@ -201,6 +204,9 @@ GEM
       sprockets (>= 2.8, < 4.0)
       sprockets-rails (>= 2.0, < 4.0)
       tilt (>= 1.1, < 3)
+    scss-lint (0.30.0)
+      rainbow (~> 2.0)
+      sass (~> 3.4.0)
     sexp_processor (4.5.1)
     shellany (0.0.1)
     slop (3.6.0)
@@ -247,6 +253,7 @@ DEPENDENCIES
   guard-livereload
   guard-minitest
   guard-rubocop
+  guard-scss-lint
   haml-rails (~> 0.9)
   jquery-rails
   json (~> 1.8.3)

Guardfile

@@ -41,3 +41,7 @@ guard 'livereload' do
     "/assets/#{m[3]}"
   end
 end
+
+guard :scsslint do
+  watch(%r{app/assets/.+\.(scss)})
+end

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;
+$black: #000;
-$light: #C7C9CD;
+$white: #fff;
-$grey: #8E969D;
+$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'}
+    .alertbox.box-blue{'data-id' => 'alertbox', 'data-alert' => 'auto_close'}
-      .row
+      .box-close{'data-id'=> 'alert_close'}
-        .col-md-6.col-md-offset-3.col-xs-12
-          .alertbox
-            .alertbox.box_blue
-              .box_close{'data-id'=> 'alert-close'}
       = flash[:notice]
 
   - if flash[:alert].present?
-    .container{'data-id' => 'alertbox'}
+    .alertbox.box-red{'data-id' => 'alertbox'}
-      .row
+      .box-close{'data-id'=> 'alert_close'}
-        .col-md-6.col-md-offset-3.col-xs-12
-          .alertbox
-            .alertbox.box_red
-              .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)

config/routes.rb

@@ -1,5 +1,9 @@
 Rails.application.routes.draw do
   get 'parents', to: 'parents#index', as: :list_parents
+  get 'parents/new', to: 'parents#new', as: :new_parent
+  post 'parents/new', to: 'parents#add', as: :add_parent
+  get 'parents/:id', to: 'parents#show', as: :parent
+  post 'parents/:id', to: 'parents#update', as: :update_parent
 
   get 'children', to: 'children#index', as: :list_children
   get 'children/lookup', to: 'children#lookup', as: :lookup_child