Jump to content

Recommended Posts


Over the last weeks, I had some critical thoughts about processwires ui/ux feeling (relative sizing, overflow-x, hover-states, word-wrap:break-word) but also its stability.

Last night I had the time to setup some new things. Good point for me to fiddle a bit around, with issues I've seen over the last months...

...short break:

A lot of bugs, I've noticed earlier, are gone...

@allcontributors I you!

However, someone left over some bugs, for me ;-)

I just ended up with an ugly and unstructured markdown file. No issues or pull-requests via git. The biggest reason, most things are between "bug" and "enhancement" or are just too platform specific. I think, it's better to talk about those stumbling blocks first.

Ok, enough for now.

As I said, it's markdown, to see the compiled thing, take this: https://gist.github.com/yckart/62b7b2ed9d0e3845cc4b

# Bugs - Mobile (iOS 8)

## Navigation closes immediately
Menu opens (for less than ~100ms) and closes immediately again.

Click on the upper left menu icon, scroll a bit down (~10px), click menu icon again. Try to open the menu.

## "Add New"-menu unclosable
Shortcut-menu to add new pages, can not closed again with "Add Menu"-button.

Click on "Add New" (is open), click again to close (is still open).

It's something about the hover-state in mobile safari. Adding `ontouchstart` to `<body>` could help. Better, listen for events and change states via javascript.

## ProcessLister not reachable
Lister (filter/related) is not "reachable".


1. Open backend on iOS.
2. Try to find/reach "lister" and "recent-pages"

