Content
View differences
Updated by Marc Alcobé 3 months ago
**As a** project manager, portfolio manager, or project member using OpenProject on **As** a tablet \[enter role of user\]
**I want** to browse, filter, and inspect projects, programs and portfolios using a split-view layout want to** \[enter objective\]
**so that** I can quickly access project information and navigate between projects without losing context or performing unnecessary navigation steps. \[enter desired result\]
**Acceptance criteria**
* When the app is displayed on a tablet in landscape orientation:
* The Projects module uses a **master–detail layout**. The right pane of the layout is collapsable depending on the user selection on the screen.
* The left pane displays:
* The entry point for programs and portfolios
* A list of projects
* Filters (e.g. All, Favorites)
* Search input
* The right pane displays:
* The selected project or portfolio details with all its navigational options
* Overview
* Work packages
* In this project
* The pane has actions on the top right corner that allow the user to:
* Favorite
* Share
* Open in full screen
* Close right pane
* Selecting a project or portfolio in the left pane updates the right pane without navigating away from the Projects module.
* Portfolios and programs are displayed as:
* A list in the left pane
* A detail view in the right pane showing the portfolio or program overview, its work packages and and contained projects
* When a project, program or portfolio is opened on full screen, it opens in a full screen modal without navigation bar and with a closable header. The layout of the project full-screen view has a two column layout:
* The overview details in a fix position on the left side with all its project attribute groups in collapsible groups.
* A box for the two available tabs:
* Work packages with a list of work packages inside
* In this project with a list of sub-projects inside
* The layout does not require horizontal scrolling. <br>
**Technical notes**
* The tablet Projects layout is activated at the tablet **breakpoint: 900px**.
* On smaller screens or portrait orientation, the phone Projects layout is used instead.
* The master list and detail view are rendered as independent panes.
* Pane state (selected project or portfolio) persists while the user remains in the Projects module.
* Data for the selected project or portfolio is lazy-loaded to improve performance.
* Filters and search are applied only to the left pane list. <br>
**Permissions and visibility considerations**
* Only projects, programs and portfolios the user has permission to view are shown. _To whom is this feature visible?_
* Project details displayed in the right pane respect the user’s role and permissions.
* If a user does _When is it not have permission to view portfolios:
* Portfolio entries are hidden
* Portfolio-related filters are not shown
* Same applies for programs.
visible?_
**Translation considerations**
* All translations should be available from _Key terms and phrases in the mobile mode implementation. key languages_
**Out of scope**
* Portrait-optimized tablet layout
* Editing project details from <br>
_Set the_ **To be informed/consulted teams** _field to include all teams necessary to be informed of the tablet Projects view
* Advanced portfolio analytics or visualizations changes._
**I want** to browse, filter, and inspect projects, programs and portfolios using a split-view layout
**so that** I can quickly access project information and navigate between projects without losing context or performing unnecessary navigation steps.
**Acceptance criteria**
* When the app is displayed on a tablet in landscape orientation:
* The Projects module uses a **master–detail layout**. The right pane of the layout is collapsable depending on the user selection on the screen.
* The left pane displays:
* The entry point for programs and portfolios
* A list of projects
* Filters (e.g. All, Favorites)
* Search input
* The right pane displays:
* The selected project or portfolio details with all its navigational options
* Overview
* Work packages
* In this project
* The pane has actions on the top right corner that allow the user to:
* Favorite
* Share
* Open in full screen
* Close right pane
* Selecting a project or portfolio in the left pane updates the right pane without navigating away from the Projects module.
* Portfolios and programs are displayed as:
* A list in the left pane
* A detail view in the right pane showing the portfolio or program overview, its work packages and and contained projects
* When a project, program or portfolio is opened on full screen, it opens in a full screen modal without navigation bar and with a closable header. The layout of the project full-screen view has a two column layout:
* The overview details in a fix position on the left side with all its project attribute groups in collapsible groups.
* A box for the two available tabs:
* Work packages with a list of work packages inside
* In this project with a list of sub-projects inside
* The layout does not require horizontal scrolling.
**Technical notes**
* The tablet Projects layout is activated at the tablet **breakpoint: 900px**.
* On smaller screens or portrait orientation, the phone Projects layout is used instead.
* The master list and detail view are rendered as independent panes.
* Pane state (selected project or portfolio) persists while the user remains in the Projects module.
* Data for the selected project or portfolio is lazy-loaded to improve performance.
* Filters and search are applied only to the left pane list.
**Permissions and visibility considerations**
* Only projects, programs and portfolios the user has permission to view are shown.
* Project details displayed in the right pane respect the user’s role and permissions.
* If a user does
* Portfolio entries are hidden
* Portfolio-related filters are not shown
* Same applies for programs.
* All translations should be available from
**Out of scope**
* Portrait-optimized tablet layout
* Editing project details from
_Set the_ **To be informed/consulted teams** _field to include all teams necessary to be informed of
* Advanced portfolio analytics or visualizations