pageflow-text-page 1.0.0 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: 6f9a83d5a3827d279ee978fd001c1de8fdc71787
4
- data.tar.gz: 82b4803ca518a29fc5444139787b09370fb100d5
2
+ SHA256:
3
+ metadata.gz: 8096e0ff17017dd6e7d493af58e2904245d78e2f8d10ff542f99fc7063062389
4
+ data.tar.gz: 702a53dec8cbd4731b1d06079146221279a3c4c2e6699e89a5403d0337cb1e26
5
5
  SHA512:
6
- metadata.gz: 7aab723b94de3f4cc86a64959f251c11fe8dc5727f58453c5240343ec185a3c6d1695c0654396b45e88a96cfa7ebaf8d53ba91549bfa1be9a343c5e4baa122ff
7
- data.tar.gz: 28acafd49c47130dd3860b22402195598742b3405cff90051206b75a3c15f13027c12a7cc269327bd354bee2e4be9c48fcb35a2f146f5136ae1a817793119863
6
+ metadata.gz: 6e88cba83d513144b9c59ae07a0f8fd8cc329c35970f491e6e87324cfd78b9a837b876f1b17e32ca11aa20b0ce829a88595b4385e97c93a10d7f45f9ee47f4d8
7
+ data.tar.gz: d8ba5eaf7953dead13a35349a0001369ff164aa86e7b4b15b42a1972e054e0f4b81bebcdeb0318b9399237feb88530b295890910e94fedd7a9c5dfbbfcceaf93
data/CHANGELOG.md CHANGED
@@ -1,20 +1,29 @@
1
1
  # CHANGELOG
2
2
 
3
- ### Version 1.0.0
3
+ ### Version 1.1.0
4
4
 
5
- 2017-08-11
5
+ 2018-12-10
6
6
 
