Deck / slide view on Mobile devices

Background

Currently there are a number of issues when viewing a deck or slide on mobile screen device. It was agreed at Nov-17 plennary that we would not support editing on a mobile device.

1. deck tree is at the top of the screen and user must scroll past this to get to the deck or slide.

Issue:Each time user changes the slide, they are required to scroll down again

Solution: do not display deck tree in the mobile view. Automatically hide it on tablet size screens

2. Issues with toolbars

Issue:

(a) Toolbars and tabs at the top of the content area are not aligned correctly in both portrait and landscape

(b) Toolbars disappear under other components or are off screen 

Solution: 

(a) remove buttons not required on mobile device either due to removing functionality (e.g editing function) or functionality that is replicated on a mobile browser (e.g. share, print etc)

(b) concatenate buttons into a menu. It is already implemented for the header and user menu.

3. Content not re-scaling in the interface

Issues

(a) Thumbnails in the deckview overlap the toolbar
(b) Labels in deckview in portrait can overlap content

(c) Tabs for ContentModule in portrait - not all are displayed and it is not possible to scroll horizontally to access tabs 

4. Side content and zoom

Slide content is resized to the width of the screen. But speaker notes area indicator (pink strip) remains large and can often take up the screen. Not always possible to use pinch-zoom in the slide area if you have scrolled within this area

1. Expanded view shortcut (double chevron, see screenshot above) is displayed across the whole width of the screen. As the context for the icon is dependent on its location, this is confusing although it works correctly.

5. Touch Interface Issues

Issues:

(a) Tooltips on buttons remain visible after button press on touch-screen (likely to be bug in semantic-ui) — check Semantic-ui issues

(b) CKeditor toolbar does not display properly on mobile device although seems to function correctly

6. Editing will not be supported on mobile devices.

Ensure editing function are not avaialbe on mobile screen size. But provide a link to access "decktop" version.

1. Input boxes - controls for moving and resizing do not work on mobile touch screens (not tested on desktop touch screens).
   

7. Access to header

Does not use mobile layout for ~10" devices (e.g. convertible, tablet) in portrait mode (header with " Sign In" was not out of sight on real device, dev tool bug?), deckview problematic (added Oct-17)

Others to consider:

No language changing option in mobile layout (unnecessary?)  
Deck name cut off in deckview  (added Oct-17). This has been moved to the top of the deck-tree (Nov-17) and needs to be re-tested.

NB - screenshots are for iphone 6/7  376 x 667 so relatively large screen. See http://quirktools.com/screenfly/#u=http%3A//stable.slidewiki.org/deck/9218-1&w=376&h=667&a=37&s=1 for simulation.

      - Google Dev Tools iPad (768 x 1024) on https://platform.experimental.slidewiki.org/ (only issue 11)

      - Google Dev Tools iPhone 5 (320 x 568) on https://platform.experimental.slidewiki.org/

Action items

We need to decide ...

• What functions (e.g. editing, ) will be supported on a mobile device?
• Which UI components will not be displayed on the mobile interface (e.g. deck tree)?
• Which functions do we want to support on a mobile device but may need alternative UI (e.g. adding tags, comments)