woople-theme 0.2.27 → 0.2.28

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,34 @@
1
+ $(document).ready(function() {
2
+ function setFrontHeight(element) {
3
+ var height = element.height();
4
+ element.css({ height: height + 'px' }).attr('data-original-height', height);
5
+ }
6
+
7
+ function removeFrontHeight(element) {
8
+ element.css({ height: 'inherit' });
9
+ }
10
+
11
+ $('.assessment .flip-action').on('click', function() {
12
+ $(this).closest('.assessment').addClass('flip');
13
+
14
+ var front = $(this).closest('.front');
15
+ setFrontHeight(front);
16
+
17
+ var frontHeight = front.height();
18
+
19
+ var back = $(this).closest('.front').next('.back');
20
+ var backHeight = back.height();
21
+
22
+ if (frontHeight > backHeight) {
23
+ back.css({ height: '100%' });
24
+ } else {
25
+ front.css({ height: backHeight + 'px' });
26
+ }
27
+ });
28
+
29
+ $('.assessment .flip-action-back').on('click', function() {
30
+ var assessment = $(this).closest('.assessment').removeClass('flip');
31
+ var front = assessment.find('.front');
32
+ removeFrontHeight(front);
33
+ });
34
+ });
@@ -5,8 +5,10 @@
5
5
  //= require twitter/bootstrap/dropdown
6
6
  //= require twitter/bootstrap/modal
7
7
  //= require twitter/bootstrap/button
8
+ //= require twitter/bootstrap/alert
8
9
  //= require fastclick.min_
9
10
  //= require video.min
11
+ //= require assessment_flipper
10
12
  //= require_tree .
11
13
 
12
14
  function resizeFix() {
@@ -86,5 +88,4 @@ $(document).ready(function() {
86
88
  width: 2
87
89
  });
88
90
  });
89
-
90
91
  });
@@ -2,7 +2,6 @@
2
2
 
