diff --git a/app/assets/stylesheets/atoms/buttons.scss b/app/assets/stylesheets/atoms/buttons.scss index 58bd840..02d8197 100644 --- a/app/assets/stylesheets/atoms/buttons.scss +++ b/app/assets/stylesheets/atoms/buttons.scss @@ -1,7 +1,7 @@ .btn { cursor: pointer; display: inline-block; - padding: 5px; + text-decoration: none; &:hover { color: $grey; diff --git a/app/assets/stylesheets/grid.scss b/app/assets/stylesheets/grid.scss new file mode 100644 index 0000000..e8f8ff0 --- /dev/null +++ b/app/assets/stylesheets/grid.scss @@ -0,0 +1,8 @@ +$gutter: 15px; +$gutter-full: $gutter * 2; + +body { + margin: $gutter auto; + padding: 0 $gutter; +} + diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 550adb0..8141efe 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -8,11 +8,17 @@ $red: #b10001; $taupe: #f2e8df; $white: #fff; +$copy: $dark; +$hover-copy: $light; +$hover-background: $dark; + @import 'mixins'; @import 'reset'; +@import 'grid'; @import 'atoms/buttons'; +@import 'molecules/lists'; @import 'molecules/nav'; @import 'organisms/alerts'; diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 87dd5b3..cd8024c 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -1,19 +1,25 @@ -@mixin inline-ul { - display: inline-block; +@mixin clean-ul { 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; } } } + +@mixin inline-ul { + @include clean-ul; + display: inline-block; + + li { + display: inline-block; + float: left; + } +} diff --git a/app/assets/stylesheets/molecules/lists.scss b/app/assets/stylesheets/molecules/lists.scss new file mode 100644 index 0000000..0d9d3b2 --- /dev/null +++ b/app/assets/stylesheets/molecules/lists.scss @@ -0,0 +1,35 @@ +.index { + @include clean-ul; + border-bottom: 1px solid $grey; + margin: 0 0 $gutter; + padding-bottom: $gutter / 2; + &:last-of-type { border-bottom: 0; } + + li { + line-height: 1.8em; + + .btn { + margin-left: $gutter / 2; + padding: 0 5px; + } + + a { + color: $dark; + text-decoration: underline; + &:visited { color: $copy; } + + &:hover, + &:active { + color: $hover-copy; + } + } + } + + .name { + font-size: 1.2em; + text-transform: capitalize; + .btn { font-size: 1rem; } + } + + ul { margin-left: $gutter; } +} diff --git a/app/assets/stylesheets/molecules/nav.scss b/app/assets/stylesheets/molecules/nav.scss index 027aed0..ad781fa 100644 --- a/app/assets/stylesheets/molecules/nav.scss +++ b/app/assets/stylesheets/molecules/nav.scss @@ -6,16 +6,22 @@ width: calc(100% + 30px); li { - &:hover { + border-bottom: 1px solid $black; + border-right: 1px solid $black; + + &:hover, + &:active { background-color: $grey; } a { color: $light; + padding: 15px; } &.active { background-color: $taupe; + border-bottom: 1px solid $taupe; a { color: $dark; @@ -27,10 +33,11 @@ .sub-nav { @include inline-ul; - margin: -19px -15px 0; + margin: -20px -15px 0; a { color: $dark; + padding: 15px; &:hover { background-color: $light; diff --git a/app/assets/stylesheets/organisms/forms.scss b/app/assets/stylesheets/organisms/forms.scss index 03e7eaf..e96dc06 100644 --- a/app/assets/stylesheets/organisms/forms.scss +++ b/app/assets/stylesheets/organisms/forms.scss @@ -1,11 +1,6 @@ form { width: 100%; - * { - font-size: 14px; - line-height: 1.6em; - } - label { display: inline-block; margin: 0.6em 0 0; @@ -18,6 +13,8 @@ form { input { display: block; + font-size: 14px; + line-height: 1.6em; margin: 0 0 0.6em; padding: 5px; } @@ -33,4 +30,8 @@ form { width: calc(100% - 30px); } + fieldset { + margin: 15px; + border: 0; + } } diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss index 945b180..ea9b9ca 100644 --- a/app/assets/stylesheets/reset.scss +++ b/app/assets/stylesheets/reset.scss @@ -1,11 +1,7 @@ html { background-color: $taupe; color: $dark; + font-size: 18px; margin: 0; padding: 0; } - -body { - margin: 15px; - padding: 0; -} diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 5a5845e..a0a2d1b 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -2,7 +2,11 @@ module ApplicationHelper def page_link(person) return if person.phone.blank? - link_to 'page', page_person_path(person) + link_to 'page', page_person_path(person), class: 'btn' + end + + def edit_btn(url) + link_to 'edit', url, class: 'btn' end def active_controller(kontroller) diff --git a/app/views/children/edit.html.haml b/app/views/children/edit.html.haml index 855edd0..fc4da5f 100644 --- a/app/views/children/edit.html.haml +++ b/app/views/children/edit.html.haml @@ -1,5 +1,6 @@ %h2 Edit #{@child.name} -%p= link_to 'back', child_path(@child) +%ul.sub-nav + %li= link_to 'back', :back = render partial: 'form' diff --git a/app/views/children/index.html.haml b/app/views/children/index.html.haml index dae2f11..21bd206 100644 --- a/app/views/children/index.html.haml +++ b/app/views/children/index.html.haml @@ -1,12 +1,15 @@ %h1 Children - @children.each do |child| - %ul + %ul.index %li = link_to child.name, child_path(child) - = link_to 'edit', edit_child_path(child) - %ul - - child.parents.each do |parent| - %li - = link_to parent.name, parent_path(parent) - = page_link(parent) + = edit_btn(edit_child_path(child)) + + - unless child.parents.empty? + %li Parents: + %ul + - child.parents.each do |parent| + %li + = link_to parent.name, parent_path(parent) + = page_link(parent) diff --git a/app/views/children/new.html.haml b/app/views/children/new.html.haml index 7874876..10cb55d 100644 --- a/app/views/children/new.html.haml +++ b/app/views/children/new.html.haml @@ -1,3 +1,6 @@ %h2 Add a New Child +%ul.sub-nav + %li= link_to 'back', :back + = render partial: 'form' diff --git a/app/views/children/show.html.haml b/app/views/children/show.html.haml index 9ef8589..9eecd3c 100644 --- a/app/views/children/show.html.haml +++ b/app/views/children/show.html.haml @@ -1,5 +1,8 @@ %h2= @child.name -%p= link_to 'edit', edit_child_path(@child) + +%ul.sub-nav + %li= link_to 'back', :back + %li= link_to 'edit', edit_child_path(@child) - unless @child.parents.empty? %p Parents: diff --git a/app/views/layouts/_navigation.html.haml b/app/views/layouts/_navigation.html.haml index d85149f..d9367b9 100644 --- a/app/views/layouts/_navigation.html.haml +++ b/app/views/layouts/_navigation.html.haml @@ -2,6 +2,6 @@ %li{ class: active_controller('docs') }= link_to 'Home', root_path %li{ class: active_controller('parents') }= link_to 'Parents', list_parents_path %li{ class: active_controller('children') }= link_to 'Children', list_children_path + %li{ class: active_controller('pages') }= link_to 'Pages', list_pages_path %li{ class: active_controller('staff') }= link_to 'Staff', list_staff_path %li{ class: active_controller('users') }= link_to 'Users', list_users_path - %li{ class: active_controller('pages') }= link_to 'Pages', list_pages_path diff --git a/app/views/parents/edit.html.haml b/app/views/parents/edit.html.haml index bf57a62..82b7767 100644 --- a/app/views/parents/edit.html.haml +++ b/app/views/parents/edit.html.haml @@ -1,6 +1,7 @@ %h2 Edit #{@parent.name} -%p= link_to 'back', parent_path(@parent) +%ul.sub-nav + %li= link_to 'back', :back - if @parent.errors.full_messages.any? .errors diff --git a/app/views/parents/index.html.haml b/app/views/parents/index.html.haml index 595add0..0a3d25c 100644 --- a/app/views/parents/index.html.haml +++ b/app/views/parents/index.html.haml @@ -1,13 +1,19 @@ %h1 Parents - @parents.each do |parent| - %ul - %li= link_to parent.name, parent_path(parent) + %ul.index + %li.name + = link_to parent.name, parent_path(parent) + = edit_btn(edit_parent_path(parent)) %li = number_to_phone parent.phone = page_link(parent) - %li= mail_to parent.email, nil, encode: 'hex' - %li Children: - %ul - - parent.children.each do |child| - %li= link_to child.name, child_path(child) + + - if parent.email.present? + %li= mail_to parent.email, nil, encode: 'hex' + + - unless parent.children.empty? + %li Children: + %ul + - parent.children.each do |child| + %li= link_to child.name, child_path(child) diff --git a/app/views/parents/new.html.haml b/app/views/parents/new.html.haml index 5381c12..82828b6 100644 --- a/app/views/parents/new.html.haml +++ b/app/views/parents/new.html.haml @@ -1,5 +1,8 @@ %h2 Add a New Parent +%ul.sub-nav + %li= link_to 'back', :back + - if @parent.errors.full_messages.any? .errors %h1 Uh oh! diff --git a/app/views/parents/show.html.haml b/app/views/parents/show.html.haml index 30db3a0..da77517 100644 --- a/app/views/parents/show.html.haml +++ b/app/views/parents/show.html.haml @@ -1,5 +1,9 @@ %h2= @parent.name -%p= link_to 'edit', edit_parent_path(@parent) + +%ul.sub-nav + %li= link_to 'back', :back + %li= link_to 'edit', edit_parent_path(@parent) + %p Email: #{mail_to(@parent.email, nil, encode: 'hex')} %p Phone: #{number_to_phone @parent.phone} #{page_link(@parent)}