woople-theme 0.2.27 → 0.2.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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