scss org and parenthood adding
This commit is contained in:
parent
c1f872e9a1
commit
0510f1c4c2
1
Gemfile
1
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'
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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
|
||||
*/
|
||||
|
15
app/assets/stylesheets/atoms/buttons.scss
Normal file
15
app/assets/stylesheets/atoms/buttons.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
|
||||
&:hover {
|
||||
color: $grey;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 0 0.1em $grey;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -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';
|
||||
|
19
app/assets/stylesheets/mixins.scss
Normal file
19
app/assets/stylesheets/mixins.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
31
app/assets/stylesheets/molecules/nav.scss
Normal file
31
app/assets/stylesheets/molecules/nav.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
43
app/assets/stylesheets/organisms/alerts.scss
Normal file
43
app/assets/stylesheets/organisms/alerts.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
36
app/assets/stylesheets/organisms/forms.scss
Normal file
36
app/assets/stylesheets/organisms/forms.scss
Normal file
@ -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);
|
||||
}
|
||||
|
||||
}
|
11
app/assets/stylesheets/reset.scss
Normal file
11
app/assets/stylesheets/reset.scss
Normal file
@ -0,0 +1,11 @@
|
||||
html {
|
||||
background-color: $taupe;
|
||||
color: $dark;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 15px;
|
||||
padding: 0;
|
||||
}
|
@ -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
|
||||
|
@ -19,4 +19,8 @@ class Child < ActiveRecord::Base
|
||||
def name
|
||||
"#{first_name} #{last_name}"
|
||||
end
|
||||
|
||||
def to_i
|
||||
id
|
||||
end
|
||||
end
|
||||
|
@ -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
|
||||
|
@ -1,4 +1,8 @@
|
||||
class Parenthood < ActiveRecord::Base
|
||||
belongs_to :person
|
||||
belongs_to :child
|
||||
|
||||
def to_i
|
||||
id
|
||||
end
|
||||
end
|
||||
|
@ -26,4 +26,8 @@ class Person < ActiveRecord::Base
|
||||
def name
|
||||
"#{first_name} #{last_name}"
|
||||
end
|
||||
|
||||
def to_i
|
||||
id
|
||||
end
|
||||
end
|
||||
|
@ -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'
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user