From 0510f1c4c2f28bdd6dd0813b6c533c801ca53136 Mon Sep 17 00:00:00 2001 From: Mark Moser Date: Sat, 3 Oct 2015 15:15:19 -0500 Subject: [PATCH] scss org and parenthood adding --- Gemfile | 1 + Gemfile.lock | 3 + Guardfile | 8 +- app/assets/javascripts/main.js | 3 +- app/assets/stylesheets/application.css | 2 +- app/assets/stylesheets/atoms/buttons.scss | 15 ++ app/assets/stylesheets/main.scss | 158 ++----------------- app/assets/stylesheets/mixins.scss | 19 +++ app/assets/stylesheets/molecules/nav.scss | 31 ++++ app/assets/stylesheets/organisms/alerts.scss | 43 +++++ app/assets/stylesheets/organisms/forms.scss | 36 +++++ app/assets/stylesheets/reset.scss | 11 ++ app/controllers/relationships_controller.rb | 5 +- app/models/child.rb | 4 + app/models/page.rb | 4 + app/models/parenthood.rb | 4 + app/models/person.rb | 4 + app/views/parents/show.html.haml | 16 +- config/routes.rb | 2 +- 19 files changed, 207 insertions(+), 162 deletions(-) create mode 100644 app/assets/stylesheets/atoms/buttons.scss create mode 100644 app/assets/stylesheets/mixins.scss create mode 100644 app/assets/stylesheets/molecules/nav.scss create mode 100644 app/assets/stylesheets/organisms/alerts.scss create mode 100644 app/assets/stylesheets/organisms/forms.scss create mode 100644 app/assets/stylesheets/reset.scss diff --git a/Gemfile b/Gemfile index b1aa8a0..b084b73 100644 --- a/Gemfile +++ b/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' diff --git a/Gemfile.lock b/Gemfile.lock index ca687ea..df3c315 100644 --- a/Gemfile.lock +++ b/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 diff --git a/Guardfile b/Guardfile index ea66ca1..58f5d07 100644 --- a/Guardfile +++ b/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 diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 70a2182..f2f8a35 100644 --- a/app/assets/javascripts/main.js +++ b/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(); }); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index f9cd5b3..9356239 100644 --- a/app/assets/stylesheets/application.css +++ b/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 */ diff --git a/app/assets/stylesheets/atoms/buttons.scss b/app/assets/stylesheets/atoms/buttons.scss new file mode 100644 index 0000000..58bd840 --- /dev/null +++ b/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; + } + +} + diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 04c181c..550adb0 100644 --- a/app/assets/stylesheets/main.scss +++ b/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; -$dark: #646267; +$red: #b10001; $taupe: #f2e8df; -$blue: #211caf; -$red: #b10001; +$white: #fff; -@mixin inline-ul { - display: inline-block; - list-style: none; - margin: 0; - padding: 0; +@import 'mixins'; +@import 'reset'; - li { - display: inline-block; - float: left; - margin: 0; - padding: 0; +@import 'atoms/buttons'; - a { - display: inline-block; - padding: 15px; - text-decoration: none; - } - } -} +@import 'molecules/nav'; -html { - background-color: $taupe; - 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; - } - } - -} +@import 'organisms/alerts'; +@import 'organisms/forms'; diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss new file mode 100644 index 0000000..87dd5b3 --- /dev/null +++ b/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; + } + } +} diff --git a/app/assets/stylesheets/molecules/nav.scss b/app/assets/stylesheets/molecules/nav.scss new file mode 100644 index 0000000..7e7f0cc --- /dev/null +++ b/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; + } + } +} + diff --git a/app/assets/stylesheets/organisms/alerts.scss b/app/assets/stylesheets/organisms/alerts.scss new file mode 100644 index 0000000..b027657 --- /dev/null +++ b/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; + } + } +} diff --git a/app/assets/stylesheets/organisms/forms.scss b/app/assets/stylesheets/organisms/forms.scss new file mode 100644 index 0000000..03e7eaf --- /dev/null +++ b/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); + } + +} diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss new file mode 100644 index 0000000..945b180 --- /dev/null +++ b/app/assets/stylesheets/reset.scss @@ -0,0 +1,11 @@ +html { + background-color: $taupe; + color: $dark; + margin: 0; + padding: 0; +} + +body { + margin: 15px; + padding: 0; +} diff --git a/app/controllers/relationships_controller.rb b/app/controllers/relationships_controller.rb index f46a36e..0c8451f 100644 --- a/app/controllers/relationships_controller.rb +++ b/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 diff --git a/app/models/child.rb b/app/models/child.rb index 54c72d3..29ba8ef 100644 --- a/app/models/child.rb +++ b/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 diff --git a/app/models/page.rb b/app/models/page.rb index 6c5f649..5c07bd0 100644 --- a/app/models/page.rb +++ b/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 diff --git a/app/models/parenthood.rb b/app/models/parenthood.rb index 04ff89a..d442a1c 100644 --- a/app/models/parenthood.rb +++ b/app/models/parenthood.rb @@ -1,4 +1,8 @@ class Parenthood < ActiveRecord::Base belongs_to :person belongs_to :child + + def to_i + id + end end diff --git a/app/models/person.rb b/app/models/person.rb index f804d1e..65e08a4 100644 --- a/app/models/person.rb +++ b/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 diff --git a/app/views/parents/show.html.haml b/app/views/parents/show.html.haml index 38cddfd..0319f6d 100644 --- a/app/views/parents/show.html.haml +++ b/app/views/parents/show.html.haml @@ -12,10 +12,12 @@ = link_to 'remove', del_parenthood_path(@parent, child), method: :delete %p Add Child: -:ruby - select_options = options_from_collection_for_select(@more_children, :id, :name) - html_options = { - include_blank: false, - prompt: 'Add a child to parent' - } -= select_tag(:child, select_options, html_options) += form_tag add_parenthood_path(@parent) do + :ruby + select_options = options_from_collection_for_select(@more_children, :id, :name) + html_options = { + include_blank: true, + data: { id: 'children' } + } + = select_tag(:child, select_options, html_options) + = submit_tag 'Add Child to Parent' diff --git a/config/routes.rb b/config/routes.rb index fce61bc..9ba9f83 100644 --- a/config/routes.rb +++ b/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