Discussion - new layout

[synox]

after discussions in #54 about collapsible layout, I made a proposal for a new layout:

http://dubgo.com/tmp/frontend.html (clickable mockup)

and version 2: (simpler) http://dubgo.com/tmp/frontend2.html

Please provide feedback.

The goals were:

• as simple as possible, while giving explanations about the application
• make email address copyable directly
• make space for language selection

What to improve:

• copy button looks bad on small screen
• write backend function to create relative date. add tooltip for full date.

[bertlio]

Hi synox, Thanks for the continuous improvements! I've tested both mockups and have a few feedbacks:

Positives:

1. The auto hide/extend section of the frontend1 "change address" is really nice, it saves space making it less cumbersome...
2. Space for translation widget.
3. frontend2 "copy to clipboard" - direct click to copy.
4. Automatic highlighting of email list row.
5. Hand cursor on email list row title when collapsed/expanded.

To improve:

1. On Mobile: The need to touch 2 times on the same buttons or "copy to clipboard" for the action to execute isn't ideal, I would prefer 1 touch to action.
2. I think the Copy button still need to appear as a normal button, on mobile for the frontend2, it would facilitate things if the visitor sees a copy button... Or else contrasting the user@domain.com rectangular background would make it more intuitive...

I have attached a mockup idea which could look good on both desktop and mobile (buttons shifted below email address section)

[bertlio]

Also if the Download button could be named View (to expand) and Close (to contract), at least the double options so we could change it to our own likings?

That would be so nice, thanks!

[synox]

Thanks for your Input. I didn't test it on mobile yet.

I think there should be a plus button, so mobile users can see there is something so click on.

And downlod/delete could be hidden behind a context menu.

[bertlio]

You're welcome! It seems that there are no plus button at the moment...

For the buttons, I meant for e.g. when the 'View' button is clicked, the same button automatically changes to 'Close'.... and vice versa. The 'Delete' button is useful, so we require it!

[synox]

I made a new draft in the new branch, i like this more.

https://github.com/synox/disposable-mailbox/blob/feature/new-layout/frontend2.html

[bertlio]

Oh yes, the new expand/collapse arrow icon is a very nice addition!

[synox]

Branch is updated, please check and try. Now everything is implemented in the running app. A lot more whitespace and more minimal.

[bertlio]

Just tested it on both Desktop and Mobile, and all is perfect! Better than the previous versions, the lot more whitespace and more minimal are really welcomed!!!

Just a minor overlapping of date/time on Mobile Safari, can this be fixed please?

[synox]

Bootstrap only supports mobile safari >= 9. https://getbootstrap.com/docs/4.1/getting-started/browsers-devices/ I see the same Problem with iOS 8 (which is very old).

[bertlio]

I'm on iOS 11, I'm not sure which Mobile Safari version is on it.... but it is a very minor thing, so no problem at all! Thanks again!