Jump to content
tpr

AdminOnSteroids

Recommended Posts

I couldn't reproduce (latest Chrome and Firefox). Could you check what CSS rule is causing this? Apparently the page title is there but not visible because the page IDs are not aligned to the left. It could be also handy to see the markup of a failing pagelist item.

  • Like 1

Share this post


Link to post
Share on other sites

Well, I tested the admin with the following browsers:

Opera - Version:58.0.3135.107

Chrome - Version 73.0.3683.86 (Official Build) (64-bit)

Here is the markup of one of the hidden pages 404 Not found:

Spoiler

<div class="PageListItem PageListTemplate_404 PageListNoChildren PageListID27 PageListStatusHidden secondary PageListStatusSystem" data-numtotal="0" data-numchild="0"><a href="#" title="/http404/" class="PageListPage label"><span class="label_title" data-pid="27">404 Not Found</span></a><span class="PageListNumChildren detail"></span><ul class="PageListActions actions"><li class="PageListActionEdit"><a href="/admin/page/edit/?id=27" class="pw-modal pw-modal-large pw-modal-longclick" data-buttons="#ProcessPageEdit > .Inputfields > .InputfieldSubmit .ui-button">Edit</a></li><li class="PageListActionView"><a href="http://quebec.pw/http404/" class="pw-modal pw-modal-large pw-modal-longclick">View</a></li><li class="PageListActionNew"><a href="/admin/page/add/?parent_id=27">New</a></li><li class="PageListActionMove"><a href="#">Move</a></li><li class="PageListActionEdit"><a href="http://quebec.pw/admin/setup/template/edit?id=43" class="pw-modal pw-modal-large pw-modal-longclick" data-buttons="#ProcessPageEdit > .Inputfields > .InputfieldSubmit .ui-button">404</a></li><li class="PageListActionExtras ui-priority-secondary"><a href="#" class="clickExtras"><i class="fa fa-angle-right"></i></a></li></ul></div>

 

Here is a preview of all the rows to compare classes:

image.thumb.png.fb4ea83897b9a4dd467242d6862bc207.png

I checked a few classes and if I change the opacity from 0.6 to any number and back - it shows properly:

.PageList .PageListStatusHidden>a.PageListPage {
    opacity: .5;
}

Not sure why, but will test to remove all other modules to make sure that the issue is not caused by one of them.

P.S. To be sure it is not a local OS (Server 2016) or Browser issue, tested on another PC with Windows 10 and the result is still the same. As far as it is quite late now here, I will try to get an earlier version of the AOS and see if the issue would appear as well. Will keep you updated and thanks for checking it up.

  • Like 1

Share this post


Link to post
Share on other sites

So changing the opacity back and forth fixes it? That is weird, does it happen in incognito mode too?

Share this post


Link to post
Share on other sites

So, I've tried this morning to remove all the modules but the AOS and the hidden items still were hidden unless I move the mouse over them, but then after a page reload, they "hide" again.

I did test it in Incognito on both computers and still see the same thing.

After replacing the AOS 2.0.15 version with the 2.0.14 - it is all working fine so there must be something that is happening with the new version, but what and where is not clear yet. At least it is not related to my browser, computer and even the local server prior to the fact that it worked like a charm under 2.0.14 and it still does.

P.S. After an upgrade from 2.0.14 to 2.0.15 - the hidden pages get "hidden" again.

  • Like 1

Share this post


Link to post
Share on other sites

@adrian Is it happening for you with 2.0.14? As with me it just started doing the same issue as you've reported, however with 2.0.14 it works fine. And as I said, what is even stranger, if I remove the class for hidden items in developers mode and put it back, it starts working, so it is only on the page loading that it happens. I know I should not say that, but it is a bit of a relief as it is not local on my side and I am not going crazy. Go figure 😉

P.S. Somehow it seems like I was wrong with the assumption about 2.0.14 as well as the admin was showing properly, but I forgot that I've disabled the show ID option. So it is not working with both unfortunately and I guess until it is clear what is causing, I could just live without showing the ID beside the page.

