pageflow 15.3.0 → 15.4.0

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of pageflow might be problematic. Click here for more details.

Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +158 -353
  3. data/README.md +2 -3
  4. data/app/assets/javascripts/pageflow/dist/ui.js +99 -32
  5. data/app/assets/javascripts/pageflow/vendor.js +0 -1
  6. data/app/assets/stylesheets/pageflow/editor/base.scss +3 -2
  7. data/app/assets/stylesheets/pageflow/editor/drop_down_button.scss +1 -1
  8. data/app/assets/stylesheets/pageflow/editor/select_button.scss +1 -1
  9. data/app/assets/stylesheets/pageflow/editor/sidebar_footer.scss +1 -1
  10. data/app/assets/stylesheets/pageflow/entries.scss +1 -1
  11. data/app/assets/stylesheets/pageflow/loading_spinner.scss +4 -1
  12. data/app/assets/stylesheets/pageflow/navigation_mobile.scss +4 -4
  13. data/app/assets/stylesheets/pageflow/themes/default/anchors.scss +1 -1
  14. data/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss +1 -1
  15. data/app/assets/stylesheets/pageflow/themes/default/page/anchors.scss +1 -1
  16. data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss +1 -1
  17. data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic/info_box.scss +1 -1
  18. data/app/assets/stylesheets/pageflow/themes/default/player_controls/shared/menu_bar.scss +2 -2
  19. data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/control_bar.scss +2 -2
  20. data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/info_box.scss +1 -1
  21. data/app/assets/stylesheets/pageflow/themes/default/player_controls/slim/quality_menu.scss +2 -2
  22. data/app/assets/stylesheets/pageflow/themes/default/player_controls/waveform/wave.scss +1 -1
  23. data/app/assets/stylesheets/pageflow/ui/forms.scss +9 -2
  24. data/app/assets/stylesheets/pageflow/ui/input/extended_select_input.scss +2 -2
  25. data/app/models/pageflow/account_role_query.rb +1 -1
  26. data/app/models/pageflow/managed_user_query.rb +1 -1
  27. data/app/policies/pageflow/folder_policy.rb +2 -2
  28. data/app/policies/pageflow/membership_policy.rb +2 -2
  29. data/app/policies/pageflow/theming_policy.rb +2 -2
  30. data/app/policies/pageflow/user_policy.rb +1 -1
  31. data/app/views/pageflow/video_files/_video_file.json.jbuilder +8 -1
  32. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/editor.js +103 -36
  33. data/entry_types/paged/app/assets/javascripts/pageflow_paged/dist/frontend.js +42 -15
  34. data/entry_types/paged/app/assets/javascripts/pageflow_paged/vendor.js +1 -0
  35. data/entry_types/paged/app/assets/javascripts/pageflow_paged/videojs.js +6 -0
  36. data/entry_types/paged/app/views/layouts/pageflow_paged/_loading_spinner_inline_script.html.erb +1 -0
  37. data/entry_types/paged/app/views/layouts/pageflow_paged/application.html.erb +1 -1
  38. data/entry_types/paged/app/views/pageflow_paged/editor/entries/_head.html.erb +2 -0
  39. data/entry_types/paged/lib/tasks/pageflow_paged_tasks.rake +7 -0
  40. data/{vendor/assets/javascripts → entry_types/paged/vendor/assets/javascripts/pageflow_paged/vendor}/dash.all.min.js +0 -0
  41. data/{vendor/assets/javascripts → entry_types/paged/vendor/assets/javascripts/pageflow_paged/vendor}/videojs-dash.js +0 -0
  42. data/{vendor/assets/javascripts → entry_types/paged/vendor/assets/javascripts/pageflow_paged/vendor}/videojs.js +0 -0
  43. data/entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb +2 -0
  44. data/entry_types/scrolled/app/helpers/pageflow_scrolled/editor/seed_html_helper.rb +1 -0
  45. data/entry_types/scrolled/app/helpers/pageflow_scrolled/favicon_helper.rb +21 -0
  46. data/entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb +12 -5
  47. data/entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb +5 -7
  48. data/entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_theme.json.jbuilder +1 -0
  49. data/entry_types/scrolled/app/views/pageflow_scrolled/favicons/_entry.html.erb +10 -0
  50. data/entry_types/scrolled/config/locales/de.yml +655 -0
  51. data/entry_types/scrolled/config/locales/en.yml +522 -0
  52. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb +5 -0
  53. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/android-chrome-192x192.png +0 -0
  54. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/android-chrome-512x512.png +0 -0
  55. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/apple-touch-icon.png +0 -0
  56. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/browserconfig.xml +9 -0
  57. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/favicon-16x16.png +0 -0
  58. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/favicon-32x32.png +0 -0
  59. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/favicon.ico +0 -0
  60. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/mstile-150x150.png +0 -0
  61. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/safari-pinned-tab.svg +46 -0
  62. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/favicons/site.webmanifest +19 -0
  63. data/entry_types/scrolled/lib/generators/pageflow_scrolled/install/templates/theme/unmute.mp3 +0 -0
  64. data/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake +1 -0
  65. data/entry_types/scrolled/package/contentElements-editor.js +14 -1
  66. data/entry_types/scrolled/package/contentElements-frontend.css +1 -1
  67. data/entry_types/scrolled/package/contentElements-frontend.js +338 -104
  68. data/entry_types/scrolled/package/editor.js +594 -242
  69. data/entry_types/scrolled/package/frontend/{EditableText-4264c349.js → EditableText-43c50894.js} +331 -163
  70. data/entry_types/scrolled/package/frontend/{Wavesurfer-c3c45324.js → Wavesurfer-b88b02e0.js} +0 -3
  71. data/entry_types/scrolled/package/frontend/{components-cfe6a479.js → components-3ead1b4a.js} +509 -91
  72. data/entry_types/scrolled/package/frontend/index.css +2 -2
  73. data/entry_types/scrolled/package/frontend/index.js +2107 -1025
  74. data/entry_types/scrolled/package/package.json +15 -3
  75. data/lib/generators/pageflow/initializer/templates/pageflow.rb +2 -1
  76. data/lib/pageflow/engine.rb +0 -1
  77. data/lib/pageflow/themes.rb +4 -0
  78. data/lib/pageflow/version.rb +1 -1
  79. data/package/config/jest/index.js +7 -2
  80. data/package/config/webpack.js +1 -2
  81. data/package/editor.js +4 -4
  82. data/package/frontend.js +30 -13
  83. data/package/ui.js +99 -32
  84. metadata +25 -11
  85. data/app/assets/javascripts/pageflow/videojs.js +0 -6
  86. data/entry_types/scrolled/config/locales/new/de.yml +0 -601
  87. data/entry_types/scrolled/config/locales/new/en.yml +0 -507
