Tidy up interactive tree chart

3 files changed, 66 insertions, 8 deletions

diff --git a/resources/views/modules/interactive-tree/chart.phtml b/resources/views/modules/interactive-tree/chart.phtml
new file mode 100644
index 0000000000..4e1e05061e
--- /dev/null
+++ b/resources/views/modules/interactive-tree/chart.phtml
@@ -0,0 +1,20 @@
+<?php
+
+use Fisharebest\Webtrees\I18N;
+
+?>
+
+<div id="<?= $name ?>_out" class="tv_out">
+    <div id="tv_tools">
+        <ul>
+            <li id="tvbCompact" class="tv_button" title="<?= I18N::translate('Use compact layout') ?>">
+            </li>
+            <li class="tv_button" id="<?= $name ?>_loading">
+                <i class="icon-loading-small"></i>
+            </li>
+        </ul>
+    </div>
+    <div id="<?= $name ?>_in" class="tv_in" dir="ltr">
+        <?= $individual ?>
+    </div>
+</div>
diff --git a/resources/views/modules/interactive-tree/page.phtml b/resources/views/modules/interactive-tree/page.phtml
new file mode 100644
index 0000000000..3802669ec0
--- /dev/null
+++ b/resources/views/modules/interactive-tree/page.phtml
@@ -0,0 +1,46 @@
+<?php use Fisharebest\Webtrees\I18N; ?>
+<?php use Fisharebest\Webtrees\View; ?>
+<?php use Fisharebest\Webtrees\Webtrees; ?>
+
+<h2 class="wt-page-title">
+    <?= $title ?>
+</h2>
+
+<form class="wt-page-options wt-page-options-compact-chart d-print-none">
+    <input type="hidden" name="route" value="module">
+    <input type="hidden" name="module" value="tree">
+    <input type="hidden" name="action" value="Chart">
+    <input type="hidden" name="ged" value="<?= e($tree->name()) ?>">
+
+    <div class="row form-group">
+        <label class="col-sm-3 col-form-label wt-page-options-label" for="xref">
+            <?= I18N::translate('Individual') ?>
+        </label>
+        <div class="col-sm-9 wt-page-options-value">
+            <?= view('components/select-individual', ['name' => 'xref', 'individual' => $individual, 'tree' => $individual->tree()]) ?>
+        </div>
+    </div>
+
+    <div class="row form-group">
+        <div class="col-sm-3 wt-page-options-label"></div>
+        <div class="col-sm-9 wt-page-options-value">
+            <input class="btn btn-primary" type="submit" value="<?= /* I18N: A button label. */
+            I18N::translate('view') ?>">
+        </div>
+    </div>
+</form>
+
+<div class="wt-page-content wt-chart wt-chart-interactive">
+    <?= $html ?>
+</div>
+
+<?php View::push('javascript') ?>
+<script src="<?= e(Webtrees::MODULES_PATH) ?>tree/js/treeview.js"></script>
+<script>
+    <?= $js ?>
+</script>
+<?php View::endpush() ?>
+
+<?php View::push('styles') ?>
+<link rel="stylesheet" type="text/css" href="<?= e(Webtrees::MODULES_PATH) ?>tree/css/treeview.css">
+<?php View::endpush() ?>
diff --git a/resources/views/modules/interactive-tree/tab.phtml b/resources/views/modules/interactive-tree/tab.phtml
index f5c60d6964..c45fbfd9ef 100644
--- a/resources/views/modules/interactive-tree/tab.phtml
+++ b/resources/views/modules/interactive-tree/tab.phtml
@@ -5,15 +5,7 @@
 </div>
 
 <?php View::push('javascript') ?>
-<script src="<?= e($treeview_js) ?>"></script>
-
 <script>
-  var newSheet=document.createElement("link");
-  newSheet.setAttribute("rel","stylesheet");
-  newSheet.setAttribute("type","text/css");
-  newSheet.setAttribute("href","<?= $treeview_css ?>");
-  document.head.appendChild(newSheet);
-
     <?= $js ?>
 </script>
 <?php View::endpush() ?>