3
3
  .content-item-header {
4
4
  margin-left:0;
5
- margin-top:@contentPadding * -1;
6
5
  padding-top:@contentPadding * 0.5;
7
6
  padding-left:@contentPadding;
8
7
  padding-bottom:@contentPadding * 0.5;
@@ -90,8 +89,7 @@
90
89
  color:@secondaryTextColour;
91
90
 
92
91
  .badge {
93
- background:@highlight;
94
- cursor:initial;
92
+ .woople-badge();
95
93
  }
96
94
 
97
95
  .icon-star {
@@ -2,17 +2,131 @@
2
2
  @import "woople-theme/colours.css.less";
3
3
 
4
4
  .outline {
5
- margin-bottom:20px;
6
5
  overflow:hidden;
6
+ border-bottom:solid 1px fade(@contentBorder, 35%);
7
7
 
8
8
  h2 {
9
9
  .outline-title();
10
10
  }
11
11
 
12
12
  .assessment {
13
- margin-left:@leftColumnOffset;
14
- margin-top:@contentPadding;
15
- text-transform:uppercase;
13
+ margin-top:@contentPadding / 2;
14
+ position:relative;
15
+
16
+ -webkit-perspective: 2000px;
17
+ -moz-perspective: 2000px;
18
+
19
+ h3 {
20
+ .content-title();
21
+ padding:@contentPadding / 2;
22
+ padding-bottom:0;
23
+ }
24
+
25
+ h4 {
26
+ .outline-title();
27
+ }
28
+
29
+ .assessment-attributes {
30
+ padding:@contentPadding / 2;
31
+ }
32
+
33
+ .alert {
34
+ margin:@contentPadding / 2;
35
+ }
36
+
37
+ .badge {
38
+ .woople-badge();
39
+ }
40
+
41
+ .assessment-start {
42
+ a {
43
+ margin:@contentPadding / 2;
44
+ }
45
+ }
46
+
47
+ .flip-action, .flip-action-back {
48
+ cursor:pointer;
49
+ width:75px;
50
+ padding:@contentPadding / 2;
51
+ }
52
+
53
+ &.flip .front {
54
+ z-index: 900;
55
+
56
+ -webkit-transform: rotateY(180deg);
57
+ -moz-transform: rotateY(180deg);
58
+ }
59
+
60
+ .front {
61
+ position:relative;
62
+ z-index:900;
63
+ background:white;
64
+ border-bottom:solid 1px transparent;
65
+
66
+ .box-shadow();
67
+
68
+ -webkit-transform: rotateY(0deg);
69
+ -webkit-transform-style: preserve-3d;
70
+ -webkit-backface-visibility: hidden;
71
+
72
+ -moz-transform: rotateY(0deg);
73
+ -moz-transform-style: preserve-3d;
74
+ -moz-backface-visibility: hidden;
75
+
76
+ -o-transition: -o-transform .4s ease-in-out;
77
+ -ms-transition: -ms-transform .4s ease-in-out;
78
+ -moz-transition: -moz-transform .4s ease-in-out;
79
+ -webkit-transition: -webkit-transform .4s ease-in-out;
80
+ transition: transform .4s ease-in-out;
81
+ }
82
+
83
+ &.flip .back {
84
+ z-index:1000;
85
+ -webkit-transform: rotateY(0deg);
86
+ -moz-transform: rotateY(0deg);
87
+ }
88
+
89
+ .back {
90
+ position:absolute;
91
+ z-index:800;
92
+ background:white;
93
+ top:0;
94
+ left:0;
95
+ width:100%;
96
+ /*height:100%;*/
97
+
98
+ .box-shadow();
99
+
100
+ -webkit-transform: rotateY(-180deg);
101
+ -webkit-transform-style: preserve-3d;
102
+ -webkit-backface-visibility: hidden;
103
+
104
+ -moz-transform: rotateY(-180deg);
105
+ -moz-transform-style: preserve-3d;
106
+ -moz-backface-visibility: hidden;
107
+
108
+ /* -- transition is the magic sauce for animation -- */
109
+ -o-transition: -o-transform .4s ease-in-out;
110
+ -ms-transition: -ms-transform .4s ease-in-out;
111
+ -moz-transition: -moz-transform .4s ease-in-out;
112
+ -webkit-transition: -webkit-transform .4s ease-in-out;
113
+ transition: transform .4s ease-in-out;
114
+
115
+ }
116
+
117
+ .assessment-pad {
118
+ .assessment-history {
119
+
120
+ a {
121
+ color:blue;
122
+ text-decoration:underline;
123
+ }
124
+ }
125
+ }
126
+
127
+ .outline {
128
+ border:none;
129
+ }
16
130
  }
17
131
 
18
132
  .completed {
@@ -21,12 +135,17 @@
21
135
  }
22
136
  }
23
137
 
24
- .disabled td, p.disabled {
138
+ .disabled td {
25
139
  .opacity(50);
26
140
 
27
141
  a:hover {
28
142
  text-decoration:none;
29
143
  }
144
+
145
+ .action {
146
+ display:none;
147
+ }
148
+
30
149
  }
31
150
 
32
151
  tr.disabled {
@@ -111,13 +230,30 @@
111
230
  .outline-title(@phoneLeftColumnOffset);
112
231
  }
113
232
 
114
- p {
233
+ > p {
115
234
  padding-left:@phoneLeftColumnOffset;
116
235
  padding-right:@phoneMargin;
117
236
  }
118
237
 
119
238
  .assessment {
120
- margin-left:@phoneLeftColumnOffset;
239
+ margin-left:@phoneMargin / 2;
240
+
241
+ .back {
242
+ table tr > td:first-child, tr > th:first-child {
243
+ text-indent:0;
244
+ }
245
+ }
121
246
  }
122
247
  }
123
248
  }
249
+
250
+ .no-csstransforms3d {
251
+
252
+ .back {
253
+ display:none;
254
+ }
255
+
256
+ .flip .back {
257
+ display:block;
258
+ }
259
+ }
@@ -20,6 +20,7 @@
20
20
  padding-left:@contentPadding;
21
21
  padding-right:@contentPadding;
22
22
  margin-top:0;
23
+ margin-bottom:0;
23
24
  padding-top:@contentPadding * 1.5;
24
25
  background: @highlightBackground;
25
26
 
@@ -16,7 +16,6 @@
16
16
  @tableCellPadding: 10px;
17
17
  @leftColumnOffset: (@gridGutterWidth*2) + @imageWidth;
18
18
 
19
-
20
19
  @phoneImageSize: 50px;
21
20
  @phoneMargin: @contentPadding / 2;
22
21
  @phoneOffset: @phoneImageSize + @phoneMargin;
@@ -34,10 +33,10 @@
34
33
  font-size:11px;
35
34
  text-transform:uppercase;
36
35
  padding-left:@left;
37
- border-top:solid 1px @insetContentBorder;
36
+ /*border-top:solid 1px @insetContentBorder;*/
38
37
  color: @secondaryTextColour;
39
- padding-top:@contentPadding * 1.5;
40
- margin-bottom:@contentPadding / 2;
38
+ margin-top:@contentPadding * 1.5;
39
+ margin-bottom:@contentPadding * 1.5;
41
40
  padding-right:@leftColumnOffset;
42
41
  }
43
42
 
@@ -83,4 +82,10 @@
83
82
  width:100%;
84
83
  .border-radius(10px);
85
84
  .box-shadow(0 1px 3px rgba(0, 0, 0, 0.10));
86
- }
85
+
86
+ }
87
+
88
+ .woople-badge() {
89
+ background:@highlight;
90
+ cursor:initial;
91
+ }
@@ -0,0 +1,48 @@
1
+ require 'ostruct'
2
+ require 'delegate'
3
+ require 'action_view'
4
+ require 'active_support/core_ext/object/blank'
5
+ require 'woople_theme_i18n'
6
+
7
+ class OutlineAssessmentPresenter < SimpleDelegator
8
+ include ActionView::Helpers::TagHelper
9
+
10
+ def render
11
+ yield if enabled?
12
+ end
13
+
14
+ def render_relearnings
15
+ yield unless relearnings.empty?
16
+ end
17
+
18
+ def start_button_tag
19
+ css = 'btn btn-primary btn-large'
20
+
21
+ if url.present?
22
+ content_tag(:a, I18n.t('woople_theme.assessment.start'), class: css, href: url)
23
+ else
24
+ content_tag(:a, I18n.t('woople_theme.assessment.start'), class: "#{css} disabled")
25
+ end
26
+ end
27
+
28
+ def history_link_tag
29
+ history.empty? ? '' : content_tag(:a, I18n.t('woople_theme.assessment.history'), class: 'flip-action pull-right')
30
+ end
31
+
32
+ def each_history_item
33
+ history.each do |history_item|
34
+ yield normalize(history_item)
35
+ end
36
+ end
37
+
38
+ private
39
+
40
+ def normalize history_item
41
+ OpenStruct.new(
42
+ date: WoopleThemeI18n.l(history_item.completed_at),
43
+ score: "#{history_item.score}%",
44
+ result_name: history_item.passed ? I18n.t('woople_theme.assessment.pass') : I18n.t('woople_theme.assessment.fail'),
45
+ url: history_item.url
46
+ )
47
+ end
48
+ end
@@ -21,26 +21,12 @@ class OutlinePresenter < SimpleDelegator
21
21
  end