@@ -0,0 +1,522 @@
1
+ en:
2
+ pageflow_scrolled:
3
+ editor:
4
+ blank_entry:
5
+ create_chapter: Click <em>New chapter</em> to create your first chapter.
6
+ create_content_element: Use the <em>Plus buttons</em> inside the preview to add text blocks and other elements.
7
+ create_section: Click <em>New section</em> within the chapter to add a section.
8
+ header: This is an empty Pageflow.
9
+ intro: Pageflows consist of chapters and sections. The sidebar on the right shows the outline of your story.
10
+ outro: In this area, a live preview will be shown.
11
+ browser_not_supported:
12
+ heading: The browser or device you are using is not supported
13
+ text: While Pageflow stories work on all modern browsers and devices, the Pageflow editor requires a desktop computer running a recent version of Chrome, Firefox, Safari or Edge.
14
+ chapter_item:
15
+ add_section: New section
16
+ drag_hint: Drag to move chapter
17
+ save_error: There was an error while saving this chapter.
18
+ common_content_element_attributes:
19
+ caption:
20
+ inline_help: The caption of the element will be displayed directly underneath the element.
21
+ label: Caption
22
+ position:
23
+ inline_help: 'This setting allows you to control the position of the element in relation to surrounding text blocks: the element can prominently stand alone ("Full Width"), it can be anchored within the text ("Inline") or it can be positioned adjacent to the text ("Sticky"). Sticky elements remain static in the middle of the viewport alongside the text until either the section is scrolled out of the viewport or until they get pushed upwards by the next sticky element of the section. On mobile devices sticky elements automatically get positioned inline. Sticky elements work particularly well on desktop devices in combination with long texts.'
24
+ label: Position
25
+ values:
26
+ full: Full Width
27
+ inline: Inline
28
+ left: Floated left
29
+ right: Floated right
30
+ sticky: Sticky
31
+ content_elements:
32
+ dataWrapperChart:
33
+ attributes:
34
+ backgroundColor:
35
+ inline_help: Color of box containing the diagram. Especially for charts with transparent background, readability can be improved by choosing an appropriate background.
36
+ label: Background Color
37
+ create_chart:
38
+ label: Create new Datawrapper chart
39
+ title:
40
+ inline_help: Used by screen readers to describe the chart as a whole.
41
+ label: Title
42
+ url:
43
+ inline_help: URL of a chart published via Datawrapper. Datawrapper offers a special 'Pageflow' layout selectable on the 'Design' tab for optimal display inside Pageflow.
44
+ label: Chart URL
45
+ name: DataWrapper Chart
46
+ tabs:
47
+ general: Chart
48
+ externalLinkList:
49
+ add: Add
50
+ attributes:
51
+ description:
52
+ inline_help: Link-description for display in entry.
53
+ label: Description
54
+ open_in_new_tab:
55
+ label: Open in new tab
56
+ thumbnail:
57
+ inline_help: Link thumbnail image for display in entry.
58
+ label: Thumbnail
59
+ title:
60
+ inline_help: Link-title for display in entry.
61
+ label: Title
62
+ url:
63
+ inline_help: Absolute URL (inkluding http:// oder https://) of Link.
64
+ label: URL
65
+ back: Back
66
+ confirm_delete: Are you sure you want to delete this element?
67
+ confirm_delete_link: Are you sure you want to delete this link?
68
+ destroy: Delete
69
+ name: External links
70
+ outline: Outline
71
+ tabs:
72
+ edit_link: Edit Link
73
+ general: External Links
74
+ heading:
75
+ attributes:
76
+ children:
77
+ label: Text
78
+ name: Heading
79
+ tabs:
80
+ general: Heading
81
+ inlineAudio:
82
+ attributes:
83
+ atmoDuringPlayback:
84
+ inline_help: Choose which way the atmo shall behave during playback of this audio element.
85
+ label: Atmo During Playback
86
+ values:
87
+ mute: Mute
88
+ play: Keep playing
89
+ turnDown: Keep playing at lower volume
90
+ id:
91
+ label: Audio
92
+ playerControlVariant:
93
+ inline_help: Choose the style of player controls.
94
+ label: Player Controls
95
+ values:
96
+ classic: Classic
97
+ waveform: Waveform
98
+ posterId:
99
+ label: Poster
100
+ waveformColor:
101
+ inline_help: Color of the waveform's parts that represents the already played part of the audio.
102
+ label: Waveform Color
103
+ name: Inline Audio
104
+ tabs:
105
+ general: Inline Audio
106
+ inlineBeforeAfter:
107
+ attributes:
108
+ after_id:
109
+ inline_help: Shown to the right of divider.
110
+ label: After Image
111
+ after_label:
112
+ inline_help: 'Set the text of a short label for the After image. Examples: ''After'', ''January 2040'''
113
+ label: After Label
114
+ before_id:
115
+ inline_help: Shown to the left of divider.
116
+ label: Before Image
117
+ before_label:
118
+ inline_help: 'Set the text of a short label for the Before image. Examples: ''Before'', ''January 2000'''
119
+ label: Before Label
120
+ initial_slider_position:
121
+ inline_help: In case the divider shouldn't be in the middle at the start, its start position can be set here.
122
+ label: Divider start position
123
+ slider:
124
+ inline_help: Shows/hides visible slider at divider line.
125
+ label: Show Slider
126
+ slider_color:
127
+ inline_help: You can configure slider color (incl. slider handle) freely. Make sure that the slider can be seen clearly on every position over the entire Before/After area.
128
+ label: Slider Color
129
+ slider_handle:
130
+ inline_help: Activates/deactivates slider handle.
131
+ label: Show Slider Handle
132
+ name: Before/After
133
+ tabs:
134
+ general: Before/After
135
+ inlineImage:
136
+ attributes:
137
+ id:
138
+ label: Image
139
+ name: Inline Image
140
+ tabs:
141
+ general: Inline Image
142
+ inlineVideo:
143
+ attributes:
144
+ atmoDuringPlayback:
145
+ inline_help: Choose which way the atmo shall behave during playback of this video element.
146
+ label: Atmo During Playback
147
+ values:
148
+ mute: Mute
149
+ play: Keep playing
150
+ turnDown: Keep playing at lower volume
151
+ id:
152
+ label: Video
153
+ posterId:
154
+ label: Poster
155
+ name: Inline Video
156
+ tabs:
157
+ general: Inline Video
158
+ soundDisclaimer:
159
+ name: Audio Notice
160
+ tabs:
161
+ general: Audio Notice
162
+ textBlock:
163
+ name: Text Block
164
+ tabs:
165
+ general: Text Block
166
+ videoEmbed:
167
+ attributes:
168
+ aspectRatio:
169
+ label: Aspect ratio of video
170
+ values:
171
+ narrow: Landscape 4:3
172
+ portrait: Portrait (9:16)
173
+ square: Square
174
+ wide: Landscape 16:9
175
+ hideControls:
176
+ inline_help: Hides the player controls if possible (depends on the videos provider and configuration). The video can be played and paused via click.
177
+ label: Hide controls
178
+ hideInfo:
179
+ inline_help: Hides the video title and author info inside the embed if possible (depends on the videos provider and configuration).
180
+ label: Hide title in embed
181
+ videoSource:
182
+ label: Video-URL
183
+ name: Video Embed
184
+ tabs:
185
+ general: Video-Embed
186
+ edit_chapter:
187
+ attributes:
188
+ summary:
189
+ inline_help: Summary of the chapter for display in the navigation bar. Only chapters with both title and summary set will get added as menu items to the navigation.
190
+ label: Summary
191
+ title:
192
+ inline_help: The chapter title will be displayed in the editor overview and the navigation bar of the entry. Only chapters with both title and summary set will get added as menu items to the navigation.
193
+ label: Title
194
+ confirm_destroy: |-
195
+ Really delete this chapter including ALL its sections?
196
+
197
+ This operation cannot be undone.
198
+ save_error: There was an error while saving this chapter.
199
+ tabs:
200
+ chapter: Chapter
201
+ edit_motif_area:
202
+ blank_slate: No area selected.
203
+ cancel: Cancel
204
+ header: Motif area
205
+ help_link: What is this used for?
206
+ hint: Drag to select the most important part of the image.
207
+ reset: Reset
208
+ save: Save
209
+ edit_section:
210
+ attributes:
211
+ appearance:
212
+ inline_help: This setting controls how the scrolling foreground should get dimmed to increase contrast from the background. The option "Cards" adds a box with rounded corners to the foreground, with "Shadow" you can add a light or dark shadow to increase readability.
213
+ label: Text-Background
214
+ values:
215
+ cards: Card
216
+ shadow: Shadow
217
+ transparent: Transparent
218
+ atmoAudioFileId:
219
+ inline_help: Choose an audio file, that shall be played in the background. If you want this audio to continue playing on following sections, just choose the same file again there.
220
+ label: Atmo Audio
221
+ backdropColor:
222
+ label: Background-Color
223
+ backdropImage:
224
+ label: Background-Image
225
+ backdropImageMobile:
226
+ inline_help: Displayed when the browser viewport is taller than wide, for example on phones or tablets in portrait orientation. Can be used to supply an alternative to a landscape background image that would otherwise have important parts cropped off.
227
+ label: Background-Image (Portrait)
228
+ backdropType:
229
+ inline_help: The section background can either display an image, a color or a video loop.
230
+ label: Background-Type
231
+ values:
232
+ color: Color
233
+ image: Image
234
+ video: Video
235
+ backdropVideo:
236
+ label: Background-Video
237
+ dynamicShadowOpacity:
238
+ inline_help: Intensity of the shadow which is faded in behind the text to ensure contrast when content is scrolled to intersect with the motif area. Note that this shadow is only visible if motif area and section content do not fit side by side. It's best to switch to phone preview when adjusting this value.
239
+ inline_help_disabled: Activate "Expose motif area" above to use this setting.
240
+ label: Dynamic shadow
241
+ exposeMotifArea:
242
+ inline_help: Ensure the selected motif area of the background asset is visible and not covered by other elements when first reaching the section. If motif area and section content do not fit side by side, extra space will be inserted at the top of the section to move content down.
243
+ inline_help_disabled: Click "Select motif area" in the "three dots" menu of the background image/video field above to use this feature. It let's you make sure important parts of the backdrop asset won't be hidden by other elements.
244
+ label: Expose motif area
245
+ fullHeight:
246
+ inline_help: Activate this option if the background of this section (e.g. image, color or video) is supposed to be enlarged such that the whole browser window (the so called viewport) is covered. Deactivate this option to create a short section. The height of the section and its background is then determined only by the content of the section. Multiple sections with different backgrounds can then be visible at once on the user's screen. This option needs to be activated for two adjacent sections to be able to use a fade transition between them.
247
+ label: Use Full Viewport-Height
248
+ invert:
249
+ label: Invert Text Colors
250
+ layout:
251
+ inline_help: This setting controls the position of the scrolling foreground layer of the section on desktop devices. On mobile devices the foreground layer will automatically become centered.
252
+ label: Content alignment
253
+ values:
254
+ center: Center
255
+ left: Left
256
+ right: Right
257
+ staticShadowOpacity:
258
+ inline_help: Intensity of the shadow displayed behind text when section content and motif area fit side by side or no motif area has been specified. For left or right aligned content, the shadow has the form of a horizontal gradient. When "Content alignment" is set to "Center", the shadow is displayed as a translucent layer behind the text.
259
+ label: Static shadow
260
+ edit_motif_area: Select motif area...
261
+ tabs:
262
+ section: Section
263
+ edit_section_transition:
264
+ attributes:
265
+ transition:
266
+ inline_help: This setting defines the transition when scrolling from the previous section to the current. The different settings have specific effects concerning the behaviors of background and foreground. The effects "Cross-Fade All" and "Cross-Fade Backgrounds" are only available if the "Use Full Viewport-Height" option has been enabled in the settings of both adjacent sections.
267
+ label: Effect
268
+ values:
269
+ beforeAfter: Scrolling with static Backgrounds
270
+ fade: Also fade section content
271
+ fadeBg: Cross Fade
272
+ reveal: Reveal
273
+ scroll: Scroll
274
+ scrollOver: Scroll Over
275
+ confirm_destroy: |-
276
+ Really delete this section including ALL its elements?
277
+
278
+ This operation cannot be undone.
279
+ save_error: There was an error while saving this section.
280
+ tabs:
281
+ transition: Transition
282
+ entry_outline:
283
+ add_chapter: New chapter
284
+ header: Outline
285
+ insert_content_element:
286
+ cancel: Cancel
287
+ header: Insert element
288
+ no_options: No options available
289
+ section_item:
290
+ drag_hint: Drag to move section
291
+ save_error: There was an error while saving this section.
292
+ help_entries:
293
+ content_elements:
294
+ menu_item: Content Elements
295
+ text: "# Content Elements\nIn each section, any number of content elements can be inserted and positioned against a background. The position of the content elements on wide screen aspect ratios is determined by the foreground **positioning of the section** (left, right, centre). In portrait mode on smartphones (upright) the content elements are always displayed one below the other for space reasons.\n\n## Insert elements\nTo add a new content element, click on the **plus button** above or below an existing one and then insert text blocks, media, embeds or external links. \n\nBy clicking on the selected content element, a dialog box for **positioning the content elements** and other options, such as activating **autoplay for audio and video** or entering a caption, appears on the right-hand editing bar. \n\nFor display on wide screen aspect ratios (desktop, notebook, tablet, smartphone landscape), individual content elements such as videos, audios, video embeds, 360° images can also be arranged separately from the positioning in the text flow as **sticky** or **full width**. \n\nIf a section is aligned centrally, content elements can also be **indented to the left or right**. In this case, the content element is reduced in size so that the text can be displayed next to, instead of above the content element."
296
+ meta_data:
297
+ menu_item: Title and Options
298
+ text: |
299
+ # Title and Options
300
+
301
+ General settings for the entry. Please select a sub item on the left.
302
+ motif_area:
303
+ menu_item: Motif areas
304
+ text: |
305
+ # Motif areas
306
+
307
+ By specifying a motif area of an image, you can tell
308
+ Pageflow which part of the image is most important. For
309
+ example, for a portrait this could be the face of the
310
+ depicted person.
311
+
312
+ When the image is then used as the background of a section,
313
+ Pageflow tries to make sure the reader has an undisturbed view can actually see this
314
+ part of the image.
315
+
316
+ 1. If the image cannot be displayed uncropped (e.g. because
317
+ it has landscape format while the entry is being viewed
318
+ on a phone in portrait orientation), the background is
319
+ positioned in a way to center the motif area in the
320
+ available space.
321
+
322
+ 2. If the section contains text or other content elements,
323
+ empty space is inserted at the beginning of the section
324
+ to make sure the motif area is not covered by other
325
+ content when first reaching the section. The content
326
+ starts intersecting with the motif area only when the
327
+ reader continues scrolling.
328
+
329
+ Layout responds intelligently in such cases: If, for
330
+ example, the text of the section is positioned on the
331
+ left such that the motif area of the image can be
332
+ displayed completely on the right, no additional space
333
+ will be inserted at the beginning of the section.
334
+
335
+ You can edit the motif area of a background image via the
336
+ "Select motif area" menu item of the "Background image"
337
+ field in the section settings.
338
+ outline:
339
+ menu_item: Chapter, Sections, Content Elements
340
+ text: "# Chapter, Sections, Content Elements\n\nA Pageflow consists of one or more **chapters**, which\ncan contain several **sections** each. For each section\na background (e.g. a picture or a video loop) can be used\nwhich is displayed while the reader is within the section.\n\nSections contain **content elements**, which\ncan be of different types (e.g. text, images,\nvideos, charts). They build the actual\ncontent of the entry through which the reader scrolls.\n\nTo insert content elements, first click on **\"New\nChapter \"** to create a first chapter. If you click on the\nchapter header, you can specify the title and a description\nthat should appear in the navigation bar.\n\nNext, click **\"New Section \"** to add a section to the chapter. \nIn the preview on the left side a selection rectangle is now shown \naround the new section. In the sidebar you can edit the options \nof the section. Here you can set a picture or a colour as background for the section.\n\nDetails can be found under: [Section Options](#pageflow_scrolled.help_entries.sections)\n\nThe section already contains a text block. Click on the text to edit it. With a click in the empty area next to the text, you can select the section again.\n\nWhen the section is selected, a plus button with the caption **\"Add new element \"** is displayed below the last element. If you click on it, you can choose what type of content element you want to insert. When a content element is selected by clicking on it, its settings can be edited. For details on the available content elements, see: [Content Elements](#pageflow_scrolled.help_entries.content_elements)\n\nAt the top and bottom of the selection rectangle around a content element there are also plus buttons, which can be used to insert further elements before or after the selected element.."
341
+ overview:
342
+ menu_item: Overview
343
+ text: |-
344
+ # Overview
345
+
346
+ This is the editor for editing pageflows. With its split screen it allows direct preview during editing, shows changes to the text or newly selected files immediately and saves them automatically.
347
+
348
+ ## Title and options
349
+
350
+ Under "Title and options" you can set basic parameters of the appearance, as well as title, language, imprint etc. For this purpose, you can define texts that are to be displayed when sharing the article via social media services.
351
+
352
+ Details can be found under: [Title and Options](#pageflow_scrolled.help_entries.meta_data)
353
+
354
+ ## Manage files
355
+
356
+ Under "Manage files" you upload the media files to be used in the pageflow. You can also reuse already uploaded videos, photos and audios here.
357
+
358
+ Details can be found under: [Manage Files](#pageflow.help_entries.files)
359
+
360
+ ## Outline
361
+
362
+ Via the "Outline" you can add chapters and sections, i.e. edit the actual content. You can also re-sort sections and chapters at any time using drag & drop.
363
+
364
+ Details can be found under: [Chapters and Sections](#pageflow_scrolled.help_entries.outline)
365
+
366
+ ## Phone Preview
367
+
368
+ The switch at the bottom of the sidebar next to the help button can be used to switch to the phone preview. This allows you to test how your entry looks and works in portrait format.
369
+ sections:
370
+ menu_item: Section Options
371
+ text: |-
372
+ # Section Options
373
+
374
+ A click in an empty area of a section will display a selection rectangle around the section. On the right side of the selection rectangle you will find a button with a pencil icon that allows you to edit the options of the section in the sidebar.
375
+
376
+ ## Layout
377
+
378
+ The **Foreground Positioning** option allows you to select how the contents of the section should be arranged horizontally. For example, if the background of the section is on the right side, text and content elements can be positioned on the left side and vice versa. For backgrounds in the total or a centred motif, the content elements can be positioned in the middle.
379
+
380
+ By selecting a **gradient function**, a sufficient contrast between text and background can be ensured. With the **shadow**, the background is darkened or lightened with a colour gradient. With the **Card** setting, the content elements are displayed on a surface with rounded corners.
381
+
382
+ ## Background
383
+
384
+ Either an **image**, a **colour** or a **video loop** can be displayed in the background of the section. For background images and video, the important (to be emphasised, essential) part of the image can be marked. This motif area is then initially not covered by the scrolling foreground in both desktop and mobile device displays. Further information about the "motif areas" here.
385
+
386
+ The **Background image (portrait)** option can be used to optionally specify an alternative image to be used if the screen aspect ratio of a terminal device is higher than wide, for example on smartphones and tablets in portrait mode. The image can be configured as an alternative to the background image in landscape mode, from which otherwise important parts might be cut off.
387
+
388
+ ## Atmo Audio
389
+
390
+ With the **"Atmo"**, each section can play sound in the background, regardless of the content element. It can be determined whether a sound can only be heard in one section or continues over several sections without interruption. Simply select the same audio file for the following sections under **Options** as Atmo. In this way chapters can be acoustically separated from each other and coherent pages can be interwoven more strongly.
391
+
392
+ When playing audio and video, you can also select whether the background sound should continue to play normally or more quietly during media playback, or whether it should fade out completely. The setting of the ambience sounds can be accessed on each page via the **Options** tab. If the atmosphere disturbs you while editing your entry in the editor, you can temporarily mute it with the key combination **Alt + a**. To reactivate the Atmo, simply press **Alt + a** again.
393
+
394
+
395
+ ## Transitions
396
+
397
+ For each section a transition effect to the next section can be selected. The transition has a different effect on the background and the foreground. To set the transition from the currently selected section to the next, **click in the background of the section** and then on the **arrow button** in the upper right corner. The following **transitions** are available
398
+
399
+ ## Crossfade
400
+
401
+ Soft fade from section A to section B.
402
+
403
+ ## Scroll in/out
404
+
405
+ Both sections are scrolled in and out.
406
+
407
+ ## Overlay
408
+
409
+ Section B overlays section A from below.
410
+
411
+ ## Expose
412
+
413
+ Section A moves up as you scroll and exposes the section B below.
414
+
415
+ ## Scrolling with static backgrounds
416
+
417
+ Section B scrolls over the static section A.
418
+
419
+ The selected setting always defines the transition from the previous to the currently selected section. The transition affects the background and foreground differently. The **Cross-Fade All** and **Cross-Fade Background Only** effects are only available when the **Use Full Viewport-Height** option is enabled.
420
+ inline_editing:
421
+ add_content_element: Add new element
422
+ cancel: Cancel
423
+ drag_content_element: Drag to move element
424
+ edit_section_transition_after: Edit section transition
425
+ edit_section_transition_before: Edit section transition
426
+ external_links:
427
+ open_in_new_tab: Open in new tab
428
+ open_in_new_tab_message: Opening in same tab is disabled inside the editor
429
+ formats:
430
+ block_quote: Block quote
431
+ bold: Bold
432
+ bulleted_list: Bulleted list
433
+ heading: Heading
434
+ italic: Italic
435
+ ordered_list: Ordered list
436
+ paragraph: Paragraph
437
+ strikethrough: Strikethrough
438
+ underline: Underline
439
+ insert_content_element:
440
+ after: Insert new element below
441
+ before: Insert new element above
442
+ insert_link: Insert link
443
+ remove_link: Remove link
444
+ select_content_element: Select element
445
+ select_section: Select section
446
+ type_heading: Heading
447
+ type_text: Type some text
448
+ type_title: Title
449
+ url_placeholder: Type or paste URL
450
+ public:
451
+ chart:
452
+ default_title: Interactive chart
453
+ languages:
454
+ ar: Arabic
455
+ cs: Czech
456
+ de: German
457
+ dk: Danish
458
+ el: Greek
459
+ en: English
460
+ es: Spanish
461
+ fi: Finnish
462
+ fr: French
463
+ fy: Frisian
464
+ hi: Hindi
465
+ it: Italian
466
+ ja: Japanese
467
+ lb: Letzeburgesch
468
+ nb: Norsk Bokmål
469
+ nl: Dutch
470
+ nn: Norsk Nynorsk
471
+ 'no': Norsk
472
+ pl: Polish
473
+ pt: Portuguese
474
+ rm: Romansh
475
+ ru: Russian
476
+ se: Northern Sami
477
+ sr: Serbian
478
+ sv: Swedish
479
+ tr: Turkish
480
+ unknown: "(Unknown)"
481
+ zh: Chinese
482
+ navigation:
483
+ chapter: Chapter %{number}
484
+ close_mobile_menu: close chapter overview
485
+ legal_info: Imprint
486
+ mute: Mute sound
487
+ open_mobile_menu: Open chapter overview
488
+ share: Share
489
+ unmute: Unmute sound
490
+ navigation_skip_links:
491
+ content: To the content
492
+ player_controls:
493
+ pause: Pause
494
+ play: Play
495
+ progress: 'Timeline. Current time: %{currentTime}. Duration: %{duration}'
496
+ quality: Quality
497
+ text_tracks: Subtitles
498
+ sound_disclaimer:
499
+ help_muted: This site works best with sound turned on. Click here to activate sound.
500
+ help_unmuted: Sound can be muted again using the speaker icon in the navigation.
501
+ text_track_modes:
502
+ auto: Auto (%{label})
503
+ auto_off: Auto (Off)
504
+ none: false
505
+ third_party_consent:
506
+ confirm: Okay
507
+ opt_in_prompt:
508
+ datawrapper: I agree with being shown Datawrapper graphs.
509
+ video: I agree with being shown videos from external providers.
510
+ opt_out:
511
+ prompt: To opt out of displaying external embeds, change your settings %{link}.
512
+ prompt_link: here
513
+ video_qualities:
514
+ annotations:
515
+ 4k: 4K
516
+ fullhd: HD
517
+ medium: HD
518
+ labels:
519
+ 4k: 2160p
520
+ auto: Auto
521
+ fullhd: 1080p
522
+ medium: 720p