styling it up

app/assets/stylesheets/atoms/buttons.scss

@@ -1,7 +1,7 @@
 .btn {
   cursor: pointer;
   display: inline-block;
-  padding: 5px;
+  text-decoration: none;
 
   &:hover {
     color: $grey;

app/assets/stylesheets/grid.scss

@@ -0,0 +1,8 @@
+$gutter: 15px;
+$gutter-full: $gutter * 2;
+
+body {
+  margin: $gutter auto;
+  padding: 0 $gutter;
+}
+

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';

app/assets/stylesheets/mixins.scss

@@ -1,19 +1,25 @@
-@mixin inline-ul {
+@mixin clean-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;
     }
   }
 }
+
+@mixin inline-ul {
+  @include clean-ul;
+  display: inline-block;
+
+  li {
+    display: inline-block;
+    float: left;
+  }
+}

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; }
+}

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;

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;
+  }
 }

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;
-}

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)

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'

app/views/children/index.html.haml

@@ -1,10 +1,13 @@
 %h1 Children
 
 - @children.each do |child|
-  %ul
+  %ul.index
     %li
       = link_to child.name, child_path(child)
-      = link_to 'edit', edit_child_path(child)
+      = edit_btn(edit_child_path(child))
+
+    - unless child.parents.empty?
+      %li Parents:
       %ul
         - child.parents.each do |parent|
           %li

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'

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:

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

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

app/views/parents/index.html.haml

@@ -1,12 +1,18 @@
 %h1 Parents
 
 - @parents.each do |parent|
-  %ul
+  %ul.index
-    %li= link_to parent.name, parent_path(parent)
+    %li.name
+      = link_to parent.name, parent_path(parent)
+      = edit_btn(edit_parent_path(parent))
     %li
       = number_to_phone parent.phone
       = page_link(parent)
+
+    - if parent.email.present?
       %li= mail_to parent.email, nil, encode: 'hex'
+
+    - unless parent.children.empty?
       %li Children:
       %ul
         - parent.children.each do |child|

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!

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)}