22
22
 
23
23
  def assessment
24
- view_context.render partial: 'woople-theme/outline_assessment', locals: { outline: self }
25
- end
26
-
27
- def render_assessment
28
- css_class = "assessment"
29
- css_class << " disabled" if assessment_disabled?
30
-
31
- yield(css_class) if has_assessment?
24
+ wrapped_assessment = ThemePresentation.wrap(outline.assessment, OutlineAssessmentPresenter)
25
+ view_context.render partial: 'woople-theme/outline_assessment', locals: { assessment: wrapped_assessment }
32
26
  end
33
27
 
34
28
  private
35
29
 
36
- def assessment_disabled?
37
- outline.respond_to?(:assessment_enabled) && !outline.assessment_enabled
38
- end
39
-
40
- def has_assessment?
41
- outline.respond_to?(:assessment) && outline.assessment
42
- end
43
-
44
30
  def outline
45
31
  __getobj__
46
32
  end
@@ -1,3 +1,61 @@
1
- <% outline.render_assessment do |assessment_class| %>
2
- <p class="<%= assessment_class %>"><a><%=t 'woople_theme.outline.start_assessment' %></a></p>
1
+ <% assessment.render do %>
2
+ <div class="assessment">
3
+ <div class="front">
4
+ <div class="assessment-pad">
5
+ <%= assessment.history_link_tag %>
6
+
7
+ <h3><%=t('woople_theme.outline.assessment')%></h3>
8
+
9
+ <p class="assessment-attributes">
10
+ <span class="badge"><%=t('woople_theme.outline.assessment_questions', count: assessment.questions_asked) %></span>
11
+ <span class="badge"><%=t('woople_theme.outline.assessment_requirement', percent: assessment.pass_requirement) %></span>
12
+ <span class="badge"><%= assessment.estimated_duration %><%= t 'woople_theme.assessment.duration' %></span>
13
+ </p>
14
+
15
+ <div class="alert alert-error">
16
+ <a class="close" data-dismiss="alert">×</a>
17
+ <%= t 'woople_theme.assessment.fail_html' %>
18
+ </div>
19
+
20
+ <% assessment.render_relearnings do %>
21
+ <h4><%= t 'woople_theme.assessment.required_relearning' %></h4>
22
+ <%= outline(assessment) do |outline| %>
23
+ <%= outline.videos(assessment.relearnings) %>
24
+ <% end %>
25
+ <% end %>
26
+
27
+ <p class="assessment-start">
28
+ <%= assessment.start_button_tag %>
29
+ </p>
30
+ </div>
31
+ </div>
32
+
33
+ <div class="back">
34
+ <div class="assessment-pad">
35
+ <a class="flip-action-back pull-right"><%= t 'woople_theme.assessment.name' %></a>
36
+
37
+ <h3><%= t 'woople_theme.assessment.assessment_history' %></h3>
38
+ <div class="assessment-history">
39
+ <table class="table">
40
+ <thead>
41
+ <tr>
42
+ <th style="width:50%"><%= t 'woople_theme.assessment.date_title' %></th>
43
+ <th><%= t 'woople_theme.assessment.score_title' %></th>
44
+ <th class="count"><%= t 'woople_theme.assessment.result_title' %></th>
45
+ </tr>
46
+ </thead>
47
+ <tbody>
48
+ <% assessment.each_history_item do |history_item| %>
49
+ <tr>
50
+ <td><%= history_item.date %></td>
51
+ <td><%= history_item.score %></td>
52
+ <td><%= link_to history_item.result_name, history_item.url %></td>
53
+ </tr>
54
+ <% end %>
55
+ </tbody>
56
+ </table>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </div>
3
61
  <% end %>