Share this post


Link to post
Share on other sites

@tpr - while we're at it, I am been having issues with page scrolling - when there are lots of fields or templates such that the dropdown menu extends beyond the viewport height, AOS prevents me from scrolling the page to access those items towards the bottom of the list. It is due to the UiKit sticky header setting.

Share this post


Link to post
Share on other sites

Well I don't know how could I fix the long menu issue, sticky works just this way.

@MilenKo Are you also on Mac? As I know adrian also is.

  • Like 1

Share this post


Link to post
Share on other sites

@tpr Nope, I am on Windows as I've mentioned it earlier (Server 2016 & Windows 10 latest upgrades) but testing it on Linux did the same. I can test it on Mac as well but am not sure that would fix it prior to the fact that @adrian already had the issue on his one.
 a

Share this post


Link to post
Share on other sites

This has something to do that the markup is different here, there is a span.label_title around the page title's text. This has came up earlier too but I couldn't figure out why.

I googled around and found a WebKit bug that could cause this. Could you try applying this CSS? If it works via devtools, please try adding this to aos.min.css (just append to the end):

.PageList .PageListItem {
    transform: scale3d(1,1,1);
}

Or if no joy, by adding backface-visibilty: hidden. Unfortunately because I can't reproduce I can't check.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Hey @tpr I am super happy to confirm that adding the style to aos.min.css fixed the issue and now my Admin tree is back to its normal state 🙂 I guess we will see a new AOS release some time soon with the fix 😉 Thank you sincerely!

  • Like 2

Share this post


Link to post
Share on other sites

Thanks, I've added this to v2.0.16, please try. It also contains a fix for the PHP notice @Brian Peat has come across.

  • Like 1

Share this post


Link to post
Share on other sites
14 hours ago, adrian said:

when there are lots of fields or templates such that the dropdown menu extends beyond the viewport height, AOS prevents me from scrolling the page to access those items towards the bottom of the list.

I've tried setting a max height on the dropdown menus so at least they were scrollable, but unfortunately the 3rd level menus that open to the right were cut off. They are absolutely positioned so I don't think this could be fixed. Btw I really don't like how the main menu markup is built in the admin, submenus are not part of the menu markup but they are positioned there on open. A simple CSS solution would be enough I think with proper nested markup, that would allow more customization.

  • Like 1

Share this post


Link to post
Share on other sites

@tpr - don't worry about the fixed header issue - maybe just remove the option unless you can get Ryan to change how the menus are built (although that seems unlikely).

Share this post


Link to post
Share on other sites

Recently I have been trying to improve the user friendliness of various page select fields, including single select and checkboxes.

The issue comes down to the fact that if say for example you have a single checkbox, you can explain what the effect of checking that box is. But if you are using checkboxes on a page select field, there is no way to have any extended information about the option. An example of where something like this is already in use is on the Status field - each option has the title of the option, e.g. Unpublished, and then additional info, like "Not visible on site". 

Currently my solution is to use a custom inputfield that extends the primary inputfield, which extends the attributes for each option, and then use javascript for handling the display.

  • On checkboxes, adding uk-tooltip to the checkbox labels with the data-description on the option becoming the tooltip content. (see screenshot below)
  • On single selects, i have some JS replace the field description with the info about the selected option. (see screenshot).

The reason i'm posting this here is to see if there is any simpler/better way to do this, e.g. hook into the creation of the options for any page field and add the custom attributes, without having to change the inputfield type. And i thought this could be a good candidate for AOS. To better illustrate how it works, i have included some screenshots and links to the repos for the select extended and checkboxes extended.

Select Extended:

nothing selected

973404192_Edit_Page__Home__dev_fredsherry_com.jpg.71caee0ca17733e006c248505b2e73ec.jpg

Option selected, with option's description showing:

