4 files changed, 62 insertions, 21 deletions

diff --git a/app/views/custom/page_templates/public/chapter_detail.html.erb b/app/views/custom/page_templates/public/chapter_detail.html.erb
index f47353c..c4c2598 100644
--- a/app/views/custom/page_templates/public/chapter_detail.html.erb
+++ b/app/views/custom/page_templates/public/chapter_detail.html.erb
@@ -1,5 +1,6 @@
 <div class="article" lang="<%= @page.effective_lang %>">
   <h2 class="headline"><%= @page.title %></h2>
+  <%= headline_image %>
   <% if @page.node.external_url.present? %>
     <div class="chapter_url"><%= link_to @page.node.external_url, @page.node.external_url, target: '_blank', rel: 'noopener' %></div>
   <% end %>
diff --git a/app/views/custom/partials/_chapter.html.erb b/app/views/custom/partials/_chapter.html.erb
index 805559b..47f3950 100644
--- a/app/views/custom/partials/_chapter.html.erb
+++ b/app/views/custom/partials/_chapter.html.erb
@@ -1,19 +1,26 @@
 <div class="article_partial chapter_partial" lang="<%= page.effective_lang %>">
-  <h2 class="headline"><%= link_to_path page.title, page.node.unique_name %></h2>
-  <% if page.abstract.present? %>
-    <div class="chapter_location"><%= page.abstract %></div>
-  <% end %>
-  <% if page.node.external_url.present? %>
-    <div class="chapter_url"><%= link_to page.node.external_url, page.node.external_url, target: '_blank', rel: 'noopener' %></div>
-  <% end %>
-  <% open_days = page.node.events.tagged_with('open-day').order(:start_time) %>
-  <% if open_days.any? %>
-    <div class="chapter_open_days">
-      <span class="open_days_label"><%= t(:open_days_label) %>: </span>
-      <% open_days.each do |event| %>
-        <span class="event_schedule"><%= event_schedule_text(event) %></span>
+  <div class="chapter_partial_layout">
+    <% if page.assets.images.any? %>
+      <%= link_to_path image_tag(page.assets.images.first.upload.url(:thumb), :alt => ""), page.node.unique_name, class: "chapter_thumbnail" %>
+    <% end %>
+    <div class="chapter_partial_content">
+      <h2 class="headline"><%= link_to_path page.title, page.node.unique_name %></h2>
+      <% if page.abstract.present? %>
+        <div class="chapter_location"><%= page.abstract %></div>
       <% end %>
+      <% if page.node.external_url.present? %>
+        <div class="chapter_url"><%= link_to page.node.external_url, page.node.external_url, target: '_blank', rel: 'noopener' %></div>
+      <% end %>
+      <% open_days = page.node.events.tagged_with('open-day').order(:start_time) %>
+      <% if open_days.any? %>
+        <div class="chapter_open_days">
+          <span class="open_days_label"><%= t(:open_days_label) %>: </span>
+          <% open_days.each do |event| %>
+            <span class="event_schedule"><%= event_schedule_text(event) %></span>
+          <% end %>
+        </div>
+      <% end %>
+      <p class="excerpt"><%= sanitize page.body %></p>
     </div>
-  <% end %>
-  <p class="excerpt"><%= sanitize page.body %></p>
+  </div>
 </div>
diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index e0e51d8..9506995 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -116,10 +116,27 @@
     <div class="node_content"><%= d.text_area :abstract %></div>
 
     <div class="node_description">Body</div>
-    <div class="node_content"><%= d.text_area :body, :class => 'with_editor' %></div>
+    <div class="body_toolbar_row">
+      <button type="button" id="preview_toggle" class="view_toggle" aria-pressed="false" aria-label="Toggle live preview" title="Toggle live preview">
+        <%= icon("layout-sidebar-right", library: "tabler", "aria-hidden": true) %> <span>Live preview</span>
+      </button>
+      <button type="button" id="preview_force_render" class="view_toggle" style="display:none" aria-label="Force preview render" title="Force preview render">
+        <%= icon("refresh", library: "tabler", "aria-hidden": true) %> <span>Force refresh</span>
+      </button>
+    </div>
+
+    <div id="editor_and_preview">
+      <div class="preview_content">
+        <div class="node_content"><%= d.text_area :body, :class => 'with_editor' %></div>
+      </div>
+      <div id="preview_panel" style="display:none">
+        <iframe id="live_preview_iframe" title="Live preview" data-src="<%= preview_page_path(@page, :locale => I18n.default_locale) %>"></iframe>
+      </div>
+    </div>
+  </div>
   <% end %>
 
-  <div class="node_action_bar node_action_bar_save">
+  <div class="node_action_bar">
     <%= f.submit 'Save Draft' %>
     <%= f.submit 'Save + Unlock + Exit' %>
   </div>
diff --git a/app/views/page_translations/edit.html.erb b/app/views/page_translations/edit.html.erb
index 981fb74..0f64d40 100644
--- a/app/views/page_translations/edit.html.erb
+++ b/app/views/page_translations/edit.html.erb
@@ -20,8 +20,8 @@
 </div>
 
 <div id="page_editor">
-    <%= form_with url: node_translation_path(@node, @locale), method: :patch, local: true, id: "translation_edit_form",
-          data: { autosave_url: autosave_node_translation_path(@node, @locale), show_url: node_path(@node) } do |f| %>
+  <%= form_with url: node_translation_path(@node, @locale), method: :patch, local: true, id: "translation_edit_form",
+        data: { autosave_url: autosave_node_translation_path(@node, @locale), show_url: node_path(@node) } do |f| %>
     <div id="content">
       <div class="node_description">Title</div>
       <div class="node_content">
@@ -34,8 +34,24 @@
       </div>
 
       <div class="node_description">Body</div>
-      <div class="node_content">
-        <%= text_area_tag "page[body]", @translation&.body, :class => 'with_editor' %>
+      <div class="body_toolbar_row">
+        <button type="button" id="preview_toggle" class="view_toggle" aria-pressed="false" aria-label="Toggle live preview" title="Toggle live preview">
+          <%= icon("layout-sidebar-right", library: "tabler", "aria-hidden": true) %> <span>Live preview</span>
+        </button>
+        <button type="button" id="preview_force_render" class="view_toggle" style="display:none" aria-label="Force preview render" title="Force preview render">
+          <%= icon("refresh", library: "tabler", "aria-hidden": true) %> <span>Force refresh</span>
+        </button>
+      </div>
+
+      <div id="editor_and_preview">
+        <div class="preview_content">
+          <div class="node_content">
+            <%= text_area_tag "page[body]", @translation&.body, :class => 'with_editor' %>
+          </div>
+        </div>
+        <div id="preview_panel" style="display:none">
+          <iframe id="live_preview_iframe" title="Live preview" data-src="<%= preview_page_path(@page, :locale => @locale) %>"></iframe>
+        </div>
       </div>
     </div>
   <% end %>