@@ -1,9 +1,4 @@
1
1
  <table class="table">
2
- <thead>
3
- <tr>
4
- <th colspan='3'></th>
5
- </tr>
6
- </thead>
7
2
  <tbody>
8
3
  <%= render partial: 'woople-theme/outline_download', collection: downloads %>
9
4
  </tbody>
@@ -1,4 +1,4 @@
1
- <tr id="<%= outline_video.slug %>" class="<%= outline_video.css_class %>">
1
+ <tr id="<%= outline_video.slug %>" class="<%= outline_video.css_class %> outline-video">
2
2
  <td>
3
3
  <a class="action btn btn-primary" href="<%= outline_video.url %>">
4
4
  <i class="icon-white icon-play">
@@ -15,4 +15,4 @@
15
15
  <% end %>
16
16
  </td>
17
17
  <td><%= outline_video.duration %></td>
18
- </tr>
18
+ </tr>
@@ -10,9 +10,29 @@ en:
10
10
  outline:
11
11
  name: Name
12
12
  duration: Duration
13
- start_assessment: START ASSESSMENT
13
+ assessment: Assessment
14
+ assessment_questions:
15
+ one: 1 Question
16
+ other: "%{count} Questions"
17
+ assessment_requirement: "%{percent}% required"
14
18
  profile:
15
19
  search: Search...
16
20
  video_modal:
17
21
  like: Like
18
22
  dislike: Dislike
23
+ assessment:
24
+ start: Start Assessment
25
+ history: History
26
+ duration: :00 minutes
27
+ fail_html: You failed! Please watch the <strong>Require Relearning</strong> before attempting the assessment again.
28
+ required_relearning: Required Relearning
29
+ name: Assessment
30
+ assessment_history: Assessment History
31
+ date_title: Date
32
+ score_title: Score
33
+ result_title: Result
34
+ pass: Pass
35
+ fail: Fail
36
+ date:
37
+ formats:
38
+ default: ! '%b %d %Y'
@@ -1,3 +1,3 @@
1
1
  module WoopleTheme
2
- VERSION = "0.2.27"
2
+ VERSION = "0.2.28"
3
3
  end
@@ -0,0 +1,11 @@
1
+ require 'i18n'
2
+
3
+ class WoopleThemeI18n
4
+ def self.t key
5
+ I18n.t key
6
+ end
7
+
8
+ def self.l key
9
+ I18n.l key
10
+ end
11
+ end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: woople-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.27
4
+ version: 0.2.28
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,11 +9,11 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-05-29 00:00:00.000000000 Z
12
+ date: 2012-05-30 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
16
- requirement: &70094689221900 !ruby/object:Gem::Requirement
16
+ requirement: &70182673496440 !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ~>
@@ -21,10 +21,10 @@ dependencies:
21
21
  version: 3.2.2
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *70094689221900
24
+ version_requirements: *70182673496440
25
25
  - !ruby/object:Gem::Dependency