1940487017_Edit_Page__Home__dev_fredsherry_com.jpg.685d6e65881215fedd580c055dfdb19e.jpg

https://github.com/outflux3/InputfieldSelectExtended

-----

Checkboxes Extended

hovering over any option shows the option's description:

 

hover_checkboxes.png.76af25d35fcec2203d9683ef73ab1c10.png

https://github.com/outflux3/InputfieldCheckboxesExtended

  • Like 2

Share this post


Link to post
Share on other sites
9 hours ago, Macrura said:

The reason i'm posting this here is to see if there is any simpler/better way to do this, e.g. hook into the creation of the options for any page field and add the custom attributes, without having to change the inputfield type.

I was going to write a tutorial but then I thought I might as well take the next step and turn it into a module:

If @tpr wants to include the functionality in AOS and people would prefer that rather than a standalone module then I'm fine with that. 🙂

  • Like 3

Share this post


Link to post
Share on other sites

Thanks for sharing!

28 minutes ago, Robin S said:

If @tpr wants to include the functionality in AOS

That would be a good thing for sure but even better would be to add it to the core 😉 

Share this post


Link to post
Share on other sites

Hi! Small request here, just added Input Mask to integer fields tweaking a little bit of lines in the module, maybe this should be enabled by default? Anyone see any possible issues, maybe on number type inputs? I think it's the type of field where it is particularly useful so you can filter nicely with selectors. (think of a price field)

Share this post


Link to post
Share on other sites

I don't use this feature very much but if you feel it would make a useful addition, create a PR (or show the changes in other ways) and I'll check.

  • Like 1

Share this post


Link to post
Share on other sites

Hi @tpr

I have z-index issue with UIkit Sticky header being on. input.InputfieldDatetimeDatepicker has a higher z-index than the header. I quick fixed it with  #pw-mastheads {z-index:11 !important;} but I'm not quite sure what to do.

Share this post


Link to post
Share on other sites

Thanks, I just used the z-index: 11 you suggested in v2.017. There's a very high z-index on the datepicker calendar div added by AOS that was needed back then. This is still above the masthead on scroll but I think it's better not to change that.

There's also a bunch of new CKEditor plugins added in this version: 

  • Color Button
  • Color Dialog
  • Table Resize
  • Table Tools
  • Table Tools Toolbar
  • Like 2

Share this post


Link to post
Share on other sites

@tpr, would you consider adding an exclude class to the "Autosize textareas according to content" feature? Generally I like this feature but I have some modules with textareas in their config that contain a lot of content and would like to be able to exclude these from being autosized. So I was thinking there could be some special class that can be applied to textareas (e.g. "no-autosize") and the AOS feature when enabled would apply to all textareas without this class. What do you think?

Share this post


Link to post
Share on other sites

There already is one, the textarea selector is "textarea:not(.noAutosize)". I haven't checked it yet but in theory it should work. Otherwise you could apply a max-height with CSS that could also help, or perhaps setting the height with !important.

  • Like 2

Share this post


Link to post
Share on other sites
3 hours ago, tpr said:

There already is one, the textarea selector is "textarea:not(.noAutosize)". I haven't checked it yet but in theory it should work.

