From 63d40633925d90e981a8e7c44cf4fa9d4749faf1 Mon Sep 17 00:00:00 2001
From: Mark Moser <MarkAMoser@gmail.com>
Date: Sun, 4 Oct 2015 20:27:03 -0500
Subject: [PATCH] styling it up

---
 app/assets/stylesheets/atoms/buttons.scss   |  2 +-
 app/assets/stylesheets/grid.scss            |  8 +++++
 app/assets/stylesheets/main.scss            |  6 ++++
 app/assets/stylesheets/mixins.scss          | 16 +++++++---
 app/assets/stylesheets/molecules/lists.scss | 35 +++++++++++++++++++++
 app/assets/stylesheets/molecules/nav.scss   | 11 +++++--
 app/assets/stylesheets/organisms/forms.scss | 11 ++++---
 app/assets/stylesheets/reset.scss           |  6 +---
 app/helpers/application_helper.rb           |  6 +++-
 app/views/children/edit.html.haml           |  3 +-
 app/views/children/index.html.haml          | 17 +++++-----
 app/views/children/new.html.haml            |  3 ++
 app/views/children/show.html.haml           |  5 ++-
 app/views/layouts/_navigation.html.haml     |  2 +-
 app/views/parents/edit.html.haml            |  3 +-
 app/views/parents/index.html.haml           | 20 +++++++-----
 app/views/parents/new.html.haml             |  3 ++
 app/views/parents/show.html.haml            |  6 +++-
 18 files changed, 125 insertions(+), 38 deletions(-)
 create mode 100644 app/assets/stylesheets/grid.scss
 create mode 100644 app/assets/stylesheets/molecules/lists.scss

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