Jump to content

UX nightmare: nested modals in theme (default & Reno)


steveooo
 Share

Recommended Posts

Hello guys,

I am using some nested PageTables and with every PageTable field the user clicks on, a modal window appears. Because every modal window's width & height are not 100%, every nesting step shrinks the window.

inception.png

Does someone have any solution for this problem?

Best wishes,

steveooo

Link to comment
Share on other sites

I was just overriding values in the dev tools (inspector). Unfortunately I have no PW install where there are nested lightboxes but just repeat the second half of the gif 2-3 times and you got the idea how it would look :)

The easiest way I guess is to add a custom stylesheet with the overriden values using this module:

http://modules.processwire.com/modules/admin-custom-files/

  • Like 1
Link to comment
Share on other sites

This kinda works:

Default theme:

post-3156-0-03912700-1447894399_thumb.gi

Reno theme:

post-3156-0-61749800-1447894409_thumb.gi

Add this to "/site/ready.php":

<?php

$page->addHookAfter('render', function ($event) {

    if ($this->page->template != 'admin') {
        return;
    }

    $styles = <<< HTML
    <style>
    .ui-widget-overlay + div.ui-dialog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
    .pw-modal-window {
        position: absolute !important;
        width: 100% !important;
        min-height: 100% !important;
    }
    .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        margin: -3.35em 3em 0 0;
    }
    body.AdminThemeDefault .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
        margin: -2.66em 3em 0 0;
    }
    html:not(.modal) {
        height: 100%;
        overflow: hidden;
    }
    body:not(.modal) {
        overflow: auto;
        height: 100%;;
    }
    html.modal {
        height: 100% !important;
        overflow: hidden !important;
    }
    body.modal {
        overflow: auto !important;
        max-height: 100% !important;
        height: initial !important;
        margin-top: 0;
    }
    body.modal .ui-dialog .ui-dialog-titlebar {
        border-top: 1px solid rgba(0, 0, 0, 0.25);
    }
    </style>
HTML;

    $event->return = str_replace('</head>', $styles . PHP_EOL . '</head>', $event->return);
});

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...