Skip to content
This repository
Browse code

Styled lessons index and show

* Added categories helper with pill styles
* Added blurb to index output
* Styled lessons#show markdown
  • Loading branch information...
commit 6cec36662db05b6bbbb1a0cd7310724a05e8e5a0 1 parent 94954f9
authored January 25, 2012
47  Gemfile.lock
@@ -59,9 +59,9 @@ GEM
59 59
       rack-test (>= 0.5.4)
60 60
       selenium-webdriver (~> 2.0)
61 61
       xpath (~> 0.1.4)
62  
-    childprocess (0.2.6)
  62
+    childprocess (0.3.0)
63 63
       ffi (~> 1.0.6)
64  
-    coderay (0.9.8)
  64
+    coderay (1.0.5)
65 65
     coffee-rails (3.1.1)
66 66
       coffee-script (>= 2.2.0)
67 67
       railties (~> 3.1.0)
@@ -79,22 +79,22 @@ GEM
79 79
       capybara (>= 1.1.2)
80 80
       cucumber (>= 1.1.3)
81 81
       nokogiri (>= 1.5.0)
82  
-    database_cleaner (0.7.0)
  82
+    database_cleaner (0.7.1)
83 83
     devise (1.5.3)
84 84
       bcrypt-ruby (~> 3.0)
85 85
       orm_adapter (~> 0.0.3)
86 86
       warden (~> 1.1)
87 87
     diff-lcs (1.1.3)
88 88
     erubis (2.7.0)
89  
-    execjs (1.2.13)
  89
+    execjs (1.3.0)
90 90
       multi_json (~> 1.0)
91 91
     fabrication (1.2.0)
92 92
     faker (1.0.1)
93 93
       i18n (~> 0.4)
94 94
     ffi (1.0.11)
95  
-    gherkin (2.7.2)
  95
+    gherkin (2.7.6)
96 96
       json (>= 1.4.6)
97  
-    hackety_hack-lessons (1.1.0)
  97
+    hackety_hack-lessons (1.1.2)
98 98
       metadown
99 99
     haml (3.1.4)
100 100
     haml-rails (0.3.4)
@@ -113,7 +113,7 @@ GEM
113 113
     jquery-rails (1.0.19)
114 114
       railties (~> 3.0)
115 115
       thor (~> 0.14)
116  
-    json (1.6.4)
  116
+    json (1.6.5)
117 117
     kgio (2.7.2)
118 118
     launchy (2.0.5)
119 119
       addressable (~> 2.2.6)
@@ -124,13 +124,12 @@ GEM
124 124
     metaclass (0.0.1)
125 125
     metadown (1.0.1)
126 126
       redcarpet
127  
-    method_source (0.6.7)
128  
-      ruby_parser (>= 2.3.1)
  127
+    method_source (0.7.0)
129 128
     mime-types (1.17.2)
130 129
     mm-devise (1.3)
131 130
       devise (>= 1.2)
132 131
       mongo_mapper (>= 0.9.0)
133  
-    mocha (0.10.0)
  132
+    mocha (0.10.3)
134 133
       metaclass (~> 0.0.1)
135 134
     mongo (1.5.2)
136 135
       bson (= 1.5.2)
@@ -140,16 +139,15 @@ GEM
140 139
       plucky (~> 0.4.0)
141 140
     multi_json (1.0.4)
142 141
     nokogiri (1.5.0)
143  
-    orm_adapter (0.0.5)
  142
+    orm_adapter (0.0.6)
144 143
     pg (0.12.2)
145  
-    plucky (0.4.3)
146  
-      mongo (~> 1.3)
  144
+    plucky (0.4.4)
  145
+      mongo (~> 1.5)
147 146
     polyglot (0.3.3)
148  
-    pry (0.9.7.4)
149  
-      coderay (~> 0.9.8)
150  
-      method_source (~> 0.6.7)
151  
-      ruby_parser (>= 2.3.1)
152  
-      slop (~> 2.1.0)
  147
+    pry (0.9.8)
  148
+      coderay (~> 1.0.5)
  149
+      method_source (~> 0.7)
  150
+      slop (>= 2.4.3, < 3)
153 151
     rack (1.3.6)
