U4-6633 - UI broken when editing content on mobile

Created by Sebastian Hoffback 19 May 2015, 06:57:11 Updated by Shannon Deminick 02 Jun 2015, 18:21:02

What did you do?

  • I tried to edit a page on my mobile phone.

What did you expect to happen?

  • To be able to navigate to the editing-page and make my changes

What actually happened?

  • When I opened the page for editing, the page looked broken and it was almost impossible to do anyting.

1 Attachments


Sebastian Hoffback 19 May 2015, 07:05:22

I submitted a fix for this: https://github.com/umbraco/Umbraco-CMS/pull/695

Shannon Deminick 20 May 2015, 05:27:28

Your fix works great! There's still some issues that need solving though like the save/publish buttons don't display correctly on small screens. The tabs also don't really work on small screens. The grid is a different story and will need to be dealt with separately.

Shannon Deminick 20 May 2015, 06:01:57

Fixed the button placement: a3b5996372984c9848cd67c643eaf6d13551c353

Shannon Deminick 20 May 2015, 06:14:38

I've also left aligned the button to the editing section: http://www.youtube.com/watch?v=M66Wjwch6js in rev: 6cfb5bc678dbc7c500d825b0b1ff94aaecdb0dae @Per.Ploug let me know if you object, just seems more consistent since the buttons will always be in the same position regardless of screen size and you don't have to move your mouse as far to the right to save.

Shannon Deminick 20 May 2015, 06:16:55

I'm pretty sure there's an issue logged to turn the tabs into a drop down type of list for small screens but I can't find it. I'll leave this issue open until we can find that issue.

Bjarne Fyrstenborg 20 May 2015, 06:47:11

@Shandem are the tabs in Umbraco 7 backoffice UI based on bootstrap tabs? Maybe something like this could be useful? http://www.eyecon.ro/bootstrap-tabdrop/ .. also when too many tabs in desktop view.

Shannon Deminick 20 May 2015, 06:48:54

No they're not IIRC

Shannon Deminick 20 May 2015, 06:49:25

I'm sure the tabs have been discussed elsewhere a few times just can't find it at the moment.

Sebastian Hoffback 20 May 2015, 07:16:40

Great fix with the buttons @Shandem, looks alot better. I also really like the tabs @Bjarne.Fyrstenborg, looks very nice and should be great for all screen sizes. I think the tabs issue is this one: http://issues.umbraco.org/issue/U4-3514

Priority: Normal

Type: Cosmetics

State: Fixed

Assignee: Shannon Deminick

Difficulty: Very Easy

Category: UI

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.2.5

Due in version: 7.2.6


Story Points: