From c85381eccb469628cac673954d62bf09f1fb4c2d Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 24 Oct 2019 14:39:19 +0200
Subject: [PATCH] layout: Render basic modal markup

---
 application/layouts/scripts/layout.phtml | 13 +++++++++++
 public/css/icinga/modal.less             | 29 +++++++++++++-----------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/application/layouts/scripts/layout.phtml b/application/layouts/scripts/layout.phtml
index 092e13516..9cc7ad545 100644
--- a/application/layouts/scripts/layout.phtml
+++ b/application/layouts/scripts/layout.phtml
@@ -74,6 +74,19 @@ $innerLayoutScript = $this->layout()->innerLayout . '.phtml';
         <?= $this->icon('angle-double-up', $this->translate('Collapse'), ['class' => 'collapse-icon']) ?>
     </button>
 </div>
+<div id="modal-ghost">
+    <div>
+        <section class="modal-window">
+            <div class="modal-header">
+                <h1></h1>
+                <button type="button"><?= $this->icon('cancel') ?></button>
+            </div>
+            <div class="modal-area">
+                <div id="modal-content" data-base-target="modal-content" tabindex data-no-icinga-ajax></div>
+            </div>
+        </section>
+    </div>
+</div>
 <script type="text/javascript" src="<?= $this->href($jsfile) ?>"></script>
 <script type="text/javascript">
 window.name = '<?= $this->protectId('Icinga') ?>';
diff --git a/public/css/icinga/modal.less b/public/css/icinga/modal.less
index 3c94ddb4c..c2b4a3a0a 100644
--- a/public/css/icinga/modal.less
+++ b/public/css/icinga/modal.less
@@ -1,4 +1,8 @@
-#modal-overlay {
+#modal-ghost {
+  display: none;
+}
+
+#layout > #modal {
   position: fixed;
   top: 0;
   right: 0;
@@ -11,7 +15,7 @@
   justify-content: center;
   opacity: 0;
   pointer-events: none;
-  transition: opacity .2s ease-in;
+  transition: opacity .2s ease-in; // This is coupled with a `setTimout` in modal.js
   z-index: 1000;
 
   &.active {
@@ -25,7 +29,7 @@
   position: relative;
   text-align: center;
 
-  > .close {
+  > button {
     position: absolute;
     top: .5em;
     left: .5em;
@@ -45,7 +49,7 @@
     appearance: none;
   }
 
-  > .close > i {
+  > button > i {
     position: absolute;
     left: 0.25em;
     top: 0;
@@ -53,17 +57,17 @@
     font-size: .7em;
   }
 
-  > .close > .icon:before {
+  > button > .icon:before {
     margin: 0;
   }
 }
 
-.modal-title {
+.modal-header h1 {
   padding: .25em;
   margin: 0;
 }
 
-#modal-container {
+.modal-window {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
@@ -71,16 +75,11 @@
   min-height: 40vh;
   max-width: 80%;
   max-height: 95%;
-}
-
-.modal-window {
   align-items: stretch;
   background: white;
   border-radius: .5em;
   box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6);
-  display: inline-flex;
   flex: 1;
-  flex-direction: column;
   overflow: hidden;
 }
 
@@ -128,11 +127,15 @@
   }
 }
 
-.modal-content {
+#modal-content {
   display: flex;
   flex: 10;
   flex-direction: column;
   justify-content: stretch;
+
+  > .content {
+    padding: 1em;
+  }
 }
 
 .modal-search {