Jump to content

Recommended Posts

Howdey!

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
**Description**  
Menu opens (for less than ~100ms) and closes immediately again.

**Reproduce**  
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
**Description**  
Shortcut-menu to add new pages, can not closed again with "Add Menu"-button.

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

**Solution**  
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
**Description**  
Lister (filter/related) is not "reachable".

**Reproduce**

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

**Solution**  
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
**Description**  
If an input gets the focus, the page will zoomed in a bit. Causes horizontal scrollbars. See also [#horizontal-overflow](#horizontal-overflow)

**Reproduce**  
Focus a text input element in the backend.

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

**References**

- 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
**Description**  
Causes horizontal overflow on some pages, mostly because of long words/text. See also [#input-auto-zoom-bug](#input-auto-zoom-bug)

**Reproduce**  
View "ProcessPageEditImageSelect"-configuration page

**Solution**  
`word-wrap: break-word`

## SystemNotifications ghost doesn't break words
**Description**  
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
**Description**  
Input field is a bit too small, for my eyes.

---

# UI/UX

## ProcessPageEditImageSelect image not scaled
**Description**  
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.

**Reproduce**

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

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

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

**Reproduce**  
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
**Description**  
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.

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

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

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

---

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

**Solution**  
Add "Show fullpage"-link to footer

## Inline time picker on datetime field
**Description**  
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
**Description**  
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)

**Reproduce**

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
**Description**  
Each state could visualized with different styles. See also [#line-trough-draft-pages-asmselect](#line-trough-draft-pages-asmselect)

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

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

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

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

**Reproduce**

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

**Solution**  
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
**Description**  
If there's just one site-profile to install, use it.

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

## Dynamically enable field deletion
**Description**  
Ajax-check to enable "Delete field" after valid change on "Action"-tab.
 
  • Like 11
Link to comment
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
 Share

×
×
  • Create New...