Content
View differences
Updated by Niels Lindenthal about 1 year ago
**As** a project member
**I want to** be able to edit and adjust dates of work packages on the go on my mobile device
**so that** I can make important changes on mobile devices easily without needing to resort to a larger device
#### **Context**
* We are currently upgrading the date picker:
* for automatic scheduling (##42388), which involves
* Primersing it (##59845)
* We can use this opportunity to optimise and improve mobile rendering and interaction
#### **Acceptance criteria**
On mobile devices:
1. Display the date picker in a full screen modal
2. Convert date input fields into native HTML date input fields (`<input type="date">`)
* What we lose is the ability to block the selection of non-working days on a calendar when "Working days only" is enabled. Instead we need to handle this using in-line validation and error messages, supported by the native date picker
* Reference: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
3. Remove the flatpicker calendar below the input fields
* Rationale: Because of limited avialable space on mobile, it is difficult to display all the input fields _and_ the full picker mini-calendar; this arrangement makes it possible on larger displays to immediately show the effect of input changes, but happen if the entire calendar and the input fields are not visible on mobile screens.
4. \[~~open\] Display start date, finish date and duration in one line~~
* _PS: If we remove the Flatpickr mini-calendar, does this still make sense? Given that mobile devices have a range of sizes (and widths), and we offer a number of different date formats, I think one-per-line works better._
* _HD: There was the suggestion to only put start date and due date next to each other, and duration below, see_ [_here_](https://github.com/opf/openproject/pull/17349#issuecomment-2616543592)_._
#### **Visual reference**
(For general reference only. Please consult the [Figma file](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=175-3641) for the latest design)
**Mobile view:**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:199px;" style="width:320px;" src="/api/v3/attachments/294014/content">**
**Mobile view, with native date picker open:**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:205px;" style="width:320px;" src="/api/v3/attachments/294016/content">**
#### **Technical notes**
* Primer has limitations on how grouped inputs resize
* In order to put input next to each other, Primer offers the so called form\_groups. Each element in the group is placed horizontally. We do not have the option to say that on desktop three elements should be in the group, and on mobile only two. The only way around that, is to not use the Primer form helpers at all. That means however, that we'd need to take care of the whole form rendering and alignment on ourselves again.
* Native date pickers are also out of the box more accessible for screen readers, whereas the Flatpickr mini-calendar is far from it
#### **Permissions and Visibility considerations**
* No specific mobile-specific permissions/visibility settings
#### **Out of scope**
* Single date mode will be dealt with separately here:
* ##47519
**I want to** be able to edit and adjust dates of work packages on the go on my mobile device
**so that** I can make important changes on mobile devices easily without needing to resort to a larger device
#### **Context**
* We are currently upgrading the date picker:
* for automatic scheduling (##42388), which involves
* Primersing it (##59845)
* We can use this opportunity to optimise and improve mobile rendering and interaction
#### **Acceptance criteria**
On mobile devices:
1. Display the date picker in a full screen modal
2. Convert date input fields into native HTML date input fields (`<input type="date">`)
* What we lose is the ability to block the selection of non-working days on a calendar when "Working days only" is enabled. Instead we need to handle this using in-line validation and error messages, supported by the native date picker
* Reference: [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
3. Remove the flatpicker calendar below the input fields
* Rationale: Because of limited avialable space on mobile, it is difficult to display all the input fields _and_ the full picker mini-calendar; this arrangement makes it possible on larger displays to immediately show the effect of input changes, but happen if the entire calendar and the input fields are not visible on mobile screens.
4. \[~~open\] Display start date, finish date and duration in one line~~
* _PS: If we remove the Flatpickr mini-calendar, does this still make sense? Given that mobile devices have a range of sizes (and widths), and we offer a number of different date formats, I think one-per-line works better._
* _HD: There was the suggestion to only put start date and due date next to each other, and duration below, see_ [_here_](https://github.com/opf/openproject/pull/17349#issuecomment-2616543592)_._
#### **Visual reference**
(For general reference only. Please consult the [Figma file](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=175-3641) for the latest design)
**Mobile view:**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:199px;"
**Mobile view, with native date picker open:**
**<img class="image_resized op-uc-image op-uc-image_inline" style="width:205px;"
#### **Technical notes**
* Primer has limitations on how grouped inputs resize
* In order to put input next to each other, Primer offers the so called form\_groups. Each element in the group is placed horizontally. We do not have the option to say that on desktop three elements should be in the group, and on mobile only two. The only way around that, is to not use the Primer form helpers at all. That means however, that we'd need to take care of the whole form rendering and alignment on ourselves again.
* Native date pickers are also out of the box more accessible for screen readers, whereas the Flatpickr mini-calendar is far from it
#### **Permissions and Visibility considerations**
* No specific mobile-specific permissions/visibility settings
#### **Out of scope**
* Single date mode will be dealt with separately here:
* ##47519