Improvements to styles and markup

Gemfile

@@ -1,6 +1,7 @@
 source 'https://rubygems.org'
 
 gem 'sinatra'
+gem 'sinatra-partial'
 gem 'data_mapper'
 
 gem 'rake'

Gemfile.lock

@@ -97,6 +97,8 @@ GEM
       rack (~> 1.4)
       rack-protection (~> 1.4)
       tilt (~> 1.3, >= 1.3.4)
+    sinatra-partial (0.4.0)
+      sinatra
     sqlite3 (1.3.9)
     stringex (1.5.1)
     tilt (1.4.1)
@@ -119,4 +121,5 @@ DEPENDENCIES
   rake
   rerun
   sinatra
+  sinatra-partial
   sqlite3

linkedout.rb

@@ -1,9 +1,12 @@
 require 'sinatra'
+require 'sinatra/partial'
 require 'better_errors'
 
 require_relative 'config/dotenv'
 require_relative 'models'
 
+set :partial_template_engine, :erb
+
 configure :development do
   use BetterErrors::Middleware
   BetterErrors.application_root = File.expand_path('..', __FILE__)

public/main.css

@@ -1,9 +1,125 @@
+/*
+ * HEADER
+ */
 header {
   min-width: 100%;
   text-align: center;
+  background-color: #555;
+  color: #fff;
+  padding: 0.5em;
 }
 
