Add screenshot and persist email values.

app.rb

@@ -34,8 +34,8 @@
 # Create the LinkedIn client and profile objects for all routes when
 # authenticated.
 before do
-  @tagline = "LinkedOut lets you export LinkedIn profiles for you or any
-              of your connections as clean PDF resumes."
+  @tagline = "LinkedOut lets you export LinkedIn profiles for you or any " \
+             "of your connections as clean PDF resumes."
   @client = LinkedIn::Client.new(api_key.token, api_key.secret)
   unless session[:auth].nil?
     @client.authorize_from_access *session[:auth]
@@ -54,6 +54,7 @@
     @profiles = (@client.connections.all + [@profile]).sort_by {|p|
       p.first_name.upcase
     }
+    @emails = Resume.all(:by => @profile.id, :email.not => "")
     erubis :create
   end
 end
@@ -63,7 +64,7 @@
   @resume = Resume.first_or_create(:by => @profile.id, :for => params[:id])
   @resume.update(:email => params[:email])
   @profile = @client.profile :id => params[:id], :fields => resume_fields
-  attachment @profile.first_name + @profile.last_name + ".pdf"
+  attachment "#{@profile.first_name}-#{@profile.last_name}.pdf"
   PDFKit.new(erubis :resume, :layout => false).to_pdf
 end
 

helpers.rb

@@ -1,9 +1,10 @@
 # encoding: UTF-8
+# (for unicode bullets regex that works consistently across Ruby 1.8 and 1.9)
 
 helpers do
   # Splits the given data into sections where each section is either
   # a string paragraph, or a list of bullet points. The near_items
-  # arg are the other items in the same list that the data arg is from
+  # arg is the other items in the same list that the data arg is from
   # and are used to treat the data like bullet points if most of the
   # other items are bullet points.
   def sections(data, near_items)

public/css/style.css

@@ -13,9 +13,15 @@ body {
     float:left; width:80px; height:80px; margin-right:10px;
     border:1px solid #333;
 }
-p {font-size:16px; margin:10px 0; line-height:24px;}
+
 h1 {margin-bottom:5px;}
+h2 {margin:0 0 8px 0; line-height:20px; font-size:24px;}
+p {margin-bottom:0;}
+p.text {font-size:16px; margin:10px 0; line-height:24px;}
 form {margin-top:20px;}
-label {width:auto; margin-right:10px; text-indent:1px;}
+label {width:45px; margin-right:10px; text-indent:1px; text-align:left;}
 .btn {margin:20px 5px 0 0;}
 footer {font-size:11px; padding-top:10px; margin-top:40px;}
+
+#screenshot img {width:460px; border:1px solid #999; margin-top:10px; cursor:pointer;}
+#modal-screenshot {width:960px; margin-left:-480px;}

views/create.erb

@@ -1,4 +1,53 @@
-<p>Hey <%= @profile.first_name %>, choose a profile to create a resume.</p>
+<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+<script>
+
+$(function() {
+
+    var profiles = {};
+    var select = $('#profiles');
+
+    // Map the profiles JSON to their IDs for fast lookup and
+    // populate the select list.
+    $.each(<%== @profiles.to_json %>, function() {
+        if (this.id != 'private') {
+            this.name = this.first_name + ' ' + this.last_name;
+            this.picture_url = this.picture_url || '/img/no_photo.png';
+            select.append($('<option>').val(this.id).text(this.name));
+            profiles[this.id] = this;
+        }
+    });
+
+    // Assign any previously specified email addresses.
+    $.each(<%== @emails.to_json %>, function() {
+        profiles[this['for']].email = this.email;
+    });
+
+    // On change of the select list, populate the profile template
+    // and email address field.
+    var profile = function() {
+        var profile = profiles[this.value];
+        var template = $('#profile-template').tmpl(profile);
+        $('#profile').html(template);
+        $('#email').val(profile.email || '');
+    };
+
+    select.change(profile).keyup(profile);
+    select.val('<%= @profile.id %>').change();
+
+    // Store the current email field value against the profile
+    // when focus leaves the email field.
+    $('#email').blur(function() {
+        profiles[select.val()].email = this.value;
+    });
+
+});
+
+</script>
+
+<p class="text">
+    Hey <%= @profile.first_name %>, choose a profile to create
+    a resume.
+</p>
 
 <form method="post">
     <label for="profiles">Profile:</label>
@@ -9,8 +58,10 @@
         <p>${headline}</p>
     </script>
     <div id="profile"></div>
-    <p>LinkedIn doesn't allow access to email addresses, so you can optionally
-       add an email address to the resume here.</p>
+    <p class="text">
+        LinkedIn doesn't allow access to email addresses, so you
+        can optionally add an email address to the resume here.
+    </p>
     <label for="email">Email:</label>
     <input name="email" id="email">
     <br>

views/index.erb

@@ -1,13 +1,13 @@
-<p><%= @tagline %></p>
-<a data-controls-modal="modal-demo" data-backdrop="true">demo</a><br>
+<p class="text"><%= @tagline %></p>
+<a id="screenshot" data-controls-modal="modal-screenshot" data-backdrop="true"><img src="/img/screenshot.png"></a>
+<br>
 <a href="/login" class="btn large primary">Login via LinkedIn</a>
-
-<div id="modal-demo" class="modal hide fade">
+<div id="modal-screenshot" class="modal hide fade">
     <div class="modal-header">
-          <a href="#" class="close">&times;</a>
-          <h3>demo</h3>
+        <a href="#" class="close">&times;</a>
+        <h3>&nbsp;</h3>
     </div>
     <div class="modal-body">
-          <p>img</p>
+        <img src="/img/screenshot.png">
     </div>
 </div>

views/layout.erb

@@ -10,36 +10,6 @@
 <![endif]-->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script src="http://twitter.github.com/bootstrap/1.3.0/bootstrap-modal.js"></script>
-<% if @profile %>
-<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
-<script>
-
-$(function() {
-
-    var profiles = {};
-    var select = $('#profiles');
-
-    $.each(<%== @profiles.to_json %>, function() {
-        if (this.id != 'private') {
-            this.name = this.first_name + ' ' + this.last_name;
-            this.picture_url = this.picture_url || '/img/no_photo.png';
-            select.append($('<option>').val(this.id).text(this.name));
-            profiles[this.id] = this;
-        }
-    });
-
-    var profile = function() {
-        var template = $('#profile-template').tmpl(profiles[this.value]);
-        $('#profile').html(template);
-    };
-
-    select.change(profile).keyup(profile);
-    select.val('<%= @profile.id %>').change();
-
-});
-
-</script>
-<% end %>
 <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
 <link rel="stylesheet" href="/css/style.css">
 </head>