Works great, thanks.

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 Robin S
      After forgetting the class name of the wonderful AdminPageFieldEditLinks module for what feels like the 100th time I decided I needed to give my failing memory a helping hand...
      Autocomplete Module Class Name
      Provides class name autocomplete suggestions for the "Add Module From Directory" field at Modules > New.
      Requires ProcessWire >= v3.0.16.
      Screencast

      Installation
      Install the Autocomplete Module Class Name module.
      Configuration
      Choose the type of autocomplete options list: "Module class names from directory" or "Custom list of module class names". The latter could be useful if you regularly install some modules and would prefer a shorter list of autocomplete suggestions. The list of class names in the modules directory is generated when the Autocomplete Module Class Name module is installed. It doesn't update automatically (because the retrieval of the class names is quite slow), but you can use the button underneath when you want to retrieve an updated list of class names from the directory. The "fuzzy search" option uses custom filter and item functions for Awesomplete so that the characters you type just have to exist in the module class name and occur after preceding matches but do not need to be contiguous. Uncheck this option if you prefer the standard Awesomplete matching. Custom settings for Awesomplete can be entered in the "Awesomplete options" field if needed. See the Awesomplete documentation for more information.  
      https://github.com/Toutouwai/AutocompleteModuleClassName
      https://modules.processwire.com/modules/autocomplete-module-class-name/
    • By teppo
      MarkupMenu is a markup module for generating menu trees. When provided a root page as a starting point, it generates a navigation tree (by default as a HTML "<ul>" element wrapped by a "<nav>" element) from that point onwards. If you've also provided it with current (active) page, the menu will be rendered accordingly, with current item highlighted and items rendered up to that item and its children (unless you disable the "collapsed" option, in which case the full page tree will be rendered instead).
      Modules directory: https://modules.processwire.com/modules/markup-menu/ GitHub repository: https://github.com/teppokoivula/MarkupMenu Usage
      As a markup module, MarkupMenu is intended for front-end use, but you can of course use it in a module as well. Typically you'll only need the render() method, which takes an array of options as its only argument:
      echo $modules->get('MarkupMenu')->render([ 'root_page' => $pages->get(1), 'current_page' => $page, ]); Note: if you omit root_page, site root page is used by default. If you omit current_page, the menu will be rendered, but current (active) page won't be highlighted etc.
      A slightly more complex example, based on what I'm using on one of my own sites to render a (single-level) top menu:
      echo $modules->get('MarkupMenu')->render([ 'current_page' => $page, 'templates' => [ 'nav' => '<nav class="{classes} menu--{menu_class_modifier}" aria-label="{aria_label}">%s</nav>', 'item_current' => '<a class="menu__item menu__item--current" href="{item.url}" tabindex="0" aria-label="Current page: {item.title}">{item.title}</a>', ], 'placeholders' => [ 'menu_class_modifier' => 'top', 'aria_label' => 'Main navigation', ], 'include' => [ 'root_page' => true, ], 'exclude' => [ 'level_greater_than' => 1, ], ]); Note: some things you see above may not be entirely sensible, such as the use of {menu_class_modifier} and {aria_label} placeholders. On the actual site the "nav" template is defined in site config, so I can define just these parts on a case-by-case basis while actual nav markup is maintained in one place.
      Please check out the README file for available render options. I'd very much prefer not to keep this list up to date in multiple places. Basically there are settings for defining "templates" for different parts of the menu (list, item, etc.), include array for defining rules for including in the menu and exclude array for the opposite effect, classes and placeholders arrays for overriding default classes and injecting custom placeholders, etc. 🙂
      MarkupMenu vs. MarkupSimpleNavigation
      TL;DR: this is another take on the same concept. There are many similarities, but also some differences – especially when it comes to the supported options and syntax. If you're currently using MarkupSimpleNavigation then there's probably no reason to switch over.
      I'd be surprised if anyone didn't draw lines between this module and Soma's awesome MarkupSimpleNavigation. Simply put, I've been using MSN (...) for a number of years, and it's been great – but there have been some smallish issues with it, particularly with the markup generation part, and it's also doing some things in a way that just doesn't work for me – the xtemplates thing being one of these. In many ways it's less about features, and more about style.
      In MarkupMenu I've tried to correct these little hiccups, modernise the default markup, and allow for more flexibility with placeholder variables and additional / different options. MarkupMenu was built for ProcessWire 3.0.112+ and PHP 7.1+, it's installable with Composer, and I have a few additional ideas (such as conditional placeholders) on my todo list.
      One smallish and rather specific difference is that MarkupMenu supports overriding default options via $config->MarkupMenu. I find myself redefining the default markup for every site, which until now meant that each site has a wrapper function for MarkupSimpleNavigation (to avoid code / config repetition), and this way I've been able to omit that 🙂
      Requirements
      ProcessWire >= 3.0.112 PHP >= 7.1.0 If you're working on an earlier version of ProcessWire or PHP, use MarkupSimpleNavigation instead.
    • By Robin S
      Repeater Images
      Adds options to modify Repeater fields to make them convenient for "page-per-image" usage. Using a page-per-image approach allows for additional fields to be associated with each image, to record things such as photographer, date, license, links, etc.
      When Repeater Images is enabled for a Repeater field the module changes the appearance of the Repeater inputfield to be similar (but not identical) to an Images field. The collapsed view shows a thumbnail for each Repeater item, and items can be expanded for field editing.
      Screencast

      Installation
      Install the Repeater Images module.
      Setup
      Create an image field to use in the Repeater field. Recommended settings for the image field are "Maximum files allowed" set to 1 and "Formatted value" set to "Single item (null if empty)". Create a Repeater field. Add the image field to the Repeater. If you want additional fields in the Repeater create and add these also. Repeater Images configuration
      Tick the "Activate Repeater Images for this Repeater field" checkbox. In the "Image field within Repeater" dropdown select the single image field. You must save the Repeater field settings to see any newly added Image fields in the dropdown. Adjust the image thumbnail height if you want (unlike the core Images field there is no slider to change thumbnail height within Page Edit). Note: the depth option for Repeater fields is not compatible with the Repeater Images module.
      Image uploads feature
      There is a checkbox to activate image uploads. This feature allows users to quickly and easily add images to the Repeater Images field by uploading them to an adjacent "upload" field.
      To use this feature you must add the image field selected in the Repeater Images config to the template of the page containing the Repeater Images field - immediately above or below the Repeater Images field would be a good position.
      It's recommended to set the label for this field in template context to "Upload images" or similar, and set the visibility of the field to "Closed" so that it takes up less room when it's not being used. Note that when you drag images to a closed Images field it will automatically open. You don't need to worry about the "Maximum files allowed" setting because the Repeater Images module overrides this for the upload field.
      New Repeater items will be created from the images uploaded to the upload field when the page is saved. The user can add descriptions and tags to the images while they are still in the upload field and these will be retained in the Repeater items. Images are automatically deleted from the upload field when the page is saved.
      Tips
      The "Use accordion mode?" option in the Repeater field settings is useful for keeping the inputfield compact, with only one image item open for editing at a time. The "Repeater item labels" setting determines what is shown in the thumbnail overlay on hover. Example for an image field named "image": {image.basename} ({image.width}x{image.height})  
      https://github.com/Toutouwai/RepeaterImages
      https://modules.processwire.com/modules/repeater-images/
    • By EyeDentify
      Hello There Guys.

      I am in the process of getting into making my first modules for PW and i had a question for you PHP and PW gurus in here.

      I was wondering how i could use an external library, lets say TwitterOAuth in my PW module.
      Link to library
      https://twitteroauth.com/

      Would the code below be correct or how would i go about this:
      <?PHP namespace ProcessWire; /* load the TwitterOAuth library from my Module folder */ require "twitteroauth/autoload.php"; use Abraham\TwitterOAuth\TwitterOAuth; class EyeTwitter extends WireData,TwitterOAuth implements Module { /* vars */ protected $twConnection; /* extend parent TwitterOAuth contructor $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, $access_token, $access_token_secret); */ public function myTwitterConnection ($consumer_key, $consumer_secret, $access_token, $access_token_secret) { /* save the connection for use later */ $this->twConnection = TwitterOAuth::__construct($consumer_key, $consumer_secret, $access_token, $access_token_secret); } } ?> Am i on the right trail here or i am barking up the wrong tree?
      I don´t need a complete solution, i just wonder if i am including the external library the right way.
      If not, then give me a few hint´s and i will figure it out.

      Thanks a bunch.

      /EyeDentify
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version (has been tested up to v3.3), add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "http://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


×
×
  • Create New...