Styled lessons index and show

dominic · dominic · commit 6cec36662db0 · 2012-01-25T17:12:53.000-05:00
* Added categories helper with pill styles
* Added blurb to index output
* Styled lessons#show markdown
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -59,9 +59,9 @@ GEM
       rack-test (>= 0.5.4)
       selenium-webdriver (~> 2.0)
       xpath (~> 0.1.4)
-    childprocess (0.2.6)
+    childprocess (0.3.0)
       ffi (~> 1.0.6)
-    coderay (0.9.8)
+    coderay (1.0.5)
     coffee-rails (3.1.1)
       coffee-script (>= 2.2.0)
       railties (~> 3.1.0)
@@ -79,22 +79,22 @@ GEM
       capybara (>= 1.1.2)
       cucumber (>= 1.1.3)
       nokogiri (>= 1.5.0)
-    database_cleaner (0.7.0)
+    database_cleaner (0.7.1)
     devise (1.5.3)
       bcrypt-ruby (~> 3.0)
       orm_adapter (~> 0.0.3)
       warden (~> 1.1)
     diff-lcs (1.1.3)
     erubis (2.7.0)
-    execjs (1.2.13)
+    execjs (1.3.0)
       multi_json (~> 1.0)
     fabrication (1.2.0)
     faker (1.0.1)
       i18n (~> 0.4)
     ffi (1.0.11)
-    gherkin (2.7.2)
+    gherkin (2.7.6)
       json (>= 1.4.6)
-    hackety_hack-lessons (1.1.0)
+    hackety_hack-lessons (1.1.2)
       metadown
     haml (3.1.4)
     haml-rails (0.3.4)
@@ -113,7 +113,7 @@ GEM
     jquery-rails (1.0.19)
       railties (~> 3.0)
       thor (~> 0.14)
-    json (1.6.4)
+    json (1.6.5)
     kgio (2.7.2)
     launchy (2.0.5)
       addressable (~> 2.2.6)
@@ -124,13 +124,12 @@ GEM
     metaclass (0.0.1)
     metadown (1.0.1)
       redcarpet
-    method_source (0.6.7)
-      ruby_parser (>= 2.3.1)
+    method_source (0.7.0)
     mime-types (1.17.2)
     mm-devise (1.3)
       devise (>= 1.2)
       mongo_mapper (>= 0.9.0)
-    mocha (0.10.0)
+    mocha (0.10.3)
       metaclass (~> 0.0.1)
     mongo (1.5.2)
       bson (= 1.5.2)
@@ -140,16 +139,15 @@ GEM
       plucky (~> 0.4.0)
     multi_json (1.0.4)
     nokogiri (1.5.0)
-    orm_adapter (0.0.5)
+    orm_adapter (0.0.6)
     pg (0.12.2)
-    plucky (0.4.3)
-      mongo (~> 1.3)
+    plucky (0.4.4)
+      mongo (~> 1.5)
     polyglot (0.3.3)
-    pry (0.9.7.4)
-      coderay (~> 0.9.8)
-      method_source (~> 0.6.7)
-      ruby_parser (>= 2.3.1)
-      slop (~> 2.1.0)
+    pry (0.9.8)
+      coderay (~> 1.0.5)
+      method_source (~> 0.7)
+      slop (>= 2.4.3, < 3)
     rack (1.3.6)
     rack-cache (1.0.3)
       rack (>= 0.4)
@@ -180,7 +178,7 @@ GEM
     rdoc (3.12)
       json (~> 1.4)
     redcarpet (2.1.0)
-    responders (0.6.4)
+    responders (0.6.5)
     rspec (2.8.0)
       rspec-core (~> 2.8.0)
       rspec-expectations (~> 2.8.0)
@@ -194,26 +192,23 @@ GEM
       activesupport (>= 3.0)
       railties (>= 3.0)
       rspec (~> 2.8.0)
-    ruby_parser (2.3.1)
-      sexp_processor (~> 3.0)
     rubyzip (0.9.5)
     sass (3.1.12)
     sass-rails (3.1.5)
       actionpack (~> 3.1.0)
       railties (~> 3.1.0)
       sass (~> 3.1.10)
       tilt (~> 1.3.2)
-    selenium-webdriver (2.16.0)
+    selenium-webdriver (2.17.0)
       childprocess (>= 0.2.5)
       ffi (~> 1.0.9)
       multi_json (~> 1.0.4)
       rubyzip
-    sexp_processor (3.0.10)
-    slop (2.1.0)
+    slop (2.4.3)
     sprockets (2.0.3)
       hike (~> 1.2)
       rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
+      tilt (!= 1.3.0, ~> 1.1)
     sqlite3 (1.3.5)
     term-ansicolor (1.0.7)
     thor (0.14.6)
@@ -222,7 +217,7 @@ GEM
       polyglot
       polyglot (>= 0.3.1)
     tzinfo (0.3.31)