154 152
     rack-cache (1.0.3)
155 153
       rack (>= 0.4)
@@ -180,7 +178,7 @@ GEM
180 178
     rdoc (3.12)
181 179
       json (~> 1.4)
182 180
     redcarpet (2.1.0)
183  
-    responders (0.6.4)
  181
+    responders (0.6.5)
184 182
     rspec (2.8.0)
185 183
       rspec-core (~> 2.8.0)
186 184
       rspec-expectations (~> 2.8.0)
@@ -194,8 +192,6 @@ GEM
194 192
       activesupport (>= 3.0)
195 193
       railties (>= 3.0)
196 194
       rspec (~> 2.8.0)
197  
-    ruby_parser (2.3.1)
198  
-      sexp_processor (~> 3.0)
199 195
     rubyzip (0.9.5)
200 196
     sass (3.1.12)
201 197
     sass-rails (3.1.5)
@@ -203,17 +199,16 @@ GEM
203 199
       railties (~> 3.1.0)
204 200
       sass (~> 3.1.10)
205 201
       tilt (~> 1.3.2)
206  
-    selenium-webdriver (2.16.0)
  202
+    selenium-webdriver (2.17.0)
207 203
       childprocess (>= 0.2.5)
208 204
       ffi (~> 1.0.9)
209 205
       multi_json (~> 1.0.4)
210 206
       rubyzip
211  
-    sexp_processor (3.0.10)
212  
-    slop (2.1.0)
  207
+    slop (2.4.3)
213 208
     sprockets (2.0.3)
214 209
       hike (~> 1.2)
215 210
       rack (~> 1.0)
216  
-      tilt (~> 1.1, != 1.3.0)
  211
+      tilt (!= 1.3.0, ~> 1.1)
217 212
     sqlite3 (1.3.5)
218 213
     term-ansicolor (1.0.7)
219 214
     thor (0.14.6)
@@ -222,7 +217,7 @@ GEM
222 217
       polyglot
223 218
       polyglot (>= 0.3.1)
224 219
     tzinfo (0.3.31)
225  
-    uglifier (1.2.1)
  220
+    uglifier (1.2.2)
226 221
       execjs (>= 0.3.0)
227 222
       multi_json (>= 1.0.2)
228 223
     unicorn (4.1.1)
1  app/assets/stylesheets/application.css.scss
@@ -16,4 +16,5 @@
16 16
 @import "questions.css.scss";
17 17
 @import "programs.css.scss";
18 18
 @import "users.css.scss";
  19
+@import "lessons.css.scss";
19 20
 
85  app/assets/stylesheets/lessons.css.scss
... ...
@@ -1,3 +1,82 @@
1  
-// Place all the styles related to the lessons controller here.
2  
-// They will automatically be included in application.css.
3  
-// You can use Sass (SCSS) here: http://sass-lang.com/
  1
+/* Lessons menu */
  2
+ul#lessons {
  3
+  list-style-type: none;
  4
+  margin: 0;
  5
+  > li {
  6
+    @include clearfix;
  7
+    padding-bottom: 1em;
  8
+    border-bottom: 1px solid #ccc;
  9
+    margin-bottom: 1em;
  10
+    .info {
  11
+      @include columns(7);
  12
+      .title {
  13
+        font-size: 1.1em;
  14
+        font-weight: bold;
  15
+        margin-bottom: 0.2em;
  16
+      }
  17
+    }
  18
+    .categories {
  19
+      @include columns(4, last);
  20
+      li {
  21
+        float: right;
  22
+      }
  23
+    }
  24
+  }
  25
+}
  26
+
  27
+/* Lesson content styles */
  28
+#content-wrap.lesson {
  29
+  .page-title {
  30
+    margin-left: 3em;
  31
+  }
  32
+  #lesson-content {
  33
+    padding-left: 3em;
  34
+    max-width: 500px;
  35
+
  36
+    h2 {
  37
+      margin-top: 0.75em;
  38
+      border-top: 1px solid #ccc;
  39
+      padding-top: 0.5em;
  40
+    }
  41
+
  42
