Jump to content
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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By franctic-aerobic
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Four unique color options Beautifully redesigned login screens Modern typografy using Roboto Condensed Extended breadcrumb with edit links Extends AdminThemeUikit, so you can continue using all current and future AdminThemeUikit features Option to activate theme for all users   Updated and Releases
      There is a shiny new release page where you can subscribe to updates for new releases of AdminThemeBoss.   Color Variants:
      ProcessWire Blue


       
      Dark Black


       
      Vibrant Blue

       
      Happy Pink

      Requirements
      Requires a current ProcessWire version with AdminThemeUikit installed and activated.
      Installation
      Make sure AdminThemeUikit is activated Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeBoss“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“

      Manual Installation
      Make sure the above requirements are met Download the theme files from GitHub or the ProcessWire Modules Repository. Copy all of the files for this module into /site/modules/AdminThemeBoss/ Go to “Modules > Refresh” in your admin Click “Install“ on the “AdminThemeBoss“ Module
    • By louisstephens
      So I recently upgraded my sandbox environment to the latest master version from .62(?). I logged in and received the following error:
      "There appear to be multiple copies of module "AdminThemeUikit" on the file system."
      Unfortunately, in my haste, I removed the theme from site->modules so it doesnt exist anymore, and the theme has defaulted somewhat to the old theme. Is there a way to restore UIkit as the theme for processwire natively, or do I need to completely re-install?
    • By David Karich
      I have opened a ticket on GitHub, in which I present a modification respectively a proof of concept, which significantly improves the editing of pages, especially with long contents.
      The save buttons are always in view with this modification, and the scroll position when editing and saving is saved and restored after saving.
      You can also find a screencast and code extensions on GitHub. What do you think of that?
      Link: https://github.com/processwire/processwire-requests/issues/177
    • By kongondo
      I am trying out multi-instance support in a multi-site setup (option #1, multiple databases) on a Windows Machine (but using a LAMP stack). I am getting a Fatal error in ProcessWire.php #line 877, Failed opening required  '/F:/vhosts/sandpit.dev/wire/config.php' (include_path='.;C:\php\pear') in F:\vhosts\sandpit.dev\wire\core\ProcessWire.php on line 877
      I am using the following API
      $path = "F:/vhosts/sandpit.dev/site-mediamanager/"; // OR // $path = "F:\\vhosts\\sandpit.dev\\site-mediamanager\\"; $url = "http://mediamanager.sandpit.local/"; $site = new ProcessWire($path, $url); Here is Line #877
      require("$rootPath/$wireDir/config.php"); In my code, $path is an absolute path on the windows machine. In the above example, I want ProcessWire to find the /site-mediamanager/config.php, which is a multi-site running off one Wire powered through the main /site/.
      As you can see in the error, ProcessWire is adding an extra forward slash to the path, i.e. 
      '/F:/vhosts/sandpit.dev/wire/config.php' 
      instead of 
      'F:/vhosts/sandpit.dev/wire/config.php' 
      which obviously fails. I have traced the origin to line #784 in ProcessWire.php
      $rootPath = '/' . implode('/', $parts); // remove siteDir from rootPath The pre-pended / causes the error. Remove that and multi-instance works fine in my environment.
      Before I report this as a bug, has anyone ran into this issue? Alternatively, could someone on a Windows machine please test the multi-instance feature for me? Maybe even someone using an absolute path on any machine? Preferably test in a multi-site setup (option #1). If this is a bug, it would be nice if it gets fixed before the imminent master release.
      PW version 3.0.85 (but also tested on the latest dev version).
       
      Thanks.
×
×
  • Create New...