Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive CMS menu #6267

Closed
12 of 13 tasks
clarkepaul opened this issue Nov 1, 2016 · 2 comments
Closed
12 of 13 tasks

Responsive CMS menu #6267

clarkepaul opened this issue Nov 1, 2016 · 2 comments

Comments

@clarkepaul
Copy link
Contributor

clarkepaul commented Nov 1, 2016

Note this issue is no.2 on the list below but also the central reference of the other responsive type issues for Beta1.

WIP acceptance criteria

  • All main ModalAdmins have access to the CMS menu and be able to select any section within the menu to navigate to it.
  • Admin tabs should be visible and selectable in all views, even they break onto the next line.
  • The viewport is not limited to a 720px min-width, but provide natural scaling.
  • The CMS should be more accessible to users rather than more inhibiting

Recommendations for implementation in order of most important (up to 8pts worth)

  1. MERGED Remove constrained viewport see issue Remove constrained viewport size silverstripe-admin#100

  2. [< 768px] In order for the CMS to be usable on smaller screen sizes, the main menu within the CMS will need to be collapsible to allow the main content panels to take pride of place. This will include:

    • Requires hamburger link to trigger the menu from first level Admin sections. Hamburger icon to flip out with X icon. See squeeze icon https://jonsuh.com/hamburgers/ or this annitmation https://codepen.io/clarkepaul/pen/qjEMWV but squeeze is set up to be more accessible.
    • Center site name on mobile (top of menu)
    • Menu should animate out from the hamburger area in the top left.
    • Width of the menu should be 100% - 60px so the following CSS might be good to use, you can use platform.silverstripe.com for a very similar example. mockups marked with for Beta1 https://invis.io/V6BW0ZNFH#/235742840_Navigation_Mobile_Start [~3pt]
      • Width: calc(100% - 60px);
      • Margin-left: calc(-100% + 60px);
      • Position: relative;
    • [All screen sizes] Move logout icon to the right of the profile name and reduce its size slightly, a new icon takes the logout icon positioned on the left of the user's name. [~1pt]
    • Excludes: Moving the SilverStripe branding and help link in the menu (this will be a seperate issue, so there will be no branding at the moment)
  3. Drop ModalAdmin tabs at smaller viewport sizes see Drop main modalAdmin tabs for smaller screens silverstripe-admin#99

  4. More options dropdown see More options dropdown label change to icon silverstripe-admin#101

  5. ModelAdmin toolbar actions to fall back to just icons for smaller screens see ModalAdmin actions to fallback to just icons silverstripe-admin#102

Related issues if time permits

  1. [< 768px] Reduce sort dropdown in assets to icon so that it fits on smaller screens. see Reduce the sort dropdown label to an icon for smaller screens silverstripe-asset-admin#496 [1pt]

  2. [< 768px] Add a publish button to draft preview so the user can publish directly after. see Add publish button to page preview on smaller screens and preview only view silverstripe-cms#1843

  3. Increase spacing of site tree items vertically to ensure clickability by fingers [3pt] see Add responsive padding to Site Tree silverstripe-cms#1832 (comment)

  4. [All sizes] Tabs to have an overflow dropdown when there isn't enough space. Responsive tabs see Replace CMS tabs with dropdown toggle on pages that have long tabs #1943 [5pt]

  5. [All sizes] The history section within Pages will not work on mobile in its current state. See Enhancement: History section doesn't make sense silverstripe-cms#1493 for a possible interaction [8pt]

  6. [ All sizes] Move CMS help to new area within the main menu along with SilverStripe brand [add link] [3pt]

Tasks

  • Hamburger button
  • Show / hide mobile menu
  • Menu transition
  • Clean up menu CSS
  • Make the menu scroll-able if not enough space
  • Layout
    • Mobile menu width (100% - 60px)
    • Move logout icon to the right of the profile name and reduce its size
    • Profile button on the left in space of logout button
    • Center site name on mobile (top of menu)
  • Accessibility checks
  • Click outside mobile menu should close it

Pull requests

@clarkepaul
Copy link
Contributor Author

clarkepaul commented Nov 24, 2016

Need to update viewport as it is constrained to 720px:
Swap <meta name="viewport" content="width=720, maximum-scale=1.0" /> for <meta name="viewport" content="width=device-width, maximum-scale=1.0" />

Main toolbar also needs to be improved to allow for [<] back arrow, header/breadcrumb and right tabs. I recommend to swap tab titles for icons and drop tabs below title.
image

@clarkepaul clarkepaul modified the milestones: CMS 4.0.0-beta1, 4.0.0 Dec 20, 2016
@chillu chillu added the type/UX label May 8, 2017
@clarkepaul clarkepaul self-assigned this May 18, 2017
@chillu
Copy link
Member

chillu commented May 19, 2017

Related bugs on iOS: #6139

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants