From 9a4c26f13f0df5954c9af2d95f8e54b677cda575 Mon Sep 17 00:00:00 2001
From: Matthias Mees <mm@yellowled.de>
Date: Fri, 9 Sep 2016 16:43:15 +0200
Subject: [PATCH] Use improved backend preview iframe height calculation method

Applied to all recommended themes in the core.

References #420
---
 templates/2k11/preview_iframe.tpl       | 7 ++-----
 templates/clean-blog/preview_iframe.tpl | 7 ++-----
 templates/next/preview_iframe.tpl       | 6 +++---
 templates/timeline/preview_iframe.tpl   | 7 ++-----
 4 files changed, 9 insertions(+), 18 deletions(-)
diff --git a/templates/2k11/preview_iframe.tpl b/templates/2k11/preview_iframe.tpl
index 91afbf2d..ff3c9d2c 100644
--- a/templates/2k11/preview_iframe.tpl
+++ b/templates/2k11/preview_iframe.tpl
@@ -32,10 +32,7 @@
     <script src="{serendipity_getFile file='admin/serendipity_editor.js'}"></script>
     <script>
         window.onload = function() {ldelim}
-            parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('content').offsetHeight
-                                                                              + parseInt(document.getElementById('content').style.marginTop)
-                                                                              + parseInt(document.getElementById('content').style.marginBottom)
-                                                                              + 'px';
+            parent.document.getElementById('serendipity_iframe').style.height = document.querySelector('html').offsetHeight + 'px';
             parent.document.getElementById('serendipity_iframe').scrolling    = 'no';
             parent.document.getElementById('serendipity_iframe').style.border = 0;
         {rdelim}
@@ -44,7 +41,7 @@
 <body{if $template_option.webfonts != 'none'} class="{$template_option.webfonts}"{/if}>
 <div id="page" class="clearfix container">
     <div class="clearfix{if $leftSidebarElements > 0 && $rightSidebarElements > 0} col3{elseif $leftSidebarElements > 0 && $rightSidebarElements == 0} col2l{else} col2r{/if}">
-        <main id="content" style="padding: 1em 0; margin: 0;">
+        <main id="content"{if $template_option.imgstyle != 'none'} class="{$template_option.imgstyle}"{/if}>
         {if $mode == 'preview'}
             <div class="clearfix">
         {elseif $mode == 'save'}
diff --git a/templates/clean-blog/preview_iframe.tpl b/templates/clean-blog/preview_iframe.tpl
index 8468b610..cb2841cd 100644
--- a/templates/clean-blog/preview_iframe.tpl
+++ b/templates/clean-blog/preview_iframe.tpl
@@ -28,17 +28,14 @@
     <script src="{serendipity_getFile file='admin/serendipity_editor.js'}"></script>
     <script>
         window.onload = function() {ldelim}
-            parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('maincontent').offsetHeight
-                                                                              + parseInt(document.getElementById('maincontent').style.marginTop)
-                                                                              + parseInt(document.getElementById('maincontent').style.marginBottom)
-                                                                              + 'px';
+            parent.document.getElementById('serendipity_iframe').style.height = document.querySelector('html').offsetHeight + 'px';
             parent.document.getElementById('serendipity_iframe').scrolling    = 'no';
             parent.document.getElementById('serendipity_iframe').style.border = 0;
         {rdelim}
     </script>
 </head>
 <body>
-    <main id="maincontent" class="container" role="main" style="margin: 0 auto;">
+    <main id="maincontent" class="container" role="main">
         <div class="row">
             <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                 {if $mode == 'preview'}
diff --git a/templates/next/preview_iframe.tpl b/templates/next/preview_iframe.tpl
index 3121cfd4..ce1c4763 100644
--- a/templates/next/preview_iframe.tpl
+++ b/templates/next/preview_iframe.tpl
@@ -1,6 +1,6 @@
 <!doctype html>
-<!--[if IE 8 ]>    <html id="preview" class="no-js lt-ie9" lang="{$lang}"> <![endif]-->
-<!--[if gt IE 8]><!--> <html id="preview_iframe" class="no-js" lang="{$lang}"> <!--<![endif]-->
+<!--[if IE 8 ]>    <html class="no-js lt-ie9" lang="{$lang}"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="{$lang}"> <!--<![endif]-->
 <head>
     <meta charset="{$head_charset}">
     <title>{$CONST.SERENDIPITY_ADMIN_SUITE}</title>
@@ -33,7 +33,7 @@
     <script src="{serendipity_getFile file='admin/serendipity_editor.js'}"></script>
 <script type="text/javascript">
 window.onload = function() {ldelim}
-    parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('preview_iframe').offsetHeight + 'px';
+    parent.document.getElementById('serendipity_iframe').style.height = document.querySelector('html').offsetHeight + 'px';
     parent.document.getElementById('serendipity_iframe').scrolling    = 'no';
     parent.document.getElementById('serendipity_iframe').style.border = 0;
 {rdelim}
diff --git a/templates/timeline/preview_iframe.tpl b/templates/timeline/preview_iframe.tpl
index 9af1a110..d38eea1a 100644
--- a/templates/timeline/preview_iframe.tpl
+++ b/templates/timeline/preview_iframe.tpl
@@ -23,17 +23,14 @@
     <script src="{serendipity_getFile file='admin/serendipity_editor.js'}"></script>
     <script>
         window.onload = function() {ldelim}
-            parent.document.getElementById('serendipity_iframe').style.height = document.getElementById('maincontent').offsetHeight
-                                                                              + parseInt(document.getElementById('maincontent').style.marginTop)
-                                                                              + parseInt(document.getElementById('maincontent').style.marginBottom)
-                                                                              + 'px';
+            parent.document.getElementById('serendipity_iframe').style.height = document.querySelector('html').offsetHeight + 'px';
             parent.document.getElementById('serendipity_iframe').scrolling    = 'no';
             parent.document.getElementById('serendipity_iframe').style.border = 0;
         {rdelim}
     </script>
 </head>
 <body>
-    <main id="maincontent" class="container content" role="main" style="margin: 0 auto;">
+    <main id="maincontent" class="container content" role="main">
         <div class="row">
             <div class="col-md-9">
                 {if $mode == 'preview'}
