steveooo

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

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

Share this post


Link to post
Share on other sites

Hi steveooo -

do you intend the users to nest the modals, or do you want to prevent the nesting? Are you asking for a way to make the successive modals to max out?

Share this post


Link to post
Share on other sites

What I can think of as a quick fix to make the overlay 100% opaque and set modal sizes equal using custom CSS with a hook, perhaps in ready.php.

Share this post


Link to post
Share on other sites

Hi,

well. I do not want modal windows. Technically, they can be "modals" but 100% width and 100% height so do not see a window in a window.

How can I hook into that? Any working code? :)

Share this post


Link to post
Share on other sites

You could ask Ryan to make InputfieldPageTable::getItemEditURL hookable. Then you could simply remove the "modal=1". Currently you could hook after InputfieldPageTable::renderTable and use string replacement to get rid of "&modal=1" on the whole table.

Share this post


Link to post
Share on other sites

Playing with the dev tools it's easy to force the fullscreen modal by tweaking some css:

post-3156-0-50519900-1447874630_thumb.gi

But would you know on which page you are if 3-4 lightbox layers are on top of each other?

  • Like 1

Share this post


Link to post
Share on other sites

Hi. How have you done this? Could you make a screencast of nested windows (not just the first modal window?)

Thanks!

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By hollyvalero
      I like the Reno wrapper for the admin.  After looking at UIKit, then switching back to Reno, the back end is all Reno but the basic back end login page /processwire or /whateveryoucallit is displaying the original Default instead of the Reno login.  I realize this is a first world problem, but I can't seem to reinstate the Reno login.  Tried installing/uninstalling...  It's not the same page code and it's not the same style sheets... I can't uninstall the default ...what am I doing wrong?

    • By Kai
      Hi community, 
      Since googling "free processwire themes" does not bring up results, I release my former website template open source! In the hope that it will help many people to get started with Processwire - or just to simply test it.
      Download: https://github.com/q2apro/processwire-template
      PW-Featured here: http://processwire.com/about/sites/list/memelpower-we-create-business-websites/ 
       
      Free Processwire Template
      Free Processwire Template - built for a web development agency - now open sourced.
      Demo
      Online at web archive (some images missing but working): https://web.archive.org/web/20171028072758/https://www.memelpower.com/
      See also folder demos/screenshots.
      Installation
      Copy all files to your webserver. Create a database and import the file database/db_import.sql Edit the file wire/config.php and enter your database credentials. Go to yoursite.com/wire/ and login. Login: admin and Password: herewegocheckitout22 The template you find in site/templates
      IMPORTANT
      Copyright of Images by Kai Noack. If you use the template you MUST replace or remove all images of people and organisations. The logos used are also copyright protected.
      Donate
      If you like what you received, you can show your appreciation by a donation: https://www.paypal.me/q2apro
      Template License
      The source code of the template is free and open source. Do whatever you like with it.



    • By carrdesigns
      In the admin, I am trying to access data from a page that contains an inputfieldand autofill that data into the modal edit window for a new entry.
      For instance, I have a template which contains a PageTable field. When I add a new entry to the PageTable, I want to capture the ID from the originating admin page and add it to a field in the edit modal as a way of linking the new entry back to the originating page. The new PageTable entries are NOT children of the originating page, and cannot be for structural reasons. I have attached an image which I hope will help to clarify the basic result I want to achieve.
      Is there a practical means of accomplishing this? I've been able to achieve something similar with the ConnectPageFields module, but it does not work with PageTable fields. Any input would be much appreciated.

    • By fbg13
      Lets discuss the new admin theme, there has been very little talk about it, a few questions about its status and some simple designs by a few users.
      Have you played with it? Do you like it? Do you dislike it? Of course I'm not talking about its design, but the way its structured, how it works and the features it offers so far.
      ------------------------------
      I'm working on a purple color scheme for it and it turned out quite well (imo), but one thing I dislike is the use of iframes. I haven't used iframes before so it might be just me, but I'm struggling with them when it comes to javascript.
      When iframes are used all scripts are loaded in every frame, which can lead to unexpected results.
      Javascript is an easy way to add, remove, move etc. elements in the admin, but the iframes complicate things.
      What are your thoughts? Is it just me?
      Here's a screenshot of the purple theme: