Permalink
Browse files

Styled lessons index and show

* Added categories helper with pill styles
* Added blurb to index output
* Styled lessons#show markdown
  • Loading branch information...
1 parent 94954f9 commit 6cec36662db05b6bbbb1a0cd7310724a05e8e5a0 @dominic dominic committed Jan 25, 2012
View
47 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)
View
1 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";
View
85 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;
+ }
+}
View
2 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
View
9 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
View
19 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
View
16 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}
View
4 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"

0 comments on commit 6cec366

Please sign in to comment.