+    img {
  43
+      @include border-radius;
  44
+      @include box-shadow;
  45
+      border: 1px solid #ccc;
  46
+      padding: 0.75em;
  47
+    }
  48
+  }
  49
+}
  50
+
  51
+/* Category pills */
  52
+ul.lesson-categories {
  53
+  @include clearfix;
  54
+  list-style-type: none;
  55
+  margin: 0;
  56
+  font-size: 0.9em;
  57
+
  58
+  li {
  59
+    float: left;
  60
+    @include border-radius(50px);
  61
+    padding: 0.25em 0.75em;
  62
+    margin-right: 0.5em;
  63
+    background: #ddd;
  64
+    border: 1px solid #ccc;
  65
+  }
  66
+
  67
+  .beginner {
  68
+    background-color: $green;
  69
+    border-color: darken($green, 10%);
  70
+    color: white;
  71
+  }
  72
+  .hackety {
  73
+    background-color: $blue;
  74
+    border-color: darken($blue, 10%);
  75
+    color: white;
  76
+  }
  77
+  .shoes {
  78
+    background-color: $orangered;
  79
+    border-color: darken($orangered, 10%);
  80
+    color: white;
  81
+  }
  82
+}
2  app/controllers/lessons_controller.rb
... ...
@@ -1,6 +1,6 @@
1 1
 class LessonsController < ApplicationController
2 2
   def index
3  
-    @lessons = HacketyHack::Lessons.all.collect{|lesson| [lesson.metadata["title"], lesson.metadata["slug"]]}
  3
+    @lessons = HacketyHack::Lessons.all
4 4
   end
5 5
 
6 6
   def show
9  app/helpers/lessons_helper.rb
... ...
@@ -1,2 +1,11 @@
1 1
 module LessonsHelper
  2
+
  3
+  def lesson_categories lesson
  4
+    output = content_tag :ul, :class => "lesson-categories" do
  5
+      lesson.metadata["categories"].reduce('') { |c, x|
  6
+        c << content_tag(:li, x, :class => x)
  7
+      }.html_safe
  8
+    end
  9
+  end
  10
+
2 11
 end
19  app/views/lessons/index.html.haml
... ...
@@ -1,9 +1,20 @@
1  
-%h1 Lessons
  1
+- content_for :title do
  2
+  Lessons
  3
+
  4
+- content_for :sidebar do
  5
+  = render :partial => "shared/ask"
  6
+  = render :partial => "shared/lessons"
2 7
 
3 8
 %p Want to learn programming? Here are some lessons that we've put online.
4 9
 
5  
-%ul
6  
-  - @lessons.each do |title, slug|
7  
-    %li= link_to title, lesson_path(slug)
  10
+%ul#lessons
  11
+  - @lessons.each do |lesson|
  12
+    %li
  13
+      .info
  14
+        .title
  15
+          = link_to lesson.metadata["title"], lesson_path(lesson.metadata["slug"])
  16
+        = lesson.metadata["blurb"]
  17
+      .categories
  18
+        = lesson_categories lesson
8 19
 
9 20
 
16  app/views/lessons/show.html.haml
... ...
@@ -1,4 +1,14 @@
1  
-%h1= @lesson.metadata["title"]
  1
+- @page_class = "lesson"
2 2
 
3  
-:markdown
4  
-  #{@lesson.output}
  3
+- content_for :title do
  4
+  = @lesson.metadata["title"]
  5
+
  6
+- content_for :sidebar do
  7
+  = render :partial => "shared/ask"
  8
+  = render :partial => "shared/lessons"
  9
+
  10
+#lesson-content
  11
+  = lesson_categories @lesson
  12
+
  13
+  :markdown
  14
+    #{@lesson.output}
4  app/views/shared/_lessons.html.haml
... ...
@@ -0,0 +1,4 @@
  1
+%section.lessons
  2
+  %h2 Want to help?
  3
+  %p Help us create new lessons, or update existing ones. Check out the Lessons project on Github below:
  4
+  = link_to "Hackety Hack Lessons on Github", "https://github.com/hacketyhack/hackety_hack-lessons"

0 notes on commit 6cec366

Please sign in to comment.
Something went wrong with that request. Please try again.