7
- [Compare changes](https://github.com/codevise/pageflow-text-page/compare/0-3-stable...v1.0.0)
7
+ [Compare changes](https://github.com/codevise/pageflow-text-page/compare/1-0-stable...v1.1.0)
8
8
 
9
- - Prevent text from overlapping content image
10
- ([#11](https://github.com/codevise/pageflow-text-page/pull/11))
11
- - Include styles for right aligned text
12
- ([#10](https://github.com/codevise/pageflow-text-page/pull/10))
13
- - Require pageflow 12
14
- ([#9](https://github.com/codevise/pageflow-text-page/pull/9))
15
- - Allow to use background video
16
- ([#8](https://github.com/codevise/pageflow-text-page/pull/8))
9
+ - Add support for Pageflow 13
10
+ ([#16](https://github.com/codevise/pageflow-text-page/pull/16))
11
+ - Make background color of content area configurable
12
+ ([#14](https://github.com/codevise/pageflow-text-page/pull/14),
13
+ [#20](https://github.com/codevise/pageflow-text-page/pull/20))
14
+ - Prevent empty but padded caption bar for inline images
15
+ ([#19](https://github.com/codevise/pageflow-text-page/pull/19))
16
+ - Fix transition effect on chrome 66
17
+ ([#18](https://github.com/codevise/pageflow-text-page/pull/18))
18
+ - Caption theme options
19
+ ([#17](https://github.com/codevise/pageflow-text-page/pull/17))
20
+ - Add theme options for content text size
21
+ ([#15](https://github.com/codevise/pageflow-text-page/pull/15))
22
+ - Prevent overlapping fonts on text-page headers with orientation center
23
+ ([#13](https://github.com/codevise/pageflow-text-page/pull/13))
24
+ - Remove duplicate .scroller selector
25
+ ([#12](https://github.com/codevise/pageflow-text-page/pull/12))
17
26
 
18
27
  See
19
- [0-3-stable branch](https://github.com/codevise/pageflow-text-page/blob/0-3-stable/CHANGELOG.md)
28
+ [1-0-stable branch](https://github.com/codevise/pageflow-text-page/blob/1-0-stable/CHANGELOG.md)
20
29
  for previous changes.
@@ -23,6 +23,14 @@ pageflow.ConfigurationEditorView.register('text_page', {
23
23
  this.input('text_title', pageflow.TextInputView);
24
24
  this.input('text', pageflow.TextAreaInputView);
25
25
  this.input('invert_text', pageflow.CheckBoxInputView);
26
+ this.input('text_page_background_color', pageflow.ColorInputView, {
27
+ defaultValue: function(invertText) {
28
+ return invertText ? '#000000' : '#ffffff';
29
+ },
30
+ defaultValueBinding: 'invert_text',
31
+
32
+ swatches: usedBackgroundColors()
33
+ });
26
34
 
27
35
  this.input('text_image_id', pageflow.FileInputView, {
28
36
  collection: pageflow.imageFiles,
@@ -49,5 +57,11 @@ pageflow.ConfigurationEditorView.register('text_page', {
49
57
  });
50
58
  this.group('options');
51
59
  });
60
+
61
+ function usedBackgroundColors() {
62
+ return _.chain(pageflow.pages.map(function(page) {
63
+ return page.configuration.get('text_page_background_color');
64
+ })).uniq().compact().value();
65
+ }
52
66
  }
53
67
  });
@@ -221,8 +221,15 @@ pageflow.react.registerPageTypeWithDefaultBackground('text_page', {
221
221
  });
222
222
 
223
223
  pageElement.find('.content_and_background').toggleClass('invert_text', !!configuration.get('invert_text'));
224
+ pageElement.find('.image_fullscreen_view').css({
225
+ backgroundColor: configuration.get('text_page_background_color') || ''
226
+ });
224
227
  pageElement.data('invertIndicator', !configuration.get('invert_text'));
225
228
 
229
+ pageElement.find('.content_background_layer').css({
230
+ backgroundColor: configuration.get('text_page_background_color') || ''
231
+ });
232
+
226
233
  pageElement.find('.shadow, .header_background_layer').css({
227
234
  opacity: configuration.get('gradient_opacity') / 100
228
235
  });
@@ -1 +1,54 @@
1
+ /// Used to scale down text title and content text
2
+ $text-page-content-text-base-font-size: 0.8em !default;
3
+
4
+ /// Used to undo scaling of text title and content text on phone
5
+ $text-page-content-text-phone-base-font-size: 1em !default;
6
+
7
+ /// Typography of the header displayed above the content text
8
+ /// paragraph.
9
+ $text-page-text-title-typography: () !default;
10
+
11
+ /// Inline Image Caption Text box Variables
12
+
13
+ $text-page-inline-image-caption-background-color: black !default;
14
+ $text-page-inline-image-caption-text-color: white !default;
15
+
16
+ $text-page-inline-image-caption-inverted-background-color: null !default;
17
+ $text-page-inline-image-caption-inverted-text-color: null !default;
18
+
19
+ $text-page-inline-image-caption-padding: 7px 10px !default;
20
+
1
21
  @include pageflow-page-type-pictograms("text_page");
22
+
23
+ .page .text_page {
24
+ .contentText {
25
+ font-size: $text-page-content-text-base-font-size;
26
+
27
+ @include phone {
28
+ font-size: $text-page-content-text-phone-base-font-size;
29
+ }
30
+
31
+ h3 {
32
+ @include typography(
33
+ $text-page-text-title-typography,
34
+ (
35
+ padding-bottom: 2em,
36
+ font-size: 1.5em
37
+ )
38
+ );
39
+ }
40
+ }
41
+
42
+ .inline_image_text {
43
+ background-color: $text-page-inline-image-caption-background-color;
44
+ color: $text-page-inline-image-caption-text-color;
45
+ padding: $text-page-inline-image-caption-padding;
46
+ }
47
+
48
+ &.invert_text .inline_image_text {
49
+ background-color: $text-page-inline-image-caption-inverted-background-color;
50
+ color: $text-page-inline-image-caption-inverted-text-color;
51
+ }
52
+
53
+
54
+ }
@@ -55,7 +55,7 @@ $inverted-background-color: black;
55
55
  }
56
56
  }
57
57
 
58
- .scroller, .scroller {
58
+ .scroller {
59
59
  > div {
60
60
  padding: 0;
61
61
  position: relative;
@@ -90,7 +90,12 @@ $inverted-background-color: black;
90
90
  padding: 2em 0;
91
91
  margin: 0;
92
92
  span {
93
- margin: 0 auto;
93
+ margin-right: auto;
94
+ margin-left: auto;
95
+ }
96
+
97
+ .subtitle {
98
+ margin-bottom: 0em;
94
99
  }
95
100
 
96
101
  padding-right: $nav-bar-margin;
@@ -123,7 +128,6 @@ $inverted-background-color: black;
123
128
  }
124
129
 
125
130
  .contentText {
126
- font-size: 0.8em;
127
131
  max-width: 500px;
128
132
  margin: auto;
129
133
  min-height: 300px;
@@ -132,7 +136,6 @@ $inverted-background-color: black;
132
136
 
133
137
  @include phone {
134
138
  max-width: 84%;
135
- font-size: 1em;
136
139
  }
137
140
 
138
141
  @include pad_portrait {
@@ -141,8 +144,6 @@ $inverted-background-color: black;
141
144
 
142
145
  h3 {
143
146
  width: 100%;
144
- padding-bottom: 2em;
145
- font-size: 1.5em;
146
147
  }
147
148
 
148
149
  @include pad_portrait {
@@ -194,14 +195,7 @@ $inverted-background-color: black;
194
195
  outline: 0;
195
196
  }
196
197
  div {
197
- background-color: black;
198
198
  width: auto;
199
- color: white;
200
-
201
- span {
202
- padding: 10px;
203
- display: block;
204
- }
205
199
  }
206
200
 
207
201
  &:before, &:after {
@@ -214,10 +208,8 @@ $inverted-background-color: black;
214
208
  background-position: 0 0;
215
209
  background-repeat: no-repeat;
216
210
  position: absolute;
217
- background-color: transparent;
218
211
  top: 18px;
219
212
  right: 18px;
220
- color: transparent;
221
213
  text-indent: -4000px;
222
214
  opacity: 0;
223
215
  cursor: pointer;
@@ -467,8 +459,8 @@ $inverted-background-color: black;
467
459
  background-color: white;
468
460
  }
469
461
 
470
- .content_and_background {
471
- @include transition(1s ease);
462
+ &.active .content_and_background {
463
+ @include transition (opacity 1s ease);
472
464
  }
473
465
 
474
466
  &.active.animate-in-forwards .content_and_background {
@@ -556,13 +548,13 @@ $inverted-background-color: black;
556
548
  }
557
549
 
558
550
  .slideshow {
559
- .text_page p, h3 span, .inline_image_text span, .fixed_header_area .page_header_wrapper {
551
+ .text_page p, h3 span, .inline_image_text, .fixed_header_area .page_header_wrapper {
560
552
  @include transition(0.5s ease);
561
553
  }
562
- .hiddenByOverlay .text_page {
554
+ .hidden_by_overlay .text_page {
563
555
  .content {
564
556
  opacity: 1;
565
- p, h3 span, .inline_image_text span {
557
+ p, h3 span, .inline_image_text {
566
558
  opacity: 0;
567
559
  }
568
560
  }
@@ -647,11 +639,9 @@ section.hide_title {
647
639
  .inline_image_text {
648
640
  position: absolute;
649
641
  bottom: 0;
650
- background-color: black;
651
- color: white;
652
- padding: 15px 2%;
653
642
  text-align: left;
654
- width: 96%;
643
+ width: 100%;
644
+ box-sizing: border-box;
655
645
  }
656
646
  }
657
647
  .invert_text & {
@@ -1,5 +1,5 @@
1
1
  <div class="blackLayer"></div>
2
- <div class="content_and_background text_page <% if configuration['sticky_inline_image'] %>sticky_inline_image<% end %> <%= background_asset_present_css_class(configuration) %> <% if configuration['invert_text'] %>invert_text<% end %>">
2
+ <div class="content_and_background text_page <% if configuration['sticky_inline_image'].present? %>sticky_inline_image<% end %> <%= background_asset_present_css_class(configuration) %> <% if configuration['invert_text'].present? %>invert_text<% end %>">
3
3
  <div class="backgroundArea">
4
4
  <%= page_background_asset(configuration) %>
5
5
  <%= shadow_div :opacity => configuration['gradient_opacity'] %>
@@ -15,12 +15,12 @@
15
15
  </div>
16
16
  </div>
17
17
  </div>
18
- <div class="content scroller inline_text_position_<%= configuration['inline_text_position'] ? configuration['inline_text_position'] : 'left' %>">
18
+ <div class="content scroller inline_text_position_<%= configuration['inline_text_position'].present? ? configuration['inline_text_position'] : 'left' %>">
19
19
  <div>
20
20
  <div class="contentWrapper">
21
21
  <div class="page_spacer"></div>
22
22
  <div class="contentInnerWrapper">
23
- <div class="content_background_layer"></div>
23
+ <div class="content_background_layer" style="<%= configuration['text_page_background_color'].present? ? "background-color: #{configuration['text_page_background_color']}" : '' %>"></div>
24
24
  <div class="page_header">
25
25
  <div class="header_background_layer" style="opacity: <%= configuration['gradient_opacity'].to_i / 100.0 %>"></div>
26
26
  <h2>
@@ -34,14 +34,17 @@
34
34
  <h3>
35
35
  <span class="text_title"><%= configuration['text_title'] %></span>
36
36
  </h3>
37
- <a <% if !configuration['prevent_fullscreen'] %> href="<%= fullscreen_image_url(configuration['text_image_id']) %>" target="_blank"<% else %> href="#" <% end %> class="inline_image <% if !configuration['text_image_id'] %>no_image_assigned<% end %>
38
- <% if !configuration['prevent_fullscreen'] %>allow_fullscreen<% end %>">
37
+ <%= link_to(configuration['prevent_fullscreen'].blank? ? fullscreen_image_url(configuration['text_image_id']) : '#',
38
+ target: ("_blank" if configuration['prevent_fullscreen'].blank?),
39
+ class: 'inline_image' \
40
+ "#{' no_image_assigned' if configuration['text_image_id'].blank?}" \
41
+ "#{' allow_fullscreen' if configuration['prevent_fullscreen'].blank?}") do %>
39
42
  <%= content_image(configuration['text_image_id'], configuration['image_description']) %>
40
- <% if configuration['image_description'] %>
41
- <div class="inline_image_text"><% if !configuration['image_description'].blank? %><span><%= configuration['image_description'] %></span><% end %></div>
43
+ <% if configuration['image_description'].present? %>
44
+ <div class="inline_image_text"><span><%= configuration['image_description'] %></span></div>
42
45
  <% end %>
43
46
  <div class="bigscreen_toggler" tabindex="4" title="<%= t('pageflow.public.enlarge_view') %>"><%= t('pageflow.public.fullscreen') %></div>
44
- </a>
47
+ <% end %>
45
48
  <p>
46
49
  <%= raw configuration['text'] %>
47
50
  </p>
@@ -50,12 +53,12 @@
50
53
  </div>
51
54
  </div>
52
55
  </div>
53
- <div class="image_fullscreen_view">
56
+ <div class="image_fullscreen_view" style="<%= configuration['text_page_background_color'].present? ? "background-color: #{configuration['text_page_background_color']}" : '' %>">
54
57
  <div class="image_fullscreen_wrapper">
55
58
  <div class="image_fullscreen_inner_wrapper">
56
59
  <%= content_image_large(configuration['text_image_id'], configuration['image_description']) %>
57
- <% if configuration['image_description'] %>
58
- <div class="inline_image_text"><% if !configuration['image_description'].blank? %><span><%= configuration['image_description'] %></span><% end %></div>
60
+ <% if configuration['image_description'].present? %>
61
+ <div class="inline_image_text"><span><%= configuration['image_description'] %></span></div>
59
62
  <% end %>
60
63
  </div>
61
64
  </div>
@@ -10,6 +10,7 @@ de:
10
10
  sticky_inline_image: Bild an Seite haften
11
11
  text_coverage: Textabdeckung
12
12
  text_image_id: Bild im Text
13
+ text_page_background_color: Hintergrundfarbe
13
14
  text_titel: Überschrift
14
15
  text_title: Texttitel
15
16
  title_position: Titelposition
@@ -43,11 +44,12 @@ de:
43
44
  header: Titel
44
45
  inline_help:
45
46
  pageflow/page:
46
- invert_text: Vertauscht Text- und Hintergrundfarbe im Fließtextbereich.
47
+ invert_text: Weißen Text auf dunklem Grund anzeigen.
47
48
  prevent_fullscreen: Verhindert, dass das Fließtextbild bei Klick auf das Bild im Vollbild dargestellt wird.
48
49
  sticky_inline_image: Das Bild wird zunächst zusammen mit dem Text gescrollt, bleibt dann aber vertikal zentriert stehen, während der Text weiter scrollt.
49
50
  text: Dies ist der Bereich für den Fließtext dieser Seite. Dieser Seitentyp ist für lange Texte optimiert. Bei Kurztexten sollte auf andere Seitentypen zurückgegriffen werden.
50
51
  text_coverage: Definiert, wie viel Text (und wie viel vom Titelbild) anfangs sichtbar ist.
51
52
  text_image_id: Dieses Bild wird neben dem Text angezeigt.
53
+ text_page_background_color: Nutze die 'Farben des Textbereichs invertieren' Option, um einen ausreichenden Kontrast des Texts zur gewählten Hintergrundfarbe sicherzustellen.
52
54
  topasset_dim: Titlebild abhängig von der Scroll-Position farblich abblenden.
53
55
  topasset_parallax: Titelbild abhängig von der Scroll-Position vertikal verschieben.
@@ -10,6 +10,7 @@ en:
10
10
  sticky_inline_image: Sticky image position
11
11
  text_coverage: Text coverage
12
12
  text_image_id: Inline image
13
+ text_page_background_color: Background color
13
14
  text_titel: Title
14
15
  text_title: Text title
15
16
  title_position: Title position
@@ -43,11 +44,12 @@ en:
43
44
  header: Title area
44
45
  inline_help:
45
46
  pageflow/page:
46
- invert_text: Switches text and background colors
47
+ invert_text: Display white text on dark background.
47
48
  prevent_fullscreen: Prevents the image from opening fullscreen on click
48
49
  sticky_inline_image: The image scrolls with the text but eventually remains at a vertically centered position.
49
50
  text: This is the main contents of the page. This page type is made for long texts. Use a different page type if your main content text is short.
50
51
  text_coverage: Determines how much of the title image is visible initially.
51
52
  text_image_id: This image is displayed alongside the text.
53
+ text_page_background_color: Use the 'invert text area color' option to make sure there is sufficient contrast between text and selected background color.
52
54
  topasset_dim: Animate the opacity of the title image while scrolling down.
53
55
  topasset_parallax: Translate the title image vertically while scrolling down.
@@ -6,8 +6,7 @@ module Pageflow
6
6
  isolate_namespace Pageflow::TextPage
7
7
 
8
8
  config.autoload_paths << File.join(config.root, 'lib')
9
+ config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
9
10
  end
10
11
  end
11
12
  end
12
-
13
-
@@ -1,5 +1,5 @@
1
1
  module Pageflow
2
2
  module TextPage
3
- VERSION = '1.0.0'.freeze
3
+ VERSION = '1.1.0'.freeze
4
4
  end
5
5
  end
@@ -18,7 +18,7 @@ Gem::Specification.new do |spec|
18
18
 
19
19
  spec.required_ruby_version = '~> 2.1'
20
20
 
21
- spec.add_runtime_dependency 'pageflow', '~> 12.x'
21
+ spec.add_runtime_dependency 'pageflow', ['>= 12.2.x', '< 14']
22
22
  spec.add_runtime_dependency 'pageflow-public-i18n', '~> 1.0'
23
23
 
24
24
  spec.add_development_dependency 'bundler', '~> 1.0'
metadata CHANGED
@@ -1,29 +1,35 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: pageflow-text-page
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.0
4
+ version: 1.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Codevise Solutions Ltd.
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-08-11 00:00:00.000000000 Z
11
+ date: 2018-12-10 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: pageflow
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - "~>"
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: 12.2.x
20
+ - - "<"
18
21
  - !ruby/object:Gem::Version
19
- version: 12.x
22
+ version: '14'
20
23
  type: :runtime
21
24
  prerelease: false
22
25
  version_requirements: !ruby/object:Gem::Requirement
23
26
  requirements:
24
- - - "~>"
27
+ - - ">="
28
+ - !ruby/object:Gem::Version
29
+ version: 12.2.x
30
+ - - "<"
25
31
  - !ruby/object:Gem::Version
26
- version: 12.x
32
+ version: '14'
27
33
  - !ruby/object:Gem::Dependency
28
34
  name: pageflow-public-i18n
29
35
  requirement: !ruby/object:Gem::Requirement
@@ -136,7 +142,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
136
142
  version: '0'
137
143
  requirements: []
138
144
  rubyforge_project:
139
- rubygems_version: 2.6.8
145
+ rubygems_version: 2.7.5
140
146
  signing_key:
141
147
  specification_version: 4
142
148
  summary: Pageflow Page Type text pages