Jump to content

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


Go to solution Solved by tpr,

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 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.

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
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
Link to post
Share on other sites
  • Solution

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 post
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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Kai
      REMOVED Free Processwire Template
    • By jploch
      Admin Theme Canvas
      A minimal admin theme with optimised page editor UI, based on Uikit 3.
      Currently this is close to stable, but users are advised to be cautious and test thoroughly.
      This theme is tested in all major Browsers including IE 11, Edge (>85), Chrome (>85), Firefox (>81), Safari (>11).

      If you find any bugs or have ideas for improvements, feel free to post your feedback.
      Download from Github
      Download from Modules Page
      Features
      Minimal black and white admin theme Fixed masthead navigation Direct access to page tree navigation inside page dropdown Less distraction for editors (when editing a page, the tabs are displayed as a dropdown menu inside the main navigation) Options to customise the ui Less distraction for editors

      Direct access to page tree navigation inside dropdown

      Page tree

      Options to customise the ui

      Login (inspired by AdminThemeBoss)

      Requirements
      Process Wire 3.0.100 or greater
      Installation
      Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeCanvas“ 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“ Go to your user profile page and change the theme to Admin Theme Canvas
    • By Pip
      Hi everyone, 
      Is there a way for us to replicate the "http://mydomain.com/processwire/page/edit/?id=xxx" and change the template to match my site template? 
      I'm terribly happy with the admin / backend page edit. It covers literaly everything I want to empower my non super admin user in updating pages such as validation, repeater management, file upload. 
      I wish not to allow the users to see the backend for both security and aesthetic reasons. 
      Thanks and hope to hear from you soon. 
       
    • By MateThemes
      Hello everyone!
      I use Ryan's site profile blog for my new website. Everything works great, but i am not able to change the url of the blog categories. Currently the url is root_url/categories. My client wants the url root_url/news/categories. 
      If change the url in the tab url from /categories to news/categories Processwire change it to news-categories!
      How can I change that or can I change it in the php file too?
      Thanks for your help for a beginner!
    • By Noel Boss
      Admin Theme Boss
      A light and clear theme based on Uikit 3
      Features
      Five unique color options Beautifully redesigned login screens Modern typography 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 Compatibility with AdminOnStreoids and other third party modules   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

      Smooth Green *new with 0.6.1*

       
      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
×
×
  • Create New...