-    uglifier (1.2.1)
+    uglifier (1.2.2)
       execjs (>= 0.3.0)
       multi_json (>= 1.0.2)
     unicorn (4.1.1)
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -16,4 +16,5 @@
 @import "questions.css.scss";
 @import "programs.css.scss";
 @import "users.css.scss";
+@import "lessons.css.scss";
 
diff --git a/app/assets/stylesheets/lessons.css.scss b/app/assets/stylesheets/lessons.css.scss
@@ -1,3 +1,82 @@
-// Place all the styles related to the lessons controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+/* Lessons menu */
+ul#lessons {
+  list-style-type: none;
+  margin: 0;
+  > li {
+    @include clearfix;
+    padding-bottom: 1em;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 1em;
+    .info {
+      @include columns(7);
+      .title {
+        font-size: 1.1em;
+        font-weight: bold;
+        margin-bottom: 0.2em;
+      }
+    }
+    .categories {
+      @include columns(4, last);
+      li {
+        float: right;
+      }
+    }
+  }
+}
+
+/* Lesson content styles */
+#content-wrap.lesson {
+  .page-title {
+    margin-left: 3em;
+  }
+  #lesson-content {
+    padding-left: 3em;
+    max-width: 500px;
+
+    h2 {
+      margin-top: 0.75em;
+      border-top: 1px solid #ccc;
+      padding-top: 0.5em;
+    }
+
+    img {
+      @include border-radius;
+      @include box-shadow;
+      border: 1px solid #ccc;
+      padding: 0.75em;
+    }
+  }
+}
+
+/* Category pills */
+ul.lesson-categories {
+  @include clearfix;
+  list-style-type: none;
+  margin: 0;
+  font-size: 0.9em;
+
+  li {
+    float: left;
+    @include border-radius(50px);
+    padding: 0.25em 0.75em;
+    margin-right: 0.5em;
+    background: #ddd;
+    border: 1px solid #ccc;
+  }
+
+  .beginner {
+    background-color: $green;
+    border-color: darken($green, 10%);
+    color: white;
+  }
+  .hackety {
+    background-color: $blue;
+    border-color: darken($blue, 10%);
+    color: white;
+  }
+  .shoes {
+    background-color: $orangered;
+    border-color: darken($orangered, 10%);
+    color: white;
+  }
+}
diff --git a/app/controllers/lessons_controller.rb b/app/controllers/lessons_controller.rb
@@ -1,6 +1,6 @@
 class LessonsController < ApplicationController
   def index
-    @lessons = HacketyHack::Lessons.all.collect{|lesson| [lesson.metadata["title"], lesson.metadata["slug"]]}
+    @lessons = HacketyHack::Lessons.all
   end
 
   def show
diff --git a/app/helpers/lessons_helper.rb b/app/helpers/lessons_helper.rb
@@ -1,2 +1,11 @@
 module LessonsHelper
+
+  def lesson_categories lesson
+    output = content_tag :ul, :class => "lesson-categories" do
+      lesson.metadata["categories"].reduce('') { |c, x|
+        c << content_tag(:li, x, :class => x)
+      }.html_safe
+    end
+  end
+
 end
diff --git a/app/views/lessons/index.html.haml b/app/views/lessons/index.html.haml
@@ -1,9 +1,20 @@
-%h1 Lessons
+- content_for :title do
+  Lessons
+
+- content_for :sidebar do
+  = render :partial => "shared/ask"
+  = render :partial => "shared/lessons"
 
 %p Want to learn programming? Here are some lessons that we've put online.
 
-%ul
-  - @lessons.each do |title, slug|
-    %li= link_to title, lesson_path(slug)
+%ul#lessons
+  - @lessons.each do |lesson|
+    %li
+      .info
+        .title
+          = link_to lesson.metadata["title"], lesson_path(lesson.metadata["slug"])
+        = lesson.metadata["blurb"]
+      .categories
+        = lesson_categories lesson
 
 
diff --git a/app/views/lessons/show.html.haml b/app/views/lessons/show.html.haml
@@ -1,4 +1,14 @@
-%h1= @lesson.metadata["title"]
+- @page_class = "lesson"
 
-:markdown
-  #{@lesson.output}
+- content_for :title do
+  = @lesson.metadata["title"]
+
+- content_for :sidebar do
+  = render :partial => "shared/ask"
+  = render :partial => "shared/lessons"
+
+#lesson-content
+  = lesson_categories @lesson
+
+  :markdown
+    #{@lesson.output}
diff --git a/app/views/shared/_lessons.html.haml b/app/views/shared/_lessons.html.haml
@@ -0,0 +1,4 @@
+%section.lessons
+  %h2 Want to help?
+  %p Help us create new lessons, or update existing ones. Check out the Lessons project on Github below:
+  = link_to "Hackety Hack Lessons on Github", "https://github.com/hacketyhack/hackety_hack-lessons"
