From 7df2cc45ef03dfc44579bb26682c38a842ebc9b6 Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 13:39:29 -0400 Subject: [PATCH 1/8] Significant improvements to display styles - Header is white text on dark bg - Jobs and skills are organized into adjacent columns - Better whitespacing all around Some structural changes to HTML were added to accomodate new styles. --- public/main.css | 65 ++++++++++++++++++++++++++++++ views/resumes/edit.erb | 90 +++++++++++++++++++++--------------------- views/resumes/show.erb | 48 +++++++++++----------- 3 files changed, 137 insertions(+), 66 deletions(-) diff --git a/public/main.css b/public/main.css index 7ba924b..56e75a1 100644 --- a/public/main.css +++ b/public/main.css @@ -1,9 +1,74 @@ header { min-width: 100%; text-align: center; + background-color: #555; + color: #fff; + padding: 0.5em; } +header h1 { + margin: 0; + font-size: 1.5em; +} + +/* Résumé page content is centered and has a default width */ .resume { margin: 0 auto; width: 720px; } + +/* The page header is separated from the main content with a border */ +.page_header { + padding-bottom: 0.25em; + border-bottom: 1px solid; +} + +.page_header a { + float: right; +} + +/* Profile section */ +.profile { margin-bottom: 3em; } + +.profile p { font-size: 1.5em; } + +/* Professional info section (wraps jobs and skills) */ +.professional_info { + display: block; + clear: both; +} + +.professional_info:after { + display: block; + content: ""; + line-height: 0; + clear: both; +} + +/* Cancel extra whitespace and list markers in job and skill lists */ +.jobs ul, .skills ul { + padding: 0; + list-style-type: none; +} + +/* Jobs section takes up 2/3rds of page (720 * 2/3 - margin) */ +.jobs { + float: left; + width: 460px; + margin-right: 20px; +} + +.jobs li { margin-bottom: 2.5em; } +.jobs li h4 { margin-bottom: 0; } + +/* Skills section takes up 1/3rd of page */ +.skills { + float: left; + width: 240px; +} + +.skills li { + padding: 0.25em; + margin-bottom: 1em; + background-color: #ccc; +} diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index be2f667..7b62883 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -29,48 +29,50 @@ -
-

Jobs

- -
- -
-

Skills

- -
+
+
+

Jobs

+
    + <% @jobs.each do |job| %> +
  • +
    + + + + + at + +
    + + + +
    + + +
    +
    • + <% end %> +
+
+ +
+

Skills

+
    + <% @skills.each do |skill| %> +
  • +
    + + + + + +
    + + +
    +
    • + <% end %> +
+
+
diff --git a/views/resumes/show.erb b/views/resumes/show.erb index 6cb3a62..a340ee1 100644 --- a/views/resumes/show.erb +++ b/views/resumes/show.erb @@ -1,36 +1,40 @@
-

My Résumé

- Edit +
+ Edit +

My Résumé

+

<%= default_user.name %>

<%= default_user.email %> | <%= default_user.phone %> - | <%= default_user.website %> + | <%= default_user.website %>

<%= default_user.bio %>

-
-

Jobs

-
    - <% @jobs.each do |job| %> -
  • -

    <%= job.job_title %> at <%= job.company_name %>

    -

    <%= job.job_description %>

    -
    • - <% end %> -
-
+
+
+

Jobs

+
    + <% @jobs.each do |job| %> +
  • +

    <%= job.job_title %> at <%= job.company_name %>

    +

    <%= job.job_description %>

    +
    • + <% end %> +
+
-
-

Skills

-
    - <% @skills.each do |skill| %> -
  • <%= skill.name %>
    • - <% end %> -
-
+
+

Skills

+
    + <% @skills.each do |skill| %> +
  • <%= skill.name %>
    • + <% end %> +
+
+
From dea518b3deef5cdd7443361c1b4cdfceb4163800 Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 18:42:40 -0400 Subject: [PATCH 2/8] Improvements to form styling in /resumes/edit - Align labels and inputs in profile form - Boost size of textarea inputs - Make skill edit forms one-line - Simplify form submit button values --- public/main.css | 25 ++++++++++++++++++++++++- views/resumes/edit.erb | 9 ++++----- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/public/main.css b/public/main.css index 56e75a1..802e63b 100644 --- a/public/main.css +++ b/public/main.css @@ -29,7 +29,6 @@ header h1 { /* Profile section */ .profile { margin-bottom: 3em; } - .profile p { font-size: 1.5em; } /* Professional info section (wraps jobs and skills) */ @@ -72,3 +71,27 @@ header h1 { margin-bottom: 1em; background-color: #ccc; } + +/* General form styling */ +textarea { + width: 360px; + height: 48px; +} + +/* Profile form styling */ +.profile form label { + display: inline-block; + min-width: 120px; + vertical-align: top; +} + +.profile form input { margin-bottom: 5px; } + +.profile form input[type="submit"] { + margin-left: 124px; + padding: 5px; +} + +/* Skills form styling */ +.skills form input[type="text"] { max-width: 160px; } +.skills form input[type="submit"] { float: right; } diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index 7b62883..f968daa 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -25,7 +25,7 @@
- + @@ -44,11 +44,11 @@
- +

- + <% end %> @@ -66,9 +66,8 @@ -
- + <% end %> From b3394f8c1abddc5c3bb9f9dccb46cf2631928deb Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 18:59:58 -0400 Subject: [PATCH 3/8] Decouple CSS styles from content CSS should be generic, with classes that describe the style changes but are not tied to the content of the page. In this commit, I've moved as much styling as possible into generic classes like "row" and "page" instead of using class names closely linked to the HTML content. Also added some better formatting of the CSS in general, with comment headers separating related styles. --- public/main.css | 110 ++++++++++++++++++++++++++--------------- views/resumes/edit.erb | 21 ++++---- views/resumes/show.erb | 18 +++---- 3 files changed, 90 insertions(+), 59 deletions(-) diff --git a/public/main.css b/public/main.css index 802e63b..f57fce3 100644 --- a/public/main.css +++ b/public/main.css @@ -1,3 +1,6 @@ +/* + * HEADER + */ header { min-width: 100%; text-align: center; @@ -11,87 +14,112 @@ header h1 { font-size: 1.5em; } -/* Résumé page content is centered and has a default width */ -.resume { + +/* + * PAGE + */ +.page { margin: 0 auto; width: 720px; } -/* The page header is separated from the main content with a border */ -.page_header { +/* 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_header a { +.page nav a { float: right; } -/* Profile section */ -.profile { margin-bottom: 3em; } -.profile p { font-size: 1.5em; } +/* Highlight section for featured content */ +.highlight { + width: 100%; + margin-bottom: 3em; +} + +.highlight p { font-size: 1.5em; } -/* Professional info section (wraps jobs and skills) */ -.professional_info { + +/* + * GRID + */ +.row { display: block; clear: both; } -.professional_info:after { +.row:after { display: block; content: ""; line-height: 0; clear: both; } -/* Cancel extra whitespace and list markers in job and skill lists */ -.jobs ul, .skills ul { - padding: 0; - list-style-type: none; +/* 1/3 column (720 * 1/3) */ +.one_third { + float: left; + width: 240px; } -/* Jobs section takes up 2/3rds of page (720 * 2/3 - margin) */ -.jobs { +/* 2/3 column (720 * 2/3 - margin) */ +.two_thirds { float: left; width: 460px; margin-right: 20px; } -.jobs li { margin-bottom: 2.5em; } -.jobs li h4 { margin-bottom: 0; } - -/* Skills section takes up 1/3rd of page */ -.skills { - float: left; - width: 240px; -} - -.skills li { - padding: 0.25em; - margin-bottom: 1em; - background-color: #ccc; -} -/* General form styling */ +/* + * FORMS + */ textarea { width: 360px; - height: 48px; + height: 3em; } -/* Profile form styling */ -.profile form label { +form.vertical label { display: inline-block; min-width: 120px; vertical-align: top; } -.profile form input { margin-bottom: 5px; } +form.vertical input { margin-bottom: 0.25em; } -.profile form input[type="submit"] { +form.vertical input[type="submit"] { margin-left: 124px; - padding: 5px; + 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; } -/* Skills form styling */ -.skills form input[type="text"] { max-width: 160px; } -.skills form input[type="submit"] { float: right; } +.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; +} diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index f968daa..2448dcf 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -1,8 +1,11 @@ -
-

Edit My Résumé

+
+
-
+ @@ -29,10 +32,10 @@
-
-
+
+

Jobs

-
    +
      <% @jobs.each do |job| %>
    • @@ -55,12 +58,12 @@
-
+

Skills

-
    +
      <% @skills.each do |skill| %>
    • - + diff --git a/views/resumes/show.erb b/views/resumes/show.erb index a340ee1..1d1d1b9 100644 --- a/views/resumes/show.erb +++ b/views/resumes/show.erb @@ -1,10 +1,10 @@ -
      -
      +
      +
      + -
      +

      <%= default_user.name %>

      <%= default_user.email %> @@ -15,10 +15,10 @@

      <%= default_user.bio %>

      -
      -
      +
      +

      Jobs

      -
        +
          <% @jobs.each do |job| %>

        • <%= job.job_title %> at <%= job.company_name %>

          @@ -28,9 +28,9 @@
      -
      +

      Skills

      -
        +
          <% @skills.each do |skill| %>
        • <%= skill.name %>
          • <% end %> From d9c93da3bd2e2f900fea44e70e33b25bb616cb05 Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 19:18:16 -0400 Subject: [PATCH 4/8] Move profile view and edit sections into partials Reasoning: A partial is file for rendering a part of an HTML page. They are useful for breaking apart a page into modular components, each with its own content and purpose. --- views/partials/profile_edit.erb | 27 +++++++++++++++++++++++++++ views/partials/profile_show.erb | 10 ++++++++++ views/resumes/edit.erb | 28 +--------------------------- views/resumes/show.erb | 11 +---------- 4 files changed, 39 insertions(+), 37 deletions(-) create mode 100644 views/partials/profile_edit.erb create mode 100644 views/partials/profile_show.erb diff --git a/views/partials/profile_edit.erb b/views/partials/profile_edit.erb new file mode 100644 index 0000000..957e275 --- /dev/null +++ b/views/partials/profile_edit.erb @@ -0,0 +1,27 @@ +
          + + + + + +
          + + + +
          + + + +
          + + + +
          + + + +
          + + + +
          diff --git a/views/partials/profile_show.erb b/views/partials/profile_show.erb new file mode 100644 index 0000000..ddf216f --- /dev/null +++ b/views/partials/profile_show.erb @@ -0,0 +1,10 @@ +
          +

          <%= default_user.name %>

          +
          + <%= default_user.email %> + | <%= default_user.phone %> + | <%= default_user.website %> +
          + +

          <%= default_user.bio %>

          +
          diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index 2448dcf..782e82d 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -4,33 +4,7 @@

          Edit My Résumé

          -
          -
          - - - - -
          - - - -
          - - - -
          - - - -
          - - - -
          - - -
          -
          + <%= erb :'partials/profile_edit' %>
          diff --git a/views/resumes/show.erb b/views/resumes/show.erb index 1d1d1b9..5e4e9d5 100644 --- a/views/resumes/show.erb +++ b/views/resumes/show.erb @@ -4,16 +4,7 @@

          My Résumé

          -
          -

          <%= default_user.name %>

          -
          - <%= default_user.email %> - | <%= default_user.phone %> - | <%= default_user.website %> -
          - -

          <%= default_user.bio %>

          -
          + <%= erb :'partials/profile_show' %>
          From 7825d35b58fa43684356d38489b49455a6889337 Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 19:22:21 -0400 Subject: [PATCH 5/8] Use sinatra-partial gem for rendering partials --- Gemfile | 1 + Gemfile.lock | 3 +++ linkedout.rb | 3 +++ views/resumes/edit.erb | 2 +- views/resumes/show.erb | 2 +- 5 files changed, 9 insertions(+), 2 deletions(-) diff --git a/Gemfile b/Gemfile index d01c681..12f8803 100644 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,7 @@ source 'https://rubygems.org' gem 'sinatra' +gem 'sinatra-partial' gem 'data_mapper' gem 'rake' diff --git a/Gemfile.lock b/Gemfile.lock index dfb770c..1cf4bd9 100644 --- a/Gemfile.lock +++ b/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 diff --git a/linkedout.rb b/linkedout.rb index a791d0c..21fed6b 100644 --- a/linkedout.rb +++ b/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__) diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index 782e82d..1a4b0e0 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -4,7 +4,7 @@

          Edit My Résumé

          - <%= erb :'partials/profile_edit' %> + <%= partial :'partials/profile_edit' %>
          diff --git a/views/resumes/show.erb b/views/resumes/show.erb index 5e4e9d5..c1f8f39 100644 --- a/views/resumes/show.erb +++ b/views/resumes/show.erb @@ -4,7 +4,7 @@

          My Résumé

          - <%= erb :'partials/profile_show' %> + <%= partial :'partials/profile_show' %>
          From 6e1b1609a4db677e297fd860dfeb136c9f14e035 Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 19:32:19 -0400 Subject: [PATCH 6/8] Move job view and edit HTML into own partial; rename partials --- views/partials/job.erb | 4 ++++ views/partials/job_form.erb | 23 +++++++++++++++++++ .../{profile_show.erb => profile.erb} | 0 .../{profile_edit.erb => profile_form.erb} | 0 views/resumes/edit.erb | 22 ++---------------- views/resumes/show.erb | 9 ++------ 6 files changed, 31 insertions(+), 27 deletions(-) create mode 100644 views/partials/job.erb create mode 100644 views/partials/job_form.erb rename views/partials/{profile_show.erb => profile.erb} (100%) rename views/partials/{profile_edit.erb => profile_form.erb} (100%) diff --git a/views/partials/job.erb b/views/partials/job.erb new file mode 100644 index 0000000..0db8394 --- /dev/null +++ b/views/partials/job.erb @@ -0,0 +1,4 @@ +
        • +

          <%= job.job_title %> at <%= job.company_name %>

          +

          <%= job.job_description %>

          +
          • diff --git a/views/partials/job_form.erb b/views/partials/job_form.erb new file mode 100644 index 0000000..24efaf0 --- /dev/null +++ b/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 +%> +
        • +
          + + + + + at + +
          + +
          + +
          + + +
          +
          • diff --git a/views/partials/profile_show.erb b/views/partials/profile.erb similarity index 100% rename from views/partials/profile_show.erb rename to views/partials/profile.erb diff --git a/views/partials/profile_edit.erb b/views/partials/profile_form.erb similarity index 100% rename from views/partials/profile_edit.erb rename to views/partials/profile_form.erb diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index 1a4b0e0..4675ec2 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -4,31 +4,13 @@

          Edit My Résumé

          - <%= partial :'partials/profile_edit' %> + <%= partial :'partials/profile_form' %>

          Jobs

            - <% @jobs.each do |job| %> -
          • -
            - - - - - at - -
            - -
            - -
            - - -
            -
            • - <% end %> + <%= partial :'partials/job_form', collection: @jobs %>
          diff --git a/views/resumes/show.erb b/views/resumes/show.erb index c1f8f39..90ccdad 100644 --- a/views/resumes/show.erb +++ b/views/resumes/show.erb @@ -4,18 +4,13 @@

          My Résumé

          - <%= partial :'partials/profile_show' %> + <%= partial :'partials/profile' %>

          Jobs

            - <% @jobs.each do |job| %> -
          • -

            <%= job.job_title %> at <%= job.company_name %>

            -

            <%= job.job_description %>

            -
            • - <% end %> + <%= partial :'partials/job', collection: @jobs %>
          From 1dcef0624b4f30f229fcbbee4108fcf89e2e65f6 Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 19:35:27 -0400 Subject: [PATCH 7/8] Move skill view and edit content into partial --- views/partials/skill.erb | 1 + views/partials/skill_form.erb | 12 ++++++++++++ views/resumes/edit.erb | 14 +------------- views/resumes/show.erb | 4 +--- 4 files changed, 15 insertions(+), 16 deletions(-) create mode 100644 views/partials/skill.erb create mode 100644 views/partials/skill_form.erb diff --git a/views/partials/skill.erb b/views/partials/skill.erb new file mode 100644 index 0000000..986a0f8 --- /dev/null +++ b/views/partials/skill.erb @@ -0,0 +1 @@ +
        • <%= skill.name %>
          • diff --git a/views/partials/skill_form.erb b/views/partials/skill_form.erb new file mode 100644 index 0000000..86d0c73 --- /dev/null +++ b/views/partials/skill_form.erb @@ -0,0 +1,12 @@ +<% skill = skill_form %> +
        • +
          + + + + + + + +
          +
          • diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index 4675ec2..35d98bf 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -17,19 +17,7 @@

          Skills

            - <% @skills.each do |skill| %> -
          • -
            - - - - - - - -
            -
            • - <% end %> + <%= partial :'partials/skill_form', collection: @skills %>
          diff --git a/views/resumes/show.erb b/views/resumes/show.erb index 90ccdad..6e16f88 100644 --- a/views/resumes/show.erb +++ b/views/resumes/show.erb @@ -17,9 +17,7 @@

          Skills

            - <% @skills.each do |skill| %> -
          • <%= skill.name %>
            • - <% end %> + <%= partial :'partials/skill', collection: @skills %>
          From 13a6b563a959a97e033ee750f614b3c674ff7cc4 Mon Sep 17 00:00:00 2001 From: Tanner Welsh Date: Wed, 29 Oct 2014 19:40:46 -0400 Subject: [PATCH 8/8] Don't use helper method `default_user` in profile partials --- views/partials/profile.erb | 10 +++++----- views/partials/profile_form.erb | 10 +++++----- views/resumes/edit.erb | 2 +- views/resumes/show.erb | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/views/partials/profile.erb b/views/partials/profile.erb index ddf216f..0e7f3c8 100644 --- a/views/partials/profile.erb +++ b/views/partials/profile.erb @@ -1,10 +1,10 @@
          -

          <%= default_user.name %>

          +

          <%= user.name %>

          - <%= default_user.email %> - | <%= default_user.phone %> - | <%= default_user.website %> + <%= user.email %> + | <%= user.phone %> + | <%= user.website %>
          -

          <%= default_user.bio %>

          +

          <%= user.bio %>

          diff --git a/views/partials/profile_form.erb b/views/partials/profile_form.erb index 957e275..f1e6128 100644 --- a/views/partials/profile_form.erb +++ b/views/partials/profile_form.erb @@ -3,23 +3,23 @@ - +
          - +
          - +
          - +
          - +
          diff --git a/views/resumes/edit.erb b/views/resumes/edit.erb index 35d98bf..00d518b 100644 --- a/views/resumes/edit.erb +++ b/views/resumes/edit.erb @@ -4,7 +4,7 @@

          Edit My Résumé

          - <%= partial :'partials/profile_form' %> + <%= partial :'partials/profile_form', :locals => { :user => default_user } %>
          diff --git a/views/resumes/show.erb b/views/resumes/show.erb index 6e16f88..d0e9ff8 100644 --- a/views/resumes/show.erb +++ b/views/resumes/show.erb @@ -4,7 +4,7 @@

          My Résumé

          - <%= partial :'partials/profile' %> + <%= partial :'partials/profile', :locals => { :user => default_user } %>