-.resume {
+header h1 {
+  margin: 0;
+  font-size: 1.5em;
+}
+
+
+/*
+ * PAGE
+ */
+.page {
   margin: 0 auto;
   width: 720px;
 }
+
+/* Separate page nav area from the main content with a border */
+.page nav {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid;
+  margin-bottom: 0.5em;
+}
+
+.page nav a {
+  float: right;
+}
+
+/* Highlight section for featured content */
+.highlight {
+  width: 100%;
+  margin-bottom: 3em;
+}
+
+.highlight p { font-size: 1.5em; }
+
+
+/*
+ * GRID
+ */
+.row {
+  display: block;
+  clear: both;
+}
+
+.row:after {
+  display: block;
+  content: "";
+  line-height: 0;
+  clear: both;
+}
+
+/* 1/3 column (720 * 1/3) */
+.one_third {
+  float: left;
+  width: 240px;
+}
+
+/* 2/3 column (720 * 2/3 - margin) */
+.two_thirds {
+  float: left;
+  width: 460px;
+  margin-right: 20px;
+}
+
+
+/*
+ * FORMS
+ */
+textarea {
+  width: 360px;
+  height: 3em;
+}
+
+form.vertical label {
+  display: inline-block;
+  min-width: 120px;
+  vertical-align: top;
+}
+
+form.vertical input { margin-bottom: 0.25em; }
+
+form.vertical input[type="submit"] {
+  margin-left: 124px;
+  padding: 0.25em;
+}
+
+form.mini input[type="text"] { max-width: 160px; }
+form.mini input[type="submit"] { float: right; }
+
+
+/*
+ * UTILITY CLASSES
+ */
+.no_bullets {
+  list-style-type: none;
+}
+
+.no_padding {
+  padding: 0;
+}
+
+
+/*
+ * SECTION STYLING
+ */
+
+/* Jobs section */
+.jobs li { margin-bottom: 2.5em; }
+.jobs li h4 { margin-bottom: 0; }
+
+/* Skills section */
+.skills li {
+  padding: 0.25em;
+  margin-bottom: 1em;
+  background-color: #ccc;
+}

views/partials/job.erb

@@ -0,0 +1,4 @@
+<li>
+  <h4><%= job.job_title %> at <%= job.company_name %></h4>
+  <p><%= job.job_description %></p>
+</li>

views/partials/job_form.erb

@@ -0,0 +1,23 @@
+<%
+  # When rendering a partial, the collection item takes the name
+  # of the file for the item, so the job object is assigned to
+  # the local variable `job_form`
+  job = job_form
+%>
+<li>
+  <form name="edit_job" action="/jobs/edit" method="post" accept-charset="utf-8">
+    <input type="hidden" name="_method" value="put">
+
+    <input type="hidden" name="job[id]" value="<%= job.id %>">
+
+    <input type="text" name="job[job_title]" value="<%= job.job_title %>"> at
+    <input type="text" name="job[company_name]" value="<%= job.company_name %>">
+    <br>
+
+    <label for="job[job_description]">Job Description</label><br>
+    <textarea name="job[job_description]"><%= job.job_description %></textarea>
+    <br>
+
+    <input type="submit" value="Save">
+  </form>
+</li>

views/partials/profile.erb

@@ -0,0 +1,10 @@
+<section class="profile highlight">
+  <h1><%= user.name %></h1>
+  <div class="contact-info">
+    <%= user.email %>
+     | <%= user.phone %>
+     | <a href="<%= user.website %>"><%= user.website %></a>
+  </div>
+
+  <p><%= user.bio %></p>
+</section>

views/partials/profile_form.erb

@@ -0,0 +1,27 @@
+<section class="profile">
+  <form name="edit_user" action="/users/edit" method="post" accept-charset="utf-8" class="vertical">
+    <input type="hidden" name="_method" value="put">
+
+    <label for="user[name]">Name</label>
+    <input type="text" name="user[name]" value="<%= user.name %>">
+    <br>
+
+    <label for="user[email]">Email</label>
+    <input type="email" name="user[email]" value="<%= user.email %>">
+    <br>
+
+    <label for="user[phone]">Phone</label>
+    <input type="phone" name="user[phone]" value="<%= user.phone %>">
+    <br>
+
+    <label for="user[website]">Website</label>
+    <input type="url" name="user[website]" value="<%= user.website %>">
+    <br>
+
+    <label for="user[bio]">Bio</label>
+    <textarea name="user[bio]"><%= user.bio %></textarea>
+    <br>
+
+    <input type="submit" value="Update profile">
+  </form>
+</section>

views/partials/skill.erb

@@ -0,0 +1 @@
+<li><%= skill.name %></li>

views/partials/skill_form.erb

@@ -0,0 +1,12 @@
+<% skill = skill_form %>
+<li>
+  <form name="edit_skill" action="/skills/edit" method="post" accept-charset="utf-8" class="mini">
+    <input type="hidden" name="_method" value="put">
+
+    <input type="hidden" name="skill[id]" value="<%= skill.id %>">
+
+    <input type="text" name="skill[name]" value="<%= skill.name %>">
+
+    <input type="submit" value="Save">
+  </form>
+</li>

views/resumes/edit.erb

@@ -1,76 +1,24 @@
-<div class="resume">
-  <h3>Edit My Résumé</h3>
-
-  <section class="profile">
-    <form name="edit_user" action="/users/edit" method="post" accept-charset="utf-8">
-      <input type="hidden" name="_method" value="put">
-
-      <label for="user[name]">Name</label>
-      <input type="text" name="user[name]" value="<%= default_user.name %>">
-      <br>
-
-      <label for="user[email]">Email</label>
-      <input type="email" name="user[email]" value="<%= default_user.email %>">
-      <br>
-
-      <label for="user[phone]">Phone</label>
-      <input type="phone" name="user[phone]" value="<%= default_user.phone %>">
-      <br>
-
-      <label for="user[website]">Website</label>
-      <input type="url" name="user[website]" value="<%= default_user.website %>">
-      <br>
-
-      <label for="user[bio]">Bio</label>
-      <textarea name="user[bio]"><%= default_user.bio %></textarea>
-      <br>
-
-      <input type="submit" value="Update user">
-    </form>
-  </section>
-
-  <section class="jobs">
-    <h2>Jobs</h2>
-    <ul>
-    <% @jobs.each do |job| %>
-      <li>
-        <form name="edit_job" action="/jobs/edit" method="post" accept-charset="utf-8">
-          <input type="hidden" name="_method" value="put">
-
-          <input type="hidden" name="job[id]" value="<%= job.id %>">
-
-          <input type="text" name="job[job_title]" value="<%= job.job_title %>"> at
-          <input type="text" name="job[company_name]" value="<%= job.company_name %>">
-          <br>
-
-          <label for="job[job_description]">Job Description</label>
-          <textarea name="job[job_description]"><%= job.job_description %></textarea>
-          <br>
-
-          <input type="submit" value="Update job">
-        </form>
-      </li>
-    <% end %>
-    </ul>
-  </section>
-
-  <section class="skills">
-    <h2>Skills</h2>
-    <ul>
-    <% @skills.each do |skill| %>
-      <li>
-        <form name="edit_skill" action="/skills/edit" method="post" accept-charset="utf-8">
-          <input type="hidden" name="_method" value="put">
-
-          <input type="hidden" name="skill[id]" value="<%= skill.id %>">
-
-          <input type="text" name="skill[name]" value="<%= skill.name %>">
-          <br>
-
-          <input type="submit" value="Update skill">
-        </form>
-      </li>
-    <% end %>
-    </ul>
-  </section>
+<div class="page">
+  <nav>
+    <a href="/" title="View resume">View</a>
+    <h3>Edit My Résumé</h3>
+  </nav>
+
+  <%= partial :'partials/profile_form', :locals => { :user => default_user } %>
+
+  <div class="row">
+    <section class="jobs two_thirds">
+      <h2>Jobs</h2>
+      <ul class="no_bullets no_padding">
+        <%= partial :'partials/job_form', collection: @jobs %>
+      </ul>
+    </section>
+
+    <section class="skills one_third">
+      <h2>Skills</h2>
+      <ul class="no_bullets no_padding">
+        <%= partial :'partials/skill_form', collection: @skills %>
+      </ul>
+    </section>
+  </div>
 </div>