26
26
  name: less-rails-bootstrap
27
- requirement: &70094689220660 !ruby/object:Gem::Requirement
27
+ requirement: &70182673495920 !ruby/object:Gem::Requirement
28
28
  none: false
29
29
  requirements:
30
30
  - - =
@@ -32,10 +32,10 @@ dependencies:
32
32
  version: 2.0.8
33
33
  type: :runtime
34
34
  prerelease: false
35
- version_requirements: *70094689220660
35
+ version_requirements: *70182673495920
36
36
  - !ruby/object:Gem::Dependency
37
37
  name: bundler
38
- requirement: &70094689219820 !ruby/object:Gem::Requirement
38
+ requirement: &70182673483220 !ruby/object:Gem::Requirement
39
39
  none: false
40
40
  requirements:
41
41
  - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
43
43
  version: '0'
44
44
  type: :development
45
45
  prerelease: false
46
- version_requirements: *70094689219820
46
+ version_requirements: *70182673483220
47
47
  - !ruby/object:Gem::Dependency
48
48
  name: sqlite3
49
- requirement: &70094689219020 !ruby/object:Gem::Requirement
49
+ requirement: &70182673482700 !ruby/object:Gem::Requirement
50
50
  none: false
51
51
  requirements:
52
52
  - - ! '>='
@@ -54,10 +54,10 @@ dependencies:
54
54
  version: '0'
55
55
  type: :development
56
56
  prerelease: false
57
- version_requirements: *70094689219020
57
+ version_requirements: *70182673482700
58
58
  - !ruby/object:Gem::Dependency
59
59
  name: rspec-rails
60
- requirement: &70094689217820 !ruby/object:Gem::Requirement
60
+ requirement: &70182673482100 !ruby/object:Gem::Requirement
61
61
  none: false
62
62
  requirements:
63
63
  - - ~>
@@ -65,10 +65,10 @@ dependencies:
65
65
  version: 2.9.0
66
66
  type: :development
67
67
  prerelease: false
68
- version_requirements: *70094689217820
68
+ version_requirements: *70182673482100
69
69
  - !ruby/object:Gem::Dependency
70
70
  name: capybara
71
- requirement: &70094689217380 !ruby/object:Gem::Requirement
71
+ requirement: &70182673481600 !ruby/object:Gem::Requirement
72
72
  none: false
73
73
  requirements:
74
74
  - - ! '>='
@@ -76,7 +76,7 @@ dependencies:
76
76
  version: '0'
77
77
  type: :development
78
78
  prerelease: false
79
- version_requirements: *70094689217380
79
+ version_requirements: *70182673481600
80
80
  description: All Front-End all the Time
81
81
  email:
82
82
  - developers@bigbangtechnology.com
@@ -109,6 +109,7 @@ files:
109
109
  - app/assets/images/woople-theme/star-icon.png
110
110
  - app/assets/images/woople-theme/star-icon2x.png
111
111
  - app/assets/images/woople-theme/video-js.png
112
+ - app/assets/javascripts/assessment_flipper.js
112
113
  - app/assets/javascripts/woople-theme/theme.js
113
114
  - app/assets/stylesheets/woople-theme/base.css.less
114
115
  - app/assets/stylesheets/woople-theme/basic-content.css.less
@@ -140,6 +141,7 @@ files:
140
141
  - app/presenters/menu_link_presenter.rb
141
142
  - app/presenters/menu_presenter.rb
142
143
  - app/presenters/menu_section_presenter.rb
144
+ - app/presenters/outline_assessment_presenter.rb
143
145
  - app/presenters/outline_download_presenter.rb
144
146
  - app/presenters/outline_presenter.rb
145
147
  - app/presenters/outline_video_presenter.rb
@@ -166,6 +168,7 @@ files:
166
168
  - lib/woople-theme/engine.rb
167
169
  - lib/woople-theme/version.rb
168
170
  - lib/woople-theme.rb
171
+ - lib/woople_theme_i18n.rb
169
172
  - vendor/assets/javascripts/fastclick.min_.js
170
173
  - vendor/assets/javascripts/modernizr.js
171
174
  - vendor/assets/javascripts/spin.min.js
@@ -195,7 +198,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
195
198
  version: '0'
196
199
  requirements: []
197
200
  rubyforge_project:
198
- rubygems_version: 1.8.10
201
+ rubygems_version: 1.8.15
199
202
  signing_key:
200
203
  specification_version: 3
201
204
  summary: Our Front-End CSS Framework/Theme