tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-09-24 10:27:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

layout: Render basic modal markup

Browse Source
This commit is contained in:
Johannes Meyer 2019-10-24 14:39:19 +02:00
parent f8ef444b81
commit c85381eccb
2 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
application/layouts/scripts/layout.phtml
View File

@ -74,6 +74,19 @@ $innerLayoutScript = $this->layout()->innerLayout . '.phtml';
<?= $this->icon('angle-double-up', $this->translate('Collapse'), ['class' => 'collapse-icon']) ?> <?= $this->icon('angle-double-up', $this->translate('Collapse'), ['class' => 'collapse-icon']) ?>
</button> </button>
</div> </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" src="<?= $this->href($jsfile) ?>"></script>
<script type="text/javascript"> <script type="text/javascript">
window.name = '<?= $this->protectId('Icinga') ?>'; window.name = '<?= $this->protectId('Icinga') ?>';

29
public/css/icinga/modal.less
View File

@ -1,4 +1,8 @@
#modal-overlay { #modal-ghost {
display: none;
}
#layout > #modal {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -11,7 +15,7 @@
justify-content: center; justify-content: center;
opacity: 0; opacity: 0;
pointer-events: none; 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; z-index: 1000;
&.active { &.active {
@ -25,7 +29,7 @@
position: relative; position: relative;
text-align: center; text-align: center;
> .close { > button {
position: absolute; position: absolute;
top: .5em; top: .5em;
left: .5em; left: .5em;
@ -45,7 +49,7 @@
appearance: none; appearance: none;
} }
> .close > i { > button > i {
position: absolute; position: absolute;
left: 0.25em; left: 0.25em;
top: 0; top: 0;
@ -53,17 +57,17 @@
font-size: .7em; font-size: .7em;
} }
> .close > .icon:before { > button > .icon:before {
margin: 0; margin: 0;
} }
} }
.modal-title { .modal-header h1 {
padding: .25em; padding: .25em;
margin: 0; margin: 0;
} }
#modal-container { .modal-window {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 auto; margin: 0 auto;
@ -71,16 +75,11 @@
min-height: 40vh; min-height: 40vh;
max-width: 80%; max-width: 80%;
max-height: 95%; max-height: 95%;
}
.modal-window {
align-items: stretch; align-items: stretch;
background: white; background: white;
border-radius: .5em; border-radius: .5em;
box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6); box-shadow: 0 0 2em 0 rgba(0, 0, 0, .6);
display: inline-flex;
flex: 1; flex: 1;
flex-direction: column;
overflow: hidden; overflow: hidden;
} }
@ -128,11 +127,15 @@
} }
} }
.modal-content { #modal-content {
display: flex; display: flex;
flex: 10; flex: 10;
flex-direction: column; flex-direction: column;
justify-content: stretch; justify-content: stretch;
> .content {
padding: 1em;
}
} }
.modal-search { .modal-search {