Add a dropdown-menu with infinite levels of nesting. See also [#show-fullpage](#show-fullpage)

## <a name="input-auto-zoom-bug">#</a> Input auto zoom bug
If an input gets the focus, the page will zoomed in a bit. Causes horizontal scrollbars. See also [#horizontal-overflow](#horizontal-overflow)

Focus a text input element in the backend.

`html { text-size-adjust: 100%; }`


- http://stevenosloan.com/articles/2013/prevent-zooming-on-forms/
- http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone

## <a name="horizontal-overflow">#</a> Horizontal overflow
Causes horizontal overflow on some pages, mostly because of long words/text. See also [#input-auto-zoom-bug](#input-auto-zoom-bug)

View "ProcessPageEditImageSelect"-configuration page

`word-wrap: break-word`

## SystemNotifications ghost doesn't break words
Ghosts do not break long text on iOS.

**Solution 1**  
It's something with `position: fixed; width: 100%` and `position: fixed; left: 0; right: 0;`.

**Solution 2**  
I've seen some problems with `word-wrap: break-word`, I think there are some bugs related to this topic. See also [#horizontal-overflow](#horizontal-overflow)

## ProcessPageSearchForm too small
Input field is a bit too small, for my eyes.



## ProcessPageEditImageSelect image not scaled
The currently edited image in modal is not scaled down. We are able to define dimensions (e.g. 800x600), it seems that the image will get exactly this pixel-values as dimension-properties, makes the thing feel not that responsive as it could/should.


1. Open page with image field attached
2. Click an image (larger than the device viewport) to open modal.

Haven't looked deep in it, but something like this should help: `img { max-width: 100% ...`

## PageTable
### Drag breaks layout
Dragged item is not longer in box-model (due `position:absolute`) and visually breaks the table.

Move cursor over table item > hold mousedown and drag ~1px.

**Solution 1**  
Create clone and move this instead of original PageTableField.

**Solution 2**  
Save offset, before the PageTableField gets `position: absolute`.

### PageTable optional sorting
Sorting via drag-and-drop should be optional. Currently we can say that items added to PageTable are "pre-sorted" with `Inputfield_sortfields`, but they are furthermore sortable via drag-and-drop.

Add "Sortable via drag-and-drop"-option to PageTable

## NotificationBug alignment/position
It's annoying to have the NotificationMenu-toggler move always up/down (and it looks a bit too "floaty" in my eyes).

Move the NotificationBug right to search form and "fix" (not `fixed`) it at the top. 


# Feature requests
## <a name="show-fullpage">#</a> Show fullpage
It could be helpful to be able to switch (on mobiel devices) between mobile- and desktop version.

Add "Show fullpage"-link to footer

## Inline time picker on datetime field
If the date picker is inlined (always visible) theres no time picker available.

## <a name="line-trough-draft-pages-asmselect">#</a> Line trough draft pages AsmSelect
In PageLister a page with status "draft" is striked (~~line-through~~), should be the same in asmSelect (if "Allow unpublished pages" is enabled). See also [#asm-page-state](#asm-page-state)


1. Enable draft pages on PageTable.
2. Change page status to draft.
3. Open the referenced page and view select-field item.

## <a name="asm-page-state">#</a> Indicate page-states in asmSelect
Each state could visualized with different styles. See also [#line-trough-draft-pages-asmselect](#line-trough-draft-pages-asmselect)

- draft > ~~line-through~~
- hidden > opacity
- locked > *italic*

## Image-reference selection
Selecting already uploaded images, from any page, is a must have!

Indri is one great tool for this, https://github.com/ikayzo/indri

## Create page once
It should be a possibility to create pages (one the same tree-level) just once, instead of renaming to "duplicate-page-name-1".


1. Create new page with name "foo".
2. Create another page with name "foo".
3. Now you have "foo" and "foo-1".

Add "Singular"-option to templates to let us decide what we want. If this option-field is ticked later, on page edition show notification if page with name "foo" already exists and don't save, or ask what todo.

## Pre-select site-profile
If there's just one site-profile to install, use it.

## Show full version number on installation
During installation the version in footer-section is trimmed e.g. 2.5.29 => 2.5

## Dynamically enable field deletion
Ajax-check to enable "Delete field" after valid change on "Action"-tab.
  • Like 11
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 FrancisChung
      Long but well written, detailed and informative article written by an Engineering Manager for Google Chrome about the true cost of Javascript and what you can do to alleviate some of that cost.
      Must read!

    • By Klenkes
      This morning a client contacted me with a strange problem. At first I couldn't reproduce it because I use Chrome but then I realized that it only affects Firefox and CKE fields.
      If you type some text and then press SHIFT+ENTER to insert a <br> then wirte some text in the second line and then place the cursor at the start of the second line and hit backspace, the cursor jumps to the wrong position. The clients content editors are extremely frustrated by this because they have to search for the cursor 
      I can reproduce this behavior in almost all PW versions, even a clean install witout any CKE plugins.
      This whole behavior seems somehow familiar, like I have heard it before, but I can't remenber...

      Anyone knows a solution except using Chrome?
    • By kongondo
      For a while now, I've wanted to expand my skills into mobile app development. Having done some Googling and watched several YouTube videos regarding native versus hybrid apps, I decided to go native. I did my homework regarding React, Ionic, etc and decided to go native. I settled on the NativeScript + TypeScript combo although it seems most tutorials are about Angular. Anyway, after watching quite a number of videos, just when I was about to dive into things, someone turned off the lights! Progressive what? PWA? Haven't you heard about this? No, I haven't! Where have you been? Let's not go there...
      OK, so I don't know much about mobile apps as you can tell (or even much about frontend development as my personal websites do tell, ). At first, I dismissed Progressive Web Apps as another Google tech that is bound to fail....until I read that Twitter, Blah Blah, have joined the bandwagon and the thing is gaining serious traction.
      It was back to more Googling. I now know (I think) what Progressive Web Apps are (or are meant to be). Naturally, my first question was Progressive Web Apps versus Native apps. So, I asked Google. Google told me to stop asking that question. To be precise, it told me (at least with the first couple of results) that that was the wrong question to ask! I tried finding out why, but the answer was hidden down some deep mobile rabbit hole that I didn't have time to fully descend into. 
      It seems I am back to where I started. Native apps seem to be promising first class citizenship (who doesn't want that?). On the other hand, I am being told, Progressive Web Apps are the bright shiny future that will solve all our problems (and maybe even shutdown the Play Store! ). Please be gentle with my ignorant self. I have asked Google but she hasn't bothered or cannot be bothered to reply or I am asking her the wrong questions. I simply want to know if Progressive Web Apps can or will one day be able to be used to:
      Build apps like WhatsApp, etc? Build games like Candy Crush (what?)? Build premium apps (how would that work?) Or...are Progressive Web Apps just a replacement for mobile.domain.com? Should I ditch my NativeScript??
      If someone could help me out here (once you're done laughing at my silly questions ) and/or point me to resources that will answer my questions, I'll be forever grateful .
    • By clsource
      I just want to point out this framework for making html apps https://onsen.io/
      it's compatible with jquery, angular, vue, react or any other js framework.
      So far I made an app using this and bootstrap with https://propeller.in/
      for the desing and some libs like jquery and lodash for the app logic
      I prefer this to other alternatives like ionic since it does not bound you to angular or react.
  • Create New...